mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
52 lines
1.4 KiB
HTML
52 lines
1.4 KiB
HTML
<label class="switch">
|
|
<input type="checkbox">
|
|
<span class="slider"></span>
|
|
</label>
|
|
<style>
|
|
/* From Uiverse.io by Adir-SL - Tags: switch */
|
|
/* The switch - the box around the slider */
|
|
.switch {
|
|
--sizeVar: 2em;
|
|
--color-primary: #dedede;
|
|
--color-secondary: #aaaaaa;
|
|
--color-primary-on: #1d9bf0;
|
|
--color-secondary-on: #ffffff;
|
|
position: absolute;
|
|
width: calc(var(--sizeVar) * 2);
|
|
height: var(--sizeVar);
|
|
background-color: var(--color-primary);
|
|
border-radius: var(--sizeVar);
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
|
|
cursor: pointer;
|
|
transform: translate(-50%, -50%);
|
|
transition: background-color 150ms ease-out;
|
|
}
|
|
|
|
.switch::after {
|
|
content: "";
|
|
position: absolute;
|
|
margin: calc(var(--sizeVar) / 10);
|
|
height: calc(var(--sizeVar) - calc(var(--sizeVar) / 5));
|
|
width: calc(var(--sizeVar) - calc(var(--sizeVar) / 5));
|
|
background-color: var(--color-secondary);
|
|
border-radius: var(--sizeVar);
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset, 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
transition: transform 150ms ease-out, background-color 150ms ease-out;
|
|
}
|
|
|
|
.switch:has(input:checked)::after {
|
|
transform: translateX(var(--sizeVar));
|
|
background-color: var(--color-secondary-on);
|
|
}
|
|
|
|
.switch:has(input:checked) {
|
|
background-color: var(--color-primary-on);
|
|
}
|
|
|
|
/* Hide default HTML checkbox */
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
</style>
|