@tendaui/components 1.2.4 → 1.3.0

package/styles/components/radio/_index.scss

@@ -1,376 +1,376 @@
-@use "../../_vars.scss" as *;
-// 组件允许单个组件打包，因此默认引入公共基础样式
-
-@use "./_vars.scss" as *;
-@use "./_mixins.scss" as *;
-@use "../../mixins/_reset.scss" as *;
-@use "../../mixins/_scrollbar.scss" as *;
-@use "../../mixins/_focus.scss" as *;
-
-// <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;
-}
+@use "../../_vars.scss" as *;
+// 组件允许单个组件打包，因此默认引入公共基础样式
+
+@use "./_vars.scss" as *;
+@use "./_mixins.scss" as *;
+@use "../../mixins/_reset.scss" as *;
+@use "../../mixins/_scrollbar.scss" as *;
+@use "../../mixins/_focus.scss" as *;
+
+// <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;
+}