lbsadmin/ESPUI
1
0
Fork 0
mirror of https://github.com/s00500/ESPUI.git synced 2025-06-22 01:00:20 +00:00
Code Issues Releases Activity

Adding Switches

Browse Source
This commit is contained in:
Lukas Bachschwell
2017-10-19 17:30:32 +02:00
parent a258eab72b
commit a8ce83df64
4 changed files with 198 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
examples/softAP_UI_Test/data/css/style.css
View File

@ -1,4 +1,3 @@
body{
background-color: #F4F3EF;
}
@ -29,17 +28,16 @@
padding: 0.12em 0.4em 0.14em;
text-align: center;
color: #ffffff;
font-size: 0.75em;
font-weight: 700;
line-height: 1;
display: inline;
margin-bottom: 5px;
display: inline-block;
white-space: nowrap;
vertical-align: baseline;
position: relative;
top: -0.15em;
background-color: #999999; }
.label { ... }
background-color: #999999;
margin-bottom: 10px;}
.label.color-blue { background-color: #6f9ad1; }
.label.color-red { background-color: #d37c7c; }
@ -292,26 +290,13 @@
margin-left: .5rem;
font-weight: normal; }
/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
ul {
list-style: circle inside; }
ol {
list-style: decimal inside; }
ol, ul {
padding-left: 0;
margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%; }
li {
margin-bottom: 1rem; }
*/
#mainHeader{
display:inline-block;
}
#conStatus{
position:inherit;
font-size: 0.75em;
}
/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@ -481,3 +466,92 @@
.control .confirm:focus {
background-color: #eee;
}
/* Switch
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.switch {
background-color: #bebebe;
border-radius: 4px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
color: #fff;
cursor: pointer;
display: block;
font-size: 14px;
height: 26px;
margin-bottom: 12px;
position: relative;
width: 60px;
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
}
.switch.checked {
background-color: #76d21d;
}
.switch input[type="checkbox"] {
cursor: pointer;
height: 10px;
left: 12px;
position: absolute;
top: 8px;
-webkit-transition: left 0.05s ease-in-out;
-moz-transition: left 0.05s ease-in-out;
-o-transition: left 0.05s ease-in-out;
-ms-transition: left 0.05s ease-in-out;
transition: left 0.05s ease-in-out;
width: 10px;
}
.switch.checked input[type="checkbox"] {
left: 38px;
}
.switch input:before {
background: #fff;
background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f0f0f0));
background: -webkit-linear-gradient(top, #fff 0%,#f0f0f0 100%);
background: -o-linear-gradient(top, #fff 0%,#f0f0f0 100%);
background: -ms-linear-gradient(top, #fff 0%,#f0f0f0 100%);
background: linear-gradient(to bottom, #fff 0%,#f0f0f0 100%);
border: 1px solid #fff;
border-radius: 2px;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
content: '';
height: 18px;
position: absolute;
top: -5px;
left: -9px;
width: 26px;
}
.switch input:after {
background: #f0f0f0;
background: -moz-linear-gradient(top, #f0f0f0 0%, #fff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#fff));
background: -webkit-linear-gradient(top, #f0f0f0 0%,#fff 100%);
background: -o-linear-gradient(top, #f0f0f0 0%,#fff 100%);
background: -ms-linear-gradient(top, #f0f0f0 0%,#fff 100%);
background: linear-gradient(to bottom, #f0f0f0 0%,#fff 100%);
border-radius: 10px;
content: '';
height: 12px;
margin: -1px 0 0 -1px;
position: absolute;
width: 12px;
}
.switch .icon-ok,
.switch .icon-remove {
line-height: 28px;
text-shadow: 0 -2px 0 rgba(0,0,0,0.2);
margin: 0 9px;
}
.switch .icon-ok {
float: left;
}
.switch .icon-remove {
float: right;
}