atst/styles/elements/_icons.scss
2018-08-03 09:09:07 -04:00

53 lines
732 B
SCSS

@mixin icon {
display: inline-flex;
> svg {
width: 100%;
height: 100%;
* {
transition: fill $hover-transition-time;
}
}
}
@mixin icon-size($size) {
$icon-size: $size * .1rem;
width: $icon-size;
height: auto;
margin: $icon-size / 4;
}
@mixin icon-color($color) {
> svg * {
fill: $color;
}
}
@mixin icon-style-default {
@include icon-color($color-black);
}
@mixin icon-style-active {
@include icon-color($color-primary);
}
@mixin icon-style-inverted {
> svg * {
fill: $color-white;
}
}
.icon {
@include icon;
@include icon-size(16);
@include icon-style-default;
&.icon--tiny {
@include icon-size(10);
}
&.icon--large {
@include icon-size(24);
}
}