font-awesome-sass 5.13.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 -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
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 8d61bca00b2084cbac5effdbf1ea998466daac2190a41a75e5a0b96b9cfa770c
4
- data.tar.gz: f1dbd0dabdfc9b2fdc398b8559d8a4edff96ce000d8eaa886f59f8155faafd34
3
+ metadata.gz: e4b21cce3cddb7dccf87c457ec1999d3f4cfd44ab2680b240c692a19d8fa21ce
4
+ data.tar.gz: 43d9205df33a07a77eff8605491995c99d18a764157f256286a00c454bca5d3d
5
5
  SHA512:
6
- metadata.gz: 367c987e62a7bdace157fff0a84f9dcb3e6f1b4100820a26e062733b10822919469575cf2abc5790285ae848e0d8bbc15c34035392e2720750f731fcc7285280
7
- data.tar.gz: 6c0ac9897a3bd89f70279f00b401d9766c6975d1b7e43ffc33ab92d074c1138f71ee7e8a815c8c8cacc85a8ace5326be418272f1c48fde5ab5a80688e6a9ed86
6
+ metadata.gz: 5f7c9ddb9c7dadc49bb198bfcd5d07da7f70a52e505f837964931af035556d0a26da80d4b7dff457452cdebdd2d6a95bdeaa4020fb0dce4a145bef9b6ba8431a
7
+ data.tar.gz: 1a63258924cee0a1cf2d653ed391c5522d3ce5f1914536b6f640003ce5b426bea877761480c8f59b669eb5c0a7787383b033e5f029045fae3cba88fab19cd3d3
data/README.md CHANGED
@@ -2,35 +2,20 @@
2
2
 
