Dribbble rework of an original shot by Ramakrishna V http://drbl.in/nDxL
A Pen by Jason Dicks on CodePen.
<div class="wrapper"> | |
<div class="toggle"> | |
<input class="toggle-input" type="checkbox" /> | |
<div class="toggle-bg"></div> | |
<div class="toggle-switch"> | |
<div class="toggle-switch-figure"></div> | |
<div class="toggle-switch-figureAlt"></div> | |
</div> | |
</div> | |
</div> |
Dribbble rework of an original shot by Ramakrishna V http://drbl.in/nDxL
A Pen by Jason Dicks on CodePen.
/* | |
F5EB42 - sun inner | |
E4C74D - sun outer | |
FFFFFF - cloud inner | |
D4D4D2 - cloud outer | |
81C0D5 - parent outer | |
C0E6F6 - parent inner | |
FFFDF2 - moon inner | |
DEE1C5 - moon outer | |
FCFCFC - stars | |
*/ | |
body { | |
background-color: #F3F3F3; | |
} | |
.wrapper { | |
padding-top: 40px; | |
text-align: center; | |
} | |
///////////////////////////////////////////////// | |
// Mixins | |
///////////////////////////////////////////////// | |
@mixin crater($top, $left, $size) { | |
content: ''; | |
position: absolute; | |
top: $top; | |
left: $left; | |
width: $size; | |
height: $size; | |
background-color: #EFEEDA; | |
border-radius: 100%; | |
border: 4px solid #DEE1C5; | |
} | |
@mixin cloudBubble($top, $right, $width, $height, $deg) { | |
content: ''; | |
display: block; | |
position: relative; | |
top: $top; | |
right: $right; | |
width: $width; | |
height: $height; | |
border: 8px solid #D4D4D2; | |
border-radius: 100%; | |
border-right-color: transparent; | |
border-bottom-color: transparent; | |
transform: rotateZ($deg); | |
background-color: #fff; | |
} | |
///////////////////////////////////////////////// | |
// Day State | |
///////////////////////////////////////////////// | |
.toggle { | |
position: relative; | |
display: inline-block; | |
width: 100px; | |
margin-left: 100px; | |
padding: 4px; | |
border-radius: 40px; | |
} | |
.toggle:before, | |
.toggle:after { | |
content: ''; | |
display: table; | |
} | |
.toggle:after { | |
clear: both; | |
} | |
.toggle-bg { | |
position: absolute; | |
top: -4px; | |
left: -4px; | |
width: 100%; | |
height: 100%; | |
background-color: #C0E6F6; | |
border-radius: 40px; | |
border: 4px solid #81C0D5; | |
transition: all .1s cubic-bezier(0.250, 0.460, 0.450, 0.940); | |
} | |
.toggle-input { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
border: 1px solid red; | |
border-radius: 40px; | |
z-index: 2; | |
opacity: 0; | |
} | |
.toggle-switch { | |
position: relative; | |
width: 40px; | |
height: 40px; | |
margin-left: 50px; | |
background-color: #F5EB42; | |
border: 4px solid #E4C74D; | |
border-radius: 50%; | |
transition: all .1s cubic-bezier(0.250, 0.460, 0.450, 0.940); | |
} | |
.toggle-switch-figure { | |
position: absolute; | |
bottom: -14px; | |
left: -50px; | |
display: block; | |
width: 80px; | |
height: 30px; | |
border: 8px solid #D4D4D2; | |
border-radius: 20px; | |
background-color: #fff; | |
transform: scale(0.4); | |
transition: all .12s cubic-bezier(0.250, 0.460, 0.450, 0.940); | |
&:after { | |
@include cloudBubble(-65px, -42px, 15px, 15px, 70deg); | |
} | |
&:before { | |
@include cloudBubble(-25px, -10px, 30px, 30px, 30deg); | |
} | |
} | |
.toggle-switch-figureAlt { | |
@include crater(5px, 2px, 2px); | |
box-shadow: | |
42px -7px 0 -3px #FCFCFC, | |
75px -10px 0 -3px #FCFCFC, | |
54px 4px 0 -4px #FCFCFC, | |
83px 7px 0 -2px #FCFCFC, | |
63px 18px 0 -4px #FCFCFC, | |
44px 28px 0 -2px #FCFCFC, | |
78px 23px 0 -3px #FCFCFC; | |
transition: all .12s cubic-bezier(0.250, 0.460, 0.450, 0.940); | |
transform: scale(0); | |
} | |
.toggle-switch-figureAlt:before { | |
@include crater(-6px, 18px, 7px); | |
} | |
.toggle-switch-figureAlt:after { | |
@include crater(19px, 15px, 2px); | |
} | |
///////////////////////////////////////////////// | |
// Night State | |
///////////////////////////////////////////////// | |
.toggle-input:checked ~ .toggle-switch { | |
margin-left: 0; | |
border-color: #DEE1C5; | |
background-color: #FFFDF2; | |
} | |
.toggle-input:checked ~ .toggle-bg { | |
background-color: #484848; | |
border-color: #202020; | |
} | |
.toggle-input:checked ~ .toggle-switch .toggle-switch-figure { | |
margin-left: 40px; | |
opacity: 0; | |
transform: scale(0.1); | |
} | |
.toggle-input:checked ~ .toggle-switch .toggle-switch-figureAlt { | |
transform: scale(1); | |
} |