mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-12-10 16:43:47 +08:00
!3626 feat(#I66EV5): use css variable on Switch component
* chore: Switch 组件样式变量化
This commit is contained in:
parent
e31b3d0569
commit
888588114e
@ -1,66 +1,81 @@
|
||||
.switch {
|
||||
--bb-switch-padding: 7px 0;
|
||||
--bb-switch-border-color: #dcdfe6;
|
||||
--bb-switch-bg: #dcdfe6;
|
||||
--bb-switch-border-radius: 10px;
|
||||
--bb-switch-bar-width: 16px;
|
||||
--bb-switch-bar-height: 16px;
|
||||
--bb-switch-bar-bg-color: #fff;
|
||||
--bb-switch-bar-radius: 50%;
|
||||
--bb-switch-bar-top: 1px;
|
||||
--bb-switch-bar-off: 1px;
|
||||
--bb-switch-bar-on: 1px;
|
||||
--bb-switch-inner-text-font-size: 80%;
|
||||
--bb-switch-inner-on-text-left: 7px;
|
||||
--bb-switch-inner-on-text-color: #fff;
|
||||
--bb-switch-inner-off-text-left: 20px;
|
||||
--bb-switch-inner-off-text-color: #606266;
|
||||
--bb-switch-disabled-opacity: var(--bb-disabled-opactiy);
|
||||
--bb-switch-label-margin-left: 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
--bb-switch-padding: 7px 0;
|
||||
padding: var(--bb-switch-padding);
|
||||
}
|
||||
|
||||
.switch.disabled {
|
||||
opacity: var(--bb-switch-disabled-opacity);
|
||||
}
|
||||
|
||||
.switch .switch-core {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
border: 1px solid #dcdfe6;
|
||||
border: 1px solid var(--bb-switch-border-color);
|
||||
outline: none;
|
||||
border-radius: 10px;
|
||||
border-radius: var(--bb-switch-border-radius);
|
||||
box-sizing: border-box;
|
||||
background: #dcdfe6;
|
||||
background: var(--bb-switch-bg);
|
||||
cursor: pointer;
|
||||
transition: border-color .3s,background-color .3s;
|
||||
transition: border-color .3s, background-color .3s;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.switch .switch-core:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
border-radius: 50%;
|
||||
top: var(--bb-switch-bar-top);
|
||||
border-radius: var(--bb-switch-bar-radius);
|
||||
transition: all .3s;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #fff;
|
||||
width: var(--bb-switch-bar-width);
|
||||
height: var(--bb-switch-bar-height);
|
||||
background-color: var(--bb-switch-bar-bg-color);
|
||||
}
|
||||
|
||||
.switch .switch-core:before {
|
||||
content: attr(data-inner-text);
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: calc(100% - 17px);
|
||||
top: var(--bb-switch-bar-top);
|
||||
left: var(--bb-switch-inner-off-text-left);
|
||||
transition: all .3s;
|
||||
font-size: 80%;
|
||||
color: #606266;
|
||||
font-size: var(--bb-switch-inner-text-font-size);
|
||||
color: var(--bb-switch-inner-off-text-color);
|
||||
}
|
||||
|
||||
.switch.is-checked .switch-core:after {
|
||||
left: 100%;
|
||||
margin-left: -17px;
|
||||
.switch.is-checked .switch-core:before {
|
||||
left: var(--bb-switch-inner-on-text-left);
|
||||
color: var(--bb-switch-inner-on-text-color);
|
||||
}
|
||||
|
||||
.switch.is-checked .switch-core:before {
|
||||
left: 5px;
|
||||
color: #fff;
|
||||
.switch:not(.is-checked) .switch-core:after {
|
||||
left: var(--bb-switch-bar-off);
|
||||
}
|
||||
|
||||
.switch.is-checked .switch-core:after {
|
||||
right: var(--bb-switch-bar-on);
|
||||
}
|
||||
|
||||
.switch .switch-label {
|
||||
margin-left: 10px;
|
||||
margin-left: var(--bb-switch-label-margin-left);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.switch.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.switch .switch-inner-text {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user