_mixins.scss (2128B)
1 // mixins 2 // -------------------------- 3 4 // base rendering for an icon 5 @mixin fa-icon { 6 -webkit-font-smoothing: antialiased; 7 -moz-osx-font-smoothing: grayscale; 8 display: inline-block; 9 font-style: normal; 10 font-variant: normal; 11 font-weight: normal; 12 line-height: 1; 13 } 14 15 // sets relative font-sizing and alignment (in _sizing) 16 @mixin fa-size ($font-size) { 17 font-size: fa-divide($font-size, $fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base 18 line-height: fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent 19 vertical-align: (fa-divide(6, $font-size) - fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender 20 } 21 22 // only display content to screen readers 23 // see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ 24 // see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ 25 @mixin fa-sr-only() { 26 position: absolute; 27 width: 1px; 28 height: 1px; 29 padding: 0; 30 margin: -1px; 31 overflow: hidden; 32 clip: rect(0, 0, 0, 0); 33 white-space: nowrap; 34 border-width: 0; 35 } 36 37 // use in conjunction with .sr-only to only display content when it's focused 38 @mixin fa-sr-only-focusable() { 39 &:not(:focus) { 40 @include fa-sr-only(); 41 } 42 } 43 44 // sets a specific icon family to use alongside style + icon mixins 45 @mixin fa-family-classic() { 46 @extend .fa-classic; 47 } 48 49 // convenience mixins for declaring pseudo-elements by CSS variable, 50 // including all style-specific font properties 51 @mixin fa-icon-solid($fa-var) { 52 @extend .fa-solid; 53 54 & { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); } 55 } 56 @mixin fa-icon-regular($fa-var) { 57 @extend .fa-regular; 58 59 & { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); } 60 } 61 @mixin fa-icon-brands($fa-var) { 62 @extend .fa-brands; 63 64 & { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); } 65 }