Changeset 44368 for trunk

Timestamp:

12/28/2018 06:11:45 PM (6 years ago)

Author:

laurelfulford

Message:

Twenty Nineteen: Remove transparency from submenus.

On pages and posts with featured images, the top level menu items have a slight transparency on hover, which was being inherited by their submenus. This update removes that inheritance, improving readability and consistency in the menu's appearance.

Props kjellr.
Fixes #45689.

Location:

trunk/src/wp-content/themes/twentynineteen

Files:

• sass/navigation/_menu-main-navigation.scss (modified) (1 diff)
• sass/site/header/_site-featured-image.scss (modified) (1 diff)
• style-rtl.css (modified) (2 diffs)
• style.css (modified) (2 diffs)

trunk/src/wp-content/themes/twentynineteen/sass/navigation/_menu-main-navigation.scss

@@ -170 +170 @@
                 display: block;
                 line-height: $font__line-height-heading;
+                text-shadow: none;
                 padding: calc( .5 * #{$size__spacing-unit} ) calc( 24px + #{$size__spacing-unit} ) calc( .5 * #{$size__spacing-unit} ) $size__spacing-unit;
                 white-space: nowrap;

trunk/src/wp-content/themes/twentynineteen/sass/site/header/_site-featured-image.scss

@@ -44 +44 @@
             color: $color__background-body;
         }
+    }
+
+    .main-navigation .sub-menu a {
+        opacity: inherit;
     }
 

trunk/src/wp-content/themes/twentynineteen/style-rtl.css

@@ -1191 +1191 @@
   display: block;
   line-height: 1.2;
+  text-shadow: none;
   padding: calc( .5 * 1rem) 1rem calc( .5 * 1rem) calc( 24px + 1rem);
   white-space: nowrap;
@@ -2156 +2157 @@
 .site-header.featured-image .site-featured-image a:focus + svg {
   color: #fff;
+}
+
+.site-header.featured-image .main-navigation .sub-menu a {
+  opacity: inherit;
 }
 

trunk/src/wp-content/themes/twentynineteen/style.css

@@ -1191 +1191 @@
   display: block;
   line-height: 1.2;
+  text-shadow: none;
   padding: calc( .5 * 1rem) calc( 24px + 1rem) calc( .5 * 1rem) 1rem;
   white-space: nowrap;
@@ -2162 +2163 @@
 .site-header.featured-image .site-featured-image a:focus + svg {
   color: #fff;
+}
+
+.site-header.featured-image .main-navigation .sub-menu a {
+  opacity: inherit;
 }