105e7203cf
Structure icons have fill set to currentColor hardcored in their markup. This mean setting fill to a color in CSS does nothing, but setting color now does.
49 lines
836 B
SCSS
49 lines
836 B
SCSS
$icon-dimensions: 1.25rem;
|
|
$icon-dimensions-small: 1rem;
|
|
$icon-dimensions-medium: 1.5rem;
|
|
$icon-dimensions-large: 2rem;
|
|
|
|
.icon {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
vertical-align: text-top;
|
|
height: $icon-dimensions;
|
|
width: $icon-dimensions;
|
|
fill: $text;
|
|
|
|
&.is-text {
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
}
|
|
|
|
&.is-small {
|
|
height: $icon-dimensions-small;
|
|
width: $icon-dimensions-small;
|
|
}
|
|
|
|
&.is-medium {
|
|
height: $icon-dimensions-medium;
|
|
width: $icon-dimensions-medium;
|
|
}
|
|
|
|
&.is-large {
|
|
height: $icon-dimensions-large;
|
|
width: $icon-dimensions-large;
|
|
}
|
|
|
|
&.is-faded {
|
|
fill: $grey-light;
|
|
color: $grey-light;
|
|
}
|
|
|
|
@each $name, $pair in $colors {
|
|
$color: nth($pair, 1);
|
|
|
|
&.is-#{$name} {
|
|
fill: $color;
|
|
color: $color;
|
|
}
|
|
}
|
|
}
|