Don't use Bootstrap switches in layers menu
This commit is contained in:
70
css/app.css
70
css/app.css
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user