assets/stylesheets/font-awesome/_mixins.scss in font-awesome-sass-4.7.0 vs assets/stylesheets/font-awesome/_mixins.scss in font-awesome-sass-5.0.6

- old
+ new

@@ -1,46 +1,43 @@ // Mixins // -------------------------- -@mixin fa-icon() { - display: inline-block; - font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration - font-size: inherit; // can't have font-size inherit on line above, so need to override - text-rendering: auto; // optimizelegibility throws things off #1094 +@mixin fa-icon { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - + display: inline-block; + font-style: normal; + font-variant: normal; + font-weight: normal; + line-height: 1; + vertical-align: -.125em; } @mixin fa-icon-rotate($degrees, $rotation) { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})"; - -webkit-transform: rotate($degrees); - -ms-transform: rotate($degrees); - transform: rotate($degrees); + transform: rotate($degrees); } @mixin fa-icon-flip($horiz, $vert, $rotation) { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)"; - -webkit-transform: scale($horiz, $vert); - -ms-transform: scale($horiz, $vert); - transform: scale($horiz, $vert); + transform: scale($horiz, $vert); } // Only display content to screen readers. A la Bootstrap 4. // // See: http://a11yproject.com/posts/how-to-hide-content/ @mixin sr-only { - position: absolute; - width: 1px; + border: 0; + clip: rect(0, 0, 0, 0); height: 1px; - padding: 0; margin: -1px; overflow: hidden; - clip: rect(0,0,0,0); - border: 0; + padding: 0; + position: absolute; + width: 1px; } // Use in conjunction with .sr-only to only display content when it's focused. // // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 @@ -48,13 +45,13 @@ // Credit: HTML5 Boilerplate @mixin sr-only-focusable { &:active, &:focus { - position: static; - width: auto; + clip: auto; height: auto; margin: 0; overflow: visible; - clip: auto; + position: static; + width: auto; } }