franzz/livetrail
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Migrate SASS

Browse Source
This commit is contained in:
franzz
2026-01-09 23:41:47 +01:00
parent d9bc89b7f6
commit ac9fcbe0ba
26 changed files with 1153 additions and 1124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/fa/_animated.scss
+85 -83
View File
@@ -1,95 +1,97 @@
@use "variables";
// animating icons
// --------------------------
.#{$fa-css-prefix}-beat {
animation-name: #{$fa-css-prefix}-beat;
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
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);
.#{variables.$fa-css-prefix}-beat {
animation-name: #{variables.$fa-css-prefix}-beat;
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, ease-in-out);
}
.#{$fa-css-prefix}-bounce {
animation-name: #{$fa-css-prefix}-bounce;
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
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));
.#{variables.$fa-css-prefix}-bounce {
animation-name: #{variables.$fa-css-prefix}-bounce;
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{variables.$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, 0s);
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));
.#{variables.$fa-css-prefix}-fade {
animation-name: #{variables.$fa-css-prefix}-fade;
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{variables.$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, 0s);
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));
.#{variables.$fa-css-prefix}-beat-fade {
animation-name: #{variables.$fa-css-prefix}-beat-fade;
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{variables.$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, 0s);
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);
.#{variables.$fa-css-prefix}-flip {
animation-name: #{variables.$fa-css-prefix}-flip;
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{variables.$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, 0s);
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, linear);
.#{variables.$fa-css-prefix}-shake {
animation-name: #{variables.$fa-css-prefix}-shake;
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, linear);
}
.#{$fa-css-prefix}-spin {
animation-name: #{$fa-css-prefix}-spin;
animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
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);
.#{variables.$fa-css-prefix}-spin {
animation-name: #{variables.$fa-css-prefix}-spin;
animation-delay: var(--#{variables.$fa-css-prefix}-animation-delay, 0s);
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 2s);
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, linear);
}
.#{$fa-css-prefix}-spin-reverse {
--#{$fa-css-prefix}-animation-direction: reverse;
.#{variables.$fa-css-prefix}-spin-reverse {
--#{variables.$fa-css-prefix}-animation-direction: reverse;
}
.#{$fa-css-prefix}-pulse,
.#{$fa-css-prefix}-spin-pulse {
animation-name: #{$fa-css-prefix}-spin;
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, steps(8));
.#{variables.$fa-css-prefix}-pulse,
.#{variables.$fa-css-prefix}-spin-pulse {
animation-name: #{variables.$fa-css-prefix}-spin;
animation-direction: var(--#{variables.$fa-css-prefix}-animation-direction, normal);
animation-duration: var(--#{variables.$fa-css-prefix}-animation-duration, 1s);
animation-iteration-count: var(--#{variables.$fa-css-prefix}-animation-iteration-count, infinite);
animation-timing-function: var(--#{variables.$fa-css-prefix}-animation-timing, steps(8));
}
// 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 {
.#{variables.$fa-css-prefix}-beat,
.#{variables.$fa-css-prefix}-bounce,
.#{variables.$fa-css-prefix}-fade,
.#{variables.$fa-css-prefix}-beat-fade,
.#{variables.$fa-css-prefix}-flip,
.#{variables.$fa-css-prefix}-pulse,
.#{variables.$fa-css-prefix}-shake,
.#{variables.$fa-css-prefix}-spin,
.#{variables.$fa-css-prefix}-spin-pulse {
animation-delay: -1ms;
animation-duration: 1ms;
animation-iteration-count: 1;
@@ -98,43 +100,43 @@
}
}
@keyframes #{$fa-css-prefix}-beat {
@keyframes #{variables.$fa-css-prefix}-beat {
0%, 90% { transform: scale(1); }
45% { transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25)); }
45% { transform: scale(var(--#{variables.$fa-css-prefix}-beat-scale, 1.25)); }
}
@keyframes #{$fa-css-prefix}-bounce {
@keyframes #{variables.$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)); }
10% { transform: scale(var(--#{variables.$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{variables.$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); }
30% { transform: scale(var(--#{variables.$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{variables.$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{variables.$fa-css-prefix}-bounce-height, -0.5em)); }
50% { transform: scale(var(--#{variables.$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{variables.$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); }
57% { transform: scale(1,1) translateY(var(--#{variables.$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 #{variables.$fa-css-prefix}-fade {
50% { opacity: var(--#{variables.$fa-css-prefix}-fade-opacity, 0.4); }
}
@keyframes #{$fa-css-prefix}-beat-fade {
@keyframes #{variables.$fa-css-prefix}-beat-fade {
0%, 100% {
opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4);
opacity: var(--#{variables.$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));
transform: scale(var(--#{variables.$fa-css-prefix}-beat-fade-scale, 1.125));
}
}
@keyframes #{$fa-css-prefix}-flip {
@keyframes #{variables.$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));
transform: rotate3d(var(--#{variables.$fa-css-prefix}-flip-x, 0), var(--#{variables.$fa-css-prefix}-flip-y, 1), var(--#{variables.$fa-css-prefix}-flip-z, 0), var(--#{variables.$fa-css-prefix}-flip-angle, -180deg));
}
}
@keyframes #{$fa-css-prefix}-shake {
@keyframes #{variables.$fa-css-prefix}-shake {
0% { transform: rotate(-15deg); }
4% { transform: rotate(15deg); }
8%, 24% { transform: rotate(-18deg); }
@@ -146,7 +148,7 @@
40%, 100% { transform: rotate(0deg); }
}
@keyframes #{$fa-css-prefix}-spin {
@keyframes #{variables.$fa-css-prefix}-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
src/styles/fa/_bordered-pulled.scss
+12 -10
View File
@@ -1,20 +1,22 @@
@use "variables";
// 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});
.#{variables.$fa-css-prefix}-border {
border-color: var(--#{variables.$fa-css-prefix}-border-color, #{variables.$fa-border-color});
border-radius: var(--#{variables.$fa-css-prefix}-border-radius, #{variables.$fa-border-radius});
border-style: var(--#{variables.$fa-css-prefix}-border-style, #{variables.$fa-border-style});
border-width: var(--#{variables.$fa-css-prefix}-border-width, #{variables.$fa-border-width});
padding: var(--#{variables.$fa-css-prefix}-border-padding, #{variables.$fa-border-padding});
}
.#{$fa-css-prefix}-pull-left {
.#{variables.$fa-css-prefix}-pull-left {
float: left;
margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
margin-right: var(--#{variables.$fa-css-prefix}-pull-margin, #{variables.$fa-pull-margin});
}
.#{$fa-css-prefix}-pull-right {
.#{variables.$fa-css-prefix}-pull-right {
float: right;
margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
margin-left: var(--#{variables.$fa-css-prefix}-pull-margin, #{variables.$fa-pull-margin});
}
src/styles/fa/_core.scss
+28 -25
View File
@@ -1,34 +1,37 @@
@use "mixins";
@use "variables";
// 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});
.#{variables.$fa-css-prefix} {
font-family: var(--#{variables.$fa-css-prefix}-style-family, '#{variables.$fa-style-family}');
font-weight: var(--#{variables.$fa-css-prefix}-style, #{variables.$fa-style});
}
.#{$fa-css-prefix},
.#{$fa-css-prefix}-classic,
.#{$fa-css-prefix}-sharp,
.#{variables.$fa-css-prefix},
.#{variables.$fa-css-prefix}-classic,
.#{variables.$fa-css-prefix}-sharp,
.fas,
.#{$fa-css-prefix}-solid,
.#{variables.$fa-css-prefix}-solid,
.far,
.#{$fa-css-prefix}-regular,
.#{variables.$fa-css-prefix}-regular,
.fasr,
.fal,
.#{$fa-css-prefix}-light,
.#{variables.$fa-css-prefix}-light,
.fasl,
.fat,
.#{$fa-css-prefix}-thin,
.#{variables.$fa-css-prefix}-thin,
.fast,
.fad,
.#{$fa-css-prefix}-duotone,
.#{variables.$fa-css-prefix}-duotone,
.fass,
.#{$fa-css-prefix}-sharp-solid,
.#{variables.$fa-css-prefix}-sharp-solid,
.fab,
.#{$fa-css-prefix}-brands {
.#{variables.$fa-css-prefix}-brands {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: var(--#{$fa-css-prefix}-display, #{$fa-display});
display: var(--#{variables.$fa-css-prefix}-display, #{variables.$fa-display});
font-style: normal;
font-variant: normal;
line-height: 1;
@@ -36,25 +39,25 @@
}
.fas,
.#{$fa-css-prefix}-classic,
.#{$fa-css-prefix}-solid,
.#{variables.$fa-css-prefix}-classic,
.#{variables.$fa-css-prefix}-solid,
.far,
.#{$fa-css-prefix}-regular,
.#{variables.$fa-css-prefix}-regular,
.fal,
.#{$fa-css-prefix}-light,
.#{variables.$fa-css-prefix}-light,
.fat,
.#{$fa-css-prefix}-thin {
.#{variables.$fa-css-prefix}-thin {
font-family: 'Font Awesome 6 Pro';
}
.fab,
.#{$fa-css-prefix}-brands {
.#{variables.$fa-css-prefix}-brands {
font-family: 'Font Awesome 6 Brands';
}
.fad,
.#{$fa-css-prefix}-classic.#{$fa-css-prefix}-duotone,
.#{$fa-css-prefix}-duotone {
.#{variables.$fa-css-prefix}-classic.#{variables.$fa-css-prefix}-duotone,
.#{variables.$fa-css-prefix}-duotone {
font-family: 'Font Awesome 6 Duotone';
}
@@ -62,14 +65,14 @@
.fasr,
.fasl,
.fast,
.#{$fa-css-prefix}-sharp {
.#{variables.$fa-css-prefix}-sharp {
font-family: 'Font Awesome 6 Sharp';
}
.fass,
.#{$fa-css-prefix}-sharp {
.#{variables.$fa-css-prefix}-sharp {
font-weight: 900;
}
%fa-icon {
@include fa-icon;
@include mixins.fa-icon;
}
src/styles/fa/_fixed-width.scss
+4 -2
View File
@@ -1,7 +1,9 @@
@use "variables";
// fixed-width icons
// -------------------------
.#{$fa-css-prefix}-fw {
.#{variables.$fa-css-prefix}-fw {
text-align: center;
width: $fa-fw-width;
width: variables.$fa-fw-width;
}
src/styles/fa/_functions.scss
+6 -4
View File
@@ -1,9 +1,11 @@
@use "sass:math";
@use "sass:string";
// functions
// --------------------------
// fa-content: convenience function used to set content property
@function fa-content($fa-var) {
@return unquote("\"#{ $fa-var }\"");
@return string.unquote("\"#{ $fa-var }\"");
}
// fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
@@ -32,9 +34,9 @@
// THE SOFTWARE.
@function fa-divide($dividend, $divisor, $precision: 10) {
$sign: if($dividend > 0 and $divisor > 0, 1, -1);
$dividend: abs($dividend);
$divisor: abs($divisor);
$sign: if(sass($dividend > 0 and $divisor > 0): 1; else: -1);
$dividend: math.abs($dividend);
$divisor: math.abs($divisor);
$quotient: 0;
$remainder: $dividend;
@if $dividend == 0 {
src/styles/fa/_list.scss
+7 -5
View File
@@ -1,18 +1,20 @@
@use "variables";
// icons in a list
// -------------------------
.#{$fa-css-prefix}-ul {
.#{variables.$fa-css-prefix}-ul {
list-style-type: none;
margin-left: var(--#{$fa-css-prefix}-li-margin, #{$fa-li-margin});
margin-left: var(--#{variables.$fa-css-prefix}-li-margin, #{variables.$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);
.#{variables.$fa-css-prefix}-li {
left: calc(var(--#{variables.$fa-css-prefix}-li-width, #{variables.$fa-li-width}) * -1);
position: absolute;
text-align: center;
width: var(--#{$fa-css-prefix}-li-width, #{$fa-li-width});
width: var(--#{variables.$fa-css-prefix}-li-width, #{variables.$fa-li-width});
line-height: inherit;
}
src/styles/fa/_mixins.scss
+18 -14
View File
@@ -1,3 +1,7 @@
@use "sass:string";
@use "functions";
@use "variables";
// mixins
// --------------------------
@@ -14,9 +18,9 @@
// sets relative font-sizing and alignment (in _sizing)
@mixin fa-size ($font-size) {
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
line-height: fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
vertical-align: (fa-divide(6, $font-size) - fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
font-size: functions.fa-divide($font-size, variables.$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: functions.fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
vertical-align: (functions.fa-divide(6, $font-size) - functions.fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
}
// only display content to screen readers
@@ -58,7 +62,7 @@
@extend .fa-solid;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
}
@@ -67,7 +71,7 @@
@extend .fa-regular;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
}
@@ -76,7 +80,7 @@
@extend .fa-light;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
}
@@ -85,7 +89,7 @@
@extend .fa-thin;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
}
@@ -94,10 +98,10 @@
@extend .fa-duotone;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
&::after {
content: unquote("\"#{ $fa-var }#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }#{ $fa-var }\"");
}
}
@@ -106,7 +110,7 @@
@extend .fa-sharp-solid;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
}
@@ -115,7 +119,7 @@
@extend .fa-sharp-regular;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
}
@@ -124,7 +128,7 @@
@extend .fa-sharp-light;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
}
@@ -133,7 +137,7 @@
@extend .fa-sharp-thin;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
}
@@ -142,7 +146,7 @@
@extend .fa-brands;
&::before {
content: unquote("\"#{ $fa-var }\"");
content: string.unquote("\"#{ $fa-var }\"");
}
}
src/styles/fa/_rotated-flipped.scss
+11 -9
View File
@@ -1,31 +1,33 @@
@use "variables";
// rotating + flipping icons
// -------------------------
.#{$fa-css-prefix}-rotate-90 {
.#{variables.$fa-css-prefix}-rotate-90 {
transform: rotate(90deg);
}
.#{$fa-css-prefix}-rotate-180 {
.#{variables.$fa-css-prefix}-rotate-180 {
transform: rotate(180deg);
}
.#{$fa-css-prefix}-rotate-270 {
.#{variables.$fa-css-prefix}-rotate-270 {
transform: rotate(270deg);
}
.#{$fa-css-prefix}-flip-horizontal {
.#{variables.$fa-css-prefix}-flip-horizontal {
transform: scale(-1, 1);
}
.#{$fa-css-prefix}-flip-vertical {
.#{variables.$fa-css-prefix}-flip-vertical {
transform: scale(1, -1);
}
.#{$fa-css-prefix}-flip-both,
.#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical {
.#{variables.$fa-css-prefix}-flip-both,
.#{variables.$fa-css-prefix}-flip-horizontal.#{variables.$fa-css-prefix}-flip-vertical {
transform: scale(-1, -1);
}
.#{$fa-css-prefix}-rotate-by {
transform: rotate(var(--#{$fa-css-prefix}-rotate-angle, none));
.#{variables.$fa-css-prefix}-rotate-by {
transform: rotate(var(--#{variables.$fa-css-prefix}-rotate-angle, none));
}
src/styles/fa/_sizing.scss
+7 -4
View File
@@ -1,16 +1,19 @@
@use "mixins";
@use "variables";
// sizing icons
// -------------------------
// literal magnification scale
@for $i from 1 through 10 {
.#{$fa-css-prefix}-#{$i}x {
.#{variables.$fa-css-prefix}-#{$i}x {
font-size: $i * 1em;
}
}
// step-based scale (with alignment)
@each $size, $value in $fa-sizes {
.#{$fa-css-prefix}-#{$size} {
@include fa-size($value);
@each $size, $value in variables.$fa-sizes {
.#{variables.$fa-css-prefix}-#{$size} {
@include mixins.fa-size($value);
}
}
src/styles/fa/_stacked.scss
+12 -10
View File
@@ -1,32 +1,34 @@
@use "variables";
// stacking icons
// -------------------------
.#{$fa-css-prefix}-stack {
.#{variables.$fa-css-prefix}-stack {
display: inline-block;
height: 2em;
line-height: 2em;
position: relative;
vertical-align: $fa-stack-vertical-align;
width: $fa-stack-width;
vertical-align: variables.$fa-stack-vertical-align;
width: variables.$fa-stack-width;
}
.#{$fa-css-prefix}-stack-1x,
.#{$fa-css-prefix}-stack-2x {
.#{variables.$fa-css-prefix}-stack-1x,
.#{variables.$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});
z-index: var(--#{variables.$fa-css-prefix}-stack-z-index, #{variables.$fa-stack-z-index});
}
.#{$fa-css-prefix}-stack-1x {
.#{variables.$fa-css-prefix}-stack-1x {
line-height: inherit;
}
.#{$fa-css-prefix}-stack-2x {
.#{variables.$fa-css-prefix}-stack-2x {
font-size: 2em;
}
.#{$fa-css-prefix}-inverse {
color: var(--#{$fa-css-prefix}-inverse, #{$fa-inverse});
.#{variables.$fa-css-prefix}-inverse {
color: var(--#{variables.$fa-css-prefix}-inverse, #{variables.$fa-inverse});
}
src/styles/fa/_variables.scss
+4 -2
View File
@@ -1,3 +1,5 @@
@use "functions";
// variables
// --------------------------
@@ -7,7 +9,7 @@ $fa-style-family : "Font Awesome 6 Pro" !default;
$fa-display : inline-block !default;
$fa-fw-width : fa-divide(20em, 16) !default;
$fa-fw-width : functions.fa-divide(20em, 16) !default;
$fa-inverse : #fff !default;
$fa-border-color : #eee !default;
@@ -34,7 +36,7 @@ $fa-sizes: (
) !default;
$fa-li-width : 2em !default;
$fa-li-margin : $fa-li-width * fa-divide(5, 4) !default;
$fa-li-margin : $fa-li-width * functions.fa-divide(5, 4) !default;
$fa-pull-margin : .3em !default;
src/styles/fa/solid.scss
+9 -8
View File
@@ -3,24 +3,25 @@
* License - https://fontawesome.com/license (Commercial License)
* Copyright 2023 Fonticons, Inc.
*/
@import 'functions';
@import 'variables';
@use 'functions';
@forward 'variables' show $fa-css-prefix, $fa-font-path;
@use 'variables';
:root, :host {
--#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
--#{$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ $fa-style-family }';
--#{variables.$fa-css-prefix}-style-family-classic: '#{ variables.$fa-style-family }';
--#{variables.$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ variables.$fa-style-family }';
}
@font-face {
font-family: 'Font Awesome 6 Pro';
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');
font-display: variables.$fa-font-display;
src: url('#{variables.$fa-font-path}/fa-solid-900.woff2') format('woff2'),
url('#{variables.$fa-font-path}/fa-solid-900.ttf') format('truetype');
}
.fas,
.#{$fa-css-prefix}-solid {
.#{variables.$fa-css-prefix}-solid {
font-weight: 900;
}