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

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

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

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

@@ -0,0 +1,72 @@
+@import 'functions';
+@import 'variables';
+
+:root,
+:host {
+    --#{$fa-css-prefix}-font-duotone: normal 900 1em/1 'Font Awesome 6 Duotone';
+}
+
+@font-face {
+    font-family: 'Font Awesome 6 Duotone';
+    font-style: normal;
+    font-weight: 900;
+    font-display: $fa-font-display;
+    src: url('#{$fa-font-path}/fa-duotone-900.woff2') format('woff2'), url('#{$fa-font-path}/fa-duotone-900.ttf') format('truetype');
+}
+
+.fad,
+.#{$fa-css-prefix}-duotone {
+    position: relative;
+    font-family: 'Font Awesome 6 Duotone';
+    font-weight: 900;
+    letter-spacing: normal;
+}
+
+.fad::before,
+.#{$fa-css-prefix}-duotone::before {
+    position: absolute;
+    color: var(--#{$fa-css-prefix}-primary-color, inherit);
+    opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
+}
+
+.fad::after,
+.#{$fa-css-prefix}-duotone::after {
+    color: var(--#{$fa-css-prefix}-secondary-color, inherit);
+    opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
+}
+
+.#{$fa-css-prefix}-swap-opacity .fad::before,
+.#{$fa-css-prefix}-swap-opacity .fa-duotone::before,
+.fad.#{$fa-css-prefix}-swap-opacity::before,
+.fa-duotone.#{$fa-css-prefix}-swap-opacity::before {
+    opacity: var(--#{$fa-css-prefix}-secondary-opacity, #{$fa-secondary-opacity});
+}
+
+.#{$fa-css-prefix}-swap-opacity .fad::after,
+.#{$fa-css-prefix}-swap-opacity .fa-duotone::after,
+.fad.#{$fa-css-prefix}-swap-opacity::after,
+.fa-duotone.#{$fa-css-prefix}-swap-opacity::after {
+    opacity: var(--#{$fa-css-prefix}-primary-opacity, #{$fa-primary-opacity});
+}
+
+.fad.#{$fa-css-prefix}-inverse,
+.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-inverse {
+    color: var(--#{$fa-css-prefix}-inverse, $fa-inverse);
+}
+
+.fad.#{$fa-css-prefix}-stack-1x,
+.fad.#{$fa-css-prefix}-stack-2x,
+.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-stack-1x,
+.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-stack-2x {
+    position: absolute;
+}
+
+.fad.#{$fa-css-prefix}-stack-1x::before,
+.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-stack-1x::before,
+.fad.#{$fa-css-prefix}-stack-2x::before,
+.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-stack-2x::before,
+.fad.#{$fa-css-prefix}-fw::before,
+.#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-fw::before {
+    left: 50%;
+    transform: translateX(-50%);
+}

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

@@ -0,0 +1,13 @@
+@import 'functions';
+@import 'variables';
+@import 'mixins';
+@import 'core';
+@import 'sizing';
+@import 'fixed-width';
+@import 'list';
+@import 'bordered-pulled';
+@import 'animated';
+@import 'rotated-flipped';
+@import 'stacked';
+@import 'icons';
+@import 'screen-reader';

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

@@ -0,0 +1,15 @@
+@import 'functions';
+@import 'variables';
+@import 'mixins';
+@import 'core';
+@import 'sizing';
+@import 'fixed-width';
+@import 'list';
+@import 'bordered-pulled';
+@import 'animated';
+@import 'rotated-flipped';
+@import 'stacked';
+@import 'icons';
+@import 'screen-reader';
+@import 'duotone-icons';
+@import 'shims';

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

@@ -0,0 +1,21 @@
+@import 'functions';
+@import 'variables';
+
+:root,
+:host {
+    --#{$fa-css-prefix}-font-light: normal 300 1em/1 '#{ $fa-style-family }';
+}
+
+@font-face {
+    font-family: $fa-style-family;
+    font-style: normal;
+    font-weight: 300;
+    font-display: $fa-font-display;
+    src: url('#{$fa-font-path}/fa-light-300.woff2') format('woff2'), url('#{$fa-font-path}/fa-light-300.ttf') format('truetype');
+}
+
+.fal,
+.#{$fa-css-prefix}-light {
+    font-family: $fa-style-family;
+    font-weight: 300;
+}

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