3
3
  [![Gem Version](https://badge.fury.io/rb/font-awesome-sass.svg)](https://badge.fury.io/rb/font-awesome-sass)
4
4
 
5
- 'font-awesome-sass' is a Sass-powered version of [FontAwesome](http://fortawesome.github.io/Font-Awesome/) for your Ruby projects and plays nicely with
6
- Ruby on Rails, Compass, Sprockets, etc.
5
+ 'font-awesome-sass' is a Sass-powered version of [Font Awesome](http://fontawesome.com/) for your Ruby projects with specific support for Ruby on Rails and Sprockets.
7
6
 
8
- Refactored to support more Ruby environments with code and documentation humbly used from the excellent
9
- [bootstrap-sass](https://github.com/twbs/bootstrap-sass) project by the Bootstrap team
7
+ Refactored to support more Ruby environments with code and documentation humbly used from the excellent [bootstrap-sass](https://github.com/twbs/bootstrap-sass) project by the Bootstrap team
10
8
 
11
- ## Breaking Changes
12
-
13
- With the update to Font Awesome 5.x there are some breaking changes that will effect your use of this gem. Some of the changes include:
14
-
15
- * Icon name changes
16
- * New icons
17
- * The use of an icon style (`solid`, `regular`, or `brands`)
18
-
19
- You can find more detailed information on these changes on our [Getting Started](https://fontawesome.com/get-started/web-fonts-with-css) guide, our [How to Use](https://fontawesome.com/how-to-use/web-fonts-with-css) guide, and our [Upgrading from Version 4](https://fontawesome.com/how-to-use/upgrading-from-4) guide.
9
+ You can find more detailed information on these changes on our [Getting Started](https://fontawesome.com/docs/web/setup/get-started) guide, our [How to Use](https://fontawesome.com/docs/web/) guide, and our [Upgrade](https://fontawesome.com/docs/web/setup/upgrade/) guide.
20
10
 
21
11
  ## Installation
22
12
 
23
- Please see the appropriate guide for your environment of choice:
24
-
25
- * [Ruby on Rails](#a-ruby-on-rails).
26
- * [Compass](#b-compass-without-rails) not on Rails.
27
-
28
- ### a. Ruby on Rails
13
+ ### Ruby on Rails
29
14
 
30
15
  In your Gemfile include:
31
16
 
32
17
  ```ruby
33
- gem 'font-awesome-sass', '~> 5.13.1'
18
+ gem 'font-awesome-sass', '~> 6.0.0'
34
19
  ```
35
20
 
36
21
  And then execute:
@@ -39,11 +24,9 @@ And then execute:
39
24
  bundle install
40
25
  ```
41
26
 
42
- Import the FontAwesome styles in your `app/assets/stylesheets/application.css.scss`. The `font-awesome-sprockets` file
43
- includes the sprockets assets helper Sass functions used for finding the proper path to the font file.
27
+ Import the FontAwesome styles in your `app/assets/stylesheets/application.css.scss`. The `font-awesome` file includes all the tools needed to get Font Awesome up and running for Rails.
44
28
 
45
29
  ```scss
46
- @import "font-awesome-sprockets";
47
30
  @import "font-awesome";
48
31
  ```
49
32
 
@@ -51,65 +34,38 @@ If `app/assets/stylesheets/application.css.scss` does not exist then rename `app
51
34
 
52
35
  #### Rails Helper usage
53
36
 
54
- With Font Awesome 5.x you now need to select what style of icon you want to use. Font Awesome 5.x has 3 styles:
37
+ With Font Awesome Free 6.x you now need to select what style of icon you want to use. Font Awesome Free 6.x has 3 styles:
55
38
 
56
- * solid (`fas`)
57
- * regular (`far`)
58
- * brands (`fab`)
39
+ * solid (`fa-solid` or `fas`)
40
+ * regular (`fa-regular` or `far`)
41
+ * brands (`fa-brands` or `fab`)
59
42
 
60
43
  In your view:
61
44
 
62
45
  ```ruby
46
+ icon('fa-solid', 'flag')
47
+ # => <i class="fa-solid fa-flag" aria-hidden="true"></i>
63
48
  icon('fas', 'flag')
64
- # => <i class="fas fa-flag"></i>
49
+ # => <i class="fas fa-flag" aria-hidden="true"></i>
50
+
65
51
  ```
66
52
 
67
53
  ```ruby
54
+ icon('fa-regular', 'address-book', class: 'strong')
55
+ # => <i class="fa-regular fa-address-book strong" aria-hidden="true"></i>
68
56
  icon('far', 'address-book', class: 'strong')
69
- # => <i class="far fa-address-book strong"></i>
57
+ # => <i class="far fa-address-book strong" aria-hidden="true"></i>
70
58
  ```
71
59
 
72
60
  ```ruby
61
+ icon('fa-brands', 'font-awesome', 'Font Awesome', id: 'my-icon', class: 'strong')
62
+ # => <i id="my-icon" class="fa-brands fa-font-awesome strong" aria-hidden="true"></i> Font Awesome
73
63
  icon('fab', 'font-awesome', 'Font Awesome', id: 'my-icon', class: 'strong')
74
- # => <i id="my-icon" class="fab fa-font-awesome strong"></i> Font Awesome
64
+ # => <i id="my-icon" class="fab fa-font-awesome strong" aria-hidden="true"></i> Font Awesome
75
65
  ```
76
66
 
77
67
  Note: the icon helper can take a hash of options that will be passed to the content_tag helper
78
68
 
79
- ### b. Compass without Rails
80
-
81
- Install the gem
82
-
83
- ```sh
84
- gem install font-awesome-sass
85
- ```
86
-
87
- If you have an existing Compass project:
88
-
89
- ```ruby
90
- # config.rb:
91
- require 'font-awesome-sass'
92
- ```
93
-
94
- Import the FontAwesome styles
95
-
96
- ```scss
97
- @import "font-awesome-compass";
98
- @import "font-awesome";
99
- ```
100
-
101
- ## Upgrading from FontAwesome::Sass 4.x
69
+ ### Other Ruby Projects
102
70
 
103
- Prepend the style of the icon you want to use (`fas`, `far`, `fab`) class to existing icons:
104
-
105
- 4.x Syntax
106
-
107
- ```html
108
- <i class="fa fa-github"></i>
109
- ```
110
-
111
- 5.x Syntax (GitHub icon exists in the Brands style)
112
-
113
- ```html
114
- <i class="fab fa-github"></i>
115
- ```
71
+ The `path.scss` file contains a function for using the `font-path` function if found. If the function is not found it will use the `$fa-font-path` variable for the path to the webfont files. You can override this variable to where your framework will store the webfonts files.
@@ -0,0 +1,33 @@
1
+ /*!
2
+ * Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com
3
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4
+ * Copyright 2022 Fonticons, Inc.
5
+ */
6
+ @import "font-awesome/functions";
7
+ @import "font-awesome/variables";
8
+
9
+ :root,
10
+ :host {
11
+ --#{ $fa-css-prefix }-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
12
+ }
13
+
14
+ @font-face {
15
+ font-family: "Font Awesome 6 Brands";
16
+ font-style: normal;
17
+ font-weight: 400;
18
+ font-display: $fa-font-display;
19
+ src: url(fa-font-path("fa-brands-400.woff2")) format("woff2"),
20
+ url(fa-font-path("fa-brands-400.ttf")) format("truetype");
21
+ }
22
+
23
+ .fab,
24
+ .fa-brands {
25
+ font-family: "Font Awesome 6 Brands";
26
+ font-weight: 400;
27
+ }
28
+
29
+ @each $name, $icon in $fa-brand-icons {
30
+ .#{$fa-css-prefix}-#{$name}:before {
31
+ content: fa-content($icon);
32
+ }
33
+ }
@@ -1,12 +1,16 @@
1
1
  /*!
2
- * Font Awesome Free 5.13.1 by @fontawesome - https://fontawesome.com
2
+ * Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com
3
3
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4
+ * Copyright 2022 Fonticons, Inc.
4
5
  */
6
+ // Font Awesome core compile (Web Fonts-based)
7
+ // -------------------------
8
+
9
+ @import "font-awesome/functions";
5
10
  @import "font-awesome/variables";
6
11
  @import "font-awesome/mixins";
7
- @import "font-awesome/path";
8
12
  @import "font-awesome/core";
9
- @import "font-awesome/larger";
13
+ @import "font-awesome/sizing";
10
14
  @import "font-awesome/fixed-width";
11
15
  @import "font-awesome/list";
12
16
  @import "font-awesome/bordered-pulled";
@@ -14,4 +18,16 @@
14
18
  @import "font-awesome/rotated-flipped";
15
19
  @import "font-awesome/stacked";
16
20
  @import "font-awesome/icons";
17
- @import "font-awesome/screen-reader";
21
+ @import "font-awesome/screen-reader";
22
+
23
+ @function fa-font-path($file) {
24
+ @if function-exists("font-path") {
25
+ @return font-path("font-awesome/#{$file}");
26
+ } @else {
27
+ @return "#{$fa-font-path}/#{$file}";
28
+ }
29
+ }
30
+
31
+ @import "solid";
32
+ @import "regular";
33
+ @import "brands";
@@ -0,0 +1,27 @@
1
+ /*!
2
+ * Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com
3
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4
+ * Copyright 2022 Fonticons, Inc.
5
+ */
6
+ @import "font-awesome/functions";
7
+ @import "font-awesome/variables";
8
+
9
+ :root,
10
+ :host {
11
+ --#{ $fa-css-prefix }-font-regular: normal 400 1em/1 "#{ $fa-style-family }";
12
+ }
13
+
14
+ @font-face {
15
+ font-family: "Font Awesome 6 Free";
16
+ font-style: normal;
17
+ font-weight: 400;
18
+ font-display: $fa-font-display;
19
+ src: url(fa-font-path("fa-regular-400.woff2")) format("woff2"),
20
+ url(fa-font-path("fa-regular-400.ttf")) format("truetype");
21
+ }
22
+
23
+ .far,
24
+ .fa-regular {
25
+ font-family: "Font Awesome 6 Free";
26
+ font-weight: 400;
27
+ }
@@ -0,0 +1,26 @@
1
+ /*!
2
+ * Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com
3
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4
+ * Copyright 2022 Fonticons, Inc.
5
+ */
6
+ @import "font-awesome/functions";
7
+ @import "font-awesome/variables";
8
+
9
+ :root,
10
+ :host {
11
+ --#{ $fa-css-prefix }-font-solid: normal 900 1em/1 "#{ $fa-style-family }";
12
+ }
13
+
14
+ @font-face {
15
+ font-family: "Font Awesome 6 Free";
16
+ font-style: normal;
17
+ font-weight: 900;
18
+ font-display: $fa-font-display;
19
+ src: url(fa-font-path("fa-solid-900.woff2")) format("woff2"), url(fa-font-path("fa-solid-900.ttf")) format("truetype");
20
+ }
21
+
22
+ .fas,
23
+ .fa-solid {
24
+ font-family: "Font Awesome 6 Free";
25
+ font-weight: 900;
26
+ }
@@ -1,6 +1,11 @@
1
1
  /*!
2
- * Font Awesome Free 5.13.1 by @fontawesome - https://fontawesome.com
2
+ * Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com
3
3
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
4
+ * Copyright 2022 Fonticons, Inc.
4
5
  */
5
- @import "font-awesome/variables";
6
- @import "font-awesome/shims";
6
+ // V4 shims compile (Web Fonts-based)
7
+ // -------------------------
8
+
9
+ @import "font-awesome/functions";
10
+ @import "font-awesome/variables";
11
+ @import "font-awesome/shims";
@@ -1,20 +1,153 @@
1
- // Animated Icons
1
+ // animating icons
2
2
  // --------------------------
3
3
 
4
+ .#{$fa-css-prefix}-beat {
5
+ animation-name: #{$fa-css-prefix}-beat;
6
+ animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
7
+ animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
8
+ animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
9
+ animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
10
+ animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
11
+ }
12
+
13
+ .#{$fa-css-prefix}-bounce {
14
+ animation-name: #{$fa-css-prefix}-bounce;
15
+ animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
16
+ animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
17
+ animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
18
+ animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
19
+ animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1));
20
+ }
21
+
22
+ .#{$fa-css-prefix}-fade {
23
+ animation-name: #{$fa-css-prefix}-fade;
24
+ animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
25
+ animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
26
+ animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
27
+ animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
28
+ animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
29
+ }
30
+
31
+ .#{$fa-css-prefix}-beat-fade {
32
+ animation-name: #{$fa-css-prefix}-beat-fade;
33
+ animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
34
+ animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
35
+ animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
36
+ animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
37
+ animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
38
+ }
39
+
40
+ .#{$fa-css-prefix}-flip {
41
+ animation-name: #{$fa-css-prefix}-flip;
42
+ animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
43
+ animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
44
+ animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
45
+ animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
46
+ animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
47
+ }
48
+
49
+ .#{$fa-css-prefix}-shake {
50
+ animation-name: #{$fa-css-prefix}-shake;
51
+ animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
52
+ animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
53
+ animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
54
+ animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
55
+ animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
56
+ }
57
+
4
58
  .#{$fa-css-prefix}-spin {
5
- animation: fa-spin 2s infinite linear;
59
+ animation-name: #{$fa-css-prefix}-spin;
60
+ animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0);
61
+ animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
62
+ animation-duration: var(--#{$fa-css-prefix}-animation-duration, 2s);
63
+ animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
64
+ animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
65
+ }
66
+
67
+ .#{$fa-css-prefix}-spin-reverse {
68
+ --#{$fa-css-prefix}-animation-direction: reverse;
69
+ }
70
+
71
+ .#{$fa-css-prefix}-pulse,
72
+ .#{$fa-css-prefix}-spin-pulse {
73
+ animation-name: #{$fa-css-prefix}-spin;
74
+ animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
75
+ animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
76
+ animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
77
+ animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, steps(8));
78
+ }
79
+
80
+ // if agent or operating system prefers reduced motion, disable animations
81
+ // see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
82
+ // see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
83
+ @media (prefers-reduced-motion: reduce) {
84
+ .#{$fa-css-prefix}-beat,
85
+ .#{$fa-css-prefix}-bounce,
86
+ .#{$fa-css-prefix}-fade,
87
+ .#{$fa-css-prefix}-beat-fade,
88
+ .#{$fa-css-prefix}-flip,
89
+ .#{$fa-css-prefix}-pulse,
90
+ .#{$fa-css-prefix}-shake,
91
+ .#{$fa-css-prefix}-spin,
92
+ .#{$fa-css-prefix}-spin-pulse {
93
+ animation-delay: -1ms;
94
+ animation-duration: 1ms;
95
+ animation-iteration-count: 1;
96
+ transition-delay: 0s;
97
+ transition-duration: 0s;
98
+ }
99
+ }
100
+
101
+ @keyframes #{$fa-css-prefix}-beat {
102
+ 0%, 90% { transform: scale(1); }
103
+ 45% { transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25)); }
104
+ }
105
+
106
+ @keyframes #{$fa-css-prefix}-bounce {
107
+ 0% { transform: scale(1,1) translateY(0); }
108
+ 10% { transform: scale(var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); }
109
+ 30% { transform: scale(var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em)); }
110
+ 50% { transform: scale(var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); }
111
+ 57% { transform: scale(1,1) translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em)); }
112
+ 64% { transform: scale(1,1) translateY(0); }
113
+ 100% { transform: scale(1,1) translateY(0); }
6
114
  }
