Don't use Bootstrap switches in layers menu

This commit is contained in:
2026-05-15 19:59:37 +02:00
parent 11acecd33d
commit 5b1f828abd
3 changed files with 85 additions and 9 deletions

View File

@@ -1,3 +1,20 @@
:root {
--toggle-background-color-on: #6da0ff;
--toggle-background-color-off: darkgray;
--toggle-width: 32px;
--toggle-height: 15px;
--toggle-gutter: 2px;
--toggle-radius: 50%;
--toggle-control-size: 40px;
--toggle-control-color: white;
--toggle-control-speed: .15s;
--toggle-control-ease: ease-in;
/** Don't change calculated values! **/
--toggle-radius: calc(var(--toggle-height) / 2);
--toggle-control-size: calc(var(--toggle-height) - (var(--toggle-gutter) * 2));
}
body {
height: 100vh;
}
@@ -115,4 +132,57 @@ span:focus {
margin-left: -5em;
width: 10em;
}
}
/**
* Toggle switch styles
* From: https://codepen.io/AriTheElk/pen/YmxYZr
*/
.toggle-control {
display: block;
position: relative;
padding-left: var(--toggle-width);
margin-bottom: 12px;
cursor: pointer;
font-size: 18px;
user-select: none;
color: #fff;
input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
input:checked ~ .control {
background-color: var(--toggle-background-color-on);
&:after {
left: calc(var(--toggle-width) - var(--toggle-control-size) - var(--toggle-gutter));
}
}
.control {
position: absolute;
top: 25%;
left: 0;
height: var(--toggle-height);
width: var(--toggle-width);
border-radius: var(--toggle-radius);
background-color: var(--toggle-background-color-off);
transition: background-color var(--toggle-control-speed) var(--toggle-control-ease);
&:after {
content: "";
position: absolute;
left: var(--toggle-gutter);
top: var(--toggle-gutter);
width: var(--toggle-control-size);
height: var(--toggle-control-size);
border-radius: var(--toggle-radius);
background: var(--toggle-control-color);
transition: left var(--toggle-control-speed) var(--toggle-control-ease);
}
}
}