@@ -0,0 +1,21 @@
+@import 'functions';
+@import 'variables';
+
+:root,
+:host {
+    --#{$fa-css-prefix}-font-regular: normal 400 1em/1 '#{ $fa-style-family }';
+}
+
+@font-face {
+    font-family: $fa-style-family;
+    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: $fa-style-family;
+    font-weight: 400;
+}

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

@@ -0,0 +1,21 @@
+@import 'functions';
+@import 'variables';
+
+:root,
+:host {
+    --#{$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ $fa-style-family }';
+}
+
+@font-face {
+    font-family: $fa-style-family;
+    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: $fa-style-family;
+    font-weight: 900;
+}

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

@@ -0,0 +1,21 @@
+@import 'functions';
+@import 'variables';
+
+:root,
+:host {
+    --#{$fa-css-prefix}-font-thin: normal 100 1em/1 '#{ $fa-style-family }';
+}
+
+@font-face {
+    font-family: $fa-style-family;
+    font-style: normal;
+    font-weight: 100;
+    font-display: $fa-font-display;
+    src: url('#{$fa-font-path}/fa-thin-100.woff2') format('woff2'), url('#{$fa-font-path}/fa-thin-100.ttf') format('truetype');
+}
+
+.fat,
+.#{$fa-css-prefix}-thin {
+    font-family: $fa-style-family;
+    font-weight: 100;
+}

package/theme-chalk/icon/scss/v4-shims.scss

@@ -0,0 +1,3 @@
+@import 'functions';
+@import 'variables';
+@import 'shims';

package/theme-chalk/index.scss

@@ -0,0 +1,67 @@
+/* Basic 基础组件 */
+@import './common';
+@import './link';
+@import './button';
+@import './icon/fonts';
+@import './icon';
+@import './row';
+@import './col';
+@import './scrollbar';
+@import './popper';
+@import './transition';
+
+/* Form 表单组件 */
+@import './cascader';
+@import './carousel/';
+@import './checkbox';
+@import './checkbox-button';
+@import './checkbox-group';
+@import './color-picker';
+@import './radio';
+@import './radio-group';
+@import './input';
+@import './input-number';
+@import './select';
+@import './calendar';
+@import './date-picker';
+@import './date-time-picker';
+@import './time-picker';
+@import './switch';
+@import './transfer';
+@import './form';
+@import './upload';
+
+/* Data 数据展示 */
+@import './avatar/';
+@import './badge';
+@import './card';
+@import './collapse';
+@import './descriptions';
+@import './pagination';
+@import './progress';
+@import './table';
+@import './time-line';
+@import './tree';
+@import './tree-select';
+@import './tag';
+
+// /* Navigation 导航 */
+@import './breadcrumb';
+@import './dropdown';
+@import './tabs';
+@import './empty';
+@import './placeholder';
+
+/* Feedback 反馈组件 */
+@import './dialog';
+@import './drawer';
+@import './loading';
+@import './message';
+@import './message-box';
+@import './notification';
+@import './tooltip';
+@import './popconfirm';
+@import './popover';
+
+/* Others 其他 */
+@import './divider';

package/theme-chalk/input/_mixins.scss