7
115
 
8
- .#{$fa-css-prefix}-pulse {
9
- animation: fa-spin 1s infinite steps(8);
116
+ @keyframes #{$fa-css-prefix}-fade {
117
+ 50% { opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4); }
10
118
  }
11
119
 
12
- @keyframes fa-spin {
13
- 0% {
14
- transform: rotate(0deg);
120
+ @keyframes #{$fa-css-prefix}-beat-fade {
121
+ 0%, 100% {
122
+ opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4);
123
+ transform: scale(1);
15
124
  }
125
+ 50% {
126
+ opacity: 1;
127
+ transform: scale(var(--#{$fa-css-prefix}-beat-fade-scale, 1.125));
128
+ }
129
+ }
16
130
 
17
- 100% {
18
- transform: rotate(360deg);
131
+ @keyframes #{$fa-css-prefix}-flip {
132
+ 50% {
133
+ transform: rotate3d(var(--#{$fa-css-prefix}-flip-x, 0), var(--#{$fa-css-prefix}-flip-y, 1), var(--#{$fa-css-prefix}-flip-z, 0), var(--#{$fa-css-prefix}-flip-angle, -180deg));
19
134
  }
20
135
  }
136
+
137
+ @keyframes #{$fa-css-prefix}-shake {
138
+ 0% { transform: rotate(-15deg); }
139
+ 4% { transform: rotate(15deg); }
140
+ 8%, 24% { transform: rotate(-18deg); }
141
+ 12%, 28% { transform: rotate(18deg); }
142
+ 16% { transform: rotate(-22deg); }
143
+ 20% { transform: rotate(22deg); }
144
+ 32% { transform: rotate(-12deg); }
145
+ 36% { transform: rotate(12deg); }
146
+ 40%, 100% { transform: rotate(0deg); }
147
+ }
148
+
149
+ @keyframes #{$fa-css-prefix}-spin {
150
+ 0% { transform: rotate(0deg); }
151
+ 100% { transform: rotate(360deg); }
152
+ }
153
+
@@ -1,20 +1,20 @@
1
- // Bordered & Pulled
1
+ // bordered + pulled icons
2
2
  // -------------------------
3
3
 
4
4
  .#{$fa-css-prefix}-border {
5
- border: solid .08em $fa-border-color;
6
- border-radius: .1em;
7
- padding: .2em .25em .15em;
5
+ border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color});
6
+ border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius});
7
+ border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style});
8
+ border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width});
9
+ padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding});
8
10
  }
