Skip to content

Instantly share code, notes, and snippets.

@lordgiotto

lordgiotto/Pure CSS Toggles.markdown

Created July 24, 2015 12:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lordgiotto/dc3a607c726023a3dc21 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lordgiotto/dc3a607c726023a3dc21 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS Toggles
Raw
index.html
<body class="content">
<header>
<h1>Pure <strong>CSS</strong> Toggles</h1>
</header>
<form>
<fieldset>
<legend>Flat look</legend>
<div>
<input type="checkbox" id="pure-toggle-0" hidden/>
<label class="pure-toggle" for="pure-toggle-0"><span class="fontawesome-ok"></span><span class="fontawesome-remove"></span></label>
</div>
<div>
<input type="checkbox" id="pure-toggle-1" hidden checked="checked" />
<label class="pure-toggle flip" for="pure-toggle-1"><span class="fontawesome-ok"></span><span class="fontawesome-remove"></span></label>
</div>
<div>
<input type="checkbox" id="pure-toggle-2" hidden />
<label class="pure-toggle impossible" for="pure-toggle-2"><span class="fontawesome-ok"></span><span class="fontawesome-remove"></span></label>
</div>
<div>
<input type="checkbox" id="pure-toggle-3" hidden checked="checked" />
<label class="pure-toggle wide" for="pure-toggle-3"><span class="fontawesome-ok"></span><span class="fontawesome-remove"></span></label>
</div>
</fieldset>
<fieldset>
<legend>3D look</legend>
<div>
<input type="checkbox" id="pure-toggle-4" hidden />
<label class="pure-toggle brick" for="pure-toggle-4"><span class="fontawesome-ok"></span><span class="fontawesome-remove"></span></label>
</div>
<div>
<input type="checkbox" id="pure-toggle-5" hidden />
<label class="pure-toggle brick switch" for="pure-toggle-5"><span class="fontawesome-ok ok"></span><span class="fontawesome-remove no ok"></span></label>
</div>
</fieldset>
</form>
</body>
Raw
Pure CSS Toggles.markdown
Raw
style.css
@import "compass/css3";
@import "compass/reset";
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,300);
$base-font: 'Open Sans', sans-serif;
$side: 3em;
$duration: 1s;
$factor: 1.618;
$red: #cc0966;
$blue: #5EB9CC;
$green: #59c000;
$ok-color: $blue;
$ko-color: $red;
body {
background-color: #d0d0d0;
text-align: center;
font-family: $base-font;
font-size: 16px;
color: #444444;
}
header {
margin-bottom: 2em;
}
h1 {
font-size: 2em;
margin: 2em 0 1em;
}
strong {
font-weight: 700;
}
legend {
font-size: 1.5em;
line-height: 1em;
margin-bottom: 1.9em;
padding-bottom: 1.5em;
border-bottom: 1px solid #444444;
width: 100%;
}
div {
margin-bottom: 1em;
}
fieldset{
border: 0;
padding: 0 2em 2em;
}
.pure-toggle {
cursor: pointer;
font-size: 1.5em;
width: $side * 2;
height: $side;
display: inline-block;
position: relative;
background: white;
text-align: left;
line-height: $side;
@include box-sizing(border-box);
@include perspective(300px);
&:before {
width: $side;
height: $side;
position: absolute;
right: 0;
top: 0;
background-color: #f5f5f5;
display: inline-block;
text-align: center;
font-family: 'FontAwesome', sans-serif;
content: "···";
color: #ffffff;
@include transition(all $duration ease-in-out);
@include transform-origin(0%, 50%);
/*@include box-shadow(0.1em 0 0.2em rgba(0,0,0,0.3));*/
}
[class^='fontawesome-'] {
padding: 1em;
line-height: inherit;
font-family: 'FontAwesome', sans-serif;
@include transition(all $duration ease-in-out)
}
&.flip:before {
@include transform-origin(50%, 50%);
}
&.brick {
$brickColor: white;
background-color: $brickColor;
border: 1px solid darken($brickColor, 15);
border-bottom-color: darken($brickColor, 10);
@include box-shadow(
inset 0 0.1em 0.03em rgba(0,0,0,0.2)
,inset 0 0.1em 0.3em rgba(0, 0, 0, 0.3)
,0 0 2em rgba($brickColor,0.6)
);
&:before {
margin-right: -1px;
margin-top: -0.14em;
$volumeColor: darken($ok-color, 10);
@include box-shadow(
0 0.12em 0.01em rgba($volumeColor,1)
,0 0.12em 0.3em rgba($volumeColor,0.6)
,0 0.12em 2em rgba(0, 0, 0, 0.3)
,-0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2)
);
@include transition-duration($duration/1.5);
@include transition-timing-function(cubic-bezier(0.52,-0.41, 0.55, 1.46));
}
&.switch {
background: transparent;
@include box-shadow(
inset 0 0 0.03em rgba(0,0,0,0)
,inset 0 0 0.3em rgba(0, 0, 0, 0)
,0 0 2em rgba($brickColor,0)
);
border: 0;
&:before {
display: none;
}
.ok {
color: white;
top: 0;
left: 1px;
line-height: 1em;
padding: 1em 1.045em;
position: relative;
background: $ok-color;
$volumeColor: darken($ok-color, 10);
@include box-shadow(
0 0.12em 0.01em rgba($volumeColor,1)
,0 0.12em 0.3em rgba($volumeColor,0.6)
,0 0.12em 2em rgba(0, 0, 0, 0.3)
,-0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2)
);
@include transition-duration($duration/3);
&.no {
top: 0.14em;
background: transparent;
background: $ko-color;
$volumeColor: darken($ko-color, 10);
@include box-shadow(
0 0 0.01em rgba($volumeColor,1)
,0 0 0.3em rgba($volumeColor,0.6)
,0 0.12em 2em rgba(0, 0, 0, 0)
,-0.12em 0.15em 0.2em rgba(0, 0, 0, 0)
);
}
}
}
}
}
input[type='checkbox'] + .pure-toggle {
&:before {
@include transform(rotateY(0deg));
background-color: $ok-color;
}
[class^="fontawesome-"],
[class*="fontawesome-"] {
color: $ok-color;
}
&.wide:before {
@include transform(rotateY(0deg));
@include animation(contract ($duration) ease-in-out forwards);
}
&.brick {
&:before {
border-bottom: 0.03em solid lighten($ok-color, 05);
text-shadow: 0 0.05em 0 darken($ok-color, 05);
@include transform(rotateY(0deg));
}
&.switch .ok {
color: white;
}
}
&.flip:before {
@include animation(flip ($duration/2) ease-in-out forwards);
}
&.impossible:before {
@include animation(impossible ($duration/2) ease-in-out forwards);
}
}
input[type='checkbox']:checked + .pure-toggle {
&:before {
@include transform(rotateY(-180deg));
background-color: $ko-color;
}
[class^="fontawesome-"],
[class*="fontawesome-"] {
color: $ko-color;
}
&.wide:before {
@include transform(rotateY(0deg));
@include animation(expand ($duration) ease-in-out forwards);
}
&.brick {
&:before {
margin-right: $side;
border-bottom: 0.03em solid lighten($ko-color, 10);
text-shadow: 0 0.05em 0 darken($ko-color, 10);
@include transform(rotateY(0deg));
$volumeColor: darken($ko-color, 10);
@include box-shadow(
0 0.12em 0.01em rgba($volumeColor,1)
,0 0.12em 0.3em rgba($volumeColor,0.6)
,0 0.12em 2em rgba(0, 0, 0, 0.3)
,0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2)
);
}
&.switch {
&:before {
display: none;
}
.ok {
top: 0.14em;
$volumeColor: darken($ok-color, 10);
@include box-shadow(
0 0 0.01em rgba($volumeColor,1)
,0 0 0.3em rgba($volumeColor,0.6)
,0 0.12em 2em rgba(0, 0, 0, 0)
,-0.12em 0.15em 0.2em rgba(0, 0, 0, 0)
);
&.no {
top: 0;
background: $ko-color;
$volumeColor: darken($ko-color, 10);
@include box-shadow(
0 0.12em 0.01em rgba($volumeColor,1)
,0 0.12em 0.3em rgba($volumeColor,0.6)
,0 0.12em 2em rgba(0, 0, 0, 0.3)
,0.12em 0.15em 0.2em rgba(0, 0, 0, 0.2)
);
}
}
}
}
&.flip:before {
@include animation(flip-back ($duration/2) ease-in-out forwards);
}
&.impossible:before {
@include animation(impossible-back ($duration/2) ease-in-out forwards);
}
}
@keyframes flip-back {
0%{
@include transform(rotateY(0deg) translateX(0) scale(1));
}
60%,
80%{
@include transform(rotateY(-360deg) translateX(0) scale(1.3));
}
100%{
margin-right: $side;
@include transform(rotateY(-360deg) translateX(0) scale(1));
}
}
@keyframes flip {
0%{
margin-right: $side;
@include transform(rotateY(0deg) translateX(0) scale(1));
}
60%,
80%{
@include transform(rotateY(360deg) translateX(0) scale(1.3));
}
100%{
margin-right: 0;
@include transform(rotateY(360deg) translateX(0) scale(1));
}
}
@keyframes impossible-back {
0%{
@include transform(rotateX(0deg) translateX(0) scale(1));
}
60%,
80%{
@include transform(rotateX(-360deg) translateX(0) scale(1.3));
}
100%{
margin-right: $side;
@include transform(rotateX(-360deg) translateX(0) scale(1));
}
}
@keyframes impossible {
0%{
margin-right: $side;
@include transform(rotateX(0deg) translateX(0) scale(1));
}
60%,
80%{
@include transform(rotateX(360deg) translateX(0) scale(1.3));
}
100%{
margin-right: 0;
@include transform(rotateX(360deg) translateX(0) scale(1));
}
}
@keyframes expand {
0%{
right: 0;
width: $side;
}
25%{
right: 0;
width: 100%;
}
50%{
right: auto;
width: 100%;
left: 0;
}
100%{
left: 0;
width: $side;
}
}
@keyframes contract {
0%{
left: 0;
width: $side;
}
25%{
left: 0;
width: 100%;
}
50%{
right: 0;
width: 100%;
left: auto;
}
100%{
right: 0;
width: $side;
}
}
@-webkit-keyframes flip-back {
0%{
@include transform(rotateY(0deg) translateX(0) scale(1));
}
60%,
80%{
@include transform(rotateY(-360deg) translateX(0) scale(1.3));
}
100%{
margin-right: $side;
@include transform(rotateY(-360deg) translateX(0) scale(1));
}
}
@-webkit-keyframes flip {
0%{
margin-right: $side;
@include transform(rotateY(0deg) translateX(0) scale(1));
}
60%,
80%{
@include transform(rotateY(360deg) translateX(0) scale(1.3));
}
100%{
margin-right: 0;
@include transform(rotateY(360deg) translateX(0) scale(1));
}
}
@-webkit-keyframes impossible-back {
0%{
@include transform(rotateX(0deg) translateX(0) scale(1));
}
60%,
80%{
@include transform(rotateX(-360deg) translateX(0) scale(1.3));
}
100%{
margin-right: $side;
@include transform(rotateX(-360deg) translateX(0) scale(1));
}
}
@-webkit-keyframes impossible {
0%{
margin-right: $side;
@include transform(rotateX(0deg) translateX(0) scale(1));
}
60%,
80%{
@include transform(rotateX(360deg) translateX(0) scale(1.3));
}
100%{
margin-right: 0;
@include transform(rotateX(360deg) translateX(0) scale(1));
}
}
@-webkit-keyframes expand {
0%{
right: 0;
width: $side;
}
25%{
right: 0;
width: 100%;
}
50%{
right: auto;
width: 100%;
left: 0;
}
100%{
left: 0;
width: $side;
}
}
@-webkit-keyframes contract {
0%{
left: 0;
width: $side;
}
25%{
left: 0;
width: 100%;
}
50%{
right: 0;
width: 100%;
left: auto;
}
100%{
right: 0;
width: $side;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment