254 lines
6.9 KiB
SCSS
254 lines
6.9 KiB
SCSS
@import '~@/uni_modules/lime-style/index.scss';
|
|
@import '~@/uni_modules/lime-style/functions.scss';
|
|
/* #ifdef uniVersion >= 4.75 */
|
|
$use-css-var: true !default;
|
|
/* #endif */
|
|
|
|
$checkbox: #{$prefix}-checkbox;
|
|
$icon: #{$checkbox}__icon;
|
|
|
|
|
|
$checkbox-icon-size: create-var(checkbox-icon-size, 20px);
|
|
$checkbox-font-size: create-var(checkbox-font-size, 16px);
|
|
|
|
$checkbox-small-icon-size: create-var(checkbox-small-icon-size, 14px);
|
|
$checkbox-small-font-size: create-var(checkbox-small-font-size, 15px);
|
|
|
|
$checkbox-large-icon-size: create-var(checkbox-large-icon-size, 22px);
|
|
$checkbox-large-font-size: create-var(checkbox-large-font-size, 18px);
|
|
|
|
$checkbox-icon-border-width: create-var(checkbox-icon-border-width, 1px);
|
|
// $checkbox-icon-border-color: var(--l-checkbox-border-color, $border-color);
|
|
$checkbox-icon-border-radius: create-var(checkbox-icon-border-radius, 3px);
|
|
|
|
$checkbox-icon-bg-color: create-var(checkbox-icon-bg-color, $bg-color-container);
|
|
$checkbox-icon-border-color: create-var(checkbox-border-icon-color, $gray-5);
|
|
$checkbox-icon-disabled-color: create-var(checkbox-icon-disabled-color, $gray-5);
|
|
$checkbox-icon-disabled-bg-color: create-var(checkbox-icon-disabled-bg-color, $gray-1);
|
|
$checkbox-icon-checked-color: create-var(checkbox-icon-checked-color, $primary-color);
|
|
$checkbox-text-color: create-var(checkbox-text-color, $text-color-1);
|
|
$checkbox-icon-text-gap: create-var(checkbox-icon-text-gap, $spacer-xs);
|
|
|
|
/* #ifdef MP */
|
|
:host {
|
|
display: inline-flex;
|
|
}
|
|
/* #endif */
|
|
.#{$checkbox} {
|
|
/* #ifndef UNI-APP-X */
|
|
display: inline-flex;
|
|
/* #endif */
|
|
flex-direction: row;
|
|
align-items: center;
|
|
&__icon {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: $checkbox-icon-size;
|
|
height: $checkbox-icon-size;
|
|
align-self: center;
|
|
transition-property: all;
|
|
// #ifdef UNI-APP-X && APP
|
|
// #ifndef APP-HARMONY || APP-ANDROID
|
|
// 鸿蒙加上时间会导致无法描边 安卓会没有尺寸
|
|
transition-duration: 200ms;
|
|
/* #endif */
|
|
/* #endif */
|
|
transition-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
|
/* #ifndef UNI-APP-X && APP */
|
|
&: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 */
|
|
&--rectangle {
|
|
// border-radius: $checkbox-icon-border-radius;
|
|
@include border-radius($checkbox-icon-border-radius);
|
|
}
|
|
&--dot,
|
|
&--circle {
|
|
border-radius: 99px;
|
|
}
|
|
&--rectangle,
|
|
&--dot,
|
|
&--circle{
|
|
background-color: $checkbox-icon-bg-color;
|
|
border-width: $checkbox-icon-border-width;
|
|
border-style: solid;
|
|
border-color: $checkbox-icon-border-color;
|
|
// border: $checkbox-icon-border-width solid $checkbox-icon-border-color;
|
|
}
|
|
&--rectangle,&--circle {
|
|
/* #ifndef UNI-APP-X && APP */
|
|
&:after {
|
|
top: 48%;
|
|
left: 24%;
|
|
display: table;
|
|
width: divide(100%, 20) * 7;
|
|
height: divide(100%, 20) * 12;
|
|
border: calc(#{$checkbox-icon-size} / 7) solid transparent;
|
|
border-top: 0;
|
|
border-inline-start: 0;
|
|
transform: rotate(45deg) scale(0) translate(-50%,-50%);
|
|
content: "";
|
|
}
|
|
/* #endif */
|
|
}
|
|
&--rectangle#{&}--checked,
|
|
&--circle#{&}--checked {
|
|
background-color: $checkbox-icon-checked-color;
|
|
border-color: $checkbox-icon-checked-color;
|
|
/* #ifndef UNI-APP-X && APP */
|
|
&:after {
|
|
opacity: 1;
|
|
transform: rotate(45deg) scale(1) translate(-50%,-50%);
|
|
border-color: white;
|
|
}
|
|
/* #endif */
|
|
}
|
|
&--rectangle#{&}--indeterminate,
|
|
&--circle#{&}--indeterminate{
|
|
background-color: $checkbox-icon-checked-color;
|
|
border-color: $checkbox-icon-checked-color;
|
|
/* #ifndef UNI-APP-X && APP */
|
|
&:after {
|
|
opacity: 1;
|
|
height: 0;
|
|
width: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: scale(1) translate(-50%,-50%);
|
|
border-color: white;
|
|
}
|
|
/* #endif */
|
|
}
|
|
|
|
&--dot {
|
|
/* #ifndef UNI-APP-X && APP */
|
|
&:after {
|
|
background-color: white;
|
|
border-radius: 99px;//$checkbox-icon-border-radius;
|
|
transform: scale(0) translate(-50%,-50%);
|
|
}
|
|
/* #endif */
|
|
}
|
|
&--dot#{&}--checked{
|
|
background-color: $checkbox-icon-checked-color;
|
|
border-color: $checkbox-icon-checked-color;
|
|
/* #ifndef UNI-APP-X && APP */
|
|
&:after{
|
|
opacity: 1;
|
|
width: 44%;
|
|
height: 44%;
|
|
transform: scale(1) translate(-50%,-50%);
|
|
}
|
|
/* #endif */
|
|
}
|
|
&--dot#{&}--indeterminate {
|
|
background-color: $checkbox-icon-checked-color;
|
|
border-color: $checkbox-icon-checked-color;
|
|
/* #ifndef UNI-APP-X && APP */
|
|
&:after {
|
|
opacity: 1;
|
|
border-radius: 0;
|
|
transform: scale(1) translate(-50%,-50%);
|
|
width: 50%;
|
|
height: calc(#{$checkbox-icon-size} / 7);
|
|
}
|
|
/* #endif */
|
|
}
|
|
&--line {
|
|
/* #ifndef UNI-APP-X && APP */
|
|
&:after {
|
|
top: 46%;
|
|
left: 0%;
|
|
inset-inline-start: 10%;
|
|
display: table;
|
|
width: divide(100%, 14) * 7;
|
|
height: divide(100%, 14) * 12;
|
|
border: calc(#{$checkbox-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 UNI-APP-X && APP */
|
|
&:after {
|
|
opacity: 1;
|
|
transform: rotate(45deg) scale(1) translate(-50%,-50%);
|
|
border-color: $checkbox-icon-checked-color;
|
|
}
|
|
/* #endif */
|
|
}
|
|
&--line#{&}--indeterminate {
|
|
/* #ifndef UNI-APP-X && APP */
|
|
&:after {
|
|
opacity: 1;
|
|
height: 0;
|
|
left: 50%;
|
|
width: 70%;
|
|
transform: scale(1) translate(-50%,-50%);
|
|
border-color: $checkbox-icon-checked-color;
|
|
}
|
|
/* #endif */
|
|
}
|
|
|
|
&--rectangle#{&}--disabled,
|
|
&--circle#{&}--disabled,
|
|
&--dot#{&}--disabled {
|
|
border-color: $checkbox-icon-disabled-color;
|
|
background-color: $checkbox-icon-disabled-bg-color;
|
|
}
|
|
&--rectangle#{&}--disabled#{&}--checked,
|
|
&--circle#{&}--disabled#{&}--checked,
|
|
&--dot#{&}--disabled#{&}--checked,
|
|
&--rectangle#{&}--disabled#{&}--indeterminate,
|
|
&--circle#{&}--disabled#{&}--indeterminate,
|
|
&--dot#{&}--disabled#{&}--indeterminate {
|
|
/* #ifndef UNI-APP-X && APP */
|
|
&:after {
|
|
border-color: $checkbox-icon-disabled-color;
|
|
}
|
|
/* #endif */
|
|
}
|
|
&--dot#{&}--disabled#{&}--checked,
|
|
&--dot#{&}--disabled#{&}--indeterminate {
|
|
/* #ifndef UNI-APP-X && APP */
|
|
&:after {
|
|
background-color: $checkbox-icon-disabled-color;
|
|
}
|
|
/* #endif */
|
|
}
|
|
&--line#{&}--disabled#{&}--checked,
|
|
&--line#{&}--disabled#{&}--indeterminate{
|
|
/* #ifndef UNI-APP-X && APP */
|
|
&:after {
|
|
border-color: $checkbox-icon-disabled-color;
|
|
}
|
|
/* #endif */
|
|
}
|
|
}
|
|
&__label {
|
|
padding-left: $checkbox-icon-text-gap;//$spacer-xs;
|
|
// padding-right: $spacer-xs;
|
|
font-size: $checkbox-font-size;
|
|
color: $checkbox-text-color;//$text-color-1;
|
|
white-space: nowrap; //ios
|
|
&--disabled {
|
|
color: $checkbox-icon-disabled-color;
|
|
}
|
|
}
|
|
}
|
|
|