aboutsummaryrefslogtreecommitdiff
path: root/dist/font-awesome/scss/_mixins.scss
diff options
context:
space:
mode:
Diffstat (limited to 'dist/font-awesome/scss/_mixins.scss')
-rw-r--r--dist/font-awesome/scss/_mixins.scss57
1 files changed, 57 insertions, 0 deletions
diff --git a/dist/font-awesome/scss/_mixins.scss b/dist/font-awesome/scss/_mixins.scss
new file mode 100644
index 00000000..50a2e9f1
--- /dev/null
+++ b/dist/font-awesome/scss/_mixins.scss
@@ -0,0 +1,57 @@
1// Mixins
2// --------------------------
3
4@mixin fa-icon {
5 -webkit-font-smoothing: antialiased;
6 -moz-osx-font-smoothing: grayscale;
7 display: inline-block;
8 font-style: normal;
9 font-variant: normal;
10 font-weight: normal;
11 line-height: 1;
12 vertical-align: -.125em;
13}
14
15@mixin fa-icon-rotate($degrees, $rotation) {
16 -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
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 transform: scale($horiz, $vert);
23}
24
25
26// Only display content to screen readers. A la Bootstrap 4.
27//
28// See: http://a11yproject.com/posts/how-to-hide-content/
29
30@mixin sr-only {
31 border: 0;
32 clip: rect(0, 0, 0, 0);
33 height: 1px;
34 margin: -1px;
35 overflow: hidden;
36 padding: 0;
37 position: absolute;
38 width: 1px;
39}
40
41// Use in conjunction with .sr-only to only display content when it's focused.
42//
43// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
44//
45// Credit: HTML5 Boilerplate
46
47@mixin sr-only-focusable {
48 &:active,
49 &:focus {
50 clip: auto;
51 height: auto;
52 margin: 0;
53 overflow: visible;
54 position: static;
55 width: auto;
56 }
57}