commit

parent 9dd217e1
// animating icons
// --------------------------
.@{fa-css-prefix}-beat {
animation-name: ~'@{fa-css-prefix}-beat';
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0)';
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)';
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)';
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)';
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, ease-in-out)';
}
.@{fa-css-prefix}-bounce {
animation-name: ~'@{fa-css-prefix}-beat';
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0)';
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)';
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)';
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)';
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1))';
}
.@{fa-css-prefix}-fade {
animation-name: ~'@{fa-css-prefix}-fade';
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0)';
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)';
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)';
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)';
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1))';
}
.@{fa-css-prefix}-beat-fade {
animation-name: ~'@{fa-css-prefix}-beat-fade';
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0)';
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)';
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)';
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)';
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1))';
}
.@{fa-css-prefix}-flip {
animation-name: ~'@{fa-css-prefix}-flip';
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0)';
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)';
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)';
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)';
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, ease-in-out)';
}
.@{fa-css-prefix}-shake {
animation-name: ~'@{fa-css-prefix}-shake';
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0)';
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)';
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 1s)';
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)';
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, ease-in-out)';
}
.@{fa-css-prefix}-spin {
animation-name: ~'@{fa-css-prefix}-spin';
animation-delay: ~'var(--@{fa-css-prefix}-animation-delay, 0)';
animation-direction: ~'var(--@{fa-css-prefix}-animation-direction, normal)';
animation-duration: ~'var(--@{fa-css-prefix}-animation-duration, 2s)';
animation-iteration-count: ~'var(--@{fa-css-prefix}-animation-iteration-count, infinite)';
animation-timing-function: ~'var(--@{fa-css-prefix}-animation-timing, linear)';
}
.@{fa-css-prefix}-spin-reverse {
--@{fa-css-prefix}-animation-direction: reverse;
}
// if agent or operating system prefers reduced motion, disable animations
// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
@media (prefers-reduced-motion: reduce) {
.@{fa-css-prefix}-beat,
.@{fa-css-prefix}-bounce,
.@{fa-css-prefix}-fade,
.@{fa-css-prefix}-beat-fade,
.@{fa-css-prefix}-flip,
.@{fa-css-prefix}-pulse,
.@{fa-css-prefix}-shake,
.@{fa-css-prefix}-spin,
.@{fa-css-prefix}-spin-pulse {
animation-delay: -1ms;
animation-duration: 1ms;
animation-iteration-count: 1;
transition-delay: 0s;
transition-duration: 0s;
}
}
@keyframes ~'@{fa-css-prefix}-beat' {
0%, 90% { transform: scale(1); }
45% { transform: ~'scale(var(--@{fa-css-prefix}-beat-scale, 1.25))'; }
}
@keyframes ~'@{fa-css-prefix}-bounce' {
0% { transform: scale(1,1) translateY(0); }
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); }
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))'; }
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); }
57% { transform: ~'scale(1,1) translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em))'; }
64% { transform: scale(1,1) translateY(0); }
100% { transform: scale(1,1) translateY(0); }
}
@keyframes ~'@{fa-css-prefix}-fade' {
50% { opacity: ~'var(--@{fa-css-prefix}-fade-opacity, 0.4)'; }
}
@keyframes ~'@{fa-css-prefix}-beat-fade' {
0%, 100% {
opacity: ~'var(--@{fa-css-prefix}-beat-fade-opacity, 0.4)';
transform: scale(1);
}
50% {
opacity: 1;
transform: ~'scale(var(--@{fa-css-prefix}-beat-fade-scale, 1.125))';
}
}
@keyframes ~'@{fa-css-prefix}-flip' {
50% {
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))';
}
}
@keyframes ~'@{fa-css-prefix}-shake' {
0% { transform: rotate(-15deg); }
4% { transform: rotate(15deg); }
8%, 24% { transform: rotate(-18deg); }
12%, 28% { transform: rotate(18deg); }
16% { transform: rotate(-22deg); }
20% { transform: rotate(22deg); }
32% { transform: rotate(-12deg); }
36% { transform: rotate(12deg); }
40%, 100% { transform: rotate(0deg); }
}
@keyframes ~'@{fa-css-prefix}-spin' {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
// bordered + pulled icons
// -------------------------
.@{fa-css-prefix}-border {
border-color: ~'var(--@{fa-css-prefix}-border-color, @{fa-border-color})';
border-radius: ~'var(--@{fa-css-prefix}-border-radius, @{fa-border-radius})';
border-style: ~'var(--@{fa-css-prefix}-border-style, @{fa-border-style})';
border-width: ~'var(--@{fa-css-prefix}-border-width, @{fa-border-width})';
padding: ~'var(--@{fa-css-prefix}-border-padding, @{fa-border-padding})';
}
.@{fa-css-prefix}-pull-left {
float: left;
margin-right: ~'var(--@{fa-css-prefix}-pull-margin, @{fa-pull-margin})';
}
.@{fa-css-prefix}-pull-right {
float: right;
margin-left: ~'var(--@{fa-css-prefix}-pull-margin, @{fa-pull-margin})';
}
// base icon class definition
// -------------------------
.@{fa-css-prefix} {
font-family: ~'var(--@{fa-css-prefix}-style-family, @{fa-style-family})';
font-weight: ~'var(--@{fa-css-prefix}-style, @{fa-style})';
}
.@{fa-css-prefix},
.fas,
.@{fa-css-prefix}--solid,
.far,
.@{fa-css-prefix}--regular,
.fal,
.@{fa-css-prefix}--light,
.fat,
.@{fa-css-prefix}--thin,
.fad,
.@{fa-css-prefix}--duotone,
.fab,
.@{fa-css-prefix}--brands {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: ~'var(--@{fa-css-prefix}-display, @{fa-display})';
font-style: normal;
font-variant: normal;
text-rendering: auto;
}
// fixed-width icons
// -------------------------
.@{fa-css-prefix}-fw {
text-align: center;
width: @fa-fw-width;
}
// specific icon class definition
// -------------------------
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
each(.fa-icons(), {
.@{fa-css-prefix}-@{key}::before { content: @value; }
});
// icons in a list
// -------------------------
.@{fa-css-prefix}-ul {
list-style-type: none;
margin-left: ~'var(--@{fa-css-prefix}-li-margin, @{fa-li-margin})';
padding-left: 0;
> li { position: relative; }
}
.@{fa-css-prefix}-li {
left: calc(~'var(--@{fa-css-prefix}-li-width, @{fa-li-width})' * -1);
position: absolute;
text-align: center;
width: ~'var(--@{fa-css-prefix}-li-width, @{fa-li-width})';
line-height: inherit;
}
// mixins
// --------------------------
// base rendering for an icon
.fa-icon() {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
}
// sets relative font-sizing and alignment (in _sizing)
.fa-size(@font-size) {
font-size: (@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
line-height: (1 / @font-size) * 1em; // sets the line-height of the icon back to that of it's parent
vertical-align: ((6 / @font-size) - (3 / 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
}
// only display content to screen readers
// see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
// see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
.fa-sr-only() {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
// use in conjunction with .sr-only to only display content when it's focused
.fa-sr-only-focusable() {
&:not(:focus) {
.fa-sr-only();
}
}
// convenience mixins for declaring pseudo-elements by CSS variable,
// including all style-specific font properties, and both the ::before
// and ::after elements in the duotone case.
.fa-icon-solid(@fa-var) {
.fa-icon;
.fa-solid;
&::before {
content: @fa-var;
}
}
.fa-icon-regular(@fa-var) {
.fa-icon;
.fa-regular;
&::before {
content: @fa-var;
}
}
.fa-icon-brands(@fa-var) {
.fa-icon;
.fa-brands;
&::before {
content: @fa-var;
}
}
// rotating + flipping icons
// -------------------------
.@{fa-css-prefix}-rotate-90 {
transform: rotate(90deg);
}
.@{fa-css-prefix}-rotate-180 {
transform: rotate(180deg);
}
.@{fa-css-prefix}-rotate-270 {
transform: rotate(270deg);
}
.@{fa-css-prefix}-flip-horizontal {
transform: scale(-1, 1);
}
.@{fa-css-prefix}-flip-vertical {
transform: scale(1, -1);
}
.@{fa-css-prefix}-flip-both,
.@{fa-css-prefix}-flip-horizontal.@{fa-css-prefix}-flip-vertical {
transform: scale(-1, -1);
}
.@{fa-css-prefix}-rotate-by {
transform: rotate(~'var(--@{fa-css-prefix}-rotate-angle, none)');
}
// screen-reader utilities
// -------------------------
// only display content to screen readers
.sr-only,
.@{fa-css-prefix}-sr-only {
.fa-sr-only();
}
// use in conjunction with .sr-only to only display content when it's focused
.sr-only-focusable,
.@{fa-css-prefix}-sr-only-focusable {
.fa-sr-only-focusable();
}
// sizing icons
// -------------------------
// literal magnification scale
.sizes-literal(@factor) when (@factor > 0) {
.sizes-literal((@factor - 1));
.@{fa-css-prefix}-@{factor}x {
font-size: (@factor * 1em);
}
}
.sizes-literal(10);
// step-based scale (with alignment)
each(.fa-sizes(), {
.@{fa-css-prefix}-@{key} {
.fa-size(@value);
}
});
// stacking icons
// -------------------------
.@{fa-css-prefix}-stack {
display: inline-block;
height: 2em;
line-height: 2em;
position: relative;
vertical-align: @fa-stack-vertical-align;
width: @fa-stack-width;
}
.@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x {
left: 0;
position: absolute;
text-align: center;
width: 100%;
z-index: ~'var(--@{fa-css-prefix}-stack-z-index, @{fa-stack-z-index})';
}
.@{fa-css-prefix}-stack-1x {
line-height: inherit;
}
.@{fa-css-prefix}-stack-2x {
font-size: 2em;
}
.@{fa-css-prefix}-inverse {
color: ~'var(--@{fa-css-prefix}-inverse, @{fa-inverse})';
}
/*!
* Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2022 Fonticons, Inc.
*/
@import "_variables.less";
:root, :host {
--@{fa-css-prefix}-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
}
@font-face {
font-family: 'Font Awesome 6 Brands';
font-style: normal;
font-weight: 400;
font-display: @fa-font-display;
src: url('@{fa-font-path}/fa-brands-400.woff2') format('woff2'),
url('@{fa-font-path}/fa-brands-400.ttf') format('truetype');
}
.fab,
.@{fa-css-prefix}-brands {
font-family: 'Font Awesome 6 Brands';
font-weight: 400;
}
each(.fa-brand-icons(), {
.@{fa-css-prefix}-@{key}:before { content: @value; }
});
/*!
* Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2022 Fonticons, Inc.
*/
// Font Awesome core compile (Web Fonts-based)
// -------------------------
@import "_variables.less";
@import "_mixins.less";
@import "_core.less";
@import "_sizing.less";
@import "_fixed-width.less";
@import "_list.less";
@import "_bordered-pulled.less";
@import "_animated.less";
@import "_rotated-flipped.less";
@import "_stacked.less";
@import "_icons.less";
@import "_screen-reader.less";
/*!
* Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2022 Fonticons, Inc.
*/
@import "_variables.less";
:root, :host {
--@{fa-css-prefix}-font-regular: normal 400 1em/1 "@{fa-style-family}";
}
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 400;
font-display: @fa-font-display;
src: url('@{fa-font-path}/fa-regular-400.woff2') format('woff2'),
url('@{fa-font-path}/fa-regular-400.ttf') format('truetype');
}
.far,
.@{fa-css-prefix}-regular {
font-family: 'Font Awesome 6 Free';
font-weight: 400;
}
/*!
* Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2022 Fonticons, Inc.
*/
@import "_variables.less";
:root, :host {
--@{fa-css-prefix}-font-solid: normal 900 1em/1 "@{fa-style-family}";
}
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 900;
font-display: @fa-font-display;
src: url('@{fa-font-path}/fa-solid-900.woff2') format('woff2'),
url('@{fa-font-path}/fa-solid-900.ttf') format('truetype');
}
.fas,
.@{fa-css-prefix}-solid {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
}
/*!
* Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2022 Fonticons, Inc.
*/
// V4 shims compile (Web Fonts-based)
// -------------------------
@import '_variables.less';
@import '_shims.less';
area-chart:
name: chart-area
arrow-circle-o-down:
name: circle-down
prefix: far
arrow-circle-o-left:
name: circle-left
prefix: far
arrow-circle-o-right:
name: circle-right
prefix: far
arrow-circle-o-up:
name: circle-up
prefix: far
arrows:
name: up-down-left-right
arrows-alt:
name: maximize
arrows-h:
name: left-right
arrows-v:
name: up-down
bar-chart:
name: chart-column
bitbucket-square:
name: bitbucket
prefix: fab
calendar:
name: calendar-days
calendar-o:
name: calendar
prefix: far
caret-square-o-down:
name: square-caret-down
prefix: far
caret-square-o-left:
name: square-caret-left
prefix: far
caret-square-o-right:
name: square-caret-right
prefix: far
caret-square-o-up:
name: square-caret-up
prefix: far
cc:
name: closed-captioning
prefix: far
chain-broken:
name: link-slash
circle-o-notch:
name: circle-notch
circle-thin:
name: circle
prefix: far
clipboard:
name: paste
clone:
prefix: far
cloud-download:
name: cloud-arrow-down
cloud-upload:
name: cloud-arrow-up
code-fork:
name: code-branch
comment-alt:
name: comment-dots
prefix: far
commenting:
name: comment-dots
compass:
prefix: far
compress:
name: down-left-and-up-right-to-center
copyright:
prefix: far
creative-commons:
prefix: fab
credit-card:
prefix: far
credit-card-alt:
name: credit-card
cutlery:
name: utensils
diamond:
name: gem
prefix: far
eercast:
name: sellcast
prefix: fab
eur:
name: euro-sign
exchange:
name: right-left
expand:
name: up-right-and-down-left-from-center
external-link:
name: up-right-from-square
external-link-square:
name: square-up-right
eye:
prefix: far
eye-dropper:
name: eye-dropper
prefix: far
eye-slash:
prefix: far
eyedropper:
name: eye-dropper
facebook:
name: facebook-f
prefix: fab
facebook-official:
name: facebook
prefix: fab
file-text:
name: file-lines
files-o:
name: copy
prefix: far
floppy-o:
name: floppy-disk
prefix: far
gbp:
name: sterling-sign
glass:
name: martini-glass-empty
globe:
name: earth-americas
google-plus:
name: google-plus-g
prefix: fab
google-plus-circle:
name: google-plus
prefix: fab
google-plus-official:
name: google-plus
prefix: fab
hand-o-down:
name: hand-point-down
prefix: far
hand-o-left:
name: hand-point-left
prefix: far
hand-o-right:
name: hand-point-right
prefix: far
hand-o-up:
name: hand-point-up
prefix: far
header:
name: heading
home:
name: house
hourglass-half:
name: hourglass
hourglass-o:
name: hourglass-empty
id-badge:
prefix: far
ils:
name: shekel-sign
inr:
name: indian-rupee-sign
jpy:
name: yen-sign
krw:
name: won-sign
level-down:
name: turn-down
level-up:
name: turn-up
line-chart:
name: chart-line
linkedin:
name: linkedin-in
prefix: fab
linkedin-square:
name: linkedin
prefix: fab
list-alt:
name: rectangle-list
prefix: far
long-arrow-down:
name: down-long
long-arrow-left:
name: left-long
long-arrow-right:
name: right-long
long-arrow-up:
name: up-long
magic:
name: wand-magic-sparkles
map-marker:
name: location-dot
meanpath:
name: font-awesome
prefix: fab
mobile:
name: mobile-screen-button
money:
name: money-bill-1
object-group:
prefix: far
object-ungroup:
prefix: far
paste:
prefix: far
pencil-square:
name: square-pen
pencil-square-o:
name: pen-to-square
prefix: far
picture:
name: image
pie-chart:
name: chart-pie
refresh:
name: arrows-rotate
registered:
prefix: far
repeat:
name: arrow-rotate-right
rub:
name: ruble-sign
share-square-o:
name: share-from-square
sign-in:
name: right-to-bracket
sign-out:
name: right-from-bracket
snapchat-ghost:
name: snapchat
prefix: fab
sort-alpha-asc:
name: arrow-down-a-z
sort-alpha-desc:
name: arrow-down-z-a
sort-amount-asc:
name: arrow-down-short-wide
sort-amount-desc:
name: arrow-down-wide-short
sort-asc:
name: sort-up
sort-desc:
name: sort-down
sort-numeric-asc:
name: arrow-down-1-9
sort-numeric-desc:
name: arrow-down-9-1
star-half-empty:
name: star-half
star-half-full:
name: star-half
star-half-o:
name: star-half-stroke
prefix: far
support:
name: life-ring
prefix: far
tablet:
name: tablet-screen-button
tachometer:
name: gauge-high
tasks:
name: bars-progress
television:
name: tv
thumb-tack:
name: thumbtack
thumbs-o-down:
name: thumbs-down
prefix: far
thumbs-o-up:
name: thumbs-up
prefix: far
transgender:
name: mars-and-venus
transgender-alt:
name: transgender
trash:
name: trash-can
trash-o:
name: trash-can
prefix: far
try:
name: turkish-lira-sign
unlock-alt:
name: unlock
usd:
name: dollar-sign
user-circle-o:
name: circle-user
prefix: far
video-camera:
name: video
vimeo:
name: vimeo-v
prefix: fab
volume-control-phone:
name: phone-volume
wheelchair-alt:
name: accessible-icon
prefix: fab
window-maximize:
prefix: far
window-restore:
prefix: far
youtube-play:
name: youtube
prefix: fab
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment