You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
173 lines
4.7 KiB
173 lines
4.7 KiB
@import '~@/uni_modules/lime-style/index.scss';
|
|
@import '~@/uni_modules/lime-style/functions.scss';
|
|
$radio: #{$prefix}-radio;
|
|
$icon: #{$radio}__icon;
|
|
|
|
|
|
$radio-icon-size: create-var(radio-icon-size, 40rpx);
|
|
$radio-font-size: create-var(radio-font-size, 32rpx);
|
|
|
|
$radio-small-icon-size: create-var(radio-small-icon-size, 28rpx);
|
|
$radio-small-font-size: create-var(radio-small-font-size, 30rpx);
|
|
|
|
$radio-large-icon-size: create-var(radio-large-icon-size, 44rpx);
|
|
$radio-large-font-size: create-var(radio-large-font-size, 36rpx);
|
|
|
|
$radio-icon-border-width: create-var(radio-icon-border-width, 1rpx);
|
|
// $radio-icon-border-color: var(--l-radio-border-color, $border-color);
|
|
$radio-icon-border-radius: create-var(radio-icon-border-radius, 999rpx);
|
|
|
|
$radio-icon-bg-color: create-var(radio-icon-bg-color, white);
|
|
$radio-icon-border-color: create-var(radio-border-icon-color, $gray-5);
|
|
$radio-icon-disabled-color: create-var(radio-icon-disabled-color, $gray-5);
|
|
$radio-icon-disabled-bg-color: create-var(radio-icon-disabled-bg-color, $gray-1);
|
|
$radio-icon-checked-color: create-var(radio-icon-checked-color, $primary-color);
|
|
|
|
|
|
.#{$radio} {
|
|
/* #ifndef UNI-APP-X */
|
|
display: inline-flex;
|
|
/* #endif */
|
|
flex-direction: row;
|
|
align-items: center;
|
|
&__icon {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: $radio-icon-size;
|
|
height: $radio-icon-size;
|
|
align-self: center;
|
|
transition-property: all;
|
|
transition-duration: 200ms;
|
|
transition-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
|
/* #ifndef APP-ANDROID || APP-IOS */
|
|
&:after {
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
opacity: 0;
|
|
content: "";
|
|
transition-property: all;
|
|
transition-duration: 200ms;
|
|
transition-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
|
}
|
|
/* #endif */
|
|
&--dot,&--circle {
|
|
background-color: $radio-icon-bg-color;
|
|
border: $radio-icon-border-width solid $radio-icon-border-color;
|
|
border-radius: $radio-icon-border-radius;
|
|
}
|
|
&--circle {
|
|
/* #ifndef APP-ANDROID || APP-IOS */
|
|
&:after {
|
|
top: 48%;
|
|
left: 24%;
|
|
display: table;
|
|
width: divide(100%, 20) * 7;
|
|
height: divide(100%, 20) * 12;
|
|
border: calc(#{$radio-icon-size} / 7) solid transparent;
|
|
border-top: 0;
|
|
border-inline-start: 0;
|
|
transform: rotate(45deg) scale(0) translate(-50%,-50%);
|
|
content: "";
|
|
}
|
|
/* #endif */
|
|
}
|
|
&--circle#{&}--checked {
|
|
background-color: $radio-icon-checked-color;
|
|
border-color: $radio-icon-checked-color;
|
|
/* #ifndef APP-ANDROID || APP-IOS */
|
|
&:after {
|
|
opacity: 1;
|
|
transform: rotate(45deg) scale(1) translate(-50%,-50%);
|
|
border-color: white;
|
|
}
|
|
/* #endif */
|
|
}
|
|
|
|
&--dot {
|
|
/* #ifndef APP-ANDROID || APP-IOS */
|
|
&:after {
|
|
background-color: white;
|
|
border-radius: $radio-icon-border-radius;
|
|
transform: scale(0) translate(-50%,-50%);
|
|
}
|
|
/* #endif */
|
|
}
|
|
&--dot#{&}--checked{
|
|
background-color: $radio-icon-checked-color;
|
|
/* #ifndef APP-ANDROID || APP-IOS */
|
|
border-color: $radio-icon-checked-color;
|
|
&:after{
|
|
opacity: 1;
|
|
width: 44%;
|
|
height: 44%;
|
|
transform: scale(1) translate(-50%,-50%);
|
|
}
|
|
/* #endif */
|
|
}
|
|
&--line {
|
|
/* #ifndef APP-ANDROID || APP-IOS */
|
|
&:after {
|
|
top: 46%;
|
|
left: 0%;
|
|
inset-inline-start: 10%;
|
|
display: table;
|
|
width: divide(100%, 14) * 7;
|
|
height: divide(100%, 14) * 12;
|
|
border: calc(#{$radio-icon-size} / 7) solid transparent;
|
|
border-top: 0;
|
|
border-inline-start: 0;
|
|
transform: rotate(45deg) scale(0) translate(-50%,-50%);
|
|
content: "";
|
|
transition-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
|
}
|
|
/* #endif */
|
|
}
|
|
&--line#{&}--checked{
|
|
/* #ifndef APP-ANDROID || APP-IOS */
|
|
&:after{
|
|
opacity: 1;
|
|
transform: rotate(45deg) scale(1) translate(-50%,-50%);
|
|
border-color: $radio-icon-checked-color;
|
|
}
|
|
/* #endif */
|
|
}
|
|
&--circle#{&}--disabled, &--dot#{&}--disabled {
|
|
border-color: $radio-icon-disabled-color;
|
|
background-color: $radio-icon-disabled-bg-color;
|
|
}
|
|
&--circle#{&}--disabled#{&}--checked, &--dot#{&}--disabled#{&}--checked {
|
|
/* #ifndef APP-ANDROID || APP-IOS */
|
|
&:after {
|
|
border-color: $radio-icon-disabled-color;
|
|
}
|
|
/* #endif */
|
|
}
|
|
&--dot#{&}--disabled#{&}--checked {
|
|
/* #ifndef APP-ANDROID || APP-IOS */
|
|
&:after {
|
|
background-color: $radio-icon-disabled-color;
|
|
}
|
|
/* #endif */
|
|
}
|
|
&--line#{&}--disabled#{&}--checked {
|
|
/* #ifndef APP-ANDROID || APP-IOS */
|
|
&:after {
|
|
border-color: $radio-icon-disabled-color;
|
|
}
|
|
/* #endif */
|
|
}
|
|
}
|
|
&__label {
|
|
padding-left: $spacer-xs;
|
|
// padding-right: $spacer-xs;
|
|
font-size: $radio-font-size;
|
|
color: $text-color-1;
|
|
&--disabled {
|
|
color: $radio-icon-disabled-color;
|
|
}
|
|
}
|
|
}
|
|
|