_mixins.scss (1266B)
1 // Mixins 2 // -------------------------- 3 4 @mixin fa-icon { 5 -webkit-font-smoothing: antialiased; 6 -moz-osx-font-smoothing: grayscale; 7 display: inline-block; 8 font-style: normal; 9 font-variant: normal; 10 font-weight: normal; 11 line-height: 1; 12 } 13 14 @mixin fa-icon-rotate($degrees, $rotation) { 15 -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})"; 16 transform: rotate($degrees); 17 } 18 19 @mixin fa-icon-flip($horiz, $vert, $rotation) { 20 -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)"; 21 transform: scale($horiz, $vert); 22 } 23 24 25 // Only display content to screen readers. A la Bootstrap 4. 26 // 27 // See: http://a11yproject.com/posts/how-to-hide-content/ 28 29 @mixin sr-only { 30 border: 0; 31 clip: rect(0, 0, 0, 0); 32 height: 1px; 33 margin: -1px; 34 overflow: hidden; 35 padding: 0; 36 position: absolute; 37 width: 1px; 38 } 39 40 // Use in conjunction with .sr-only to only display content when it's focused. 41 // 42 // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 43 // 44 // Credit: HTML5 Boilerplate 45 46 @mixin sr-only-focusable { 47 &:active, 48 &:focus { 49 clip: auto; 50 height: auto; 51 margin: 0; 52 overflow: visible; 53 position: static; 54 width: auto; 55 } 56 }