@tendaui/components 1.0.0 → 1.0.2

package/styles/components/select/_var.scss

@@ -1,65 +1,65 @@
-// 颜色
-$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;
+// 颜色
+$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';
+@import '../../vars.scss';
+
+@import './_var.scss';
+
+@import '../../mixins/_reset.scss';

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

@@ -1,3 +1,3 @@
-$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;
+$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

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

package/styles/components/slider/_vars.scss

@@ -0,0 +1,50 @@
+$slider-background: $bg-color-secondarycomponent;
+$slider-background-current: $brand-color;
+$slider-text: $text-color-primary;
+$slider-control-bar-background: #fff; // 滑块背景色不随默认/深色模式切换改变，固定为白色，故不使用背景色 token
+$slider-control-bar-border: $brand-color;
+
+$slider-background-hover: $bg-color-secondarycomponent-hover;
+$slider-control-bar-background-hover: $gray-color-1; // 滑块背景色不随默认/深色模式切换改变，hover 后颜色固定为 $gray-color-1
+
+$slider-background-disabled: $bg-color-component-disabled;
+$slider-background-current-disabled: $brand-color-disabled;
+$slider-control-bar-border-disabled: $brand-color-disabled;
+$slider-text-disabled: $text-color-disabled;
+$slider-shadow: $shadow-1;
+$slider-input-shadow: 0 0 0px 2px $brand-color-focus;
+$slider-center-line-background: rgba(0, 0, 0, 90%);
+
+// 尺寸
+$slider-input-width: 80px;
+$slider-row-input-width: 120px;
+$slider-rail-track-step-size: $size-2;
+$slider-height: calc($comp-paddingTB-xs * 2 + $slider-rail-track-step-size);
+$slider-control-bar-size: $comp-size-xxxs;
+$slider-vertical-height: 100%;
+$slider-vertical-mark-width: 18px;
+$slider-stop-width: 1px;
+$slider-stop-height: $size-2;
+$slider-center-line-width: $size-4;
+$slider-center-line-height: 1px;
+
+// 边距
+$slider-input-margin-left: $comp-margin-xxl;
+$slider-input-vertical-padding-top: $comp-paddingTB-l;
+$slider-input-vertical-margin-left: 0px;
+$slider-padding: $comp-paddingTB-xs 0;
+$slider-vertical-padding: 0;
+$slider-vertical-handle-margin-top: -6px;
+$slider-vertical-handle-margin-left: -5px;
+$slider-vertical-text-margin-top: 0;
+$slider-vertical-text-margin-left: $comp-margin-xxs;
+$slider-center-line-margin: 0 $comp-margin-s;
+
+// 字体
+$slider-text-font: $font-body-small;
+
+// 边框
+$slider-border-radius: $border-radius-round;
+
+// 定位
+$slider-text-top: calc($slider-rail-track-step-size + $comp-paddingTB-xs + 2px);