Roman_Schenk
/
Bewaesserungsanlage
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

added switch.css

This commit is contained in:
schrom01 2022-08-23 17:19:18 +02:00
parent b5d1637e0f
commit 8c861b3cbd
1 changed files with 88 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
Webserver/static/Styles/switch.css Normal file
View File

@ -0,0 +1,88 @@
.toggle {
--width: 60px;
--height: 25px; /*calc(var(--width) / 3); */
position: relative;
display: inline-block;
width: var(--width);
height: var(--height);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
border-radius: var(--height);
cursor: pointer;
margin-right: 10px;
}
.toggle input {
display: none;
}
.toggle .slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--height);
background-color: #ccc;
transition: all 0.4s ease-in-out;
}
.toggle .slider::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: calc(var(--height));
height: calc(var(--height));
border-radius: calc(var(--height) / 2);
background-color: #fff;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
transition: all 0.4s ease-in-out;
}
.toggle input:checked+.slider {
background-color: #2196F3;
}
.toggle input:checked+.slider::before {
transform: translateX(calc(var(--width) - var(--height)));
}
.toggle .labels {
position: absolute;
top: 4px;
left: 10px;
width: 100%;
height: 100%;
font-size: 16px;
font-family: sans-serif;
transition: all 0.4s ease-in-out;
}
.toggle .labels::after {
content: attr(data-off);
position: absolute;
right: 25px;
color: #4d4d4d;
opacity: 1;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
transition: all 0.4s ease-in-out;
}
.toggle .labels::before {
content: attr(data-on);
position: absolute;
left: 5px;
color: #ffffff;
opacity: 0;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4);
transition: all 0.4s ease-in-out;
}
.toggle input:checked~.labels::after {
opacity: 0;
}
.toggle input:checked~.labels::before {
opacity: 1;
}