@@ -0,0 +1,16 @@
+@use '../common/var';
+
+@mixin placeholder {
+    &::-webkit-input-placeholder {
+        color: var(--#{$namespace}-text-color-placeholder);
+    }
+    &:-moz-placeholder {
+        color: var(--#{$namespace}-text-color-placeholder);
+    }
+    &::-moz-placeholder {
+        color: var(--#{$namespace}-text-color-placeholder);
+    }
+    &:-ms-input-placeholder {
+        color: var(--#{$namespace}-text-color-placeholder);
+    }
+}

package/theme-chalk/input/index.scss

@@ -0,0 +1,3 @@
+@import './mixins';
+@import './input.scss';
+@import './input-range.scss';

package/theme-chalk/input/input-range.scss

@@ -0,0 +1,208 @@
+@use '../common/var';
+@use 'sass:map';
+
+$input-height: () !default;
+$input-height: map.merge(
+    (
+        'large': var(--#{$namespace}-component-size-large),
+        'default': 32px,
+        'small': var(--#{$namespace}-component-size-small),
+    ),
+    $input-height
+);
+
+$input-line-height: () !default;
+$input-line-height: map.merge(
+    (
+        'large': var(--#{$namespace}-component-size-large),
+        'default': 32px,
+        'small': var(--#{$namespace}-component-size-small),
+    ),
+    $input-line-height
+);
+
+$input-font-size: () !default;
+$input-font-size: map.merge(
+    (
+        'large': 14px,
+        'default': 14px,
+        'small': 12px,
+    ),
+    $input-font-size
+);
+
+.#{$namespace}-input-range {
+    --#{$namespace}-input-hover-border-color: var(--#{$namespace}-border-color-hover);
+
+    position: relative;
+    display: inline-block;
+    text-align: left;
+
+    &.is-warning {
+        box-shadow: 0 0 0 1px var(--#{$namespace}-color-warning) inset !important;
+
+        .#{$namespace}-range-input {
+            color: var(--#{$namespace}-color-warning) !important;
+        }
+    }
+
+    &.is-error {
+        box-shadow: 0 0 0 1px var(--#{$namespace}-color-error) inset !important;
+
+        .#{$namespace}-range-input {
+            color: var(--#{$namespace}-color-error) !important;
+        }
+    }
+
+    .close-icon {
+        cursor: pointer;
+    }
+
+    .clear-icon {
+        cursor: pointer;
+
+        &:hover {
+            color: #909399;
+        }
+    }
+
+    .#{$namespace}-range__icon {
+        height: 1em;
+        font-size: 14px;
+        color: var(--#{$namespace}-text-color-placeholder);
+        float: left;
+        padding-right: 5px;
+    }
+
+    .#{$namespace}-range-input {
+        appearance: none;
+        border: none;
+        outline: none;
+        display: inline-block;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        width: 39%;
+        text-align: center;
+        font-size: 14px;
+        color: var(--#{$namespace}-text-color-regular);
+        background: transparent;
+
+        @include placeholder();
+    }
+
+    .#{$namespace}-range-separator {
+        flex: 1;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        padding: 0 5px;
+        margin: 0;
+        font-size: 14px;
+        word-break: keep-all;
+        color: var(--#{$namespace}-text-color-primary);
+    }
+
+    .#{$namespace}-range__close-icon {
+        font-size: 14px;
+        color: var(--#{$namespace}-text-color-placeholder);
+        height: 1em;
+        width: 20px;
+        cursor: pointer;
+        padding-left: 5px;
+        margin-left: 5px;
+
+        &:hover {
+            color: var(--#{$namespace}-color-primary);
+        }
+
+        svg {
+            vertical-align: middle;
+        }
+
+        &--hidden {
+            opacity: 0;
+            visibility: hidden;
+        }
+    }
+
+    .#{$namespace}-range__end-icon {
+        font-size: 14px;
+        color: var(--#{$namespace}-text-color-placeholder);
+        height: 1em;
+        width: unset;
+        cursor: pointer;
+        padding-left: 5px;
+    }
+
+    &.#{$namespace}-input__wrapper {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 3px 10px;
+        background-color: var(--#{$namespace}-input-bg-color, var(--#{$namespace}-fill-color-blank));
+        background-image: none;
+        transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+        height: map.get($input-height, default);
+    }
+
+    .#{$namespace}-range-input {
+        line-height: 1;
+    }
+
+    &.is-active {
+        box-shadow: 0 0 0 1px var(--#{$namespace}-color-primary) inset;
+
+        &:hover {
+            box-shadow: 0 0 0 1px var(--#{$namespace}-color-primary) inset;
+        }
+    }
+
+    &.is-disabled {
+        background-color: var(--#{$namespace}-disabled-bg-color);
+        border-color: var(--#{$namespace}-border-color-light);
+        color: var(--#{$namespace}-disabled-text-color);
+        cursor: not-allowed;
+
+        &:hover,
+        &:focus {
+            border-color: var(--#{$namespace}-border-color-light);
+        }
+
+        input {
+            // background-color: #f5f7fa;
+            color: var(--#{$namespace}-disabled-text-color);
+            cursor: not-allowed;
+
+            // @include placeholder();
+        }
+
+        .#{$namespace}-range-separator {
+            color: var(--#{$namespace}-disabled-text-color);
+        }
+
+        &:hover {
+            box-shadow: 0 0 0 1px var(--#{$namespace}-input-border-color, var(--#{$namespace}-border-color)) inset;
+        }
+    }
+}
+
+@each $size in (large, small) {
+    .#{$namespace}-input-range--#{$size} {
+        line-height: map.get($input-height, $size);
+
+        &.#{$namespace}-input__warpper {
+            height: map.get($input-height, $size);
+        }
+
+        .#{$namespace}-range-separator {
+            line-height: map.get($input-line-height, $size);
+            font-size: map.get($input-font-size, $size);
+        }
+
+        .#{$namespace}-range-input {
+            font-size: map.get($input-font-size, $size);
+        }
+    }
+}