mirror of https://github.com/ElemeFE/element
120 lines
2.6 KiB
CSS
120 lines
2.6 KiB
CSS
@charset "UTF-8";
|
|
@import "./common/var.css";
|
|
|
|
@component-namespace el {
|
|
|
|
@b switch {
|
|
display: inline-block;
|
|
position: relative;
|
|
font-size: var(--switch-font-size);
|
|
@when disabled {
|
|
& .el-switch__core,
|
|
& .el-switch__label {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
@e label {
|
|
transition: .2s;
|
|
position: absolute;
|
|
z-index: 10;
|
|
size: var(--switch-size);
|
|
left: 0;
|
|
top: 0;
|
|
display: inline-block;
|
|
font-size: var(--switch-font-size);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
@m left {
|
|
i {
|
|
left: 6px;
|
|
}
|
|
}
|
|
@m right {
|
|
i {
|
|
right: 6px;
|
|
}
|
|
}
|
|
& * {
|
|
line-height: 1;
|
|
top: 4px;
|
|
position: absolute;
|
|
font-size: var(--switch-font-size);
|
|
display: inline-block;
|
|
color: var(--color-white);
|
|
}
|
|
}
|
|
|
|
@e input {
|
|
&:checked + .el-switch__core {
|
|
border-color: var(--switch-on-color);
|
|
background-color: var(--switch-on-color);
|
|
}
|
|
}
|
|
|
|
@e core {
|
|
margin: 0;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
size: var(--switch-size);
|
|
border: 1px solid var(--switch-off-color);
|
|
outline: none;
|
|
border-radius: var(--switch-core-border-radius);
|
|
box-sizing: border-box;
|
|
background: var(--switch-off-color);
|
|
cursor: pointer;
|
|
transition: border-color .3s, background-color .3s;
|
|
|
|
& .el-switch__button {
|
|
position: absolute 0 * * 0;
|
|
border-radius: var(--border-radius-circle);
|
|
transition: transform .3s;
|
|
size: var(--switch-button-size);
|
|
z-index: 20;
|
|
background-color: var(--color-white);
|
|
}
|
|
}
|
|
|
|
@when disabled {
|
|
.el-switch__core {
|
|
border-color: var(--switch-disabled-color);
|
|
background: var(--switch-disabled-color);
|
|
|
|
& span {
|
|
background-color: var(--switch-disabled-text-color);
|
|
}
|
|
|
|
& ~ .el-switch__label * {
|
|
color: var(--switch-disabled-text-color);
|
|
}
|
|
}
|
|
|
|
.el-switch__input:checked + .el-switch__core {
|
|
border-color: var(--switch-disabled-color);
|
|
background-color: var(--switch-disabled-color);
|
|
}
|
|
}
|
|
|
|
@modifier wide {
|
|
.el-switch__label {
|
|
&.el-switch__label--left {
|
|
span {
|
|
left: 10px;
|
|
}
|
|
}
|
|
&.el-switch__label--right {
|
|
span {
|
|
right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& .label-fade-enter,
|
|
& .label-fade-leave-active {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|