Use $anchor-color instead of $link

The variables `$anchor-color` and `$anchor-color-hover` are the ones
Foundation uses internally; by using them, we make sure every link will
use the colors we define.

Now we can simplify the default styles for the `<a>` tags, since by
default they already use these variables.
This commit is contained in:
Javi Martín
2022-10-09 22:11:33 +02:00
parent 7c740f1daa
commit ea3ae4d262
4 changed files with 9 additions and 16 deletions

View File

@@ -70,9 +70,6 @@ $text-light: #bfbfbf !default;
$border: #dee0e3 !default; $border: #dee0e3 !default;
$link: $brand !default;
$link-hover: darken($link, 20%) !default;
$debates: $brand !default; $debates: $brand !default;
$like: #7bd2a8 !default; $like: #7bd2a8 !default;
@@ -148,6 +145,9 @@ $sdg-colors: (
// 3. Foundation overrides depending on CONSUL variables // 3. Foundation overrides depending on CONSUL variables
// ----------------------------------------------------- // -----------------------------------------------------
$anchor-color: $brand !default;
$anchor-color-hover: darken($anchor-color, 20%) !default;
$tab-background-active: $white !default; $tab-background-active: $white !default;
$tab-item-font-size: $base-font-size !default; $tab-item-font-size: $base-font-size !default;

View File

@@ -95,17 +95,10 @@ p {
} }
a { a {
color: $link;
&:hover, &:hover,
&:active { &:active {
color: $link-hover;
text-decoration: underline; text-decoration: underline;
} }
&:focus {
color: $link-hover;
}
} }
a, a,
@@ -775,7 +768,7 @@ body > header,
width: auto; width: auto;
&:hover { &:hover {
color: $link; color: $anchor-color;
} }
&.is-active { &.is-active {
@@ -945,7 +938,7 @@ footer {
.categories a, .categories a,
.geozone a { .geozone a {
background: $highlight; background: $highlight;
color: $link; color: $anchor-color;
&:hover, &:hover,
&.is-active { &.is-active {

View File

@@ -31,12 +31,12 @@
} }
@mixin link { @mixin link {
color: $link; color: $anchor-color;
cursor: pointer; cursor: pointer;
&:hover, &:hover,
&:active { &:active {
color: $link-hover; color: $anchor-color-hover;
text-decoration: underline; text-decoration: underline;
} }
} }
@@ -45,7 +45,7 @@
color: inherit; color: inherit;
&:hover { &:hover {
color: $link; color: $anchor-color;
} }
} }

View File

@@ -1516,7 +1516,7 @@ $font-awesome-icons: (
&:hover, &:hover,
&:focus { &:focus {
color: $link-hover; color: $anchor-color-hover;
text-decoration: none; text-decoration: none;
} }