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;
$link: $brand !default;
$link-hover: darken($link, 20%) !default;
$debates: $brand !default;
$like: #7bd2a8 !default;
@@ -148,6 +145,9 @@ $sdg-colors: (
// 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-item-font-size: $base-font-size !default;

View File

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

View File

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

View File

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