8e8a4d784c
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;
}
```
52 lines
998 B
SCSS
52 lines
998 B
SCSS
.ballot-list li {
|
|
$side-padding: $line-height / 2;
|
|
$close-icon-size: rem-calc(20);
|
|
$close-icon-margin: rem-calc(6);
|
|
|
|
background: #f1f1f1;
|
|
border-radius: rem-calc(12);
|
|
line-height: $line-height;
|
|
margin-bottom: $line-height / 4;
|
|
padding: $line-height $side-padding;
|
|
position: relative;
|
|
|
|
a {
|
|
color: inherit;
|
|
}
|
|
|
|
.ballot-list-title {
|
|
display: block;
|
|
padding-right: calc(#{$close-icon-size} + #{$close-icon-margin} - #{$side-padding});
|
|
}
|
|
|
|
.ballot-list-price {
|
|
@include brand-text;
|
|
display: block;
|
|
font-weight: bold;
|
|
margin-top: $line-height / 2;
|
|
text-align: right;
|
|
}
|
|
|
|
.remove-budget-investment {
|
|
@include has-fa-icon(times, solid);
|
|
font-size: $close-icon-size;
|
|
position: absolute;
|
|
right: $close-icon-margin;
|
|
top: $close-icon-margin;
|
|
|
|
&::before {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
@include brand-background;
|
|
|
|
span {
|
|
color: inherit;
|
|
outline: 0;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|