pos/is4c-nf/css/toggle-switch.css
/* ------------------------------------------
CSS TOGGLE SWITCHES (Ionuț Colceriu)
Licensed under Unlicense
https://github.com/ghinda/css-toggle-switch
------------------------------------------ */
/* Toggle Switches */
@media only screen {
/* Checkbox
*/
.toggle {
position: relative;
left:-43%;
display: block;
width: 58%;
padding: 0;
margin: 0;
font-family: sans-serif;
font-weight: bold;
/* font-size: 12px;*/
/* color: #fff;*/
/* text-shadow: 1px 1px 1px #191b1e;*/
}
/* Position the label over all the elements, except the toggle-button
* Clicking anywhere on the label will change the switch-state
*/
.toggle label {
position: relative;
z-index: 3;
display: block;
width: 100%;
padding: 3px 0;
cursor: pointer;
}
/* Don't hide the input from screen-readers and keyboard access
*/
.toggle input {
position: absolute;
opacity: 0;
z-index: 5;
}
/* Outline the toggle when the input is focused */
.toggle input:focus ~ .toggle-button {
outline: 1px dotted #fff;
}
/* Track */
.toggle label:after {
content: '';
position: absolute;
top: 0;
right: 0;
z-index: 0;
display: block;
width: 80px;
height: 18px;
padding: 2px 0;
background-color: #dd7e6d;
border: 1px solid #b15b4d;
border-radius: 2px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.17), 0 1px 0px rgba(255, 255, 255, 0.9);
/* Text labels */
content: "off \a on";
white-space: pre;
color: #8f5247;
font-weight: bold;
text-align: center;
text-shadow: 0 1px 0px rgba(255, 255, 255, 0.4);
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
/* We could use label:after to create the toggle button
* But we won't be able to use transitions on it, except in Firefox
*/
.toggle span {
display: block;
position: absolute;
right: -1px;
top: -2px;
z-index: 4;
width: 40px;
height: 26px;
border: 1px solid #bbbbbb;
background-color: #f7f7f7;
background-image: -webkit-linear-gradient(top, #f7f7f7, #ececec);
background-image: -moz-linear-gradient(top, #f7f7f7, #ececec);
background-image: -ms-linear-gradient(top, #f7f7f7, #ececec);
background-image: -o-linear-gradient(top, #f7f7f7, #ececec);
background-image: linear-gradient(top, #f7f7f7, #ececec);
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 1), 0 1px 1px rgba(0, 0, 0, 0.12);
border-radius: 2px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.toggle input:checked ~ span {
right: 45px;
}
.toggle input:checked + label:after {
background-color: #a0c66b;
border-color: #87aa5b;
color: #60783f;
}
/* Radio Switch
*/
.switch {
position: relative;
left:-43%;
border: 0;
padding: 0;
width: 58%;
font-family: sans-serif;
font-weight: bold;
/* font-size: 12px;*/
/* color: #fff;*/
/* text-shadow: 1px 1px 1px #191b1e;*/
}
.switch legend {
float: left;
width: 40%;
padding: 7px 10% 3px 0;
text-align: right;
}
.switch input {
position: absolute;
opacity: 0;
}
.switch legend:after {
content: '';
position: absolute;
top: 0;
left: 50%;
z-index: 0;
width: 50%;
height: 100%;
padding: 2px;
background-color: #2d3035;
border-radius: 3px;
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2);
}
.switch label {
position: relative;
z-index: 2;
float: left;
width: 25%;
margin-top: 2px;
padding: 5px 0 3px 0;
text-align: center;
color: #64676b;
text-shadow: 0 1px 0 #000;
}
.switch input:checked + label {
color: #2d592a;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.switch input:focus + label {
outline: 1px dotted #fff;
}
.switch .switch-button {
clear: both;
position: absolute;
top: 0;
left: 50%;
z-index: 1;
width: 25%;
height: 100%;
margin: 2px;
background-color: #70c66b;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
background-image: linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.45);
border-radius: 3px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.switch input:last-of-type:checked ~ .switch-button {
left: 75%;
}
/* Treo Switch */
.switch.switch-treo label {
width: 16.6%;
}
.switch.switch-treo .switch-button {
width: 16.6%;
}
.switch.switch-treo input:checked:nth-of-type(2) ~ .switch-button {
left: 66.6%;
}
.switch.switch-treo input:checked:last-of-type ~ .switch-button {
left: 83.26%;
}
/* Switch Themes/Colors */
.switch.blue input:checked + label {
color: #15475d;
}
.switch.blue .switch-button {
background-color: #38a3d4;
}
.switch.yellow .switch-button {
background-color: #ccc165;
}
.switch.yellow input:checked + label {
color: #494525;
}
/* Bugfix for older Webkit, including mobile Webkit. Adapted from:
* http://css-tricks.com/webkit-sibling-bug/
*/
.switch, .toggle {
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix { from { position: relative; } to { position: relative; } }
}
/* Default form styles */
fieldset {
margin: 0 0 2em 0;
border: 0;
}
fieldset legend {
/* color: #fff;*/
}