@tendaui/components 1.0.0 → 1.2.3

package/styles/components/radio/_index.scss

@@ -0,0 +1,376 @@
+// 组件允许单个组件打包，因此默认引入公共基础样式
+
+@import "../../vars.scss";
+@import "./_var.scss";
+@import "./_mixins.scss";
+@import "../../mixins/_reset.scss";
+@import "../../mixins/_scrollbar.scss";
+@import "../../mixins/_focus.scss";
+
+// <name> 替换为组件名
+.#{$radio-cls}-group {
+  @include reset;
+
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  max-width: 100%;
+  border-radius: $border-radius-default;
+  flex-wrap: wrap;
+  @include scrollbar(4px);
+
+  .#{$radio-cls} {
+    margin-right: $radio-margin-right;
+  }
+
+  &.#{$radio-cls}-group__outline {
+    flex-wrap: wrap;
+    row-gap: $comp-margin-xs;
+
+    &.#{$prefix}-size-s {
+      .#{$radio-button--cls} {
+        height: $radio-outline-height-small;
+      }
+    }
+
+    &.#{$prefix}-size-m {
+      .#{$radio-button--cls} {
+        height: $radio-outline-height-medium;
+      }
+    }
+
+    &.#{$prefix}-size-l {
+      .#{$radio-button--cls} {
+        height: $radio-outline-height-large;
+      }
+    }
+
+    .#{$radio-button--cls} {
+      &:first-child {
+        border-radius: $border-radius-default 0 0 $border-radius-default;
+      }
+
+      &:last-child {
+        border-radius: 0 $border-radius-default $border-radius-default 0;
+      }
+
+      &:only-child {
+        border-radius: $border-radius-default;
+      }
+
+      &.#{$prefix}-is-checked {
+        color: $radio-button-color-outline-checked;
+      }
+
+      &.#{$prefix}-is-disabled {
+        &.#{$prefix}-is-checked {
+          color: $brand-color-disabled;
+          border-color: $brand-color-disabled;
+          background-color: $radio-button-background-color-outline-disabled-checked;
+        }
+      }
+    }
+  }
+
+  &.#{$radio-cls}-group--filled {
+    border-color: $radio-button-group-background-color-filled;
+    padding: $radio-group-padding;
+    border-radius: $border-radius-default;
+    background-color: $radio-button-group-background-color-filled;
+    position: relative;
+
+    .#{$radio-cls}-group__bg-block {
+      position: absolute;
+      left: $radio-group-filled-bg-block-left;
+      top: $radio-group-filled-bg-block-top;
+      width: 0;
+      height: calc(100% - 4px);
+      background-color: $radio-button-background-color-default-filled-checked;
+      transition: $radio-group-transition;
+      border-radius: $radio-button-border-radius;
+    }
+
+    .#{$radio-button--cls} {
+      color: $radio-button-color-filled;
+      border: 0;
+      background-color: transparent;
+
+      &:hover {
+        color: $radio-button-color-filled-hover;
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: $radio-button-before-left;
+        top: $radio-button-before-top;
+        transform: $radio-button-before-transition;
+        width: $radio-button-before-width;
+        height: calc(100% - 16px);
+        background-color: $component-border;
+        transition: opacity $anim-duration-base $anim-time-fn-ease-out;
+      }
+
+      &:first-child {
+        &::before {
+          opacity: $radio-opacity-transparent;
+        }
+      }
+
+      &.#{$prefix}-is-checked {
+        position: relative;
+        color: $radio-button-color-default-filled-checked;
+        z-index: 1;
+        border: 0;
+        transition: color $anim-duration-base linear;
+
+        &::before {
+          opacity: $radio-opacity-transparent;
+        }
+
+        & + label {
+          &::before {
+            opacity: $radio-opacity-transparent;
+          }
+        }
+      }
+
+      &.#{$prefix}-is-disabled {
+        background-color: transparent;
+
+        &.#{$prefix}-is-checked {
+          color: $radio-button-color-default-filled-disabled-checked;
+        }
+
+        &.#{$prefix}-is-checked ~ .#{$radio-cls}-group__bg-block {
+          background-color: $radio-button-background-color-default-filled-disabled-checked;
+        }
+      }
+    }
+  }
+
+  &.#{$radio-cls}-group--primary-filled {
+    .#{$radio-cls}-group__bg-block {
+      background-color: $radio-button-background-color-primary-filled-checked;
+    }
+
+    .#{$radio-button--cls} {
+      &.#{$prefix}-is-checked {
+        color: $radio-button-color-primary-filled-checked;
+      }
+
+      &.#{$prefix}-is-disabled {
+        &.#{$prefix}-is-checked {
+          color: $radio-button-color-primary-filled-checked;
+        }
+
+        &.#{$prefix}-is-checked ~ .#{$radio-cls}-group__bg-block {
+          background-color: $radio-button-background-color-primary-filled-disabled-checked;
+        }
+      }
+    }
+  }
+
+  &.#{$prefix}-size-s {
+    .#{$radio-button--cls} {
+      height: $radio-height-small;
+      padding: $radio-button-padding-small;
+      font: $radio-button-font-small;
+
+      &::before {
+        height: calc(100% - 16px);
+      }
+    }
+  }
+
+  &.#{$prefix}-size-m {
+    .#{$radio-button--cls} {
+      height: $radio-height-medium;
+      padding: $radio-button-padding-medium;
+      font: $radio-button-font-medium;
+
+      &::before {
+        height: calc(100% - 20px);
+      }
+    }
+  }
+
+  &.#{$prefix}-size-l {
+    .#{$radio-button--cls} {
+      height: $radio-height-large;
+      padding: $radio-button-padding-large;
+      font: $radio-button-font-large;
+
+      &::before {
+        height: calc(100% - 24px);
+      }
+    }
+  }
+
+  .#{$radio-button--cls} {
+    cursor: pointer;
+    position: relative;
+    border: $radio-button-border;
+    border-color: $radio-button-border-color-default;
+    border-right: 0;
+    display: inline-flex;
+    align-items: center;
+    transition: $radio-button-transition;
+    color: $radio-label-color;
+    white-space: nowrap;
+    box-sizing: border-box;
+
+    &:first-child {
+      border-radius: $radio-button-border-radius 0 0 $radio-button-border-radius;
+    }
+
+    &:last-child {
+      border-right: $radio-button-border;
+      border-right-color: $radio-button-border-color-default;
+      border-radius: 0 $radio-button-border-radius $radio-button-border-radius 0;
+    }
+
+    &__former {
+      opacity: $radio-opacity-transparent;
+      height: 0;
+      width: 0;
+      @include reset;
+    }
+
+    &:hover {
+      color: $radio-button-color-outline-checked;
+    }
+
+    &.#{$prefix}-is-checked {
+      border-right: $radio-button-border;
+      border-color: $radio-button-border-color-checked;
+      transition: border-color $anim-duration-base $anim-time-fn-ease-out;
+
+      & + .#{$radio-button--cls} {
+        border-left: 0;
+      }
+    }
+
+    &.#{$prefix}-is-disabled {
+      cursor: not-allowed;
+      color: $radio-button-color-disabled;
+      background-color: $radio-button-background-color-disabled;
+
+      &:hover {
+        border-color: $radio-button-border-color-default;
+        color: $radio-button-color-disabled;
+
+        &::after {
+          width: 0;
+        }
+      }
+
+      &.#{$prefix}-is-checked {
+        color: $radio-button-color-disabled-checked;
+
+        &::after {
+          width: 0;
+        }
+      }
+    }
+  }
+}
+
+.#{$radio-cls} {
+  @include reset;
+
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+
+  &__former {
+    @include reset;
+    opacity: $radio-opacity-transparent;
+    position: absolute;
+  }
+
+  &__input {
+    position: relative;
+    display: inline-block;
+    width: $radio-size;
+    height: $radio-size;
+    vertical-align: middle;
+    border-radius: $border-radius-circle;
+    border: $radio-input-border;
+    background-color: $radio-input-color;
+    transition: $radio-input-transition;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: $radio-size;
+      height: $radio-size;
+      margin-top: -$radio-dot-size;
+      margin-left: -$radio-dot-size;
+      transform: scale(0.5);
+      opacity: $radio-opacity-transparent;
+      border-radius: $border-radius-circle;
+      background-color: $radio-dot-color;
+      transition: all $anim-duration-base $anim-time-fn-ease-out;
+    }
+  }
+
+  &__label {
+    display: inline-block;
+    margin-left: $radio-input-label-spacer;
+    color: $radio-label-color;
+    vertical-align: middle;
+    font: $radio-font;
+    white-space: nowrap;
+  }
+
+  &:hover {
+    .#{$radio-cls}__input {
+      border-color: $radio-dot-color;
+    }
+  }
+
+  &.#{$prefix}-is-checked {
+    .#{$radio-cls}__input {
+      border-color: $radio-dot-color;
+
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
+
+  &.#{$prefix}-is-disabled {
+    cursor: not-allowed;
+
+    .#{$radio-cls}__label {
+      color: $radio-button-color-disabled;
+    }
+
+    .#{$radio-cls}__input {
+      background-color: $radio-input-color-disabled;
+    }
+
+    &:hover {
+      .#{$radio-cls}__input {
+        border-color: $radio-border-color;
+      }
+    }
+
+    &.#{$prefix}-is-checked {
+      .#{$radio-cls}__input {
+        border-color: $radio-border-color;
+
+        &::after {
+          background-color: $radio-dot-color-disabled-checked;
+        }
+      }
+    }
+  }
+}
+
+.#{$prefix}-radio:focus-visible {
+  @include tab-focus-style-rect;
+}

