@qsxy/element-plus-react 1.0.0-next.1 → 1.0.0-next.11

package/theme-chalk/icon/scss/_animated.scss

@@ -0,0 +1,205 @@
+// 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}-bounce;
+    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.28, 0.84, 0.42, 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(0.4, 0, 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(0.4, 0, 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, linear);
+}
+
+.#{$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;
+}
+
+.#{$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));
+}
+
+// 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);
+    }
+}

package/theme-chalk/icon/scss/_bordered-pulled.scss

@@ -0,0 +1,20 @@
+// 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});
+}

package/theme-chalk/icon/scss/_core.scss

@@ -0,0 +1,33 @@
+// 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;
+    line-height: 1;
+    text-rendering: auto;
+}
+
+%fa-icon {
+    @include fa-icon;
+}

package/theme-chalk/icon/scss/_duotone-icons.scss

@@ -0,0 +1,12 @@
+// specific duotone 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 $name, $icon in $fa-icons {
+    .fad.#{$fa-css-prefix}-#{$name}::after,
+    .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-#{$name}::after {
+        content: unquote('"#{ $icon }#{ $icon }"');
+    }
+}

package/theme-chalk/icon/scss/_fixed-width.scss

@@ -0,0 +1,7 @@
+// fixed-width icons
+// -------------------------
+
+.#{$fa-css-prefix}-fw {
+    text-align: center;
+    width: $fa-fw-width;
+}

package/theme-chalk/icon/scss/_functions.scss

@@ -0,0 +1,57 @@
+// functions
+// --------------------------
+
+// fa-content: convenience function used to set content property
+@function fa-content($fa-var) {
+    @return unquote('"#{ $fa-var }"');
+}
+
+// fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
+//
+// Licensed under: The MIT License (MIT)
+//
+// Copyright (c) 2011-2021 Twitter, Inc.
+// Copyright (c) 2011-2021 The Bootstrap Authors
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+@function fa-divide($dividend, $divisor, $precision: 10) {
+    $sign: if($dividend > 0 and $divisor > 0, 1, -1);
+    $dividend: abs($dividend);
+    $divisor: abs($divisor);
+    $quotient: 0;
+    $remainder: $dividend;
+    @if $dividend == 0 {
+        @return 0;
+    }
+    @if $divisor == 0 {
+        @error "Cannot divide by 0";
+    }
+    @if $divisor == 1 {
+        @return $dividend;
+    }
+    @while $remainder >= $divisor {
+        $quotient: $quotient + 1;
+        $remainder: $remainder - $divisor;
+    }
+    @if $remainder > 0 and $precision > 0 {
+        $remainder: fa-divide($remainder * 10, $divisor, $precision - 1) * 0.1;
+    }
+    @return ($quotient + $remainder) * $sign;
+}

package/theme-chalk/icon/scss/_icons.scss

@@ -0,0 +1,11 @@
+// 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 $name, $icon in $fa-icons {
+    .#{$fa-css-prefix}-#{$name}::before {
+        content: unquote('"#{ $icon }"');
+    }
+}

package/theme-chalk/icon/scss/_list.scss

@@ -0,0 +1,20 @@
+// 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;
+}

package/theme-chalk/icon/scss/_mixins.scss

@@ -0,0 +1,102 @@
+// mixins
+// --------------------------
+
+// base rendering for an icon
+@mixin fa-icon {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    display: inline-block;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: normal;
+    line-height: 1;
+}
+
+// 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
+}
+
+// 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/
+@mixin 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
+@mixin fa-sr-only-focusable() {
+    &:not(:focus) {
+        @include 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.
+@mixin fa-icon-solid($fa-var) {
+    @extend %fa-icon;
+    @extend .fa-solid;
+
+    &::before {
+        content: unquote('"#{ $fa-var }"');
+    }
+}
+
+@mixin fa-icon-regular($fa-var) {
+    @extend %fa-icon;
+    @extend .fa-regular;
+
+    &::before {
+        content: unquote('"#{ $fa-var }"');
+    }
+}
+
+@mixin fa-icon-light($fa-var) {
+    @extend %fa-icon;
+    @extend .fa-light;
+
+    &::before {
+        content: unquote('"#{ $fa-var }"');
+    }
+}
+
+@mixin fa-icon-thin($fa-var) {
+    @extend %fa-icon;
+    @extend .fa-thin;
+
+    &::before {
+        content: unquote('"#{ $fa-var }"');
+    }
+}
+
+@mixin fa-icon-duotone($fa-var) {
+    @extend %fa-icon;
+    @extend .fa-duotone;
+
+    &::before {
+        content: unquote('"#{ $fa-var }"');
+    }
+    &::after {
+        content: unquote('"#{ $fa-var }#{ $fa-var }"');
+    }
+}
+
+@mixin fa-icon-brands($fa-var) {
+    @extend %fa-icon;
+    @extend .fa-brands;
+
+    &::before {
+        content: unquote('"#{ $fa-var }"');
+    }
+}

package/theme-chalk/icon/scss/_rotated-flipped.scss

@@ -0,0 +1,31 @@
+// 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));
+}

package/theme-chalk/icon/scss/_screen-reader.scss

@@ -0,0 +1,14 @@
+// screen-reader utilities
+// -------------------------
+
+// only display content to screen readers
+.sr-only,
+.#{$fa-css-prefix}-sr-only {
+    @include 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 {
+    @include fa-sr-only-focusable;
+}