155 lines
3.6 KiB
CSS
155 lines
3.6 KiB
CSS
._simple-switch-checkbox {
|
|
height: 0px;
|
|
width: 0px;
|
|
overflow: hidden;
|
|
opacity: 0
|
|
}
|
|
|
|
._simple-switch-track {
|
|
--simple-switch_size: 0.12rem;
|
|
font-size: inherit;
|
|
display: inline-block;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
background: #ccc;
|
|
border-radius: 0.12rem;
|
|
padding: 0 calc((12px * 1.25) - 0.06rem) 0 0;
|
|
border: 0.03rem solid #ccc;
|
|
transition: background 250ms ease-out;
|
|
outline: none;
|
|
box-sizing: padding-box
|
|
}
|
|
|
|
@supports (--foobar: false) {
|
|
._simple-switch-track {
|
|
border-radius: var(--simple-switch_size);
|
|
padding: 0 calc((var(--simple-switch_size) * 1.25) - 0.06rem) 0 0
|
|
}
|
|
}
|
|
|
|
._simple-switch-track.on {
|
|
background: #0079FE;
|
|
border: 0.03rem solid #0079FE
|
|
}
|
|
|
|
._simple-switch-track.on .handle {
|
|
transform: translateX(calc((0.12rem * 1.6) - 0.06rem))
|
|
}
|
|
|
|
@supports (--foobar: false) {
|
|
._simple-switch-track.on .handle {
|
|
transform: translateX(calc((var(--simple-switch_size) * 1.6) - 0.06rem))
|
|
}
|
|
}
|
|
|
|
._simple-switch-track.focus {
|
|
border: 0.03rem solid #03A9F4
|
|
}
|
|
|
|
._simple-switch-track .handle {
|
|
position: relative;
|
|
width: calc(0.06rem);
|
|
height: calc(0.06rem);
|
|
border-radius: 0.12rem;
|
|
background: #fff;
|
|
display: block;
|
|
transition: transform 250ms ease-out;
|
|
will-change: transition;
|
|
z-index: 2
|
|
}
|
|
|
|
@supports (--foobar: false) {
|
|
._simple-switch-track .handle {
|
|
width: calc(var(--simple-switch_size) - 0.06rem);
|
|
height: calc(var(--simple-switch_size) - 0.06rem);
|
|
border-radius: var(--simple-switch_size)
|
|
}
|
|
}
|
|
|
|
._simple-switch-track._material {
|
|
padding: 0;
|
|
margin: 0.03rem 0;
|
|
height: 0.09rem;
|
|
width: 0.18rem;
|
|
border: none;
|
|
vertical-align: top
|
|
}
|
|
|
|
@supports (--foobar: false) {
|
|
._simple-switch-track._material {
|
|
height: calc(var(--simple-switch_size) - 0.03rem);
|
|
width: calc(var(--simple-switch_size) * 1.5)
|
|
}
|
|
}
|
|
|
|
._simple-switch-track._material.on {
|
|
background: #0079FE
|
|
}
|
|
|
|
._simple-switch-track._material.on:after {
|
|
transform: translateX(0.09rem)
|
|
}
|
|
|
|
@supports (--foobar: false) {
|
|
._simple-switch-track._material.on:after {
|
|
transform: translateX(calc(var(--simple-switch_size) - 0.03rem))
|
|
}
|
|
}
|
|
|
|
._simple-switch-track._material.on .handle {
|
|
background: #0079FE;
|
|
transform: translateX(0.09rem)
|
|
}
|
|
|
|
@supports (--foobar: false) {
|
|
._simple-switch-track._material.on .handle {
|
|
transform: translateX(calc(var(--simple-switch_size) - 0.03rem))
|
|
}
|
|
}
|
|
|
|
._simple-switch-track._material:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -0.0925rem;
|
|
left: -0.1rem;
|
|
width: 0.26rem;
|
|
height: 0.26rem;
|
|
z-index: 1;
|
|
background: rgba(0, 0, 0, 0.125);
|
|
border-radius: 0.26rem;
|
|
opacity: 0;
|
|
will-change: opacity;
|
|
transition: opacity 250ms ease-out, transform 250ms ease-out
|
|
}
|
|
|
|
@supports (--foobar: false) {
|
|
._simple-switch-track._material:after {
|
|
width: calc(var(--simple-switch_size) + 0.14rem);
|
|
height: calc(var(--simple-switch_size) + 0.14rem);
|
|
border-radius: calc(var(--simple-switch_size) + 0.14rem)
|
|
}
|
|
}
|
|
|
|
._simple-switch-track._material.focus:after {
|
|
opacity: 1
|
|
}
|
|
|
|
._simple-switch-track._material .handle {
|
|
position: absolute;
|
|
top: -0.0225rem;
|
|
left: -0.03rem;
|
|
width: 0.12rem;
|
|
height: 0.12rem;
|
|
box-shadow: 0 0.01rem 0.03rem rgba(0, 0, 0, 0.4);
|
|
transition: transform 250ms ease-out, background 250ms ease-out
|
|
}
|
|
|
|
@supports (--foobar: false) {
|
|
._simple-switch-track._material .handle {
|
|
width: var(--simple-switch_size);
|
|
height: var(--simple-switch_size)
|
|
}
|
|
}
|
|
|
|
|