mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
80 lines
1.7 KiB
SCSS
80 lines
1.7 KiB
SCSS
$icon-dimensions: 1.5rem !default;
|
|
$icon-dimensions-small: 1rem !default;
|
|
$icon-dimensions-medium: 2rem !default;
|
|
$icon-dimensions-large: 3rem !default;
|
|
$icon-text-spacing: 0.25em !default;
|
|
|
|
:root {
|
|
@include register-vars(
|
|
(
|
|
icon-dimensions: #{$icon-dimensions},
|
|
icon-dimensions-small: #{$icon-dimensions-small},
|
|
icon-dimensions-medium: #{$icon-dimensions-medium},
|
|
icon-dimensions-large: #{$icon-dimensions-large},
|
|
icon-text-spacing: #{$icon-text-spacing},
|
|
)
|
|
);
|
|
}
|
|
|
|
.#{$class-prefix}icon {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
height: getVar("icon-dimensions");
|
|
width: getVar("icon-dimensions");
|
|
|
|
// Sizes
|
|
&.is-small {
|
|
height: getVar("icon-dimensions-small");
|
|
width: getVar("icon-dimensions-small");
|
|
}
|
|
|
|
&.is-medium {
|
|
height: getVar("icon-dimensions-medium");
|
|
width: getVar("icon-dimensions-medium");
|
|
}
|
|
|
|
&.is-large {
|
|
height: getVar("icon-dimensions-large");
|
|
width: getVar("icon-dimensions-large");
|
|
}
|
|
}
|
|
|
|
.#{$class-prefix}icon-text {
|
|
align-items: flex-start;
|
|
color: inherit;
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
line-height: getVar("icon-dimensions");
|
|
vertical-align: top;
|
|
|
|
.#{$class-prefix}icon {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
|
|
&:not(:last-child) {
|
|
@include ltr {
|
|
margin-right: getVar("icon-text-spacing");
|
|
}
|
|
|
|
@include rtl {
|
|
margin-left: getVar("icon-text-spacing");
|
|
}
|
|
}
|
|
|
|
&:not(:first-child) {
|
|
@include ltr {
|
|
margin-left: getVar("icon-text-spacing");
|
|
}
|
|
|
|
@include rtl {
|
|
margin-right: getVar("icon-text-spacing");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
div.#{$class-prefix}icon-text {
|
|
display: flex;
|
|
}
|