c7bc4983 |
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 | |
46 | // convenience mixins for declaring pseudo-elements by CSS variable, |
47 | // including all style-specific font properties, and both the ::before |
48 | // and ::after elements in the duotone case. |
49 | @mixin fa-icon-solid($fa-var) { |
50 | @extend %fa-icon; |
51 | @extend .fa-solid; |
52 | |
53 | &::before { |
54 | content: unquote("\"#{ $fa-var }\""); |
55 | } |
56 | } |
57 | |
58 | @mixin fa-icon-regular($fa-var) { |
59 | @extend %fa-icon; |
60 | @extend .fa-regular; |
61 | |
62 | &::before { |
63 | content: unquote("\"#{ $fa-var }\""); |
64 | } |
65 | } |
66 | |
67 | @mixin fa-icon-brands($fa-var) { |
68 | @extend %fa-icon; |
69 | @extend .fa-brands; |
70 | |
71 | &::before { |
72 | content: unquote("\"#{ $fa-var }\""); |
73 | } |
74 | } |
75 | |