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-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;
|
|
|
|
height: $icon-dimensions;
|
|
|
|
width: $icon-dimensions;
|
|
|
|
|
|
|
|
// Sizes
|
|
|
|
&.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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
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;
|
|
|
|
line-height: $icon-dimensions;
|
|
|
|
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 {
|
|
|
|
margin-right: $icon-text-spacing;
|
|
|
|
}
|
|
|
|
|
|
|
|
@include rtl {
|
|
|
|
margin-left: $icon-text-spacing;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:not(:first-child) {
|
|
|
|
@include ltr {
|
|
|
|
margin-left: $icon-text-spacing;
|
|
|
|
}
|
|
|
|
|
|
|
|
@include rtl {
|
|
|
|
margin-right: $icon-text-spacing;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-11-23 22:53:56 +00:00
|
|
|
div.#{$class-prefix}icon-text {
|
2022-11-23 17:44:02 +00:00
|
|
|
display: flex;
|
|
|
|
}
|