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.
- checksums.yaml +4 -4
- data/README.md +22 -66
- data/assets/fonts/font-awesome/fa-brands-400.ttf +0 -0
- data/assets/fonts/font-awesome/fa-brands-400.woff2 +0 -0
- data/assets/fonts/font-awesome/fa-regular-400.ttf +0 -0
- data/assets/fonts/font-awesome/fa-regular-400.woff2 +0 -0
- data/assets/fonts/font-awesome/fa-solid-900.ttf +0 -0
- data/assets/fonts/font-awesome/fa-solid-900.woff2 +0 -0
- data/assets/stylesheets/_brands.scss +33 -0
- data/assets/stylesheets/_font-awesome.scss +20 -4
- data/assets/stylesheets/_regular.scss +27 -0
- data/assets/stylesheets/_solid.scss +26 -0
- data/assets/stylesheets/_v4-shims.scss +8 -3
- data/assets/stylesheets/font-awesome/_animated.scss +142 -9
- data/assets/stylesheets/font-awesome/_bordered-pulled.scss +13 -13
- data/assets/stylesheets/font-awesome/_core.scss +16 -4
- data/assets/stylesheets/font-awesome/_fixed-width.scss +2 -1
- data/assets/stylesheets/font-awesome/_functions.scss +51 -0
- data/assets/stylesheets/font-awesome/_icons.scss +6 -1448
- data/assets/stylesheets/font-awesome/_list.scss +4 -4
- data/assets/stylesheets/font-awesome/_mixins.scss +51 -34
- data/assets/stylesheets/font-awesome/_rotated-flipped.scss +25 -18
- data/assets/stylesheets/font-awesome/_screen-reader.scss +12 -3
- data/assets/stylesheets/font-awesome/_shims.scss +467 -506
- data/assets/stylesheets/font-awesome/_sizing.scss +16 -0
- data/assets/stylesheets/font-awesome/_stacked.scss +5 -4
- data/assets/stylesheets/font-awesome/_variables.scss +3664 -797
- data/font-awesome-sass.gemspec +1 -2
- data/lib/font-awesome-sass.rb +0 -18
- data/lib/font_awesome/sass/rails/engine.rb +1 -1
- data/lib/font_awesome/sass/rails/helpers.rb +1 -0
- data/lib/font_awesome/sass/version.rb +1 -1
- metadata +10 -32
- data/assets/fonts/font-awesome/fa-brands-400.eot +0 -0
- data/assets/fonts/font-awesome/fa-brands-400.svg +0 -3633
- data/assets/fonts/font-awesome/fa-brands-400.woff +0 -0
- data/assets/fonts/font-awesome/fa-regular-400.eot +0 -0
- data/assets/fonts/font-awesome/fa-regular-400.svg +0 -803
- data/assets/fonts/font-awesome/fa-regular-400.woff +0 -0
- data/assets/fonts/font-awesome/fa-solid-900.eot +0 -0
- data/assets/fonts/font-awesome/fa-solid-900.svg +0 -5000
- data/assets/fonts/font-awesome/fa-solid-900.woff +0 -0
- data/assets/stylesheets/_font-awesome-compass.scss +0 -5
- data/assets/stylesheets/_font-awesome-sprockets.scss +0 -5
- data/assets/stylesheets/font-awesome/_larger.scss +0 -23
- data/assets/stylesheets/font-awesome/_path.scss +0 -56
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e4b21cce3cddb7dccf87c457ec1999d3f4cfd44ab2680b240c692a19d8fa21ce
|
4
|
+
data.tar.gz: 43d9205df33a07a77eff8605491995c99d18a764157f256286a00c454bca5d3d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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 [
|
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
|
-
|
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
|
-
|
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
|
-
|
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', '~>
|
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
|
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
|
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
|
-
###
|
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
|
-
|
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.
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -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
|
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/
|
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
|
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
|
-
|
6
|
-
|
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
|
-
//
|
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
|
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
|
-
|
9
|
-
|
116
|
+
@keyframes #{$fa-css-prefix}-fade {
|
117
|
+
50% { opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4); }
|
10
118
|
}
|
11
119
|
|
12
|
-
@keyframes fa-
|
13
|
-
0% {
|
14
|
-
|
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
|
-
|
18
|
-
|
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
|
-
//
|
1
|
+
// bordered + pulled icons
|
2
2
|
// -------------------------
|
3
3
|
|
4
4
|
.#{$fa-css-prefix}-border {
|
5
|
-
border:
|
6
|
-
border-radius:
|
7
|
-
|
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 {
|
11
|
-
|
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
|
-
|
15
|
-
|
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
|
-
//
|
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
|
-
.
|
19
|
+
.fa-duotone,
|
20
|
+
.fab,
|
21
|
+
.fa-brands {
|
10
22
|
-moz-osx-font-smoothing: grayscale;
|
11
23
|
-webkit-font-smoothing: antialiased;
|
12
|
-
display:
|
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 {
|
@@ -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
|
+
}
|