1// Mixins
2// --------------------------
3
4@mixin fa-icon() {
5  display: inline-block;
6  font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
7  font-size: inherit; // can't have font-size inherit on line above, so need to override
8  text-rendering: auto; // optimizelegibility throws things off #1094
9  -webkit-font-smoothing: antialiased;
10  -moz-osx-font-smoothing: grayscale;
11}
12
13@mixin fa-icon-rotate($degrees, $rotation) {
14  -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})';
15  -webkit-transform: rotate($degrees);
16  -ms-transform: rotate($degrees);
17  transform: rotate($degrees);
18}
19
20@mixin fa-icon-flip($horiz, $vert, $rotation) {
21  -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)';
22  -webkit-transform: scale($horiz, $vert);
23  -ms-transform: scale($horiz, $vert);
24  transform: scale($horiz, $vert);
25}
26
27// Only display content to screen readers. A la Bootstrap 4.
28//
29// See: http://a11yproject.com/posts/how-to-hide-content/
30
31@mixin sr-only {
32  position: absolute;
33  width: 1px;
34  height: 1px;
35  padding: 0;
36  margin: -1px;
37  overflow: hidden;
38  clip: rect(0, 0, 0, 0);
39  border: 0;
40}
41
42// Use in conjunction with .sr-only to only display content when it's focused.
43//
44// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
45//
46// Credit: HTML5 Boilerplate
47
48@mixin sr-only-focusable {
49  &:active,
50  &:focus {
51    position: static;
52    width: auto;
53    height: auto;
54    margin: 0;
55    overflow: visible;
56    clip: auto;
57  }
58}
59