From a12ef792f56578cd11bd483a24379b379e0ea68d Mon Sep 17 00:00:00 2001 From: Jacopo Tomasone Date: Mon, 27 Jul 2020 17:02:00 +0100 Subject: [PATCH] Seedlet: Allow all blocks with a link color to override the text color value set by custom background colors (#2275) * Try to increase link color consistency * Remove commented code * Rebuild after rebase --- seedlet/assets/css/ie.css | 44 +++++++++++++++---- seedlet/assets/css/style-editor.css | 36 ++++++++------- seedlet/assets/sass/base/_editor.scss | 17 ++++--- seedlet/assets/sass/base/_reset.scss | 15 ++++--- seedlet/assets/sass/blocks/cover/_editor.scss | 3 ++ seedlet/assets/sass/blocks/cover/_style.scss | 3 ++ .../sass/blocks/media-text/_editor.scss | 6 --- .../assets/sass/blocks/media-text/_style.scss | 9 ---- .../assets/sass/blocks/paragraph/_editor.scss | 4 -- .../assets/sass/blocks/paragraph/_style.scss | 5 +++ seedlet/style-rtl.css | 26 +++++++---- seedlet/style.css | 26 +++++++---- 12 files changed, 122 insertions(+), 72 deletions(-) diff --git a/seedlet/assets/css/ie.css b/seedlet/assets/css/ie.css index d20eb9586..57279acdc 100644 --- a/seedlet/assets/css/ie.css +++ b/seedlet/assets/css/ie.css @@ -1520,10 +1520,6 @@ a:focus { } a:active { - color: undefined; -} - -p.has-background.has-link-color:not(.has-background-background-color) a { color: #000000; } @@ -1531,6 +1527,14 @@ p.has-background.has-link-color:not(.has-background-background-color) a { border-bottom: 1px solid #000000; } +.has-background:not(.has-background-background-color) .has-link-color a { + color: #000000; +} + +.has-background:not(.has-background-background-color).has-link-color a { + color: #000000; +} + *:focus { outline-width: 1px; outline-style: dotted; @@ -2196,6 +2200,30 @@ object { color: currentColor; } +.wp-block-cover .wp-block-cover__inner-container .has-link-color a { + color: #000000; +} + +.wp-block-cover .wp-block-cover-image-text .has-link-color a { + color: #000000; +} + +.wp-block-cover .wp-block-cover-text .has-link-color a { + color: #000000; +} + +.wp-block-cover-image .wp-block-cover__inner-container .has-link-color a { + color: #000000; +} + +.wp-block-cover-image .wp-block-cover-image-text .has-link-color a { + color: #000000; +} + +.wp-block-cover-image .wp-block-cover-text .has-link-color a { + color: #000000; +} + .wp-block-cover:not([class*='background-color']) .wp-block-cover__inner-container { color: #FAFBF6; } @@ -2909,10 +2937,6 @@ dd { margin-bottom: 0; } -.wp-block-media-text[class*="background-color"]:not(.has-background-background-color) .wp-block-media-text__content a, .wp-block-media-text[style*="background-color"] .wp-block-media-text__content a { - color: currentColor; -} - @media only screen and (min-width: 482px) { .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { padding-top: 30px; @@ -2997,6 +3021,10 @@ p.has-background { padding: 20px; } +p.has-text-color a { + color: #000000; +} + .a8c-posts-list__listing { list-style: none; margin: 0; diff --git a/seedlet/assets/css/style-editor.css b/seedlet/assets/css/style-editor.css index e9ffdc59a..20c1a8e8b 100644 --- a/seedlet/assets/css/style-editor.css +++ b/seedlet/assets/css/style-editor.css @@ -303,28 +303,29 @@ body { font-size: var(--global--font-size-root); } -a { +.wp-block a { border-bottom: 1px solid var(--global--color-secondary); color: var(--wp--style--color--link, var(--global--color-primary)); text-decoration: none; } -a:hover, a:focus { +.wp-block a:hover, .wp-block a:focus { color: var(--global--color-primary-hover); } -a:active { +.wp-block a:active { color: var(--wp--style--color--link, var(--global--color-primary)); } -p.has-background.has-link-color:not(.has-background-background-color) a { - color: var(--wp--style--color--link, var(--global--color-primary)); -} - -.has-link-color a { +.has-link-color .wp-block a { border-bottom: 1px solid var(--wp--style--color--link); } +.has-background:not(.has-background-background-color) .has-link-color a, +.has-background:not(.has-background-background-color).has-link-color a { + color: var(--wp--style--color--link, var(--global--color-primary)); +} + button, a { cursor: pointer; @@ -484,6 +485,17 @@ div[data-type="core/button"] { color: currentColor; } +.wp-block-cover .wp-block-cover__inner-container .has-link-color a, +.wp-block-cover .wp-block-cover-image-text .has-link-color a, +.wp-block-cover .wp-block-cover-text .has-link-color a, +.wp-block-cover .block-editor-block-list__block .has-link-color a, +.wp-block-cover-image .wp-block-cover__inner-container .has-link-color a, +.wp-block-cover-image .wp-block-cover-image-text .has-link-color a, +.wp-block-cover-image .wp-block-cover-text .has-link-color a, +.wp-block-cover-image .block-editor-block-list__block .has-link-color a { + color: var(--wp--style--color--link, var(--global--color-primary)); +} + .wp-block-cover:not([class*='background-color']) .wp-block-cover__inner-container, .wp-block-cover:not([class*='background-color']) .wp-block-cover-image-text, .wp-block-cover:not([class*='background-color']) .wp-block-cover-text, @@ -774,10 +786,6 @@ dt { padding-left: var(--global--spacing-horizontal); } -.wp-block-media-text[style*="background-color"]:not(.has-background-background-color) a { - color: currentColor; -} - .wp-block-navigation .wp-block-navigation__container { background: var(--global--color-background); padding: 0; @@ -813,10 +821,6 @@ p.has-background { padding: var(--global--spacing-unit); } -p.has-background:not(.has-background-background-color) a { - color: currentColor; -} - .a8c-posts-list { padding-left: 0; } diff --git a/seedlet/assets/sass/base/_editor.scss b/seedlet/assets/sass/base/_editor.scss index df4fbdedb..5208ea581 100644 --- a/seedlet/assets/sass/base/_editor.scss +++ b/seedlet/assets/sass/base/_editor.scss @@ -17,7 +17,7 @@ body { } // Links styles -a { +.wp-block a { border-bottom: 1px solid var(--global--color-secondary); color: var( --wp--style--color--link, var(--global--color-primary) ); text-decoration: none; @@ -31,18 +31,21 @@ a { color: var( --wp--style--color--link, var(--global--color-primary) ); } - // Enforce the custom link color even if a custom background color has been set. - // The extra specificity here is required to override the background color styles. - p.has-background.has-link-color:not(.has-background-background-color) & { - color: var( --wp--style--color--link, var(--global--color-primary) ); - } - // If a custom link color has been assigned, // switch the color of the bottom border too. .has-link-color & { border-bottom: 1px solid var(--wp--style--color--link); } } +// Enforce the custom link color even if a custom background color has been set. +// The extra specificity here is required to override the background color styles. +.has-background:not(.has-background-background-color) { + // Target both current level and nested block. + .has-link-color a, + &.has-link-color a { + color: var( --wp--style--color--link, var(--global--color-primary) ); + } +} button, a { diff --git a/seedlet/assets/sass/base/_reset.scss b/seedlet/assets/sass/base/_reset.scss index 3087842db..551da0ae3 100644 --- a/seedlet/assets/sass/base/_reset.scss +++ b/seedlet/assets/sass/base/_reset.scss @@ -90,12 +90,6 @@ a { } &:active { - color: var(--wp--style--color--link); - } - - // Enforce the custom link color even if a custom background color has been set. - // The extra specificity here is required to override the background color styles. - p.has-background.has-link-color:not(.has-background-background-color) & { color: var( --wp--style--color--link, var(--global--color-primary) ); } @@ -105,6 +99,15 @@ a { border-bottom: 1px solid var( --wp--style--color--link, var(--global--color-primary) ); } } +// Enforce the custom link color even if a custom background color has been set. +// The extra specificity here is required to override the background color styles. +.has-background:not(.has-background-background-color) { + // Target both current level and nested block. + .has-link-color a, + &.has-link-color a { + color: var( --wp--style--color--link, var(--global--color-primary) ); + } +} // Focus styles *:focus { diff --git a/seedlet/assets/sass/blocks/cover/_editor.scss b/seedlet/assets/sass/blocks/cover/_editor.scss index 833e6c719..3f8aab4ee 100644 --- a/seedlet/assets/sass/blocks/cover/_editor.scss +++ b/seedlet/assets/sass/blocks/cover/_editor.scss @@ -15,6 +15,9 @@ a { color: currentColor; } + .has-link-color a { + color: var( --wp--style--color--link, var(--global--color-primary) ); + } } // Default & custom background-color diff --git a/seedlet/assets/sass/blocks/cover/_style.scss b/seedlet/assets/sass/blocks/cover/_style.scss index a0d97dbab..aea2ba257 100644 --- a/seedlet/assets/sass/blocks/cover/_style.scss +++ b/seedlet/assets/sass/blocks/cover/_style.scss @@ -16,6 +16,9 @@ a { color: currentColor; } + .has-link-color a { + color: var( --wp--style--color--link, var(--global--color-primary) ); + } } /* default & custom background-color */ diff --git a/seedlet/assets/sass/blocks/media-text/_editor.scss b/seedlet/assets/sass/blocks/media-text/_editor.scss index bf97cbf79..126a9093f 100644 --- a/seedlet/assets/sass/blocks/media-text/_editor.scss +++ b/seedlet/assets/sass/blocks/media-text/_editor.scss @@ -3,10 +3,4 @@ padding-right: var(--global--spacing-horizontal); padding-left: var(--global--spacing-horizontal); } - - &[style*="background-color"]:not(.has-background-background-color) { - a { - color: currentColor; - } - } } diff --git a/seedlet/assets/sass/blocks/media-text/_style.scss b/seedlet/assets/sass/blocks/media-text/_style.scss index 409159fb9..367cdaf4f 100644 --- a/seedlet/assets/sass/blocks/media-text/_style.scss +++ b/seedlet/assets/sass/blocks/media-text/_style.scss @@ -26,15 +26,6 @@ } } - &[class*="background-color"]:not(.has-background-background-color), - &[style*="background-color"] { - .wp-block-media-text__content { - a { - color: currentColor; - } - } - } - /** * Block Options */ diff --git a/seedlet/assets/sass/blocks/paragraph/_editor.scss b/seedlet/assets/sass/blocks/paragraph/_editor.scss index 4478d38bc..3e82235d2 100644 --- a/seedlet/assets/sass/blocks/paragraph/_editor.scss +++ b/seedlet/assets/sass/blocks/paragraph/_editor.scss @@ -3,9 +3,5 @@ p { &.has-background { padding: var(--global--spacing-unit); - - &:not(.has-background-background-color) a { - color: currentColor; - } } } diff --git a/seedlet/assets/sass/blocks/paragraph/_style.scss b/seedlet/assets/sass/blocks/paragraph/_style.scss index 98819ae33..6583f217f 100644 --- a/seedlet/assets/sass/blocks/paragraph/_style.scss +++ b/seedlet/assets/sass/blocks/paragraph/_style.scss @@ -6,4 +6,9 @@ p { &.has-background { padding: var(--global--spacing-unit); } + + // Override `color: inherit` from Core styles. + &.has-text-color a { + color: var( --wp--style--color--link, var(--global--color-primary) ); + } } diff --git a/seedlet/style-rtl.css b/seedlet/style-rtl.css index c7b361b6c..fd42132a1 100644 --- a/seedlet/style-rtl.css +++ b/seedlet/style-rtl.css @@ -983,10 +983,6 @@ a:hover, a:focus { } a:active { - color: var(--wp--style--color--link); -} - -p.has-background.has-link-color:not(.has-background-background-color) a { color: var(--wp--style--color--link, var(--global--color-primary)); } @@ -994,6 +990,11 @@ p.has-background.has-link-color:not(.has-background-background-color) a { border-bottom: 1px solid var(--wp--style--color--link, var(--global--color-primary)); } +.has-background:not(.has-background-background-color) .has-link-color a, +.has-background:not(.has-background-background-color).has-link-color a { + color: var(--wp--style--color--link, var(--global--color-primary)); +} + *:focus { outline-width: 1px; outline-style: dotted; @@ -1391,6 +1392,15 @@ object { color: currentColor; } +.wp-block-cover .wp-block-cover__inner-container .has-link-color a, +.wp-block-cover .wp-block-cover-image-text .has-link-color a, +.wp-block-cover .wp-block-cover-text .has-link-color a, +.wp-block-cover-image .wp-block-cover__inner-container .has-link-color a, +.wp-block-cover-image .wp-block-cover-image-text .has-link-color a, +.wp-block-cover-image .wp-block-cover-text .has-link-color a { + color: var(--wp--style--color--link, var(--global--color-primary)); +} + .wp-block-cover:not([class*='background-color']) .wp-block-cover__inner-container, .wp-block-cover:not([class*='background-color']) .wp-block-cover-image-text, .wp-block-cover:not([class*='background-color']) .wp-block-cover-text, @@ -1883,10 +1893,6 @@ dd { margin-bottom: 0; } -.wp-block-media-text[class*="background-color"]:not(.has-background-background-color) .wp-block-media-text__content a, .wp-block-media-text[style*="background-color"] .wp-block-media-text__content a { - color: currentColor; -} - @media only screen and (min-width: 482px) { .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { padding-top: var(--global--spacing-vertical); @@ -1967,6 +1973,10 @@ p.has-background { padding: var(--global--spacing-unit); } +p.has-text-color a { + color: var(--wp--style--color--link, var(--global--color-primary)); +} + .a8c-posts-list__listing { list-style: none; margin: 0; diff --git a/seedlet/style.css b/seedlet/style.css index 0a4cc89b8..2a7124aff 100644 --- a/seedlet/style.css +++ b/seedlet/style.css @@ -991,10 +991,6 @@ a:hover, a:focus { } a:active { - color: var(--wp--style--color--link); -} - -p.has-background.has-link-color:not(.has-background-background-color) a { color: var(--wp--style--color--link, var(--global--color-primary)); } @@ -1002,6 +998,11 @@ p.has-background.has-link-color:not(.has-background-background-color) a { border-bottom: 1px solid var(--wp--style--color--link, var(--global--color-primary)); } +.has-background:not(.has-background-background-color) .has-link-color a, +.has-background:not(.has-background-background-color).has-link-color a { + color: var(--wp--style--color--link, var(--global--color-primary)); +} + *:focus { outline-width: 1px; outline-style: dotted; @@ -1399,6 +1400,15 @@ object { color: currentColor; } +.wp-block-cover .wp-block-cover__inner-container .has-link-color a, +.wp-block-cover .wp-block-cover-image-text .has-link-color a, +.wp-block-cover .wp-block-cover-text .has-link-color a, +.wp-block-cover-image .wp-block-cover__inner-container .has-link-color a, +.wp-block-cover-image .wp-block-cover-image-text .has-link-color a, +.wp-block-cover-image .wp-block-cover-text .has-link-color a { + color: var(--wp--style--color--link, var(--global--color-primary)); +} + .wp-block-cover:not([class*='background-color']) .wp-block-cover__inner-container, .wp-block-cover:not([class*='background-color']) .wp-block-cover-image-text, .wp-block-cover:not([class*='background-color']) .wp-block-cover-text, @@ -1891,10 +1901,6 @@ dd { margin-bottom: 0; } -.wp-block-media-text[class*="background-color"]:not(.has-background-background-color) .wp-block-media-text__content a, .wp-block-media-text[style*="background-color"] .wp-block-media-text__content a { - color: currentColor; -} - @media only screen and (min-width: 482px) { .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { padding-top: var(--global--spacing-vertical); @@ -1975,6 +1981,10 @@ p.has-background { padding: var(--global--spacing-unit); } +p.has-text-color a { + color: var(--wp--style--color--link, var(--global--color-primary)); +} + .a8c-posts-list__listing { list-style: none; margin: 0;