mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 01:11:25 +08:00
8583c70fdc
* feat(theme-chalk): use @use instead of @import & remove /**/ comment * refactor(theme-chalk): refactor scss with @use module * fix(docs): scss in docs toggle to '@use' * docs: add custom theme on demand * docs: add unplugin-element-plus
55 lines
1.0 KiB
SCSS
55 lines
1.0 KiB
SCSS
@use '../mixins' as *;
|
|
|
|
.switch {
|
|
margin: 0;
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 40px;
|
|
height: 20px;
|
|
border: 1px solid var(--border-color);
|
|
outline: none;
|
|
border-radius: 10px;
|
|
box-sizing: border-box;
|
|
background: var(--bg-color-mute);
|
|
cursor: pointer;
|
|
transition: border-color var(--el-transition-duration),
|
|
background-color var(--el-transition-duration);
|
|
|
|
&:hover {
|
|
border-color: var(--border-color-light);
|
|
}
|
|
|
|
&__action {
|
|
position: absolute;
|
|
top: 1px;
|
|
left: 1px;
|
|
border-radius: 50%;
|
|
background-color: var(--bg-color);
|
|
transform: translateX(0);
|
|
color: var(--text-color-light);
|
|
transition: border-color var(--el-transition-duration),
|
|
background-color var(--el-transition-duration),
|
|
transform var(--el-transition-duration);
|
|
|
|
.dark & {
|
|
transform: translateX(20px);
|
|
}
|
|
}
|
|
|
|
&__icon {
|
|
position: relative;
|
|
|
|
.el-icon {
|
|
position: absolute;
|
|
left: 1px;
|
|
bottom: 1px;
|
|
}
|
|
}
|
|
|
|
&__action,
|
|
&__icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|