Lightweight CSS Framework for Building Apps and Websites
https://crispy-css.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
1.7 KiB
100 lines
1.7 KiB
/**
|
|
* icon
|
|
*
|
|
* use svg as icon
|
|
*
|
|
* <svg class="icon" viewBox="0 0 100 100">
|
|
* <use src="#"></use>
|
|
* </svg>
|
|
*
|
|
*
|
|
* @author Björn Hase
|
|
*
|
|
*/
|
|
|
|
|
|
$crispy__icon__vertical-align: middle !default;
|
|
$crispy__icon__margin: 0 2px !default;
|
|
|
|
$crispy__icon__sizes: (
|
|
'default': 18px,
|
|
'small': 14px,
|
|
'large': 28px
|
|
) !default;
|
|
|
|
$crispy__icon__colors: (
|
|
'default': black,
|
|
'secondary': grey,
|
|
) !default;
|
|
|
|
@mixin crispy__icon() {
|
|
.icon {
|
|
display: inline-block;
|
|
position: relative;
|
|
vertical-align: $crispy__icon__vertical-align;
|
|
margin: $crispy__icon__margin;
|
|
|
|
@include crispy__icon-colors($crispy__icon__colors);
|
|
@include crispy__icon-sizes($crispy__icon__sizes);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* add modificators for icons as fill from map
|
|
*
|
|
*
|
|
* @param {map} $colors
|
|
*
|
|
*/
|
|
@mixin crispy__icon-colors($colors) {
|
|
@each $name, $color in $colors {
|
|
@if ($name == 'default') {
|
|
@include crispy__icon-color($color);
|
|
} @else {
|
|
&--#{$name} {
|
|
@include crispy__icon-color($color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* add color as fill
|
|
*
|
|
*
|
|
* @param {color} $color
|
|
*
|
|
*/
|
|
@mixin crispy__icon-color($color) {
|
|
fill: $color;
|
|
}
|
|
|
|
/**
|
|
* adding sizes for icons from map
|
|
*
|
|
*
|
|
* @param {map} $sizes
|
|
*
|
|
*/
|
|
@mixin crispy__icon-sizes($sizes) {
|
|
@each $name, $size in $sizes {
|
|
@if ($name == 'default') {
|
|
@include crispy__icon-size($size);
|
|
} @else {
|
|
&--#{$name} {
|
|
@include crispy__icon-size($size);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* add size for icon as width and height
|
|
*
|
|
*
|
|
* @param {px} $size
|
|
*
|
|
*/
|
|
@mixin crispy__icon-size($size) {
|
|
width: $size;
|
|
}
|