beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Seedlet: Allow all blocks with a link color to override the text color value set by custom background colors (#2275)

Browse source 
* Try to increase link color consistency

* Remove commented code

* Rebuild after rebase
This commit is contained in:
Jacopo Tomasone 2020-07-27 17:02:00 +01:00 committed by GitHub
parent 8139e0452d
commit a12ef792f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 122 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
seedlet/assets/css/ie.css
View file

@ -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;

36
seedlet/assets/css/style-editor.css
View file

@ -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;
}

17
seedlet/assets/sass/base/_editor.scss
View file

@ -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 {

15
seedlet/assets/sass/base/_reset.scss
View file

@ -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 {

3
seedlet/assets/sass/blocks/cover/_editor.scss
View file

@ -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

3
seedlet/assets/sass/blocks/cover/_style.scss
View file

@ -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 */

6
seedlet/assets/sass/blocks/media-text/_editor.scss
View file

@ -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;
}
}
}

9
seedlet/assets/sass/blocks/media-text/_style.scss
View file

@ -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
*/

4
seedlet/assets/sass/blocks/paragraph/_editor.scss
View file

@ -3,9 +3,5 @@ p {
&.has-background {
padding: var(--global--spacing-unit);
&:not(.has-background-background-color) a {
color: currentColor;
}
}
}

5
seedlet/assets/sass/blocks/paragraph/_style.scss
View file

@ -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) );
}
}

26
seedlet/style-rtl.css
View file

@ -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;

26
seedlet/style.css
View file

@ -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;