package/styles/components/radio/_var.scss

@@ -0,0 +1,92 @@
+// 组件变量
+// 名称可按如下规则定义：
+// <component>-[type]-[attrtype]-<attr>-[status]
+
+// component:组件名，如button
+// type: 组件类型，如 button 的次要按钮（line）
+// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
+// attr: 属性名称，如color、height、radius等
+// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
+
+// 如：$button-line-bg-color-hover
+// 如：$button-line-height-s
+
+$radio-cls: "#{$prefix}-radio";
+$radio-button--cls: "#{$prefix}-radio-button";
+
+// 颜色
+$radio-border-color: $border-level-2-color;
+
+$radio-input-color: $bg-color-container;
+$radio-input-color-disabled: $bg-color-component-disabled;
+
+$radio-dot-color: $brand-color;
+$radio-dot-color-disabled: $bg-color-component-disabled;
+$radio-dot-color-disabled-checked: $text-color-disabled;
+
+$radio-label-color: $text-color-primary;
+
+$radio-button-border-color-default: $border-level-2-color;
+$radio-button-border-color-hover: $brand-color-hover;
+$radio-button-color-outline-hover: $brand-color-hover;
+$radio-button-border-color-checked: $brand-color;
+$radio-button-color-outline-checked: $brand-color;
+$radio-button-background-color-disabled: $bg-color-component-disabled;
+$radio-button-color-disabled: $text-color-disabled;
+$radio-button-background-color-outline-disabled-checked: $bg-color-specialcomponent;
+$radio-button-color-disabled-checked: $text-color-disabled;
+
+$radio-button-group-background-color-filled: $bg-color-component;
+$radio-button-color-filled: $text-color-secondary;
+$radio-button-color-filled-hover: $text-color-primary;
+$radio-button-color-default-filled-checked: $text-color-primary;
+$radio-button-color-primary-filled-checked: $text-color-anti;
+$radio-button-color-default-filled-disabled-checked: $text-color-disabled;
+$radio-button-background-color-default-filled-checked: $bg-color-container-select;
+$radio-button-background-color-primary-filled-checked: $brand-color;
+$radio-button-background-color-default-filled-disabled-checked: $bg-color-component-disabled;
+$radio-button-background-color-primary-filled-disabled-checked: $brand-color-disabled;
+
+// 尺寸
+$radio-size: 16px;
+$radio-dot-size: ($radio-size / 2);
+$radio-margin-right: $comp-margin-xxl;
+$radio-button-border-radius: $border-radius-small;
+$radio-outline-height-small: $comp-size-xs;
+$radio-outline-height-medium: $comp-size-m;
+$radio-outline-height-large: $comp-size-xl;
+$radio-height-small: calc($comp-size-xs - ($comp-paddingTB-xxs * 2));
+$radio-height-medium: calc($comp-size-m - ($comp-paddingTB-xxs * 2));
+$radio-height-large: calc($comp-size-xl - ($comp-paddingTB-xxs * 2));
+$radio-button-before-width: 1px;
+
+// 字号
+$radio-font: $font-body-medium;
+$radio-button-font-small: $font-body-small;
+$radio-button-font-medium: $font-body-medium;
+$radio-button-font-large: $font-body-large;
+
+// padding
+$radio-input-label-spacer: $comp-margin-s;
+$radio-button-padding-small: 0px $comp-paddingLR-s;
+$radio-button-padding-medium: $comp-paddingTB-xs $comp-paddingLR-l;
+$radio-button-padding-large: $comp-paddingTB-s $comp-paddingLR-xl;
+$radio-button-before-left: 0px;
+$radio-button-before-top: 50%;
+$radio-button-border: 1px solid;
+
+$radio-group-padding: $comp-paddingTB-xxs $comp-paddingLR-xxs;
+$radio-group-filled-bg-block-left: 2px;
+$radio-group-filled-bg-block-top: 2px;
+
+// 动画&过渡
+$radio-group-transition: all $anim-duration-base $anim-time-fn-easing;
+$radio-button-before-transition: translateY(-50%);
+$radio-button-transition: color $anim-duration-base $anim-time-fn-ease-out;
+$radio-input-transition: border $anim-duration-base $anim-time-fn-ease-out;
+
+// 透明度
+$radio-opacity-transparent: 0; // 全透明
+
+// 边框
+$radio-input-border: 1px solid $radio-border-color;