mirror of
https://github.com/Superredstone/patrickcanal.it.git
synced 2026-10-03 15:28:51 +02:00
feat: first rewrite commit
This commit is contained in:
@@ -0,0 +1,727 @@
|
||||
// animating icons
|
||||
// --------------------------
|
||||
@use 'variables' as v;
|
||||
|
||||
.#{v.$css-prefix}-beat {
|
||||
animation-name: #{v.$css-prefix}-beat;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-in-out);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-bounce {
|
||||
animation-name: #{v.$css-prefix}-bounce;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-fade {
|
||||
animation-name: #{v.$css-prefix}-fade;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-in-out);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-beat-fade {
|
||||
animation-name: #{v.$css-prefix}-beat-fade;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-in-out);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-flip {
|
||||
animation-name: #{v.$css-prefix}-flip;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 1.5s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-in-out);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-flip-360 {
|
||||
animation-name: #{v.$css-prefix}-flip-360;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-in-out);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-shake {
|
||||
animation-name: #{v.$css-prefix}-shake;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 0.75s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-in-out);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-spin {
|
||||
animation-name: #{v.$css-prefix}-spin;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 2s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, linear);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-spin-reverse {
|
||||
--#{v.$css-prefix}-animation-direction: reverse;
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-pulse,
|
||||
.#{v.$css-prefix}-spin-pulse {
|
||||
animation-name: #{v.$css-prefix}-spin;
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, steps(8));
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-spin-snap {
|
||||
animation-name: #{v.$css-prefix}-spin-snap;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 3s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, linear);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-spin-snap-4 {
|
||||
animation-name: #{v.$css-prefix}-spin-snap-4;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 2.4s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, linear);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-spin-snap-8 {
|
||||
animation-name: #{v.$css-prefix}-spin-snap-8;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 4s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, linear);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-buzz {
|
||||
animation-name: #{v.$css-prefix}-buzz;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 0.6s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, linear);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-wag {
|
||||
animation-name: #{v.$css-prefix}-wag;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 0.9s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-out);
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-float {
|
||||
animation-name: #{v.$css-prefix}-float;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 3s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-in-out);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-swing {
|
||||
animation-name: #{v.$css-prefix}-swing;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 1.2s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-out);
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-jello {
|
||||
animation-name: #{v.$css-prefix}-jello;
|
||||
animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s);
|
||||
animation-direction: var(--#{v.$css-prefix}-animation-direction, normal);
|
||||
animation-duration: var(--#{v.$css-prefix}-animation-duration, 0.9s);
|
||||
animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-out);
|
||||
}
|
||||
|
||||
// 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) {
|
||||
.#{v.$css-prefix}-beat,
|
||||
.#{v.$css-prefix}-bounce,
|
||||
.#{v.$css-prefix}-fade,
|
||||
.#{v.$css-prefix}-beat-fade,
|
||||
.#{v.$css-prefix}-flip,
|
||||
.#{v.$css-prefix}-flip-360,
|
||||
.#{v.$css-prefix}-pulse,
|
||||
.#{v.$css-prefix}-shake,
|
||||
.#{v.$css-prefix}-spin,
|
||||
.#{v.$css-prefix}-spin-pulse,
|
||||
.#{v.$css-prefix}-buzz,
|
||||
.#{v.$css-prefix}-float,
|
||||
.#{v.$css-prefix}-jello,
|
||||
.#{v.$css-prefix}-spin-snap,
|
||||
.#{v.$css-prefix}-spin-snap-4,
|
||||
.#{v.$css-prefix}-spin-snap-8,
|
||||
.#{v.$css-prefix}-swing,
|
||||
.#{v.$css-prefix}-wag {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{v.$css-prefix}-beat {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
25% {
|
||||
transform: scale(calc(1.25 * var(--#{v.$css-prefix}-beat-scale, 1.25)));
|
||||
}
|
||||
45% {
|
||||
transform: scale(calc(1.22 * var(--#{v.$css-prefix}-beat-scale, 1.22)));
|
||||
}
|
||||
65% {
|
||||
transform: scale(calc(1.25 * var(--#{v.$css-prefix}-beat-scale, 1.25)));
|
||||
}
|
||||
90% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{v.$css-prefix}-bounce {
|
||||
0% {
|
||||
transform: scale(1, 1) translateY(0);
|
||||
animation-timing-function: var(--#{v.$css-prefix}-animation-timing);
|
||||
}
|
||||
14% {
|
||||
transform: scale(var(--#{v.$css-prefix}-bounce-start-scale-x, 1.06), var(--#{v.$css-prefix}-bounce-start-scale-y, 0.94))
|
||||
translateY(var(--#{v.$css-prefix}-bounce-anticipation, 3px));
|
||||
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
|
||||
}
|
||||
32% {
|
||||
transform: scale(var(--#{v.$css-prefix}-bounce-jump-scale-x, 0.94), var(--#{v.$css-prefix}-bounce-jump-scale-y, 1.12))
|
||||
translateY(calc(-1 * var(--#{v.$css-prefix}-bounce-height, 0.5em)));
|
||||
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
|
||||
}
|
||||
52% {
|
||||
transform: scale(1, 1) translateY(calc(-1 * var(--#{v.$css-prefix}-bounce-height, 0.5em) * 1.1));
|
||||
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
|
||||
}
|
||||
70% {
|
||||
transform: scale(var(--#{v.$css-prefix}-bounce-land-scale-x, 1.06), var(--#{v.$css-prefix}-bounce-land-scale-y, 0.92)) translateY(0);
|
||||
animation-timing-function: cubic-bezier(0.33, 0.33, 0.66, 1);
|
||||
}
|
||||
85% {
|
||||
transform: scale(0.98, 1.04) translateY(calc(-2px * var(--#{v.$css-prefix}-bounce-rebound, 1)));
|
||||
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1, 1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{v.$css-prefix}-fade {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1);
|
||||
}
|
||||
40% {
|
||||
opacity: var(--#{v.$css-prefix}-fade-opacity, 0.4);
|
||||
transform: scale(0.98);
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{v.$css-prefix}-beat-fade {
|
||||
0% {
|
||||
opacity: var(--#{v.$css-prefix}-beat-fade-opacity, 0.4);
|
||||
transform: scale(1);
|
||||
animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1);
|
||||
}
|
||||
25% {
|
||||
opacity: calc(var(--#{v.$css-prefix}-beat-fade-opacity, 0.4) + 0.4);
|
||||
transform: scale(var(--#{v.$css-prefix}-beat-fade-scale, 1.28));
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
|
||||
}
|
||||
45% {
|
||||
opacity: 1;
|
||||
transform: scale(var(--#{v.$css-prefix}-beat-fade-scale, 1.25));
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
65% {
|
||||
opacity: calc(var(--#{v.$css-prefix}-beat-fade-opacity, 0.4) + 0.4);
|
||||
transform: scale(var(--#{v.$css-prefix}-beat-fade-scale, 1.28));
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: var(--#{v.$css-prefix}-beat-fade-opacity, 0.4);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{v.$css-prefix}-flip {
|
||||
0% {
|
||||
transform: perspective(2em) scale(1) rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), 0deg);
|
||||
animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1);
|
||||
}
|
||||
8% {
|
||||
transform: perspective(2em) scale(var(--#{v.$css-prefix}-flip-anticipation-scale, 0.95))
|
||||
rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), 0deg);
|
||||
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
|
||||
}
|
||||
35% {
|
||||
transform: perspective(2em) scale(1)
|
||||
rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), calc(var(--#{v.$css-prefix}-flip-angle, -360deg) * 0.6));
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
65% {
|
||||
transform: perspective(2em) scale(1)
|
||||
rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), calc(var(--#{v.$css-prefix}-flip-angle, -360deg) * 0.5));
|
||||
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
|
||||
}
|
||||
92% {
|
||||
transform: perspective(2em) scale(1)
|
||||
rotate3d(
|
||||
var(--#{v.$css-prefix}-flip-x, 0),
|
||||
var(--#{v.$css-prefix}-flip-y, 1),
|
||||
var(--#{v.$css-prefix}-flip-z, 0),
|
||||
calc(var(--#{v.$css-prefix}-flip-angle, -360deg) * var(--#{v.$css-prefix}-flip-overshoot, 1.04))
|
||||
);
|
||||
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 1);
|
||||
}
|
||||
100% {
|
||||
transform: perspective(2em) scale(1)
|
||||
rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), var(--#{v.$css-prefix}-flip-angle, -360deg));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{v.$css-prefix}-flip-360 {
|
||||
0% {
|
||||
transform: perspective(2em) scale(1) rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), 0deg);
|
||||
animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1);
|
||||
}
|
||||
8% {
|
||||
transform: perspective(2em) scale(var(--#{v.$css-prefix}-flip-anticipation-scale, 0.95)) rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), 0deg);
|
||||
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
|
||||
}
|
||||
50% {
|
||||
transform: perspective(2em) scale(1) rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), calc(var(--#{v.$css-prefix}-flip-angle, -360deg) * 0.6));
|
||||
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
|
||||
}
|
||||
80% {
|
||||
transform: perspective(2em) scale(1) rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), calc(var(--#{v.$css-prefix}-flip-angle, -360deg) * var(--#{v.$css-prefix}-flip-overshoot, 1.04)));
|
||||
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 1);
|
||||
}
|
||||
100% {
|
||||
transform: perspective(2em) scale(1) rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), var(--#{v.$css-prefix}-flip-angle, -360deg));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{v.$css-prefix}-shake {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
|
||||
}
|
||||
8% {
|
||||
transform: rotate(35deg) translateX(1px);
|
||||
animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
|
||||
}
|
||||
20% {
|
||||
transform: rotate(-22deg) translateX(-1px);
|
||||
animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
|
||||
}
|
||||
35% {
|
||||
transform: rotate(15deg) translateX(1px);
|
||||
animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-9deg);
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
|
||||
}
|
||||
65% {
|
||||
transform: rotate(5deg);
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
|
||||
}
|
||||
78% {
|
||||
transform: rotate(-3deg);
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
|
||||
}
|
||||
90% {
|
||||
transform: rotate(1deg);
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{v.$css-prefix}-spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes #{v.$css-prefix}-spin-snap {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
12% {
|
||||
transform: rotate(60deg);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
16.67% {
|
||||
transform: rotate(60deg);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
28.67% {
|
||||
transform: rotate(120deg);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
33.33% {
|
||||
transform: rotate(120deg);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
45.33% {
|
||||
transform: rotate(180deg);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
62% {
|
||||
transform: rotate(240deg);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
66.67% {
|
||||
transform: rotate(240deg);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
78.67% {
|
||||
transform: rotate(300deg);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
83.33% {
|
||||
transform: rotate(300deg);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
95.33% {
|
||||
transform: rotate(360deg);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{v.$css-prefix}-spin-snap-4 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
15% {
|
||||
transform: rotate(90deg);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(90deg);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(180deg);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
65% {
|
||||
transform: rotate(270deg);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(270deg);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
90% {
|
||||
transform: rotate(360deg);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{v.$css-prefix}-spin-snap-8 {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
9% {
|
||||
transform: rotate(45deg);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
12.5% {
|
||||
transform: rotate(45deg);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
21.5% {
|
||||
transform: rotate(90deg);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(90deg);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
34% {
|
||||
transform: rotate(135deg);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
37.5% {
|
||||
transform: rotate(135deg);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
46.5% {
|
||||
transform: rotate(180deg);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(180deg);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
59% {
|
||||
transform: rotate(225deg);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
62.5% {
|
||||
transform: rotate(225deg);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
71.5% {
|
||||
transform: rotate(270deg);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(270deg);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
84% {
|
||||
transform: rotate(315deg);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
87.5% {
|
||||
transform: rotate(315deg);
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
96.5% {
|
||||
transform: rotate(360deg);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{v.$css-prefix}-buzz {
|
||||
0% {
|
||||
transform: translateX(0) rotate(0deg);
|
||||
animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1);
|
||||
}
|
||||
5% {
|
||||
transform: translateX(var(--#{v.$css-prefix}-buzz-distance, 4px)) rotate(0.5deg);
|
||||
}
|
||||
10% {
|
||||
transform: translateX(calc(-1 * var(--#{v.$css-prefix}-buzz-distance, 4px))) rotate(-0.5deg);
|
||||
}
|
||||
15% {
|
||||
transform: translateX(var(--#{v.$css-prefix}-buzz-distance, 4px)) rotate(0.3deg);
|
||||
}
|
||||
20% {
|
||||
transform: translateX(calc(-1 * var(--#{v.$css-prefix}-buzz-distance, 4px))) rotate(-0.3deg);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(calc(var(--#{v.$css-prefix}-buzz-distance, 4px) * 0.7)) rotate(0.2deg);
|
||||
}
|
||||
30% {
|
||||
transform: translateX(calc(-1 * var(--#{v.$css-prefix}-buzz-distance, 4px) * 0.7)) rotate(-0.2deg);
|
||||
}
|
||||
35% {
|
||||
transform: translateX(calc(var(--#{v.$css-prefix}-buzz-distance, 4px) * 0.4)) rotate(0.1deg);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(0) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{v.$css-prefix}-wag {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1);
|
||||
}
|
||||
12% {
|
||||
transform: rotate(var(--#{v.$css-prefix}-wag-angle, 12deg));
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
24% {
|
||||
transform: rotate(2deg);
|
||||
animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1);
|
||||
}
|
||||
36% {
|
||||
transform: rotate(calc(var(--#{v.$css-prefix}-wag-angle, 12deg) * 0.85));
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
48% {
|
||||
transform: rotate(1deg);
|
||||
animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1);
|
||||
}
|
||||
58% {
|
||||
transform: rotate(calc(var(--#{v.$css-prefix}-wag-angle, 12deg) * 0.6));
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
68% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{v.$css-prefix}-float {
|
||||
0% {
|
||||
transform: translateY(0) translateX(0) rotate(0deg)
|
||||
scale(var(--#{v.$css-prefix}-float-squash-x, 1.02), var(--#{v.$css-prefix}-float-squash-y, 0.98));
|
||||
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
|
||||
}
|
||||
15% {
|
||||
transform: translateY(calc(-0.4 * var(--#{v.$css-prefix}-float-height, 6px))) translateX(var(--#{v.$css-prefix}-float-drift, 1px))
|
||||
rotate(var(--#{v.$css-prefix}-float-tilt, 1deg)) scale(1, 1);
|
||||
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
|
||||
}
|
||||
35% {
|
||||
transform: translateY(calc(-1 * var(--#{v.$css-prefix}-float-height, 6px))) translateX(0) rotate(0deg)
|
||||
scale(var(--#{v.$css-prefix}-float-stretch-x, 0.98), var(--#{v.$css-prefix}-float-stretch-y, 1.03));
|
||||
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(calc(-0.92 * var(--#{v.$css-prefix}-float-height, 6px))) translateX(calc(-0.5 * var(--#{v.$css-prefix}-float-drift, 1px)))
|
||||
rotate(calc(-0.5 * var(--#{v.$css-prefix}-float-tilt, 1deg))) scale(0.995, 1.01);
|
||||
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
|
||||
}
|
||||
70% {
|
||||
transform: translateY(calc(-0.3 * var(--#{v.$css-prefix}-float-height, 6px))) translateX(calc(-1 * var(--#{v.$css-prefix}-float-drift, 1px)))
|
||||
rotate(calc(-1 * var(--#{v.$css-prefix}-float-tilt, 1deg))) scale(1, 1);
|
||||
animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
|
||||
}
|
||||
90% {
|
||||
transform: translateY(calc(0.05 * var(--#{v.$css-prefix}-float-height, 6px))) translateX(0) rotate(0deg)
|
||||
scale(var(--#{v.$css-prefix}-float-squash-x, 1.02), var(--#{v.$css-prefix}-float-squash-y, 0.98));
|
||||
animation-timing-function: cubic-bezier(0.33, 0, 0.66, 1);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0) translateX(0) rotate(0deg)
|
||||
scale(var(--#{v.$css-prefix}-float-squash-x, 1.02), var(--#{v.$css-prefix}-float-squash-y, 0.98));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{v.$css-prefix}-swing {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
|
||||
}
|
||||
8% {
|
||||
transform: rotate(var(--#{v.$css-prefix}-swing-angle, 22deg));
|
||||
animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
|
||||
}
|
||||
18% {
|
||||
transform: rotate(calc(-1 * var(--#{v.$css-prefix}-swing-angle, 22deg) * 0.85));
|
||||
animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
|
||||
}
|
||||
28% {
|
||||
transform: rotate(calc(var(--#{v.$css-prefix}-swing-angle, 22deg) * 0.65));
|
||||
animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
|
||||
}
|
||||
38% {
|
||||
transform: rotate(calc(-1 * var(--#{v.$css-prefix}-swing-angle, 22deg) * 0.45));
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
|
||||
}
|
||||
48% {
|
||||
transform: rotate(calc(var(--#{v.$css-prefix}-swing-angle, 22deg) * 0.25));
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
|
||||
}
|
||||
56% {
|
||||
transform: rotate(calc(-1 * var(--#{v.$css-prefix}-swing-angle, 22deg) * 0.1));
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
|
||||
}
|
||||
64% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes #{v.$css-prefix}-jello {
|
||||
0% {
|
||||
transform: scale(1, 1);
|
||||
animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1);
|
||||
}
|
||||
12% {
|
||||
transform: scale(var(--#{v.$css-prefix}-jello-scale-x, 1.15), calc(2 - var(--#{v.$css-prefix}-jello-scale-x, 1.15)));
|
||||
animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
|
||||
}
|
||||
24% {
|
||||
transform: scale(calc(2 - var(--#{v.$css-prefix}-jello-scale-y, 1.12)), var(--#{v.$css-prefix}-jello-scale-y, 1.12));
|
||||
animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1);
|
||||
}
|
||||
36% {
|
||||
transform: scale(
|
||||
calc(1 + (var(--#{v.$css-prefix}-jello-scale-x, 1.15) - 1) * 0.5),
|
||||
calc(2 - (1 + (var(--#{v.$css-prefix}-jello-scale-x, 1.15) - 1) * 0.5))
|
||||
);
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
|
||||
}
|
||||
48% {
|
||||
transform: scale(
|
||||
calc(2 - (1 + (var(--#{v.$css-prefix}-jello-scale-y, 1.12) - 1) * 0.3)),
|
||||
calc(1 + (var(--#{v.$css-prefix}-jello-scale-y, 1.12) - 1) * 0.3)
|
||||
);
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
|
||||
}
|
||||
58% {
|
||||
transform: scale(1.02, 0.98);
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
68% {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
// bordered icons
|
||||
// -------------------------
|
||||
@use 'variables' as v;
|
||||
|
||||
/* Heads Up: Bordered Icons will not be supported in the future!
|
||||
- This feature will be deprecated in the next major release of Font Awesome (v8)!
|
||||
- You may continue to use it in this version *v7), but it will not be supported in Font Awesome v8.
|
||||
*/
|
||||
|
||||
/* Notes:
|
||||
* --@{v.$css-prefix}-border-width = 1/16 by default (to render as ~1px based on a 16px default font-size)
|
||||
* --@{v.$css-prefix}-border-padding =
|
||||
** 3/16 for vertical padding (to give ~2px of vertical whitespace around an icon considering it's vertical alignment)
|
||||
** 4/16 for horizontal padding (to give ~4px of horizontal whitespace around an icon)
|
||||
*/
|
||||
|
||||
.#{v.$css-prefix}-border {
|
||||
border-color: var(--#{v.$css-prefix}-border-color, #{v.$border-color});
|
||||
border-radius: var(--#{v.$css-prefix}-border-radius, #{v.$border-radius});
|
||||
border-style: var(--#{v.$css-prefix}-border-style, #{v.$border-style});
|
||||
border-width: var(--#{v.$css-prefix}-border-width, #{v.$border-width});
|
||||
box-sizing: var(--#{v.$css-prefix}-border-box-sizing, #{v.$border-box-sizing});
|
||||
padding: var(--#{v.$css-prefix}-border-padding, #{v.$border-padding});
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
// base icon class definition
|
||||
// -------------------------
|
||||
@use 'variables' as v;
|
||||
@use 'mixins' as m;
|
||||
|
||||
.#{v.$css-prefix}-solid,
|
||||
.#{v.$css-prefix}-regular,
|
||||
.#{v.$css-prefix}-brands,
|
||||
.#{v.$css-prefix}-classic,
|
||||
.fas,
|
||||
.far,
|
||||
.fab,
|
||||
.#{v.$css-prefix} {
|
||||
@include m.fa-icon();
|
||||
}
|
||||
|
||||
:is(
|
||||
.fas,
|
||||
.far,
|
||||
.fab,
|
||||
.#{v.$css-prefix}-solid,
|
||||
.#{v.$css-prefix}-regular,
|
||||
.#{v.$css-prefix}-brands,
|
||||
.#{v.$css-prefix}-classic,
|
||||
.fa
|
||||
)::before {
|
||||
content: var(#{v.$icon-property})/"";
|
||||
}
|
||||
|
||||
@supports not (content: ''/'') {
|
||||
:is(
|
||||
.fas,
|
||||
.far,
|
||||
.fab,
|
||||
.#{v.$css-prefix}-solid,
|
||||
.#{v.$css-prefix}-regular,
|
||||
.#{v.$css-prefix}-brands,
|
||||
.#{v.$css-prefix}-classic,
|
||||
.fa
|
||||
)::before {
|
||||
content: var(#{v.$icon-property});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
@forward "functions";
|
||||
@forward "variables";
|
||||
@forward "mixins";
|
||||
@@ -0,0 +1,8 @@
|
||||
// functions
|
||||
// --------------------------
|
||||
@use "sass:string";
|
||||
|
||||
// fa-content: convenience function used to set content property
|
||||
@function fa-content($var) {
|
||||
@return string.unquote("\"#{ $var }\"");
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
// specific icon class definition
|
||||
// -------------------------
|
||||
@use "sass:string";
|
||||
@use 'variables' as v;
|
||||
|
||||
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
|
||||
readers do not read off random characters that represent icons */
|
||||
|
||||
|
||||
@each $name, $icon in v.$icons {
|
||||
.#{v.$css-prefix}-#{$name} {
|
||||
#{v.$icon-property}: string.unquote("\"#{ $icon }\"");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
// icons in a list
|
||||
// -------------------------
|
||||
@use 'variables' as v;
|
||||
|
||||
.#{v.$css-prefix}-ul {
|
||||
list-style-type: none;
|
||||
margin-inline-start: var(--#{v.$css-prefix}-li-margin, #{v.$li-margin});
|
||||
padding-inline-start: 0;
|
||||
|
||||
> li { position: relative; }
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-li {
|
||||
inset-inline-start: calc(-1 * var(--#{v.$css-prefix}-li-width, #{v.$li-width}));
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: var(--#{v.$css-prefix}-li-width, #{v.$li-width});
|
||||
line-height: inherit;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
// mixins
|
||||
// --------------------------
|
||||
@use 'variables' as v;
|
||||
|
||||
// base rendering for an icon
|
||||
@mixin fa-icon($family: v.$family) {
|
||||
--_#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family, var(--#{v.$css-prefix}-style-family, '#{$family}'));
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
display: var(--#{v.$css-prefix}-display, #{v.$display});
|
||||
font-family: var(--_#{v.$css-prefix}-family);
|
||||
font-feature-settings: normal;
|
||||
font-style: normal;
|
||||
font-synthesis: none;
|
||||
font-variant: normal;
|
||||
font-weight: var(--#{v.$css-prefix}-style, #{v.$style});
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
text-rendering: auto;
|
||||
width: var(--#{v.$css-prefix}-width, #{v.$fw-width});
|
||||
}
|
||||
|
||||
// sets relative font-sizing and alignment (in _sizing)
|
||||
@mixin fa-size ($font-size) {
|
||||
font-size: calc(#{$font-size} / #{v.$size-scale-base} * 1em); /* converts a #{$font-size}px size into an em-based value that's relative to the scale's #{v.$size-scale-base}px base */
|
||||
line-height: calc(1 / #{$font-size} * 1em); /* sets the line-height of the icon back to that of it's parent */
|
||||
vertical-align: calc(((6 / #{$font-size}) - (3 / 8)) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
// pulled icons
|
||||
// -------------------------
|
||||
@use 'variables' as v;
|
||||
|
||||
.#{v.$css-prefix}-pull-left,
|
||||
.#{v.$css-prefix}-pull-start {
|
||||
float: inline-start;
|
||||
margin-inline-end: var(--#{v.$css-prefix}-pull-margin, #{v.$pull-margin});
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-pull-right,
|
||||
.#{v.$css-prefix}-pull-end {
|
||||
float: inline-end;
|
||||
margin-inline-start: var(--#{v.$css-prefix}-pull-margin, #{v.$pull-margin});
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
// rotating + flipping icons
|
||||
// -------------------------
|
||||
@use 'variables' as v;
|
||||
|
||||
.#{v.$css-prefix}-rotate-90 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-rotate-180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-rotate-270 {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-flip-horizontal {
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-flip-vertical {
|
||||
transform: scale(1, -1);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-flip-both,
|
||||
.#{v.$css-prefix}-flip-horizontal.#{v.$css-prefix}-flip-vertical {
|
||||
transform: scale(-1, -1);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-rotate-by {
|
||||
transform: rotate(var(--#{v.$css-prefix}-rotate-angle, 0));
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,18 @@
|
||||
// sizing icons
|
||||
// -------------------------
|
||||
@use 'variables' as v;
|
||||
@use 'mixins' as m;
|
||||
|
||||
// literal magnification scale
|
||||
@for $i from 1 through 10 {
|
||||
.#{v.$css-prefix}-#{$i}x {
|
||||
font-size: $i * 1em;
|
||||
}
|
||||
}
|
||||
|
||||
// step-based scale (with alignment)
|
||||
@each $size, $value in v.$sizes {
|
||||
.#{v.$css-prefix}-#{$size} {
|
||||
@include m.fa-size($value);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
// stacking icons
|
||||
// -------------------------
|
||||
@use 'variables' as v;
|
||||
|
||||
.#{v.$css-prefix}-stack {
|
||||
display: inline-block;
|
||||
height: 2em;
|
||||
line-height: 2em;
|
||||
position: relative;
|
||||
vertical-align: v.$stack-vertical-align;
|
||||
width: v.$stack-width;
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-stack-1x,
|
||||
.#{v.$css-prefix}-stack-2x {
|
||||
--#{v.$css-prefix}-width: 100%;
|
||||
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: var(--#{v.$css-prefix}-width);
|
||||
z-index: var(--#{v.$css-prefix}-stack-z-index, #{v.$stack-z-index});
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-stack-1x {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-stack-2x {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-inverse {
|
||||
color: var(--#{v.$css-prefix}-inverse, #{v.$inverse});
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,24 @@
|
||||
// icon widths
|
||||
// -------------------------
|
||||
@use 'variables' as v;
|
||||
|
||||
.#{v.$css-prefix}-width-auto {
|
||||
--#{v.$css-prefix}-width: auto;
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-fw,
|
||||
.#{v.$css-prefix}-width-fixed {
|
||||
--#{v.$css-prefix}-width: #{v.$fw-width};
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-canvas-square {
|
||||
padding-block: 0.125em;
|
||||
margin-block-end: -.125em;
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-canvas-roomy {
|
||||
padding-block: 0.25em;
|
||||
padding-inline: .125em;
|
||||
margin-block-end: -.25em;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
/*!
|
||||
* Font Awesome Free 7.3.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 2026 Fonticons, Inc.
|
||||
*/
|
||||
@use "sass:string";
|
||||
@use 'variables' as v;
|
||||
@use 'mixins' as m;
|
||||
|
||||
:root, :host {
|
||||
--#{v.$css-prefix}-family-brands: 'Font Awesome 7 Brands';
|
||||
--#{v.$css-prefix}-font-brands: normal 400 1em/1 var(--#{v.$css-prefix}-family-brands);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 7 Brands';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: v.$font-display;
|
||||
src: url('#{v.$font-path}/fa-brands-400.woff2');
|
||||
}
|
||||
|
||||
.fab,
|
||||
.#{v.$css-prefix}-brands,
|
||||
.#{v.$css-prefix}-classic.#{v.$css-prefix}-brands {
|
||||
--#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family-brands);
|
||||
--#{v.$css-prefix}-style: 400;
|
||||
}
|
||||
|
||||
@each $name, $icon in v.$brand-icons {
|
||||
.#{v.$css-prefix}-#{$name} {
|
||||
#{v.$icon-property}: string.unquote("\"#{ $icon }\"");
|
||||
}
|
||||
}
|
||||
|
||||
// convenience mixin for declaring pseudo-elements by CSS variable,
|
||||
// including all style-specific font properties and ::before elements.
|
||||
@mixin icon($var) {
|
||||
@include m.fa-icon(Font Awesome 7 Brands);
|
||||
@extend .#{v.$css-prefix}-brands;
|
||||
|
||||
&::before {
|
||||
content: string.unquote("\"#{ $var }\"");
|
||||
}
|
||||
}
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
/*!
|
||||
* Font Awesome Free 7.3.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 2026 Fonticons, Inc.
|
||||
*/
|
||||
// Font Awesome core compile (Web Fonts-based)
|
||||
// -------------------------
|
||||
|
||||
@use 'core';
|
||||
@use 'sizing';
|
||||
@use 'widths';
|
||||
@use 'list';
|
||||
@use 'bordered';
|
||||
@use 'pulled';
|
||||
@use 'animated';
|
||||
@use 'rotated-flipped';
|
||||
@use 'stacked';
|
||||
@use 'icons';
|
||||
@@ -0,0 +1,51 @@
|
||||
/*!
|
||||
* Font Awesome Free 7.3.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 2026 Fonticons, Inc.
|
||||
*/
|
||||
@use "sass:string";
|
||||
@use 'variables' as v;
|
||||
@use 'mixins' as m;
|
||||
|
||||
:root, :host {
|
||||
--#{v.$css-prefix}-family-classic: '#{ v.$family }';
|
||||
--#{v.$css-prefix}-font-regular: normal 400 1em/1 var(--#{v.$css-prefix}-family-classic);
|
||||
|
||||
/* deprecated: this older custom property will be removed next major release */
|
||||
--#{v.$css-prefix}-style-family-classic: var(--#{v.$css-prefix}-family-classic);
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 7 Free';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: v.$font-display;
|
||||
src: url('#{v.$font-path}/fa-regular-400.woff2');
|
||||
}
|
||||
|
||||
|
||||
.far {
|
||||
--#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family-classic);
|
||||
--#{v.$css-prefix}-style: 400;
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-classic {
|
||||
--#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family-classic);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-regular {
|
||||
--#{v.$css-prefix}-style: 400;
|
||||
}
|
||||
|
||||
// convenience mixin for declaring pseudo-elements by CSS variable,
|
||||
// including all style-specific font properties and ::before elements.
|
||||
@mixin icon($var) {
|
||||
@include m.fa-icon(Font Awesome 7 Free);
|
||||
@extend .#{v.$css-prefix}-regular;
|
||||
@extend .#{v.$css-prefix}-classic;
|
||||
|
||||
&::before {
|
||||
content: string.unquote("\"#{ $var }\"");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
/*!
|
||||
* Font Awesome Free 7.3.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 2026 Fonticons, Inc.
|
||||
*/
|
||||
@use "sass:string";
|
||||
@use 'variables' as v;
|
||||
@use 'mixins' as m;
|
||||
|
||||
:root, :host {
|
||||
--#{v.$css-prefix}-family-classic: '#{ v.$family }';
|
||||
--#{v.$css-prefix}-font-solid: normal 900 1em/1 var(--#{v.$css-prefix}-family-classic);
|
||||
|
||||
/* deprecated: this older custom property will be removed next major release */
|
||||
--#{v.$css-prefix}-style-family-classic: var(--#{v.$css-prefix}-family-classic);
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Font Awesome 7 Free';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: v.$font-display;
|
||||
src: url('#{v.$font-path}/fa-solid-900.woff2');
|
||||
}
|
||||
|
||||
|
||||
.fas {
|
||||
--#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family-classic);
|
||||
--#{v.$css-prefix}-style: 900;
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-classic {
|
||||
--#{v.$css-prefix}-family: var(--#{v.$css-prefix}-family-classic);
|
||||
}
|
||||
|
||||
.#{v.$css-prefix}-solid {
|
||||
--#{v.$css-prefix}-style: 900;
|
||||
}
|
||||
|
||||
// convenience mixin for declaring pseudo-elements by CSS variable,
|
||||
// including all style-specific font properties and ::before elements.
|
||||
@mixin icon($var) {
|
||||
@include m.fa-icon(Font Awesome 7 Free);
|
||||
@extend .#{v.$css-prefix}-solid;
|
||||
@extend .#{v.$css-prefix}-classic;
|
||||
|
||||
&::before {
|
||||
content: string.unquote("\"#{ $var }\"");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
/*!
|
||||
* Font Awesome Free 7.3.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 2026 Fonticons, Inc.
|
||||
*/
|
||||
// V4 shims compile (Web Fonts-based)
|
||||
// -------------------------
|
||||
|
||||
@use 'functions';
|
||||
@use 'variables' as v;
|
||||
@use 'shims';
|
||||
Reference in New Issue
Block a user