@use 'sass:map';
|
|
@use 'mixins/mixins' as *;
|
@use 'mixins/utils' as *;
|
@use 'mixins/var' as *;
|
@use 'mixins/button' as *;
|
@use 'common/var' as *;
|
|
$radio-font-size: () !default;
|
$radio-font-size: map.merge(
|
(
|
'large': 14px,
|
'small': 12px,
|
),
|
$radio-font-size
|
);
|
|
@include b(radio) {
|
@include set-component-css-var('radio', $radio);
|
}
|
|
@include b(radio) {
|
color: getCssVar('radio-text-color');
|
font-weight: getCssVar('radio-font-weight');
|
position: relative;
|
cursor: pointer;
|
display: inline-flex;
|
align-items: center;
|
white-space: nowrap;
|
outline: none;
|
font-size: getCssVar('font-size', 'base');
|
user-select: none;
|
margin-right: 32px;
|
height: map.get($radio-height, 'default');
|
|
@each $size in (large, small) {
|
&.#{$namespace}-radio--#{$size} {
|
height: map.get($radio-height, $size);
|
}
|
}
|
|
@include when(bordered) {
|
padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width
|
0 map.get($checkbox-bordered-padding-left, 'default')-$border-width;
|
|
border-radius: getCssVar('border-radius-base');
|
border: getCssVar('border');
|
box-sizing: border-box;
|
|
&.is-checked {
|
border-color: getCssVar('color-primary');
|
}
|
|
&.is-disabled {
|
cursor: not-allowed;
|
border-color: getCssVar('border-color-lighter');
|
}
|
|
@each $size in (large, small) {
|
&.#{$namespace}-radio--#{$size} {
|
padding: 0
|
map.get($checkbox-bordered-padding-right, $size)-$border-width
|
0
|
map.get($checkbox-bordered-padding-left, $size)-$border-width;
|
border-radius: getCssVar('border-radius-base');
|
|
.#{$namespace}-radio__label {
|
font-size: map.get($button-font-size, $size);
|
}
|
|
.#{$namespace}-radio__inner {
|
height: map.get($radio-bordered-input-height, $size);
|
width: map.get($radio-bordered-input-width, $size);
|
}
|
}
|
}
|
}
|
|
&:last-child {
|
margin-right: 0;
|
}
|
|
@include e(input) {
|
white-space: nowrap;
|
cursor: pointer;
|
outline: none;
|
display: inline-flex;
|
position: relative;
|
vertical-align: middle;
|
|
@include when(disabled) {
|
.#{$namespace}-radio__inner {
|
background-color: map.get($radio-disabled, 'input-fill');
|
border-color: map.get($radio-disabled, 'input-border-color');
|
cursor: not-allowed;
|
|
&::after {
|
cursor: not-allowed;
|
background-color: map.get($radio-disabled, 'icon-color');
|
}
|
|
& + .#{$namespace}-radio__label {
|
cursor: not-allowed;
|
}
|
}
|
&.is-checked {
|
.#{$namespace}-radio__inner {
|
background-color: map.get($radio-disabled, 'checked-input-fill');
|
border-color: map.get($radio-disabled, 'checked-input-border-color');
|
|
&::after {
|
background-color: map.get($radio-disabled, 'checked-icon-color');
|
}
|
}
|
}
|
& + span.#{$namespace}-radio__label {
|
color: getCssVar('text-color', 'placeholder');
|
cursor: not-allowed;
|
}
|
}
|
|
@include when(checked) {
|
.#{$namespace}-radio__inner {
|
border-color: map.get($radio-checked, 'input-border-color');
|
background: map.get($radio-checked, 'icon-color');
|
|
&::after {
|
transform: translate(-50%, -50%) scale(1);
|
}
|
}
|
|
& + .#{$namespace}-radio__label {
|
color: map.get($radio-checked, 'text-color');
|
}
|
}
|
|
@include when(focus) {
|
.#{$namespace}-radio__inner {
|
border-color: getCssVar('radio-input-border-color-hover');
|
}
|
}
|
}
|
@include e(inner) {
|
border: getCssVar('radio-input-border');
|
border-radius: getCssVar('radio-input-border-radius');
|
width: getCssVar('radio-input-width');
|
height: getCssVar('radio-input-height');
|
background-color: getCssVar('radio-input-bg-color');
|
position: relative;
|
cursor: pointer;
|
display: inline-block;
|
box-sizing: border-box;
|
|
&:hover {
|
border-color: getCssVar('radio-input-border-color-hover');
|
}
|
|
&::after {
|
width: 4px;
|
height: 4px;
|
border-radius: getCssVar('radio-input-border-radius');
|
background-color: getCssVar('color-white');
|
content: '';
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%) scale(0);
|
transition: transform 0.15s ease-in;
|
}
|
}
|
|
@include e(original) {
|
opacity: 0;
|
outline: none;
|
position: absolute;
|
z-index: -1;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: 0;
|
|
&:focus-visible {
|
& + .#{$namespace}-radio__inner {
|
outline: 2px solid getCssVar('radio-input-border-color-hover');
|
outline-offset: 1px;
|
border-radius: getCssVar('radio-input-border-radius');
|
}
|
}
|
}
|
|
&:focus:not(:focus-visible):not(.is-focus):not(:active):not(.is-disabled) {
|
/*获得焦点时 样式提醒*/
|
.#{$namespace}-radio__inner {
|
box-shadow: 0 0 2px 2px getCssVar('radio-input-border-color-hover');
|
}
|
}
|
|
@include e(label) {
|
font-size: getCssVar('radio-font-size');
|
padding-left: 8px;
|
}
|
|
@each $size in (large, small) {
|
&.#{$namespace}-radio--#{$size} {
|
@include e(label) {
|
font-size: map.get($radio-font-size, $size);
|
}
|
@include e(inner) {
|
width: map.get($radio-font-size, $size);
|
height: map.get($radio-font-size, $size);
|
}
|
}
|
}
|
}
|
