88 lines
2.0 KiB
SCSS
88 lines
2.0 KiB
SCSS
@use '../_styles/_variables.scss' as *;
|
|
@use 'sass:color';
|
|
|
|
$switch-prefix: '#{$prefix}-switch';
|
|
|
|
.#{$switch-prefix} {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
min-width: 44px;
|
|
height: 22px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
line-height: 22px;
|
|
vertical-align: middle;
|
|
background-color: $bg-color-secondarycomponent;
|
|
border: none;
|
|
border-radius: 12px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
|
|
// 普通 hover，只在非 disabled 下生效
|
|
&:not(.#{$switch-prefix}-disabled):not(.#{$switch-prefix}-loading):hover {
|
|
background-color: $bg-color-secondarycomponent-hover;
|
|
}
|
|
|
|
// checked 状态 hover，只在非 disabled 下生效
|
|
&.#{$switch-prefix}-checked:not(.#{$switch-prefix}-disabled):not(.#{$switch-prefix}-loading):hover {
|
|
background-color: $primary-color-hover;
|
|
}
|
|
|
|
&.#{$switch-prefix}-checked {
|
|
background-color: $primary-color;
|
|
|
|
.#{$switch-prefix}-handle {
|
|
left: calc(100% - 4px - 14px); // 100% - 右边距 - handle宽度
|
|
}
|
|
|
|
.#{$switch-prefix}-text {
|
|
right: auto;
|
|
left: calc(4px + 4px); // left + left
|
|
}
|
|
.#{$switch-prefix}-text-holder {
|
|
margin: 0 24px 0 8px;
|
|
}
|
|
}
|
|
|
|
&.#{$switch-prefix}-loading {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&.#{$switch-prefix}-disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.#{$switch-prefix}-handle {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 4px;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 14px;
|
|
height: 14px;
|
|
font-size: 12px;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
|
|
box-shadow: $shadow-switch;
|
|
}
|
|
|
|
.#{$switch-prefix}-text-holder {
|
|
margin: 0 8px 0 24px; // 8 = 4 + 4 22 = 14 + 4 + 4 + 2
|
|
font-size: 12px;
|
|
opacity: 0;
|
|
}
|
|
|
|
.#{$switch-prefix}-text {
|
|
position: absolute;
|
|
top: 0;
|
|
right: calc(4px + 4px);
|
|
color: #fff;
|
|
font-size: 12px;
|
|
}
|
|
}
|