_mixins.less (1237B)
1 // Mixins 2 // -------------------------- 3 4 .fa-icon() { 5 -moz-osx-font-smoothing: grayscale; 6 -webkit-font-smoothing: antialiased; 7 display: inline-block; 8 font-style: normal; 9 font-variant: normal; 10 font-weight: normal; 11 line-height: 1; 12 } 13 14 .fa-icon-rotate(@degrees, @rotation) { 15 -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})"; 16 transform: rotate(@degrees); 17 } 18 19 .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 .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 .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 }