@tendaui/components 1.2.4 → 1.3.0

package/styles/components/radio/_vars.scss

@@ -1,89 +1,89 @@
-@use "../../_vars.scss" as *;
-// 组件变量
-// 名称可按如下规则定义// <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;
+@use "../../_vars.scss" as *;
+// 组件变量
+// 名称可按如下规则定义// <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;