font-awesome-sass 5.15.1 → 6.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +22 -66
  3. data/assets/fonts/font-awesome/fa-brands-400.ttf +0 -0
  4. data/assets/fonts/font-awesome/fa-brands-400.woff2 +0 -0
  5. data/assets/fonts/font-awesome/fa-regular-400.ttf +0 -0
  6. data/assets/fonts/font-awesome/fa-regular-400.woff2 +0 -0
  7. data/assets/fonts/font-awesome/fa-solid-900.ttf +0 -0
  8. data/assets/fonts/font-awesome/fa-solid-900.woff2 +0 -0
  9. data/assets/stylesheets/_brands.scss +33 -0
  10. data/assets/stylesheets/_font-awesome.scss +20 -4
  11. data/assets/stylesheets/_regular.scss +27 -0
  12. data/assets/stylesheets/_solid.scss +26 -0
  13. data/assets/stylesheets/_v4-shims.scss +8 -3
  14. data/assets/stylesheets/font-awesome/_animated.scss +142 -9
  15. data/assets/stylesheets/font-awesome/_bordered-pulled.scss +13 -13
  16. data/assets/stylesheets/font-awesome/_core.scss +16 -4
  17. data/assets/stylesheets/font-awesome/_fixed-width.scss +2 -1
  18. data/assets/stylesheets/font-awesome/_functions.scss +51 -0
  19. data/assets/stylesheets/font-awesome/_icons.scss +6 -1459
  20. data/assets/stylesheets/font-awesome/_list.scss +4 -4
  21. data/assets/stylesheets/font-awesome/_mixins.scss +51 -34
  22. data/assets/stylesheets/font-awesome/_rotated-flipped.scss +25 -18
  23. data/assets/stylesheets/font-awesome/_screen-reader.scss +12 -3
  24. data/assets/stylesheets/font-awesome/_shims.scss +467 -506
  25. data/assets/stylesheets/font-awesome/_sizing.scss +16 -0
  26. data/assets/stylesheets/font-awesome/_stacked.scss +5 -4
  27. data/assets/stylesheets/font-awesome/_variables.scss +3634 -778
  28. data/font-awesome-sass.gemspec +1 -2
  29. data/lib/font-awesome-sass.rb +0 -18
  30. data/lib/font_awesome/sass/rails/engine.rb +1 -1
  31. data/lib/font_awesome/sass/rails/helpers.rb +1 -0
  32. data/lib/font_awesome/sass/version.rb +1 -1
  33. metadata +10 -32
  34. data/assets/fonts/font-awesome/fa-brands-400.eot +0 -0
  35. data/assets/fonts/font-awesome/fa-brands-400.svg +0 -3717
  36. data/assets/fonts/font-awesome/fa-brands-400.woff +0 -0
  37. data/assets/fonts/font-awesome/fa-regular-400.eot +0 -0
  38. data/assets/fonts/font-awesome/fa-regular-400.svg +0 -801
  39. data/assets/fonts/font-awesome/fa-regular-400.woff +0 -0
  40. data/assets/fonts/font-awesome/fa-solid-900.eot +0 -0
  41. data/assets/fonts/font-awesome/fa-solid-900.svg +0 -5028
  42. data/assets/fonts/font-awesome/fa-solid-900.woff +0 -0
  43. data/assets/stylesheets/_font-awesome-compass.scss +0 -5
  44. data/assets/stylesheets/_font-awesome-sprockets.scss +0 -5
  45. data/assets/stylesheets/font-awesome/_larger.scss +0 -23
  46. data/assets/stylesheets/font-awesome/_path.scss +0 -56
@@ -1,18 +1,18 @@
1
- // List Icons
1
+ // icons in a list
2
2
  // -------------------------
3
3
 
4
4
  .#{$fa-css-prefix}-ul {
5
5
  list-style-type: none;
6
- margin-left: $fa-li-width * 5/4;
6
+ margin-left: var(--#{$fa-css-prefix}-li-margin, #{$fa-li-margin});
7
7
  padding-left: 0;
8
8
 
9
9
  > li { position: relative; }
10
10
  }
11
11
 
12
12
  .#{$fa-css-prefix}-li {
13
- left: -$fa-li-width;
13
+ left: calc(var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}) * -1);
14
14
  position: absolute;
15
15
  text-align: center;
16
- width: $fa-li-width;
16
+ width: var(--#{$fa-css-prefix}-li-width, #{$fa-li-width});
17
17
  line-height: inherit;
18
18
  }
@@ -1,6 +1,7 @@
1
- // Mixins
1
+ // mixins
2
2
  // --------------------------
3
3
 
4
+ // base rendering for an icon
4
5
  @mixin fa-icon {
5
6
  -webkit-font-smoothing: antialiased;
6
7
  -moz-osx-font-smoothing: grayscale;
@@ -11,46 +12,62 @@
11
12
  line-height: 1;
12
13
  }
13
14
 
