@tendaui/components 1.2.3 → 1.3.0

package/styles/components/select/_var.scss

@@ -1,65 +1,64 @@
-// 颜色
-$select-bg-color: $bg-color-specialcomponent;
-$select-border-color: $border-level-2-color;
-$select-border-color-active: $brand-color;
-$select-selected-color: $brand-color;
-$select-selected-bg-color: $brand-color-light;
-$select-selected-bg-color-hover: $select-selected-bg-color;
-$select-option-bg-color-hover: $bg-color-container-hover;
-$select-option-bg-color-active: $bg-color-container-active;
-$select-option-checkbox-color: $bg-color-container-hover;
-$select-option-group-header-color: $text-color-placeholder;
-$select-option-color: $text-color-primary;
-$select-bg-color-disabled: $bg-color-component-disabled;
-$select-placeholder-color: $text-color-placeholder;
-$select-placeholder-color-disabled: $text-color-disabled;
-$select-color-disabled: $text-color-disabled;
-$select-color-empty: $text-color-disabled;
-$select-icon-color: $text-color-placeholder;
-$select-icon-color-disabled: $text-color-disabled;
-$select-optiongroup-border-color: $border-level-1-color;
-$select-input-color: $text-color-primary;
-$select-option-checkbox-label-color-hover: inherit;
-$select-option-checkbox-input-color-hover: $brand-color;
-$select-right-icon-hover: $brand-color;
-$select-loading-tips-bg-color: $bg-color-container;
-
-// 尺寸
-$select-height-s: $comp-size-xs;
-$select-height-default: $comp-size-m;
-$select-height-l: $comp-size-xl;
-$select-option-height-s: $comp-size-xxs;
-$select-option-height-default: $comp-size-s;
-$select-option-height-l: $comp-size-l;
-$select-dropdown-max-height: 300px;
-
-// font
-$select-font-s: $font-body-small;
-$select-font-l: $font-body-large;
-$select-font-m: $font-body-medium;
-
-//阴影
-$select-dropdown-shadow: $shadow-2;
-$select-input-shadow: 0 0 0 2px $brand-color-focus;
-
-//radius
-$select-border-radius: $border-radius-default;
-$select-option-border-radius: $border-radius-default;
-
-//透明度
-
-// padding
-$select-option-padding-s: 0 $comp-paddingLR-s;
-$select-option-padding-default: 0 $comp-paddingLR-s;
-$select-option-padding-l: 0 $comp-paddingLR-m;
-$select-optiongroup-border-padding: $comp-margin-xs;
-$select-dropdown-padding: $pop-padding-m;
-$select-dropdown-padding-l: $pop-padding-l;
-$select-dropdown-padding-s: $pop-padding-s;
-$select-dropdown-popup-padding: 0;
-// margin
-$select-optiongroup-border-margin: $comp-margin-xs;
-$select-dropdown-margin: $comp-paddingTB-s 0;
-$select-options-margin-top: $comp-paddingTB-xxs;
-$select-empty-padding: 0 $comp-paddingLR-s;
-$select-loading-tips-padding: $comp-paddingTB-s;
+@use "../../_vars.scss" as *;
+// 颜色
+$select-bg-color: $bg-color-specialcomponent;
+$select-border-color: $border-level-2-color;
+$select-border-color-active: $brand-color;
+$select-selected-color: $brand-color;
+$select-selected-bg-color: $brand-color-light;
+$select-selected-bg-color-hover: $select-selected-bg-color;
+$select-option-bg-color-hover: $bg-color-container-hover;
+$select-option-bg-color-active: $bg-color-container-active;
+$select-option-checkbox-color: $bg-color-container-hover;
+$select-option-group-header-color: $text-color-placeholder;
+$select-option-color: $text-color-primary;
+$select-bg-color-disabled: $bg-color-component-disabled;
+$select-placeholder-color: $text-color-placeholder;
+$select-placeholder-color-disabled: $text-color-disabled;
+$select-color-disabled: $text-color-disabled;
+$select-color-empty: $text-color-disabled;
+$select-icon-color: $text-color-placeholder;
+$select-icon-color-disabled: $text-color-disabled;
+$select-optiongroup-border-color: $border-level-1-color;
+$select-input-color: $text-color-primary;
+$select-option-checkbox-label-color-hover: inherit;
+$select-option-checkbox-input-color-hover: $brand-color;
+$select-right-icon-hover: $brand-color;
+$select-loading-tips-bg-color: $bg-color-container;
+
+// 尺寸
+$select-height-s: $comp-size-xs;
+$select-height-default: $comp-size-m;
+$select-height-l: $comp-size-xl;
+$select-option-height-s: $comp-size-xxs;
+$select-option-height-default: $comp-size-s;
+$select-option-height-l: $comp-size-l;
+$select-dropdown-max-height: 300px;
+
+// font
+$select-font-s: $font-body-small;
+$select-font-l: $font-body-large;
+$select-font-m: $font-body-medium;
+
+//阴影
+$select-dropdown-shadow: $shadow-2;
+$select-input-shadow: 0 0 0 2px $brand-color-focus;
+
+//radius
+$select-border-radius: $border-radius-default;
+$select-option-border-radius: $border-radius-default;
+
+// padding
+$select-option-padding-s: 0 $comp-paddingLR-s;
+$select-option-padding-default: 0 $comp-paddingLR-s;
+$select-option-padding-l: 0 $comp-paddingLR-m;
+$select-optiongroup-border-padding: $comp-margin-xs;
+$select-dropdown-padding: $pop-padding-m;
+$select-dropdown-padding-l: $pop-padding-l;
+$select-dropdown-padding-s: $pop-padding-s;
+$select-dropdown-popup-padding: 0;
+// margin
+$select-optiongroup-border-margin: $comp-margin-xs;
+$select-dropdown-margin: $comp-paddingTB-s 0;
+$select-options-margin-top: $comp-paddingTB-xxs;
+$select-empty-padding: 0 $comp-paddingLR-s;
+$select-loading-tips-padding: $comp-paddingTB-s;

