bulma/sass/elements/icon.scss

80 lines
1.7 KiB
SCSS
Raw Normal View History

2022-11-23 17:44:02 +00:00
$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;
2022-12-06 10:46:03 +00:00
: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},
)
);
}
2022-11-23 22:53:56 +00:00
.#{$class-prefix}icon {
2022-11-23 17:44:02 +00:00
align-items: center;
display: inline-flex;
justify-content: center;
2022-12-06 10:46:03 +00:00
height: getVar("icon-dimensions");
width: getVar("icon-dimensions");
2022-11-23 17:44:02 +00:00
// Sizes
&.is-small {
2022-12-06 10:46:03 +00:00
height: getVar("icon-dimensions-small");
width: getVar("icon-dimensions-small");
2022-11-23 17:44:02 +00:00
}
&.is-medium {
2022-12-06 10:46:03 +00:00
height: getVar("icon-dimensions-medium");
width: getVar("icon-dimensions-medium");
2022-11-23 17:44:02 +00:00
}
&.is-large {
2022-12-06 10:46:03 +00:00
height: getVar("icon-dimensions-large");
width: getVar("icon-dimensions-large");
2022-11-23 17:44:02 +00:00
}
}
2022-11-23 22:53:56 +00:00
.#{$class-prefix}icon-text {
2022-11-23 17:44:02 +00:00
align-items: flex-start;
color: inherit;
display: inline-flex;
flex-wrap: wrap;
2022-12-06 10:46:03 +00:00
line-height: getVar("icon-dimensions");
2022-11-23 17:44:02 +00:00
vertical-align: top;
2022-11-23 22:53:56 +00:00
.#{$class-prefix}icon {
2022-11-23 17:44:02 +00:00
flex-grow: 0;
flex-shrink: 0;
&:not(:last-child) {
@include ltr {
2022-12-06 10:46:03 +00:00
margin-right: getVar("icon-text-spacing");
2022-11-23 17:44:02 +00:00
}
@include rtl {
2022-12-06 10:46:03 +00:00
margin-left: getVar("icon-text-spacing");
2022-11-23 17:44:02 +00:00
}
}
&:not(:first-child) {
@include ltr {
2022-12-06 10:46:03 +00:00
margin-left: getVar("icon-text-spacing");
2022-11-23 17:44:02 +00:00
}
@include rtl {
2022-12-06 10:46:03 +00:00
margin-right: getVar("icon-text-spacing");
2022-11-23 17:44:02 +00:00
}
}
}
}
2022-11-23 22:53:56 +00:00
div.#{$class-prefix}icon-text {
2022-11-23 17:44:02 +00:00
display: flex;
}