font-awesome-sass 5.13.1 → 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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 -1448
  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 +3664 -797
  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 -3633
  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 -803
  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 -5000
  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
+ }