Varia: Improve link/text colors in utility styles for less CSS output
This commit is contained in:
parent
bfbf21f69f
commit
62fc29a1f1
4 changed files with 48 additions and 102 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue