Skip to content

Instantly share code, notes, and snippets.

@mx-moth

mx-moth/index.html

Created May 17, 2012 05:43
Show Gist options
  • Save mx-moth/2716734 to your computer and use it in GitHub Desktop.
Save mx-moth/2716734 to your computer and use it in GitHub Desktop.
Download ZIP
General sibling selector + checkboxes = awesome
Raw
index.html
<!doctype html>
<html lang="en-AU">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" media="screen" href="style.css">
</head>
<body>
<div class="input switch light">
<input type="checkbox" name="switcher" id="switch">
<label for="switch">
Swizzle the froobs
</label>
</div>
<div class="input switch slide">
<input type="checkbox" name="switcher" id="slide">
<label for="slide">
<span></span>
Frobnicator
</label>
</div>
</body>
</html>
Raw
style.css
.input {
margin-bottom: 1em;
}
.input label {
cursor: pointer;
text-selection: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.input.switch.light input {
display: none;
}
.input.switch.light input ~ label:before {
content: '';
display: inline-block;
border: 2px inset;
border-color: #333;
border-radius: 16px;
width: 16px;
height: 16px;
background-color: #330000;
vertical-align: middle;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
-ie-transition: all 0.1s ease-out;
}
.input.switch.light input:checked ~ label:before {
border-color: #cc4444;
background-color: #ff0000;
box-shadow: red 0 0 5px, inset 0 0 5px black;
}
.input.switch.slide input {
display: none;
}
.input.switch.slide input ~ label span {
display: inline-block;
position: relative;
border: 2px inset #333;
border-radius: 5px;
width: 50px;
height: 1.2em;
background-color: #eee;
vertical-align: middle;
overflow: hidden;
}
.input.switch.slide input ~ label span:before, .input.switch.slide input ~ label span:after {
position: absolute;
display: inline-block;
width: 50px;
height: 1.2em;
text-align: center;
-webkit-transition: left 0.5s ease-out;
-moz-transition: left 0.5s ease-out;
-o-transition: left 0.5s ease-out;
-ie-transition: left 0.5s ease-out;
}
.input.switch.slide input ~ label span:before {
content: 'off';
left: 0px;
background-color: #eee;
}
.input.switch.slide input ~ label span:after {
content: 'on';
left: 50px;
background-color: #2255cc;
color: white;
}
.input.switch.slide input:checked ~ label span:before {
left: -50px;
}
.input.switch.slide input:checked ~ label span:after {
left: 0px;
}
Raw
style.less
.input {
margin-bottom: 1em;
label {
cursor: pointer;
text-selection: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
}
.transition(@prop, @time, @fn) {
-webkit-transition: @prop @time @fn;
-moz-transition: @prop @time @fn;
-o-transition: @prop @time @fn;
-ie-transition: @prop @time @fn;
}
.input.switch.light {
@size: 16px;
@off: #330000;
@on: #ff0000;
input {
display: none;
}
input ~ label:before {
content: '';
display: inline-block;
border: 2px inset;
border-color: #333;
border-radius: @size;
width: @size;
height: @size;
background-color: #330000;
vertical-align: middle;
// .radial-gradient(@off);
.transition(all, 0.1s, ease-out);
}
input:checked ~ label:before {
border-color: #cc4444;
background-color: #ff0000;
box-shadow: red 0 0 5px, inset 0 0 5px black;
// .radial-gradient(@on);
}
}
.input.switch.slide {
@size: 50px;
@off: #330000;
@on: #ff0000;
input {
display: none;
}
input ~ label span {
display: inline-block;
position: relative;
border: 2px inset #333;
border-radius: 5px;
width: @size;
height: 1.2em;
background-color: #eee;
vertical-align: middle;
overflow: hidden;
&:before, &:after {
position: absolute;
display: inline-block;
width: @size;
height: 1.2em;
text-align: center;
.transition(left, 0.5s, ease-out);
}
&:before {
content: 'off';
left: 0px;
background-color: #eee;
}
&:after {
content: 'on';
left: @size;
background-color: #2255cc;
color: white;
}
}
input:checked ~ label span {
&:before { left: -@size; }
&:after { left: 0px; }
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment