Varia: Improve link/text colors in utility styles for less CSS output

This commit is contained in:
Allan Cole 2019-08-21 16:50:03 -04:00
parent bfbf21f69f
commit 62fc29a1f1
4 changed files with 48 additions and 102 deletions

View file

@ -2,9 +2,5 @@ p {
// inherits general font style set at <body>
&.has-background {
padding: #{map-deep-get($config-global, "spacing", "unit")} #{map-deep-get($config-global, "spacing", "unit")};
&:not(.has-background-background-color) a {
color: currentColor;
}
}
}

View file

@ -85,7 +85,12 @@
}
// Gutenberg text color options
.has-text-color {}
.has-text-color {
a:hover,
a:active {
text-decoration: none;
}
}
.has-primary-color[class] {
color: #{map-deep-get($config-global, "color", "primary", "default")} !important;
@ -120,70 +125,57 @@
}
// Gutenberg background-color options
.has-background {}
.has-background {
&:not(.has-background-background-color) a,
p, h1, h2, h3, h4, h5, h6, {
color: currentColor;
}
a:hover,
a:active {
text-decoration: none;
}
}
.has-primary-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "primary", "default")} !important;
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6, a {
color: currentColor;
}
}
.has-secondary-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "secondary", "default")} !important;
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6, a {
color: currentColor;
}
}
.has-foreground-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "foreground", "default")} !important;
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6, a {
color: currentColor;
}
}
.has-foreground-light-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "foreground", "light")} !important;
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6, a {
color: currentColor;
}
}
.has-foreground-dark-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important;
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6, a {
color: currentColor;
}
}
.has-background-light-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "background", "light")} !important;
color: #{map-deep-get($config-global, "color", "foreground", "default")};
p, h1, h2, h3, h4, h5, h6, a {
color: currentColor;
}
}
.has-background-dark-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "background", "dark")} !important;
color: #{map-deep-get($config-global, "color", "foreground", "default")};
p, h1, h2, h3, h4, h5, h6, a {
color: currentColor;
}
}
.has-background-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "background", "default")} !important;
color: #{map-deep-get($config-global, "color", "foreground", "default")};
p, h1, h2, h3, h4, h5, h6, a {
color: currentColor;
}
}
// Gutenberg Font-size options

View file

