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? --- library/font_awesome/less/mixins.less | 86 ++++++++++++++++++++--------------- 1 file changed, 49 insertions(+), 37 deletions(-) (limited to 'library/font_awesome/less/mixins.less') diff --git a/library/font_awesome/less/mixins.less b/library/font_awesome/less/mixins.less index f7fdda590..beef231d0 100644 --- a/library/font_awesome/less/mixins.less +++ b/library/font_awesome/less/mixins.less @@ -1,48 +1,60 @@ // Mixins // -------------------------- -.icon(@icon) { - .icon-FontAwesome(); - content: @icon; +.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; + } -.icon-FontAwesome() { - font-family: FontAwesome; - font-weight: normal; - font-style: normal; - text-decoration: inherit; - -webkit-font-smoothing: antialiased; - *margin-right: .3em; // fixes ie7 issues +.fa-icon-rotate(@degrees, @rotation) { + -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})"; + -webkit-transform: rotate(@degrees); + -ms-transform: rotate(@degrees); + transform: rotate(@degrees); +} + +.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); } -.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/ + +.sr-only() { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0,0,0,0); + border: 0; } -.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; - } +// 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 + +.sr-only-focusable() { + &:active, + &:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; } } -- cgit v1.2.3