Skip to content

Instantly share code, notes, and snippets.

@Idered
Last active December 23, 2015 21:59
Show Gist options
  • Save Idered/6699569 to your computer and use it in GitHub Desktop.
Save Idered/6699569 to your computer and use it in GitHub Desktop.
Editr Sample
/** %[Object] Radio buttons */
/*------------------------------------*/
@-webkit-keyframes pulse {
0% { width: .7em; height: .7em; margin: .4em; }
50% { width: 1.1em; height: 1.1em; margin: .2em; }
100% { width: .9em; height: .9em; margin: .3em; }
}
@-moz-keyframes pulse {
0% { width: .7em; height: .7em; margin: .4em; }
50% { width: 1.1em; height: 1.1em; margin: .2em; }
100% { width: .9em; height: .9em; margin: .3em; }
}
@-o-keyframes pulse {
0% { width: .7em; height: .7em; margin: .4em; }
50% { width: 1.1em; height: 1.1em; margin: .2em; }
100% { width: .9em; height: .9em; margin: .3em; }
}
@keyframes pulse {
0% { width: .7em; height: .7em; margin: .4em; }
50% { width: 1.1em; height: 1.1em; margin: .2em; }
100% { width: .9em; height: .9em; margin: .3em; }
}
.radio {
color: #798188;
cursor: pointer;
margin-left: .5em;
display: inline-block;
}
.radio,
.radio span:before {
-webkit-transition: .25s ease;
-moz-transition: .25s ease;
-ms-transition: .25s ease;
-o-transition: .25s ease;
transition: .25s ease;
}
.radio span {
width: 1.5em;
height: 1.5em;
margin-right: .5em;
border-radius: 3em;
background: #202325;
vertical-align: top;
display: inline-block;
}
.radio span:before {
content: '';
width: .7em;
height: .7em;
margin: .4em;
border-radius: 3em;
display: inline-block;
background-color: rgba(0,0,0,0);
}
.radio:hover span:before {
background-color: rgba(255,255,255, .9);
}
/*------------------------------------*/
input[type="radio"]:checked + .radio {
color: #f8f8f8;
}
input[type="radio"]:checked + .radio span:before {
background-color: #9fd86b;
width: .9em;
height: .9em;
margin: .3em;
-webkit-animation: pulse .25s;
-moz-animation: pulse .25s;
-o-animation: pulse .25s;
animation: pulse .25s;
}
<label>Is this cool?</label>
<input type="radio" name="rate" id="r1" value="hell yeah" checked="" hidden="">
<label for="r1" class="radio"><span></span>hell yeah</label>
<input type="radio" name="rate" id="r2" value="a little" hidden="">
<label for="r2" class="radio"><span></span>a little</label>
<input type="radio" name="rate" id="r3" value="nope" hidden="">
<label for="r3" class="radio"><span></span>nope</label>
console.log('Hello');
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600");
html {
background: #26292c;
color: #f8f8f8;
font: 1em/1.5 "Open Sans", Arial;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
body {
margin: auto;
width: 100%;
height: 8.5em;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
}
/** %[Object] Switch */
/*------------------------------------*/
.switch {
color: #6f839a;
cursor: pointer;
font-weight: 600;
line-height: 1.5em;
border-radius: 3px;
padding: .125em .5em;
display: inline-block;
background-color: #3e4956;
-webkit-transition: .15s ease;
-moz-transition: .15s ease;
-ms-transition: .15s ease;
-o-transition: .15s ease;
transition: .15s ease;
}
input[type="radio"]:checked + .switch {
color: #fff;
padding-left: 1em;
padding-right: 1em;
}
input[type="radio"]:checked + .switch--on {
background-color: #7eab55;
}
input[type="radio"]:checked + .switch--off {
background-color: #dd4a38;
}
<p>
<input type="radio" name="s1" id="s1On" value="1" hidden="" checked="">
<label for="s1On" class="switch switch--on">Yes</label>
<input type="radio" name="s1" id="s1Off" value="0" hidden="">
<label for="s1Off" class="switch switch--off">No</label>
</p>
<p>
<input type="radio" name="s2" id="s2On" value="1" hidden="">
<label for="s2On" class="switch switch--on">✓</label>
<input type="radio" name="s2" id="s2Off" value="0" hidden="" checked="">
<label for="s2Off" class="switch switch--off">✗</label>
</p>
<p>
<input type="radio" name="s3" id="s3On" value="1" hidden="" checked="">
<label for="s3On" class="switch switch--on">Sure</label>
<input type="radio" name="s3" id="s3Off" value="0" hidden="">
<label for="s3Off" class="switch switch--off">I dunno</label>
</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment