38 lines
706 B
SCSS
38 lines
706 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: lighten($text, 25%);
|
||
|
|
|
||
|
|
&.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
@each $name, $pair in $colors {
|
||
|
|
$color: nth($pair, 1);
|
||
|
|
|
||
|
|
&.is-#{$name} {
|
||
|
|
fill: $color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|