@tendaui/components 1.0.0

package/styles/components/select/_index.scss

@@ -0,0 +1,290 @@
+@import '../../_vars.scss';
+
+@import './_var.scss';
+
+@import '../../mixins/_text.scss';
+
+@import '../../mixins/_reset.scss';
+
+@import '../../mixins/_scrollbar.scss';
+
+// select
+.#{$prefix}-select__wrap {
+  width: 100%;
+}
+
+// dropdown
+.#{$prefix}-select__dropdown {
+  .#{$prefix}-popup__content {
+    @include scrollbar(8px, 2px);
+
+    margin: $select-dropdown-margin;
+    padding: 0; // 展开动画 如果有padding会直接生长 需要移动到内部
+    max-height: $select-dropdown-max-height;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    box-shadow: $select-dropdown-shadow;
+  }
+
+  &-inner {
+    min-height: $select-height-default;
+
+    // 嵌套无需 padding
+    .#{$prefix}-select__list .#{$prefix}-select__list {
+      padding: 0;
+    }
+
+    .#{$prefix}-select__list,
+    .#{$prefix}-tree {
+      padding: $select-dropdown-padding;
+    }
+
+    &--size-s {
+      min-height: $select-height-s;
+
+      .#{$prefix}-select__list,
+      .#{$prefix}-tree {
+        padding: $select-dropdown-padding-s;
+      }
+    }
+
+    &--size-l {
+      min-height: $select-height-l;
+
+      .#{$prefix}-select__list,
+      .#{$prefix}-tree {
+        padding: $select-dropdown-padding-l;
+      }
+    }
+  }
+}
+
+// 抹平 ul li 自带样式
+.#{$prefix}-select__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.#{$prefix}-select__dropdown.#{$prefix}-popup {
+  padding: $select-dropdown-popup-padding;
+}
+// empty
+.#{$prefix}-select__empty.#{$prefix}-size-s {
+  line-height: $select-height-s;
+}
+
+.#{$prefix}-select__empty {
+  text-align: center;
+  color: $select-color-empty;
+  line-height: $select-height-default;
+  padding: $select-empty-padding;
+}
+
+.#{$prefix}-select__empty.#{$prefix}-size-l {
+  line-height: $select-height-l;
+}
+
+// loading tips
+.#{$prefix}-select__loading-tips.#{$prefix}-size-s {
+  min-height: $select-height-s;
+  line-height: $select-height-s;
+}
+
+.#{$prefix}-select__loading-tips {
+  position: fixed;
+  top: $select-loading-tips-padding;
+  left: 0;
+  bottom: $select-loading-tips-padding;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $select-loading-tips-bg-color;
+  border-radius: $select-border-radius;
+  min-height: $select-height-default;
+  line-height: $select-height-default;
+  color: $select-color-empty;
+  z-index: 1000;
+}
+
+.#{$prefix}-select__loading-tips.#{$prefix}-size-l {
+  min-height: $select-height-l;
+  line-height: $select-height-l;
+}
+
+// option group
+.#{$prefix}-select-option-group + .#{$prefix}-select-option-group {
+  padding-top: $select-optiongroup-border-padding;
+  margin-top: $select-optiongroup-border-margin;
+}
+
+.#{$prefix}-select-option-group__divider
+  + .#{$prefix}-select-option-group__divider {
+  position: relative;
+
+  &::before {
+    content: '';
+    width: 100%;
+    height: 1px;
+    padding: $select-option-padding-default;
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    background-color: $select-optiongroup-border-color;
+    background-clip: content-box;
+  }
+}
+
+.#{$prefix}-select-option-group__header {
+  // & 表示 .#{$prefix}-select-option-group__header
+  &,
+  ul#{&} {
+    color: $select-option-group-header-color;
+    display: block;
+    height: $select-option-height-default;
+    line-height: $select-option-height-default;
+    padding: $select-option-padding-default;
+    box-sizing: border-box;
+    @include text-ellipsis();
+  }
+}
+
+.#{$prefix}-select-option-group__header.#{$prefix}-size-l {
+  height: $select-option-height-l;
+  line-height: $select-option-height-l;
+  padding: $select-option-padding-l;
+}
+
+.#{$prefix}-select-option-group__header.#{$prefix}-size-s {
+  height: $select-option-height-s;
+  line-height: $select-option-height-s;
+  padding: $select-option-padding-s;
+}
+
+// option
+.#{$prefix}-select-option {
+  display: flex;
+  align-items: center;
+  border-radius: $select-option-border-radius;
+  height: $select-option-height-default;
+  font: $font-body-medium;
+  cursor: pointer;
+  padding: $select-option-padding-default;
+  color: $select-option-color;
+  transition: background-color $anim-duration-base $anim-time-fn-easing;
+  box-sizing: border-box;
+
+  span {
+    position: relative;
+    @include text-ellipsis;
+  }
+
+  &:not(.#{$prefix}-is-disabled):not(.#{$prefix}-is-selected):hover {
+    background-color: $select-option-bg-color-hover;
+
+    .#{$prefix}-checkbox__label {
+      color: $select-option-checkbox-label-color-hover;
+    }
+
+    .#{$prefix}-checkbox__input {
+      border-color: $select-option-checkbox-input-color-hover;
+    }
+  }
+
+  .#{$prefix}-checkbox__label {
+    color: $select-option-color;
+    flex: 1;
+    @include text-ellipsis;
+  }
+
+  .#{$prefix}-checkbox {
+    width: 100%;
+  }
+
+  --ripple-color: $bg-color-container-active;
+}
+
+.#{$prefix}-select-option.#{$prefix}-is-disabled {
+  cursor: not-allowed;
+  color: $select-color-disabled;
+  background: $select-bg-color;
+
+  &:hover,
+  :active {
+    background: $select-bg-color;
+  }
+}
+
+.#{$prefix}-select-option.#{$prefix}-size-l {
+  height: $select-option-height-l;
+  padding: $select-option-padding-l;
+  font: $select-font-l;
+}
+.#{$prefix}-select-option.#{$prefix}-size-m {
+  font: $select-font-m;
+}
+.#{$prefix}-select-option.#{$prefix}-size-s {
+  height: $select-option-height-s;
+  padding: $select-option-padding-s;
+  font: $select-font-s;
+}
+
+.#{$prefix}-select-option.#{$prefix}-is-selected:not(.#{$prefix}-is-disabled) {
+  color: $select-selected-color;
+  background-color: $select-selected-bg-color;
+  transition: all $anim-duration-base linear;
+
+  .#{$prefix}-checkbox__label {
+    color: $select-selected-color;
+  }
+
+  &:hover {
+    background-color: $select-selected-bg-color-hover;
+  }
+}
+
+/** 规范 CSS 类名为 --hover */
+.#{$prefix}-select-option.#{$prefix}-select-option__hover,
+.#{$prefix}-select-option.#{$prefix}-select-option--hover {
+  &:not(.#{$prefix}-is-disabled),
+  &:not(.#{$prefix}-is-selected) {
+    background-color: $select-option-bg-color-hover;
+    .#{$prefix}-checkbox__input {
+      border-color: $select-option-checkbox-input-color-hover;
+    }
+  }
+  .#{$prefix}-checkbox__label {
+    color: $select-option-checkbox-label-color-hover;
+  }
+}
+
+.#{$prefix}-select-option + .#{$prefix}-select-option {
+  margin-top: $select-options-margin-top;
+}
+
+.#{$prefix}-select {
+  &.#{$prefix}-select-input--borderless {
+    .#{$prefix}-select__right-icon {
+      position: relative;
+      margin: 0;
+    }
+  }
+
+  .#{$prefix}-fake-arrow {
+    color: $select-placeholder-color;
+
+    &--active {
+      color: $select-border-color-active;
+    }
+  }
+}
+
+.#{$prefix}-is-selected.#{$prefix}-select-option__hover {
+  background-color: $brand-color-light-hover;
+
+  .#{$prefix}-checkbox__label {
+    color: $select-selected-color;
+  }
+}