@ -1618,10 +1618,6 @@ p.has-background {
padding: 16px 16px;
}
p.has-background:not(.has-background-background-color) a {
color: currentColor;
}
.a8c-posts-list__listing {
list-style: none;
margin: 0;
@ -1976,6 +1972,11 @@ table th,
background-attachment: fixed;
}
.has-text-color a:hover,
.has-text-color a:active {
text-decoration: none;
}
.has-primary-color[class] {
color: blue !important;
}
@ -2008,78 +2009,56 @@ table th,
color: white !important;
}
.has-background:not(.has-background-background-color) a,
.has-background p, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6 {
color: currentColor;
}
.has-background a:hover,
.has-background a:active {
text-decoration: none;
}
.has-primary-background-color[class] {
background-color: blue !important;
color: white;
}
.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6, .has-primary-background-color[class] a {
color: currentColor;
}
.has-secondary-background-color[class] {
background-color: red !important;
color: white;
}
.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6, .has-secondary-background-color[class] a {
color: currentColor;
}
.has-foreground-background-color[class] {
background-color: #444444 !important;
color: white;
}
.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6, .has-foreground-background-color[class] a {
color: currentColor;
}
.has-foreground-light-background-color[class] {
background-color: #767676 !important;
color: white;
}
.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6, .has-foreground-light-background-color[class] a {
color: currentColor;
}
.has-foreground-dark-background-color[class] {
background-color: #111111 !important;
color: white;
}
.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6, .has-foreground-dark-background-color[class] a {
color: currentColor;
}
.has-background-light-background-color[class] {
background-color: #FAFAFA !important;
color: #444444;
}
.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6, .has-background-light-background-color[class] a {
color: currentColor;
}
.has-background-dark-background-color[class] {
background-color: #DDDDDD !important;
color: #444444;
}
.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6, .has-background-dark-background-color[class] a {
color: currentColor;
}
.has-background-background-color[class] {
background-color: white !important;
color: #444444;
}
.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6, .has-background-background-color[class] a {
color: currentColor;
}
.is-small-text,
.has-small-font-size {
font-size: 0.83333rem;

View file

@ -1618,10 +1618,6 @@ p.has-background {
padding: 16px 16px;
}
p.has-background:not(.has-background-background-color) a {
color: currentColor;
}
.a8c-posts-list__listing {
list-style: none;
margin: 0;
@ -1982,6 +1978,11 @@ table th,
background-attachment: fixed;
}
.has-text-color a:hover,
.has-text-color a:active {
text-decoration: none;
}
.has-primary-color[class] {
color: blue !important;
}
@ -2014,78 +2015,56 @@ table th,
color: white !important;
}
.has-background:not(.has-background-background-color) a,
.has-background p, .has-background h1, .has-background h2, .has-background h3, .has-background h4, .has-background h5, .has-background h6 {
color: currentColor;
}
.has-background a:hover,
.has-background a:active {
text-decoration: none;
}
.has-primary-background-color[class] {
background-color: blue !important;
color: white;
}
.has-primary-background-color[class] p, .has-primary-background-color[class] h1, .has-primary-background-color[class] h2, .has-primary-background-color[class] h3, .has-primary-background-color[class] h4, .has-primary-background-color[class] h5, .has-primary-background-color[class] h6, .has-primary-background-color[class] a {
color: currentColor;
}
.has-secondary-background-color[class] {
background-color: red !important;
color: white;
}
.has-secondary-background-color[class] p, .has-secondary-background-color[class] h1, .has-secondary-background-color[class] h2, .has-secondary-background-color[class] h3, .has-secondary-background-color[class] h4, .has-secondary-background-color[class] h5, .has-secondary-background-color[class] h6, .has-secondary-background-color[class] a {
color: currentColor;
}
.has-foreground-background-color[class] {
background-color: #444444 !important;
color: white;
}
.has-foreground-background-color[class] p, .has-foreground-background-color[class] h1, .has-foreground-background-color[class] h2, .has-foreground-background-color[class] h3, .has-foreground-background-color[class] h4, .has-foreground-background-color[class] h5, .has-foreground-background-color[class] h6, .has-foreground-background-color[class] a {
color: currentColor;
}
.has-foreground-light-background-color[class] {
background-color: #767676 !important;
color: white;
}
.has-foreground-light-background-color[class] p, .has-foreground-light-background-color[class] h1, .has-foreground-light-background-color[class] h2, .has-foreground-light-background-color[class] h3, .has-foreground-light-background-color[class] h4, .has-foreground-light-background-color[class] h5, .has-foreground-light-background-color[class] h6, .has-foreground-light-background-color[class] a {
color: currentColor;
}
.has-foreground-dark-background-color[class] {
background-color: #111111 !important;
color: white;
}
.has-foreground-dark-background-color[class] p, .has-foreground-dark-background-color[class] h1, .has-foreground-dark-background-color[class] h2, .has-foreground-dark-background-color[class] h3, .has-foreground-dark-background-color[class] h4, .has-foreground-dark-background-color[class] h5, .has-foreground-dark-background-color[class] h6, .has-foreground-dark-background-color[class] a {
color: currentColor;
}
.has-background-light-background-color[class] {
background-color: #FAFAFA !important;
color: #444444;
}
.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6, .has-background-light-background-color[class] a {
color: currentColor;
}
.has-background-dark-background-color[class] {
background-color: #DDDDDD !important;
color: #444444;
}
.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6, .has-background-dark-background-color[class] a {
color: currentColor;
}
.has-background-background-color[class] {
background-color: white !important;
color: #444444;
}
.has-background-background-color[class] p, .has-background-background-color[class] h1, .has-background-background-color[class] h2, .has-background-background-color[class] h3, .has-background-background-color[class] h4, .has-background-background-color[class] h5, .has-background-background-color[class] h6, .has-background-background-color[class] a {
color: currentColor;
}
.is-small-text,
.has-small-font-size {
font-size: 0.83333rem;