From 3272099ac781b3f2fb3512a526ebcac1dd82ad9e Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 24 Mar 2020 15:30:22 +0800 Subject: [PATCH] Make color styles inherit --- .../block-library/src/navigation/style.scss | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index e141520b4c7ac..06d3a5406569b 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -146,6 +146,10 @@ $navigation-sub-menu-width: $grid-unit-10 * 25; align-items: center; width: max-content; padding: $grid-unit-10 * 0.75 $grid-unit-10 * 2; + + // Inherit colors from the parent nav block. Overrides some + // default styling on `` elements that sets the color to blue. + color: inherit; } // Submenu links only @@ -196,13 +200,17 @@ $navigation-sub-menu-width: $grid-unit-10 * 25; .wp-block-navigation { // Default / Light styles - .wp-block-navigation-link, - &.is-style-light .wp-block-navigation-link { + &:not(.has-text-color) .wp-block-navigation-link, + &:not(.has-text-color).is-style-light .wp-block-navigation-link { // No text color - &:not(.has-text-color) > .wp-block-navigation__container { + > .wp-block-navigation__container { color: $light-style-sub-menu-text-color; } + } + // Default / Light styles + &:not(.has-background) .wp-block-navigation-link, + &:not(.has-background).is-style-light .wp-block-navigation-link { // No background color &:not(.has-background) > .wp-block-navigation__container { background-color: $light-style-sub-menu-background-color; @@ -210,14 +218,16 @@ $navigation-sub-menu-width: $grid-unit-10 * 25; } // Dark styles. - &.is-style-dark .wp-block-navigation-link { + &:not(.has-text-color).is-style-dark .wp-block-navigation-link { // No text color - &:not(.has-text-color) > .wp-block-navigation__container { + > .wp-block-navigation__container { color: $dark-style-sub-menu-text-color; } + } + &:not(.has-background).is-style-dark .wp-block-navigation-link { // No background color - &:not(.has-background) > .wp-block-navigation__container { + > .wp-block-navigation__container { background-color: $dark-style-sub-menu-background-color; } }