diff options
author | Treer <treer.git@the-bordello.com> | 2016-04-30 21:36:19 +1000 |
---|---|---|
committer | Treer <treer.git@the-bordello.com> | 2016-04-30 21:36:19 +1000 |
commit | 45654ffc5cc4532c2189c88d46a0374038b53c9f (patch) | |
tree | fc1c9949dcabd360c120d318c9fe3181d47c8f42 /library/font_awesome/scss/_mixins.scss | |
parent | 931a4fafe316b23bacf92ac1ff35f9b8467415dd (diff) | |
download | volse-hubzilla-45654ffc5cc4532c2189c88d46a0374038b53c9f.tar.gz volse-hubzilla-45654ffc5cc4532c2189c88d46a0374038b53c9f.tar.bz2 volse-hubzilla-45654ffc5cc4532c2189c88d46a0374038b53c9f.zip |
update font-awesome library to 4.6.1
Perhaps this should be done as a submodule instead?
Diffstat (limited to 'library/font_awesome/scss/_mixins.scss')
-rw-r--r-- | library/font_awesome/scss/_mixins.scss | 86 |
1 files changed, 49 insertions, 37 deletions
diff --git a/library/font_awesome/scss/_mixins.scss b/library/font_awesome/scss/_mixins.scss index ca9c5931b..c3bbd5745 100644 --- a/library/font_awesome/scss/_mixins.scss +++ b/library/font_awesome/scss/_mixins.scss @@ -1,48 +1,60 @@ // Mixins // -------------------------- -@mixin icon($icon) { - @include icon-FontAwesome(); - content: $icon; +@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 + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } -@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 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 border-radius($radius) { - -webkit-border-radius: $radius; - -moz-border-radius: $radius; - border-radius: $radius; + +// 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; } -@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; - } +// 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; } } |