/
mixins.styl
executable file
·58 lines (49 loc) · 1.52 KB
/
mixins.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// Mixins
// --------------------------
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
fa-icon-rotate($degrees, $rotation)
filter s("progid:DXImageTransform.Microsoft.BasicImage(rotation=%s)", $rotation)
-webkit-transform rotate($degrees)
-ms-transform rotate($degrees)
transform rotate($degrees)
fa-icon-flip($horiz, $vert, $rotation)
filter s("progid:DXImageTransform.Microsoft.BasicImage(rotation=%s, mirror=1)", $rotation)
-webkit-transform scale($horiz, $vert)
-ms-transform scale($horiz, $vert)
transform scale($horiz, $vert)
fa(icon)
fa-icon()
&:before
content $fa-var- + icon
// 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
// 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