@qsxy/element-plus-react 1.0.2 → 2.0.0

package/theme-chalk/input-number.scss

@@ -1,42 +1,42 @@
-@use './mixins/config' as *;
-
-@use 'sass:map';
 @use 'sass:math';
+@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
-);
-
-.#{$namespace}-input-number {
-    --#{$namespace}-input-number-controls-height: 16px;
-    --el-input-inner-height: calc(var(--el-input-height, 32px) - 2px);
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
 
+@include b(input-number) {
     position: relative;
     display: inline-flex;
-    width: 150px;
-    line-height: #{map.get($input-height, 'default')};
+    width: var(--el-input-number-width, map.get($input-number-width, 'default'));
+    line-height: #{map.get($input-height, 'default') - 2};
     vertical-align: middle;
 
-    .#{$namespace}-input__wrapper {
-        padding-left: 42px;
-        padding-right: 42px;
-    }
+    .#{$namespace}-input {
+        &__wrapper {
+            padding-left: #{map.get($input-height, 'default') + 10};
+            padding-right: #{map.get($input-height, 'default') + 10};
+        }
 
-    .#{$namespace}-input__inner {
-        -webkit-appearance: none;
-        -moz-appearance: textfield;
-        text-align: center;
-        line-height: 1;
+        &__inner {
+            -webkit-appearance: none;
+            -moz-appearance: textfield;
+            text-align: center;
+            line-height: 1;
+            &::-webkit-inner-spin-button,
+            &::-webkit-outer-spin-button {
+                margin: 0;
+                -webkit-appearance: none;
+            }
+        }
     }
