A simple checkbox toggle improved by being made into a cat.
Forked from Natalya's Pen Kitty Toggle.
A Pen by Fox Peterson on CodePen.
<section class="demo-container"> | |
<h1>Fish Toggle:</h1> | |
<div class="fish-switch"> | |
<input type="checkbox" id="toggle" tabindex="1"> | |
<div class="fish"></div> | |
<label for="toggle" class="well"></label> | |
<span class="prompt">Should I evolve?</span> | |
<div class="visible"> | |
<div> | |
<p>Nice choice, Moby D!</p> | |
<p>Whales are super-better than fish. We live longer and have larger brains. Also, we can eat you -- but many of us don't, as our favorite food is microscopic shrimp. WHALE BOO-YAH FISHIES.</p> | |
<p class="muted">a little play on the @nalayathree kitty-switch, who recommends you go to <a href="http://sassconf.com/">SassConf!</a> or, support me by tweeting your love to @a_fox_box</p> | |
</div> | |
</div> | |
</div> | |
</section> |
A simple checkbox toggle improved by being made into a cat.
Forked from Natalya's Pen Kitty Toggle.
A Pen by Fox Peterson on CodePen.
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:600,700); | |
$primary: darken(lightblue, 29%); | |
$muted: lighten(gray, 33%); | |
$background: lighten(#3680e5, 2%); | |
$shadow: darken($background, 11%); | |
body { | |
background-color: $background; | |
font-family: "adonis-web",serif; | |
font-style: normal; | |
font-weight: 400; | |
color: $primary; | |
} | |
section.demo-container { | |
background-color: lighten(#36e5bd, 30%); | |
display:block; | |
margin: 100px auto; | |
min-width: 300px; | |
max-width: 500px; | |
padding: 20px; | |
-webkit-box-shadow: 1px 10px 20px 0px $shadow; | |
-moz-box-shadow: 1px 10px 20px 0px $shadow; | |
box-shadow: 1px 6px 10px 0px $shadow; | |
} | |
h1 { | |
border-bottom: 1px solid lighten(blue, 11%); | |
padding-bottom: 17px; | |
} | |
.muted, .muted a { | |
color: $muted; | |
} | |
.visible { | |
opacity: 0; | |
max-height: 0; | |
overflow: hidden; | |
margin-top: 30px; | |
} | |
.fish-switch { | |
width: auto; | |
display: block; | |
position: relative; | |
margin: 30px 0px 20px 0px; | |
.prompt { | |
display: inline-block; | |
margin-top: 10px; | |
} | |
.well { | |
background: white; | |
height: 20px; | |
width: 65px; | |
position: absolute; | |
right: 50px; | |
top: 7px; | |
border-radius: 10px; | |
box-shadow: inset 0 2px 0 rgba(0,0,0,.1); | |
border: 1px solid lighten($primary, 21%); | |
cursor: pointer; | |
} | |
#toggle { | |
opacity: 0; | |
border: none; | |
border-radius: 0; | |
outline: none; | |
appearance: none; | |
-moz-appearance: none; | |
-webkit-appearance: none; | |
height: 29px; | |
width: 140px; | |
background: transparent; | |
position: absolute; | |
right: 0px; | |
top: 3px; | |
cursor: pointer; | |
z-index: 100; | |
color: tranparent; | |
&:after { | |
content: ''; | |
background-color: transparent; | |
height: 40px; | |
width: 80px; | |
position: absolute; | |
left: 30px; | |
top: -5px; | |
} | |
~div.fish:before { | |
content: "\01F420"; | |
position: absolute; | |
right: 80px; | |
top: -10px; | |
font-size: 45px; | |
z-index: 1; | |
-moz-transition: all 0.25s ease-out; | |
-webkit-transition: all 0.25s ease-out; | |
-o-transition: all 0.25s ease-out; | |
transition: all 0.25s ease-out; | |
} | |
&:checked { | |
right: 0px; | |
&:after { | |
left: -80px; | |
} | |
~div.fish:before { | |
content: '\01F433'; | |
top: -10px; | |
right: 41px; | |
} | |
~div.visible { | |
opacity: 1; | |
max-height: 900px; | |
overflow: visible; | |
} | |
} | |
~label { | |
&:before { | |
content: "No"; | |
position: absolute; | |
color: $primary; | |
left: -30px; | |
top: 0px; | |
font-size: 16px; | |
} | |
&:after { | |
content: "Yes"; | |
position: absolute; | |
color: $muted; | |
left: 83px; | |
top: 0px; | |
font-size: 16px; | |
} | |
} | |
&:checked~label { | |
&:before { | |
color: $muted; | |
} | |
&:after { | |
color: $primary; | |
} | |
} | |
} | |
} |