Simplify using text color for links

Using `inherit` is IMHO more expressive since it means "use the color of
the parent element".

This is particularly useful for CONSUL installations using custom
styles. Consider the following code:

```
h2 {
  color: $white;

  a {
    color: $white;
  }
}
```

If we'd like to customize the way headings look, we'd have to override
two colors:

```
h2 {
  color: $red;

  a {
    color: $red;
  }
}
```

Consider the scenario where we use `inherit`:

```
h2 {
  color: $white;

  a {
    color: inherit;
  }
}
```

Now we only need to override one color to change the styles:

```
h2 {
  color: $red;
}
```
This commit is contained in:
Javi Martín
2021-05-15 21:26:39 +02:00
parent bc7005aeef
commit 8e8a4d784c
10 changed files with 35 additions and 36 deletions

View File

@@ -2,6 +2,7 @@
background: $sidebar;
background: linear-gradient(to bottom, #245b80 0%, #488fb5 100%);
border-right: 1px solid $border;
color: $white;
ul {
list-style-type: none;
@@ -22,7 +23,6 @@
}
[class^="icon-"] {
color: #fff;
display: inline-block;
font-size: rem-calc(20);
line-height: $line-height;
@@ -136,7 +136,7 @@
}
li a {
color: #fff;
color: inherit;
display: block;
line-height: $line-height * 2;
padding-left: $line-height / 4;
@@ -144,7 +144,7 @@
&:hover {
background: $sidebar-hover;
color: #fff;
color: inherit;
text-decoration: none;
}
}