From 45654ffc5cc4532c2189c88d46a0374038b53c9f Mon Sep 17 00:00:00 2001 From: Treer Date: Sat, 30 Apr 2016 21:36:19 +1000 Subject: update font-awesome library to 4.6.1 Perhaps this should be done as a submodule instead? --- .../src/assets/font-awesome/scss/_mixins.scss | 82 ++++++++++++---------- 1 file changed, 45 insertions(+), 37 deletions(-) (limited to 'library/font_awesome/src/assets/font-awesome/scss/_mixins.scss') diff --git a/library/font_awesome/src/assets/font-awesome/scss/_mixins.scss b/library/font_awesome/src/assets/font-awesome/scss/_mixins.scss index ca9c5931b..241166198 100644 --- a/library/font_awesome/src/assets/font-awesome/scss/_mixins.scss +++ b/library/font_awesome/src/assets/font-awesome/scss/_mixins.scss @@ -1,48 +1,56 @@ +--- +--- // Mixins // -------------------------- -@mixin icon($icon) { - @include icon-FontAwesome(); - content: $icon; +@mixin fa-icon() { +{% include code/core.scss %} } -@mixin icon-FontAwesome() { - font-family: FontAwesome; - font-weight: normal; - font-style: normal; - text-decoration: inherit; - -webkit-font-smoothing: antialiased; - *margin-right: .3em; // fixes ie7 issues +@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); } -@mixin border-radius($radius) { - -webkit-border-radius: $radius; - -moz-border-radius: $radius; - border-radius: $radius; +@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); } -@mixin icon-stack($width: 2em, $height: 2em, $top-font-size: 1em, $base-font-size: 2em) { - .icon-stack { - position: relative; - display: inline-block; - width: $width; - height: $height; - line-height: $width; - vertical-align: -35%; - [class^="icon-"], - [class*=" icon-"] { - display: block; - text-align: center; - position: absolute; - width: 100%; - height: 100%; - font-size: $top-font-size; - line-height: inherit; - *line-height: $height; - } - .icon-stack-base { - font-size: $base-font-size; - *line-height: #{$height / $base-font-size}em; - } + +// 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; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0,0,0,0); + border: 0; +} + +// 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 +// +// Credit: HTML5 Boilerplate + +@mixin sr-only-focusable { + &:active, + &:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; } } -- cgit v1.2.3