2017-10-03 17:54:22 +00:00
|
|
|
$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;
|
2017-11-15 20:44:32 +00:00
|
|
|
fill: $text;
|
2017-10-03 17:54:22 +00:00
|
|
|
|
2017-11-15 20:44:32 +00:00
|
|
|
&.is-small,
|
|
|
|
|
&.is-text {
|
2017-10-03 17:54:22 +00:00
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2018-05-02 18:14:13 +00:00
|
|
|
&.is-faded {
|
|
|
|
|
fill: $grey-light;
|
|
|
|
|
}
|
|
|
|
|
|
2017-10-03 17:54:22 +00:00
|
|
|
@each $name, $pair in $colors {
|
|
|
|
|
$color: nth($pair, 1);
|
|
|
|
|
|
|
|
|
|
&.is-#{$name} {
|
|
|
|
|
fill: $color;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
