mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
97 lines
2.4 KiB
HTML
97 lines
2.4 KiB
HTML
<div class="switch">
|
|
<input type="checkbox">
|
|
<div class="left"></div>
|
|
<div class="right"></div>
|
|
<div class="switcher"></div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by Charly-T - Tags: switch */
|
|
.switch {
|
|
--switch-width: 3.5em;
|
|
--switch-height: calc(var(--switch-width) / 2);
|
|
--left-ball-color: black;
|
|
--right-ball-color: white;
|
|
width: var(--switch-width);
|
|
height: var(--switch-height);
|
|
border-radius: calc(var(--switch-height) / 2);
|
|
background-color: var(--left-ball-color);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.switch input[type="checkbox"] {
|
|
width: 100%;
|
|
position: absolute;
|
|
height: 100%;
|
|
margin: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.switch .left {
|
|
position: absolute;
|
|
width: calc(var(--switch-width) / 3);
|
|
height: calc(var(--switch-height) / 1.5);
|
|
background-color: var(--left-ball-color);
|
|
border-radius: 50%;
|
|
left: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
|
|
top: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.switch .right {
|
|
position: absolute;
|
|
width: calc(var(--switch-width) / 3);
|
|
height: calc(var(--switch-height) / 1.5);
|
|
background-color: var(--right-ball-color);
|
|
border-radius: 50%;
|
|
right: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
|
|
top: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.switch .switcher {
|
|
position: absolute;
|
|
width: calc(100% + var(--switch-width) / 3);
|
|
height: 100%;
|
|
background-color: var(--right-ball-color);
|
|
z-index: 1;
|
|
left: calc(-50% + var(--switch-width) / (3 * 2));
|
|
pointer-events: none;
|
|
transition: left 500ms ease;
|
|
border-top-left-radius: calc(var(--switch-width) / 3);
|
|
border-bottom-left-radius: calc(var(--switch-width) / 3);
|
|
}
|
|
|
|
.switch .switcher:before {
|
|
position: absolute;
|
|
content: '';
|
|
width: calc(var(--switch-width) / 3);
|
|
height: 100%;
|
|
background-color: var(--left-ball-color);
|
|
display: block;
|
|
border-bottom-right-radius: 50%;
|
|
border-top-right-radius: 50%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.switch .switcher:after {
|
|
position: absolute;
|
|
content: '';
|
|
width: calc(var(--switch-width) / 3);
|
|
height: 100%;
|
|
background-color: var(--right-ball-color);
|
|
display: block;
|
|
border-bottom-left-radius: 50%;
|
|
border-top-left-radius: 50%;
|
|
}
|
|
|
|
.switch input:checked ~ .switcher {
|
|
left: 100%;
|
|
}
|
|
|
|
.switch input:checked ~ .switcher:before {
|
|
display: none;
|
|
}
|
|
</style>
|