package/styles/components/select-input/_index.scss

@@ -1,5 +1,5 @@
-@import '../../vars.scss';
-
-@import './_var.scss';
-
-@import '../../mixins/_reset.scss';
+@use '../../vars.scss' as *;
+
+@use './_var.scss' as *;
+
+@use '../../mixins/_reset.scss' as *;

package/styles/components/select-input/_var.scss

@@ -1,3 +1,4 @@
-$select-input-focus-bg: $bg-color-container-hover;
-$select-input-border-radius: $border-radius-default;
-$select-input-shadow: 0 0 0 2px $brand-color-focus;
+@use "../../_vars.scss" as *;
+$select-input-focus-bg: $bg-color-container-hover;
+$select-input-border-radius: $border-radius-default;
+$select-input-shadow: 0 0 0 2px $brand-color-focus;

package/styles/components/slider/_index.scss

@@ -1,241 +1,241 @@
-// 组件允许单个组件打包，因此默认引入公共基础样式
-
-@import "../../_vars.scss";
-
-@import "./_vars.scss";
-
-@import "./_mixins.scss";
-
-@import "../../mixins/_reset.scss";
-
-.#{$prefix}-slider__input-container {
-  display: flex;
-  align-items: center;
-  margin-left: $slider-input-margin-left;
-
-  &.is-vertical {
-    padding-top: $slider-input-vertical-padding-top;
-    margin-left: $slider-input-vertical-margin-left;
-  }
-
-  .#{$prefix}-slider__center-line {
-    width: $slider-center-line-width;
-    height: $slider-center-line-height;
-    background: $slider-center-line-background;
-    margin: $slider-center-line-margin;
-  }
-}
-
-.#{$prefix}-slider {
-  @include reset;
-
-  height: $slider-height;
-  width: 100%;
-  position: relative;
-  padding: $slider-padding;
-
-  &__container {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &.is-vertical {
-      height: 100%;
-      flex-direction: column;
-    }
-  }
-
-  &__rail {
-    position: absolute;
-    width: 100%;
-    height: $slider-rail-track-step-size;
-    background-color: $slider-background;
-    transition: $anim-duration-base linear;
-    border-radius: $slider-border-radius;
-
-    &:hover {
-      background-color: $slider-background-hover;
-    }
-  }
-
-  &__track {
-    position: absolute;
-    height: $slider-rail-track-step-size;
-    background-color: $slider-background-current;
-    right: auto;
-    border-radius: $slider-border-radius;
-  }
-
-  &__step {
-    position: absolute;
-    width: 100%;
-    height: $slider-rail-track-step-size;
-    cursor: pointer;
-  }
-
-  &__button {
-    width: $slider-control-bar-size;
-    height: $slider-control-bar-size;
-    border: 2px solid $slider-control-bar-border;
-    background-color: $slider-control-bar-background;
-    border-radius: $border-radius-circle;
-    transition: 0.2s;
-    user-select: none;
-    box-sizing: border-box;
-    box-shadow: $slider-shadow;
-
-    &--dragging {
-      box-shadow: $slider-input-shadow;
-    }
-
-    &:hover {
-      background-color: $slider-control-bar-background-hover;
-    }
-  }
-
-  &__button-wrapper {
-    position: absolute;
-    z-index: 2;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    background-color: transparent;
-    text-align: center;
-    user-select: none;
-    line-height: normal;
-    outline: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-  }
-
-  &__stop {
-    position: absolute;
-    width: $slider-stop-width;
-    height: $slider-stop-height;
-    background-color: $slider-background;
-    top: 4px;
-  }
-
-  &__mark {
-    position: absolute;
-    top: 2px;
-    left: 0;
-    width: 100%;
-  }
-
-  &__mark-text {
-    position: absolute;
-    display: inline-block;
-    font: $slider-text-font;
-    color: $slider-text;
-    top: $slider-text-top;
-    transform: translateX(-50%);
-    cursor: pointer;
-    white-space: nowrap;
-
-    &:first-child {
-      transform: translateX(0%);
-    }
-
-    &:last-child {
-      transform: translateX(-100%);
-    }
-  }
-}
-
-.#{$prefix}-slider--vertical {
-  height: $slider-vertical-height;
-  padding: $slider-vertical-padding;
-  display: flex;
-  justify-content: center;
-  position: relative;
-
-  .#{$prefix}-slider__rail {
-    width: $slider-rail-track-step-size;
-    height: 100%;
-  }
-
-  .#{$prefix}-slider__track {
-    width: $slider-rail-track-step-size;
-    top: auto;
-  }
-
-  .#{$prefix}-slider__step {
-    width: $slider-rail-track-step-size;
-    height: 100%;
-  }
-
-  .#{$prefix}-slider__handle {
-    margin-top: $slider-vertical-handle-margin-top;
-    margin-left: $slider-vertical-handle-margin-left;
-    top: auto;
-    transform: translateY(50%);
-  }
-
-  .#{$prefix}-slider__mark {
-    top: 0;
-    left: 12px;
-    width: $slider-vertical-mark-width;
-    height: 100%;
-  }
-
-  .#{$prefix}-slider__stop {
-    width: $slider-stop-height;
-    height: $slider-stop-width;
-    left: 4px;
-    background-color: $slider-background;
-  }
-
-  .#{$prefix}-slider__mark-text {
-    transform: translateY(-50%);
-    margin-top: $slider-vertical-text-margin-top;
-    margin-left: $slider-vertical-text-margin-left;
-  }
-}
-
-.#{$prefix}-slider--vertical .#{$prefix}-slider__button-wrapper {
-  top: auto;
-  position: absolute;
-  z-index: 2;
-  left: 50%;
-  transform: translate(-50%, 50%);
-  background-color: transparent;
-  text-align: center;
-  user-select: none;
-  line-height: normal;
-  outline: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-}
-
-.#{$prefix}-is-disabled {
-  cursor: not-allowed;
-
-  .#{$prefix}-slider__track {
-    background-color: $slider-background-current-disabled;
-  }
-
-  .#{$prefix}-slider__rail {
-    background-color: $slider-background-disabled;
-  }
-
-  .#{$prefix}-slider__handle {
-    border: 2px solid $slider-background-current-disabled;
-  }
-
-  .#{$prefix}-slider__button {
-    border-color: $slider-control-bar-border-disabled;
-    outline: none;
-  }
-
-  .#{$prefix}-slider__mark-text {
-    color: $slider-text-disabled;
-    cursor: not-allowed;
-  }
-
-  .#{$prefix}-slider__button-wrapper {
-    cursor: not-allowed;
-  }
-}
+// 组件允许单个组件打包，因此默认引入公共基础样式
+
+@use "../../_vars.scss" as *;
+
+@use "./_vars.scss" as *;
+
+@use "./_mixins.scss" as *;
+
+@use "../../mixins/_reset.scss" as *;
+
+.#{$prefix}-slider__input-container {
+  display: flex;
+  align-items: center;
+  margin-inline-start: $slider-input-margin-left;
+
+  &.is-vertical {
+    padding-top: $slider-input-vertical-padding-top;
+    margin-inline-start: $slider-input-vertical-margin-left;
+  }
+
+  .#{$prefix}-slider__center-line {
+    width: $slider-center-line-width;
+    height: $slider-center-line-height;
+    background: $slider-center-line-background;
+    margin: $slider-center-line-margin;
+  }
+}
+
+.#{$prefix}-slider {
+  @include reset;
+
+  height: $slider-height;
+  width: 100%;
+  position: relative;
+  padding: $slider-padding;
+
+  &__container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.is-vertical {
+      height: 100%;
+      flex-direction: column;
+    }
+  }
+
+  &__rail {
+    position: absolute;
+    width: 100%;
+    height: $slider-rail-track-step-size;
+    background-color: $slider-background;
+    transition: $anim-duration-base linear;
+    border-radius: $slider-border-radius;
+
+    &:hover {
+      background-color: $slider-background-hover;
+    }
+  }
+
+  &__track {
+    position: absolute;
+    height: $slider-rail-track-step-size;
+    background-color: $slider-background-current;
+    right: auto;
+    border-radius: $slider-border-radius;
+  }
+
+  &__step {
+    position: absolute;
+    width: 100%;
+    height: $slider-rail-track-step-size;
+    cursor: pointer;
+  }
+
+  &__button {
+    width: $slider-control-bar-size;
+    height: $slider-control-bar-size;
+    border: 2px solid $slider-control-bar-border;
+    background-color: $slider-control-bar-background;
+    border-radius: $border-radius-circle;
+    transition: 0.2s;
+    user-select: none;
+    box-sizing: border-box;
+    box-shadow: $slider-shadow;
+
+    &--dragging {
+      box-shadow: $slider-input-shadow;
+    }
+
+    &:hover {
+      background-color: $slider-control-bar-background-hover;
+    }
+  }
+
+  &__button-wrapper {
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background-color: transparent;
+    text-align: center;
+    user-select: none;
+    line-height: normal;
+    outline: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  &__stop {
+    position: absolute;
+    width: $slider-stop-width;
+    height: $slider-stop-height;
+    background-color: $slider-background;
+    top: 4px;
+  }
+
+  &__mark {
+    position: absolute;
+    top: 2px;
+    inset-inline-start: 0;
+    width: 100%;
+  }
+
+  &__mark-text {
+    position: absolute;
+    display: inline-block;
+    font: $slider-text-font;
+    color: $slider-text;
+    top: $slider-text-top;
+    transform: translateX(-50%);
+    cursor: pointer;
+    white-space: nowrap;
+
+    &:first-child {
+      transform: translateX(0%);
+    }
+
+    &:last-child {
+      transform: translateX(-100%);
+    }
+  }
+}
+
+.#{$prefix}-slider--vertical {
+  height: $slider-vertical-height;
+  padding: $slider-vertical-padding;
+  display: flex;
+  justify-content: center;
+  position: relative;
+
+  .#{$prefix}-slider__rail {
+    width: $slider-rail-track-step-size;
+    height: 100%;
+  }
+
+  .#{$prefix}-slider__track {
+    width: $slider-rail-track-step-size;
+    top: auto;
+  }
+
+  .#{$prefix}-slider__step {
+    width: $slider-rail-track-step-size;
+    height: 100%;
+  }
+
+  .#{$prefix}-slider__handle {
+    margin-top: $slider-vertical-handle-margin-top;
+    margin-inline-start: $slider-vertical-handle-margin-left;
+    top: auto;
+    transform: translateY(50%);
+  }
+
+  .#{$prefix}-slider__mark {
+    top: 0;
+    inset-inline-start: 12px;
+    width: $slider-vertical-mark-width;
+    height: 100%;
+  }
+
+  .#{$prefix}-slider__stop {
+    width: $slider-stop-height;
+    height: $slider-stop-width;
+    inset-inline-start: 4px;
+    background-color: $slider-background;
+  }
+
+  .#{$prefix}-slider__mark-text {
+    transform: translateY(-50%);
+    margin-top: $slider-vertical-text-margin-top;
+    margin-inline-start: $slider-vertical-text-margin-left;
+  }
+}
+
+.#{$prefix}-slider--vertical .#{$prefix}-slider__button-wrapper {
+  top: auto;
+  position: absolute;
+  z-index: 2;
+  inset-inline-start: 50%;
+  transform: translate(-50%, 50%);
+  background-color: transparent;
+  text-align: center;
+  user-select: none;
+  line-height: normal;
+  outline: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+
+.#{$prefix}-is-disabled {
+  cursor: not-allowed;
+
+  .#{$prefix}-slider__track {
+    background-color: $slider-background-current-disabled;
+  }
+
+  .#{$prefix}-slider__rail {
+    background-color: $slider-background-disabled;
+  }
+
+  .#{$prefix}-slider__handle {
+    border: 2px solid $slider-background-current-disabled;
+  }
+
+  .#{$prefix}-slider__button {
+    border-color: $slider-control-bar-border-disabled;
+    outline: none;
+  }
+
+  .#{$prefix}-slider__mark-text {
+    color: $slider-text-disabled;
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}-slider__button-wrapper {
+    cursor: not-allowed;
+  }
+}