Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WbmNLb
<div class="to-arrow">
<div class="left">
<input type="checkbox" id="menu-left" />
<label for="menu-left"><span></span></label>
</div>
<div class="right">
<input type="checkbox" id="menu-right" />
<label for="menu-right"><span></span></label>
</div>
<div class="top">
<input type="checkbox" id="menu-top" />
<label for="menu-top"><span></span></label>
</div>
<div class="bottom">
<input type="checkbox" id="menu-bottom" />
<label for="menu-bottom"><span></span></label>
</div>
</div>
<div class="to-close">
<div class="x">
<input type="checkbox" id="menu-x" />
<label for="menu-x"><span></span></label>
</div>
<div class="x1">
<input type="checkbox" id="menu-x1" />
<label for="menu-x1"><span></span></label>
</div>
</div>
$size: 5rem;
$thickness: .5rem;
$gap: 1rem;
$color: #CFD8DC;
$roundCap: true;
body {
background: #455A64;
}
*,
*:before,
*:after {
transition: all 300ms ease;
}
div > div {
float: left;
padding: 5rem;
}
input {
display: none;
}
label {
display: block;
width: $size;
height: ($thickness * 3 + $gap * 2);
position: relative;
span {
position: relative;
top: $thickness + $gap;
&,
&:before,
&:after {
display: block;
background: $color;
width: $size;
height: $thickness;
@if $roundCap {
border-radius: $thickness / 2;
}
}
&:before,
&:after {
content: '';
position: absolute;
}
&:before {
bottom: $gap + $thickness;
}
&:after {
top: $gap + $thickness;
}
.left &,
.top &,
.bottom & {
&:before {
transform-origin: top left;
}
&:after {
transform-origin: bottom left;
}
}
.right & {
&:before {
transform-origin: top right;
right: 0;
}
&:after {
transform-origin: bottom right;
right: 0;
}
}
:checked ~ & {
.to-arrow & {
&:before,
&:after {
width: 60%;
}
&:before {
bottom: (-1) * $thickness / 4;
}
&:after {
top: (-1) * $thickness / 4;
}
}
.left &,
.top &,
.bottom & {
&:before {
transform: rotate(-40deg);
}
&:after {
transform: rotate(40deg);
}
}
.right & {
&:before {
transform: rotate(40deg);
}
&:after {
transform: rotate(-40deg);
}
}
.top & { transform: rotate(90deg); }
.bottom & { transform: rotate(-90deg); }
.x & {
width: 0;
&:before {
transform: rotate(45deg);
bottom: 0;
}
&:after {
transform: rotate(-45deg);
top: 0;
}
}
.x1 & {
background: none;
&:before { animation: x1Before 500ms forwards; }
&:after { animation: x1After 500ms forwards; }
}
@keyframes x1Before {
50% {
bottom: 0;
transform: rotate(0deg);
}
100% {
bottom: 0;
transform: rotate(45deg);
}
}
@keyframes x1After {
50% {
top: 0;
transform: rotate(0deg);
}
100% {
top: 0;
transform: rotate(-45deg);
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment