29 lines
1.2 KiB
SCSS
29 lines
1.2 KiB
SCSS
// mixins
|
|
// --------------------------
|
|
@use 'variables' as v;
|
|
|
|
// base rendering for an icon
|
|
@mixin fa-icon($family: v.$family) {
|
|
--_#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family, var(--#{v.$css-prefix}-style-family, '#{$family}'));
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
display: var(--#{v.$css-prefix}-display, #{v.$display});
|
|
font-family: var(--_#{v.$css-prefix}-family);
|
|
font-feature-settings: normal;
|
|
font-style: normal;
|
|
font-synthesis: none;
|
|
font-variant: normal;
|
|
font-weight: var(--#{v.$css-prefix}-style, #{v.$style});
|
|
line-height: 1;
|
|
text-align: center;
|
|
text-rendering: auto;
|
|
width: var(--#{v.$css-prefix}-width, #{v.$fw-width});
|
|
}
|
|
|
|
// sets relative font-sizing and alignment (in _sizing)
|
|
@mixin fa-size ($font-size) {
|
|
font-size: calc(#{$font-size} / #{v.$size-scale-base} * 1em); /* converts a #{$font-size}px size into an em-based value that's relative to the scale's #{v.$size-scale-base}px base */
|
|
line-height: calc(1 / #{$font-size} * 1em); /* sets the line-height of the icon back to that of it's parent */
|
|
vertical-align: calc(((6 / #{$font-size}) - (3 / 8)) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
|
|
}
|