Project

General

Profile

1
// Mixins
2
// --------------------------
3

    
4
.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

    
14
.fa-icon-rotate(@degrees, @rotation) {
15
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
16
  -webkit-transform: rotate(@degrees);
17
      -ms-transform: rotate(@degrees);
18
          transform: rotate(@degrees);
19
}
20

    
21
.fa-icon-flip(@horiz, @vert, @rotation) {
22
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)";
23
  -webkit-transform: scale(@horiz, @vert);
24
      -ms-transform: scale(@horiz, @vert);
25
          transform: scale(@horiz, @vert);
26
}
27

    
28

    
29
// Only display content to screen readers. A la Bootstrap 4.
30
//
31
// See: http://a11yproject.com/posts/how-to-hide-content/
32

    
33
.sr-only() {
34
  position: absolute;
35
  width: 1px;
36
  height: 1px;
37
  padding: 0;
38
  margin: -1px;
39
  overflow: hidden;
40
  clip: rect(0,0,0,0);
41
  border: 0;
42
}
43

    
44
// Use in conjunction with .sr-only to only display content when it's focused.
45
//
46
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
47
//
48
// Credit: HTML5 Boilerplate
49

    
50
.sr-only-focusable() {
51
  &:active,
52
  &:focus {
53
    position: static;
54
    width: auto;
55
    height: auto;
56
    margin: 0;
57
    overflow: visible;
58
    clip: auto;
59
  }
60
}
(9-9/14)