package/styles/components/select/_var.scss

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

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

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

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

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

package/styles/components/switch/_index.scss

@@ -0,0 +1,279 @@
+@import '../../_vars.scss';
+
+@import './_vars.scss';
+
+@import './_mixins.scss';
+
+@import '../../mixins/_reset.scss';
+
+.#{$prefix}-switch {
+  @include reset;
+
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  align-items: center;
+  outline: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  height: $switch-height-default;
+  line-height: $switch-height-default;
+  border-radius: $border-radius-round;
+  min-width: $switch-min-width-default;
+  transition: $switch-transition;
+  background-color: $switch-unchecked-bg-color;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    background-color: $switch-unchecked-bg-color-hover;
+  }
+
+  &__handle {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: $switch-width-border-default;
+    left: $switch-width-border-default;
+    width: calc($switch-height-default - 2 * $switch-width-border-default);
+    height: calc($switch-height-default - 2 * $switch-width-border-default);
+    border-radius: $border-radius-round;
+    transition: $switch-handle-transition;
+    box-shadow: $shadow-1;
+
+    .t-icon {
+      font-size: calc($switch-height-default - 4px);
+      color: transparent;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: $border-radius-round;
+      background-color: $switch-handle-bg-color;
+      transition: $switch-handle-transition;
+    }
+  }
+
+  &:active:not(.#{$prefix}-is-disabled):not(.#{$prefix}-is-loading) {
+    .#{$prefix}-switch__handle::before {
+      left: 0;
+      right: -6px;
+    }
+
+    &.#{$prefix}-is-checked {
+      .#{$prefix}-switch__handle::before {
+        right: 0;
+        left: -6px;
+      }
+    }
+
+    .#{$prefix}-switch__content {
+      opacity: 0;
+    }
+  }
+
+  &__content {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    color: $switch-content-color-unchecked;
+    padding: 0 $switch-content-margin-right-default 0
+      $switch-content-margin-left-default;
+    font-size: $switch-content-font-size-default;
+    min-width: $switch-min-width-default;
+    transition: $switch-content-transition;
+
+    .t-icon {
+      font-size: $font-size-l;
+    }
+  }
+
+  &.#{$prefix}-is-checked {
+    background-color: $switch-checked-bg-color;
+
+    &:hover {
+      background-color: $switch-checked-bg-color-hover;
+    }
+
+    .#{$prefix}-switch__handle {
+      left: calc(100% - $switch-width-border-check-default);
+      transform: translate(-100%, 0);
+      width: calc(
+        $switch-height-default - 2 * $switch-width-border-check-default
+      );
+      height: calc(
+        $switch-height-default - 2 * $switch-width-border-check-default
+      );
+      top: $switch-width-border-check-default;
+    }
+
+    .#{$prefix}-switch__content {
+      padding: 0 $switch-content-margin-left-default 0
+        $switch-content-margin-right-default;
+      color: $switch-content-color-checked;
+    }
+  }
+
+  &.#{$prefix}-is-loading {
+    cursor: not-allowed;
+    background-color: $switch-unchecked-bg-color-loading;
+
+    .#{$prefix}-loading {
+      display: inline-flex;
+    }
+
+    .#{$prefix}-switch__handle {
+      .t-icon {
+        color: $switch-unchecked-bg-color-loading;
+      }
+    }
+
+    &.#{$prefix}-is-checked {
+      background-color: $switch-checked-bg-color-loading;
+
+      .#{$prefix}-switch__handle {
+        .t-icon {
+          color: $switch-checked-bg-color-loading;
+        }
+      }
+    }
+  }
+
+  &.#{$prefix}-is-disabled {
+    cursor: not-allowed;
+    background-color: $switch-unchecked-bg-color-disabled;
+
+    .#{$prefix}-switch__handle {
+      box-shadow: none;
+    }
+
+    &.#{$prefix}-is-checked {
+      background-color: $switch-checked-bg-color-disabled;
+
+      .#{$prefix}-switch__handle {
+        box-shadow: none;
+
+        .t-icon {
+          color: $switch-checked-bg-color-disabled;
+        }
+      }
+    }
+  }
+}
+
+.#{$prefix}-switch.#{$prefix}-size-l {
+  min-width: $switch-min-width-l;
+  height: $switch-height-l;
+  line-height: $switch-height-l;
+  border-radius: $border-radius-round;
+
+  &:active:not(.#{$prefix}-is-disabled):not(.#{$prefix}-is-loading) {
+    .#{$prefix}-switch__handle::before {
+      left: 0;
+      right: -8px;
+    }
+
+    &.#{$prefix}-is-checked {
+      .#{$prefix}-switch__handle::before {
+        right: 0;
+        left: -8px;
+      }
+    }
+  }
+
+  .#{$prefix}-switch__handle {
+    top: $switch-width-border-l;
+    left: $switch-width-border-l;
+    width: calc($switch-height-l - 2 * $switch-width-border-l);
+    height: calc($switch-height-l - 2 * $switch-width-border-l);
+
+    .t-icon {
+      font-size: calc($switch-height-l - 4px);
+    }
+  }
+
+  .#{$prefix}-switch__content {
+    padding: 0 $switch-content-margin-right-l 0 $switch-content-margin-left-l;
+    min-width: $switch-min-width-l;
+    font-size: $switch-content-font-size-l;
+
+    .t-icon {
+      font-size: $switch-content-font-size-l;
+    }
+  }
+
+  &.#{$prefix}-is-checked {
+    .#{$prefix}-switch__handle {
+      left: calc(100% - $switch-width-border-check-l);
+      top: $switch-width-border-check-l;
+      width: calc($switch-height-l - 2 * $switch-width-border-check-l);
+      height: calc($switch-height-l - 2 * $switch-width-border-check-l);
+    }
+
+    .#{$prefix}-switch__content {
+      padding: 0 $switch-content-margin-left-l 0 $switch-content-margin-right-l;
+    }
+  }
+}
+
+.#{$prefix}-switch.#{$prefix}-size-s {
+  min-width: $switch-min-width-s;
+  height: $switch-height-s;
+  line-height: $switch-height-s;
+  border-radius: $border-radius-round;
+
+  &:active:not(.#{$prefix}-is-disabled):not(.#{$prefix}-is-loading) {
+    .#{$prefix}-switch__handle::before {
+      left: 0;
+      right: -4px;
+    }
+
+    &.#{$prefix}-is-checked {
+      .#{$prefix}-switch__handle::before {
+        right: 0;
+        left: -4px;
+      }
+    }
+  }
+
+  .#{$prefix}-switch__handle {
+    top: $switch-width-border-s;
+    left: $switch-width-border-s;
+    width: calc($switch-height-s - 2 * $switch-width-border-s);
+    height: calc($switch-height-s - 2 * $switch-width-border-s);
+
+    .t-icon {
+      font-size: calc($switch-height-s - 4px);
+    }
+  }
+
+  .#{$prefix}-switch__content {
+    padding: 0 $switch-content-margin-right-s 0 $switch-content-margin-left-s;
+    min-width: $switch-min-width-s;
+    font-size: $switch-content-font-size-s;
+
+    .t-icon {
+      font-size: $switch-content-font-size-l;
+    }
+  }
+
+  &.#{$prefix}-is-checked {
+    .#{$prefix}-switch__handle {
+      left: calc(100% - $switch-width-border-check-s);
+      top: $switch-width-border-check-s;
+      width: calc($switch-height-s - 2 * $switch-width-border-check-s);
+      height: calc($switch-height-s - 2 * $switch-width-border-check-s);
+    }
+
+    .#{$prefix}-switch__content {
+      padding: 0 $switch-content-margin-left-s 0 $switch-content-margin-right-s;
+    }
+  }
+}