9
11
 
10
- .#{$fa-css-prefix}-pull-left { float: left; }
11
- .#{$fa-css-prefix}-pull-right { float: right; }
12
+ .#{$fa-css-prefix}-pull-left {
13
+ float: left;
14
+ margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
15
+ }
12
16
 
13
- .#{$fa-css-prefix},
14
- .fas,
15
- .far,
16
- .fal,
17
- .fab {
18
- &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
19
- &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
17
+ .#{$fa-css-prefix}-pull-right {
18
+ float: right;
19
+ margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
20
20
  }
@@ -1,19 +1,31 @@
1
- // Base Class Definition
1
+ // base icon class definition
2
2
  // -------------------------
3
3
 
4
+ .#{$fa-css-prefix} {
5
+ font-family: var(--#{$fa-css-prefix}-style-family, '#{$fa-style-family}');
6
+ font-weight: var(--#{$fa-css-prefix}-style, #{$fa-style});
7
+ }
8
+
4
9
  .#{$fa-css-prefix},
5
10
  .fas,
11
+ .fa-solid,
6
12
  .far,
13
+ .fa-regular,
7
14
  .fal,
15
+ .fa-light,
16
+ .fat,
17
+ .fa-thin,
8
18
  .fad,
9
- .fab {
19
+ .fa-duotone,
20
+ .fab,
21
+ .fa-brands {
10
22
  -moz-osx-font-smoothing: grayscale;
11
23
  -webkit-font-smoothing: antialiased;
12
- display: inline-block;
24
+ display: var(--#{$fa-css-prefix}-display, #{$fa-display});
13
25
  font-style: normal;
14
26
  font-variant: normal;
15
- text-rendering: auto;
16
27
  line-height: 1;
28
+ text-rendering: auto;
17
29
  }
18
30
 
19
31
  %fa-icon {
@@ -1,5 +1,6 @@
1
- // Fixed Width Icons
1
+ // fixed-width icons
2
2
  // -------------------------
3
+
3
4
  .#{$fa-css-prefix}-fw {
4
5
  text-align: center;
5
6
  width: $fa-fw-width;
@@ -0,0 +1,51 @@
1
+ // functions
2
+ // --------------------------
3
+
4
+ // Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
5
+ //
6
+ // Licensed under: The MIT License (MIT)
7
+ //
8
+ // Copyright (c) 2011-2021 Twitter, Inc.
9
+ // Copyright (c) 2011-2021 The Bootstrap Authors
10
+ //
11
+ // Permission is hereby granted, free of charge, to any person obtaining a copy
12
+ // of this software and associated documentation files (the "Software"), to deal
13
+ // in the Software without restriction, including without limitation the rights
14
+ // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15
+ // copies of the Software, and to permit persons to whom the Software is
16
+ // furnished to do so, subject to the following conditions:
17
+ //
18
+ // The above copyright notice and this permission notice shall be included in
19
+ // all copies or substantial portions of the Software.
20
+ //
21
+ // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22
+ // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23
+ // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24
+ // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25
+ // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26
+ // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
27
+ // THE SOFTWARE.
28
+ @function fa-divide($dividend, $divisor, $precision: 10) {
29
+ $sign: if($dividend > 0 and $divisor > 0, 1, -1);
30
+ $dividend: abs($dividend);
31
+ $divisor: abs($divisor);
32
+ $quotient: 0;
33
+ $remainder: $dividend;
34
+ @if $dividend == 0 {
35
+ @return 0;
36
+ }
37
+ @if $divisor == 0 {
38
+ @error "Cannot divide by 0";
39
+ }
40
+ @if $divisor == 1 {
41
+ @return $dividend;
42
+ }
43
+ @while $remainder >= $divisor {
44
+ $quotient: $quotient + 1;
45
+ $remainder: $remainder - $divisor;
46
+ }
47
+ @if $remainder > 0 and $precision > 0 {
48
+ $remainder: fa-divide($remainder * 10, $divisor, $precision - 1) * .1;
49
+ }
50
+ @return ($quotient + $remainder) * $sign;
51
+ }