-
-    .#{$namespace}-input-number__increase,
-    .#{$namespace}-input-number__decrease {
+    @each $align in (left, right, center) {
+        @include when($align) {
+            .#{$namespace}-input__inner {
+                text-align: $align;
+            }
+        }
+    }
+    @include e((increase, decrease)) {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -47,124 +47,131 @@ $input-height: map.merge(
         top: 1px;
         bottom: 1px;
 
-        width: 32px;
-        background: var(--#{$namespace}-fill-color-light);
-        color: var(--#{$namespace}-text-color-regular);
+        width: map.get($input-height, 'default');
+        background: getCssVar('fill-color', 'light');
+        color: getCssVar('text-color', 'regular');
         cursor: pointer;
         font-size: 13px;
         user-select: none;
 
         &:hover {
-            color: var(--#{$namespace}-color-primary);
+            color: getCssVar('color-primary');
 
             & ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input__wrapper {
-                box-shadow: 0 0 0 1px var(--#{$namespace}-input-focus-border-color) inset;
+                box-shadow: 0 0 0 1px var(#{getCssVarName('input', 'focus-border-color')}, map.get($input, 'focus-border-color')) inset;
             }
         }
 
         &.is-disabled {
-            color: var(--#{$namespace}-disabled-text-color);
+            color: getCssVar('disabled-text-color');
             cursor: not-allowed;
-            background-color: var(--#{$namespace}-disabled-bg-color);
-            border-color: var(--#{$namespace}-border-color-light);
         }
     }
 
-    .#{$namespace}-input-number__increase {
+    @include e(increase) {
         right: 1px;
-        border-radius: 0 4px 4px 0;
-        border-left: 1px solid var(--#{$namespace}-border-color);
+        border-radius: 0 getCssVar('border-radius-base') getCssVar('border-radius-base') 0;
+        border-left: getCssVar('border');
     }
 
-    .#{$namespace}-input-number__decrease {
+    @include e(decrease) {
         left: 1px;
-        border-radius: 4px 0 0 4px;
-        border-right: 1px solid var(--#{$namespace}-border-color);
+        border-radius: getCssVar('border-radius-base') 0 0 getCssVar('border-radius-base');
+        border-right: getCssVar('border');
     }
 
-    .is-disabled {
-        .#{$namespace}-input-number__increase,
-        .#{$namespace}-input-number__decrease {
-            border-color: var(--#{$namespace}-border-color-light);
-            color: var(--#{$namespace}-disabled-text-color);
+    @include when(disabled) {
+        @include e((increase, decrease)) {
+            border-color: getCssVar('disabled-border-color');
+            color: getCssVar('disabled-border-color');
 
             &:hover {
-                color: var(--#{$namespace}-disabled-text-color);
+                color: getCssVar('disabled-border-color');
                 cursor: not-allowed;
             }
         }
     }
 
     @each $size in (large, small) {
-        &.#{$namespace}-input-number--#{$size} {
-            line-height: calc(#{map.get($input-height, $size)} - 2px);
+        @include m($size) {
+            width: map.get($input-number-width, $size);
+            line-height: #{map.get($input-height, $size) - 2};
 
-            .#{$namespace}-input-number__increase,
-            .#{$namespace}-input-number__decrease {
+            @include e((increase, decrease)) {
                 width: map.get($input-height, $size);
-                font-size: 14px;
+                font-size: map.get($input-font-size, $size);
+            }
+
+            @include when(controls-right) {
+                .#{$namespace}-input--#{$size} {
+                    .#{$namespace}-input__wrapper {
+                        padding-right: #{map.get($input-height, $size) + 7};
+                    }
+                }
             }
 
-            .#{$namespace}-input__wrapper {
-                padding-left: calc(#{map.get($input-height, $size)} + 7px);
-                padding-right: calc(#{map.get($input-height, $size)} + 7px);
+            .#{$namespace}-input--#{$size} {
+                .#{$namespace}-input__wrapper {
+                    padding-left: #{map.get($input-height, $size) + 7};
+                    padding-right: #{map.get($input-height, $size) + 7};
+                }
             }
         }
     }
 
-    .#{$namespace}-input-number--small {
-        .#{$namespace}-input-number__increase,
-        .#{$namespace}-input-number__decrease {
+    @include m(small) {
+        @include e((increase, decrease)) {
             [class*='#{$namespace}-icon'] {
                 transform: scale(0.9);
             }
         }
     }
 
-    .is-without-controls {
+    @include when(without-controls) {
         .#{$namespace}-input__wrapper {
             padding-left: 15px;
             padding-right: 15px;
         }
     }
 
-    &.is-controls-right {
+    @include when(controls-right) {
         .#{$namespace}-input__wrapper {
             padding-left: 15px;
-            padding-right: 42px;
+            padding-right: #{map.get($input-height, 'default') + 10};
         }
 
-        .#{$namespace}-input-number__increase,
-        .#{$namespace}-input-number__decrease {
-            height: var(--#{$namespace}-input-number-controls-height);
-            line-height: var(--#{$namespace}-input-number-controls-height);
+        @include e((increase, decrease)) {
+            @include set-css-var-value(('input', 'number-controls-height'), math.div(map.get($input-height, 'default') - 2, 2));
+
+            height: getCssVar('input-number-controls-height');
+            line-height: getCssVar('input-number-controls-height');
 
             [class*='#{$namespace}-icon'] {
                 transform: scale(0.8);
             }
         }
 
-        .#{$namespace}-input-number__increase {
+        @include e(increase) {
             bottom: auto;
             left: auto;
-            border-radius: 0 4px 0 0;
-            border-bottom: 1px solid var(--#{$namespace}-border-color);
+            border-radius: 0 getCssVar('border-radius-base') 0 0;
+            border-bottom: getCssVar('border');
         }
 
-        .#{$namespace}-input-number__decrease {
+        @include e(decrease) {
             right: 1px;
             top: auto;
             left: auto;
             border-right: none;
-            border-left: 1px solid var(--#{$namespace}-border-color);
-            border-radius: 0 0 4px 0;
+            border-left: getCssVar('border');
+            border-radius: 0 0 getCssVar('border-radius-base') 0;
         }
 
         @each $size in (large, small) {
             &[class*='#{$size}'] {
                 [class*='increase'],
                 [class*='decrease'] {
-                    --#{$namespace}-input-number-controls-height: #{calc(map.get($input-height, $size) / 2)};
+                    @include set-css-var-value(('input', 'number-controls-height'), math.div(map.get($input-height, $size) - 2, 2));
                 }
             }
         }

package/theme-chalk/link.scss

@@ -1,87 +1,87 @@
-@use 'sass:map';
-
-@use 'mixins/mixins' as *;
-@use 'mixins/var' as *;
-@use 'mixins/utils' as *;
-@use 'common/var' as *;
-
-@include b(link) {
-    @include set-component-css-var('link', $link);
-}
-
-@include b(link) {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    vertical-align: middle;
-    position: relative;
-    text-decoration: none;
-    outline: none;
-    cursor: pointer;
-    padding: 0;
-    font-size: getCssVar('link', 'font-size');
-    font-weight: getCssVar('link', 'font-weight');
-    color: getCssVar('link', 'text-color');
-
-    @include when(hover-underline) {
-        &:hover:after {
-            content: '';
-            position: absolute;
-            left: 0;
-            right: 0;
-            height: 0;
-            bottom: 0;
-            border-bottom: 1px solid getCssVar('link', 'hover-text-color');
-        }
-    }
-
-    @include when(underline) {
-        &:after {
-            content: '';
-            position: absolute;
-            left: 0;
-            right: 0;
-            height: 0;
-            bottom: 0;
-            border-bottom: 1px solid getCssVar('link', 'text-color');
-        }
-    }
-
-    &:hover {
-        color: getCssVar('link', 'hover-text-color');
-
-        &:after {
-            border-color: getCssVar('link', 'hover-text-color');
-        }
-    }
-
-    & [class*='#{$namespace}-icon-'] {
-        & + span {
-            margin-left: 5px;
-        }
-    }
-
-    @include e(inner) {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    @each $type in $types {
-        &.#{$namespace}-link--#{$type} {
-            @include css-var-from-global(('link', 'text-color'), ('color', $type));
-            @include css-var-from-global(('link', 'hover-text-color'), ('color', $type, 'light-3'));
-            @include css-var-from-global(('link', 'disabled-text-color'), ('color', $type, 'light-5'));
-        }
-    }
-
-    @include when(disabled) {
-        color: getCssVar('link', 'disabled-text-color');
-        cursor: not-allowed;
-
-        &:after {
-            border-color: getCssVar('link', 'disabled-text-color');
-        }
-    }
-}
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'mixins/utils' as *;
+@use 'common/var' as *;
+
+@include b(link) {
+    @include set-component-css-var('link', $link);
+}
+
+@include b(link) {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    position: relative;
+    text-decoration: none;
+    outline: none;
+    cursor: pointer;
+    padding: 0;
+    font-size: getCssVar('link', 'font-size');
+    font-weight: getCssVar('link', 'font-weight');
+    color: getCssVar('link', 'text-color');
+
+    @include when(hover-underline) {
+        &:hover:after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: 0;
+            bottom: 0;
+            border-bottom: 1px solid getCssVar('link', 'hover-text-color');
+        }
+    }
+
+    @include when(underline) {
+        &:after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: 0;
+            bottom: 0;
+            border-bottom: 1px solid getCssVar('link', 'text-color');
+        }
+    }
+
+    &:hover {
+        color: getCssVar('link', 'hover-text-color');
+
+        &:after {
+            border-color: getCssVar('link', 'hover-text-color');
+        }
+    }
+
+    & [class*='#{$namespace}-icon-'] {
+        & + span {
+            margin-left: 5px;
+        }
+    }
+
+    @include e(inner) {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    @each $type in $types {
+        &.#{$namespace}-link--#{$type} {
+            @include css-var-from-global(('link', 'text-color'), ('color', $type));
+            @include css-var-from-global(('link', 'hover-text-color'), ('color', $type, 'light-3'));
+            @include css-var-from-global(('link', 'disabled-text-color'), ('color', $type, 'light-5'));
+        }
+    }
+
+    @include when(disabled) {
+        color: getCssVar('link', 'disabled-text-color');
+        cursor: not-allowed;
+
+        &:after {
+            border-color: getCssVar('link', 'disabled-text-color');
+        }
+    }
+}

package/theme-chalk/main.scss

@@ -1,14 +1,14 @@
-@use 'mixins/mixins' as *;
-@use 'mixins/var' as *;
-@use 'common/var' as *;
-
-@include b(main) {
-  @include set-component-css-var('main', $main);
-
-  display: block;
-  flex: 1;
-  flex-basis: auto;
-  overflow: auto;
-  box-sizing: border-box;
-  padding: getCssVar('main-padding');
-}
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(main) {
+  @include set-component-css-var('main', $main);
+
+  display: block;
+  flex: 1;
+  flex-basis: auto;
+  overflow: auto;
+  box-sizing: border-box;
+  padding: getCssVar('main-padding');
+}