package/styles/components/switch/_vars.scss

@@ -0,0 +1,61 @@
+
+// 颜色
+$switch-checked-bg-color: $brand-color;
+$switch-checked-bg-color-hover: $brand-color-hover;
+$switch-checked-bg-color-loading: $brand-color-focus;
+$switch-checked-bg-color-disabled: $brand-color-disabled;
+
+$switch-unchecked-bg-color: $bg-color-secondarycomponent;
+$switch-unchecked-bg-color-hover: $bg-color-secondarycomponent-hover;
+$switch-unchecked-bg-color-loading: $bg-color-component-disabled;
+$switch-unchecked-bg-color-disabled: $bg-color-component-disabled;
+
+$switch-handle-bg-color: #fff;
+$switch-content-color-checked: $text-color-anti;
+$switch-content-color-unchecked: $text-color-anti;
+
+// 尺寸
+$switch-height-l: $comp-size-xs;
+$switch-height-default: $comp-size-xxs;
+$switch-height-s: $comp-size-xxxs;
+
+$switch-min-width-l: calc($switch-height-l / .618);
+$switch-min-width-default: calc($switch-height-default / .618);
+$switch-min-width-s: calc($switch-height-s / .618);
+
+//change uncheck handle size
+$switch-width-border-base: 5px;
+$switch-width-border-value: 1px; //公差值
+
+$switch-width-border-l: $switch-width-border-base;
+$switch-width-border-default: ($switch-width-border-base - $switch-width-border-value * 1);
+$switch-width-border-s: ($switch-width-border-base - $switch-width-border-value * 2);
+
+//change check handle size
+$switch-width-border-check-base: 3px;
+$switch-width-border-check-value: .5px; //公差值
+
+$switch-width-border-check-l: $switch-width-border-check-base;
+$switch-width-border-check-default: ($switch-width-border-check-base - $switch-width-border-check-value * 1);
+$switch-width-border-check-s: ($switch-width-border-check-base - $switch-width-border-check-value * 2);
+
+// 字体
+$switch-content-font-size-l: $font-size-l;
+$switch-content-font-size-default: $font-size-s;
+$switch-content-font-size-s: 9px;
+
+// 间距
+$switch-content-margin-left-l: calc($switch-min-width-l / 2 + 4px);
+$switch-content-margin-right-l: $comp-margin-s;
+
+$switch-content-margin-left-default: calc($switch-min-width-default / 2 + 2px);
+$switch-content-margin-right-default: $comp-margin-xs;
+
+$switch-content-margin-left-s: calc($switch-min-width-s / 2 + 2px);
+$switch-content-margin-right-s: $comp-margin-xxs;
+
+// 动画
+$switch-transition: all $anim-duration-base $anim-time-fn-easing;
+$switch-handle-transition: all $anim-duration-base $anim-time-fn-easing;
+$switch-content-transition: padding $anim-duration-base $anim-time-fn-easing,
+  opacity $anim-duration-base linear;