14
- @mixin fa-icon-rotate($degrees, $rotation) {
15
- -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
16
- transform: rotate($degrees);
15
+ // sets relative font-sizing and alignment (in _sizing)
16
+ @mixin fa-size ($font-size) {
17
+ font-size: fa-divide($font-size, $fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base
18
+ line-height: fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
19
+ vertical-align: (fa-divide(6, $font-size) - fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
17
20
  }
18
21
 
19
- @mixin fa-icon-flip($horiz, $vert, $rotation) {
20
- -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
21
- transform: scale($horiz, $vert);
22
+ // only display content to screen readers
23
+ // see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
24
+ // see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
25
+ @mixin fa-sr-only() {
26
+ position: absolute;
27
+ width: 1px;
28
+ height: 1px;
29
+ padding: 0;
30
+ margin: -1px;
31
+ overflow: hidden;
32
+ clip: rect(0, 0, 0, 0);
33
+ white-space: nowrap;
34
+ border-width: 0;
22
35
  }
23
36
 
37
+ // use in conjunction with .sr-only to only display content when it's focused
38
+ @mixin fa-sr-only-focusable() {
39
+ &:not(:focus) {
40
+ @include fa-sr-only();
41
+ }
42
+ }
24
43
 
25
- // Only display content to screen readers. A la Bootstrap 4.
26
- //
27
- // See: http://a11yproject.com/posts/how-to-hide-content/
44
+ // convenience mixins for declaring pseudo-elements by CSS variable,
45
+ // including all style-specific font properties, and both the ::before
46
+ // and ::after elements in the duotone case.
47
+ @mixin fa-icon-solid($fa-var) {
48
+ @extend %fa-icon;
49
+ @extend .fa-solid;
28
50
 
29
- @mixin sr-only {
30
- border: 0;
31
- clip: rect(0, 0, 0, 0);
32
- height: 1px;
33
- margin: -1px;
34
- overflow: hidden;
35
- padding: 0;
36
- position: absolute;
37
- width: 1px;
51
+ &::before {
52
+ content: unquote("\"#{ $fa-var }\"");
53
+ }
38
54
  }
39
55
 
40
- // Use in conjunction with .sr-only to only display content when it's focused.
41
- //
42
- // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
43
- //
44
- // Credit: HTML5 Boilerplate
45
-
46
- @mixin sr-only-focusable {
47
- &:active,
48
- &:focus {
49
- clip: auto;
50
- height: auto;
51
- margin: 0;
52
- overflow: visible;
53
- position: static;
54
- width: auto;
56
+ @mixin fa-icon-regular($fa-var) {
57
+ @extend %fa-icon;
58
+ @extend .fa-regular;
59
+
60
+ &::before {
61
+ content: unquote("\"#{ $fa-var }\"");
55
62
  }
56
63
  }
64
+
65
+ @mixin fa-icon-brands($fa-var) {
66
+ @extend %fa-icon;
67
+ @extend .fa-brands;
68
+
69
+ &::before {
70
+ content: unquote("\"#{ $fa-var }\"");
71
+ }
72
+ }
73
+
@@ -1,24 +1,31 @@
1
- // Rotated & Flipped Icons
1
+ // rotating + flipping icons
2
2
  // -------------------------
3
3
 
4
- .#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); }
5
- .#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
6
- .#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
4
+ .#{$fa-css-prefix}-rotate-90 {
5
+ transform: rotate(90deg);
6
+ }
7
7
 
8
- .#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
9
- .#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); }
10
- .#{$fa-css-prefix}-flip-both, .#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(-1, -1, 2); }
8
+ .#{$fa-css-prefix}-rotate-180 {
9
+ transform: rotate(180deg);
10
+ }
11
11
 
12
- // Hook for IE8-9
13
- // -------------------------
12
+ .#{$fa-css-prefix}-rotate-270 {
13
+ transform: rotate(270deg);
14
+ }
15
+
16
+ .#{$fa-css-prefix}-flip-horizontal {
17
+ transform: scale(-1, 1);
18
+ }
19
+
20
+ .#{$fa-css-prefix}-flip-vertical {
21
+ transform: scale(1, -1);
22
+ }
23
+
24
+ .#{$fa-css-prefix}-flip-both,
25
+ .#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical {
26
+ transform: scale(-1, -1);
27
+ }
14
28
 
15
- :root {
16
- .#{$fa-css-prefix}-rotate-90,
17
- .#{$fa-css-prefix}-rotate-180,
18
- .#{$fa-css-prefix}-rotate-270,
19
- .#{$fa-css-prefix}-flip-horizontal,
20
- .#{$fa-css-prefix}-flip-vertical,
21
- .#{$fa-css-prefix}-flip-both {
22
- filter: none;
23
- }
29
+ .#{$fa-css-prefix}-rotate-by {
30
+ transform: rotate(var(--#{$fa-css-prefix}-rotate-angle, none));
24
31
  }
@@ -1,5 +1,14 @@
1
- // Screen Readers
1
+ // screen-reader utilities
2
2
  // -------------------------
3
3
 
4
- .sr-only { @include sr-only; }
5
- .sr-only-focusable { @include sr-only-focusable; }
4
+ // only display content to screen readers
5
+ .sr-only,
6
+ .fa-sr-only {
7
+ @include fa-sr-only;
8
+ }
9
+
10
+ // use in conjunction with .sr-only to only display content when it's focused
11
+ .sr-only-focusable,
12
+ .fa-sr-only-focusable {
13
+ @include fa-sr-only-focusable;
14
+ }