Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Expand Information
<input type="checkbox" id="toggle" class="toggle__checkbox" />
<aside class="box">
<label for="toggle" class="toggle"><i class="icon"></i></label>
<section>
<h1 style="--index:1;" class="box__item">Opening times</h1>
<h2 style="--index:2;" class="box__item">Appointments on request</h2>
<p style="--index:3;" class="box__item">Mo, Tue, Thur : 8AM - 12PM</p>
<p style="--index:4;" class="box__item">Wed : 4PM - 7PM</p>
<p style="--index:5;" class="box__item">Wed : 9AM - 11AM</p>
</section>
</aside>
:root {
--easing: cubic-bezier(0.33, 1, 0.68, 1);
--easing-2: cubic-bezier(0.61, 1, 0.88, 1);
}
input[type="checkbox"]:checked {
& + .box:after {
transform: translateY(-50%) scale3d(8, 6, 1);
}
& + .box .box__item {
transform: translateX(0px);
opacity: 1;
visibility: visible;
transition: all 0.5s ease-out;
transition-delay: calc(var(--index) * 0.1s);
transition-property: transform, opacity;
}
& + .box .icon {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E %3Cpath d='M437.5 386.6L306.9 256l130.6-130.6c14.1-14.1 14.1-36.8 0-50.9-14.1-14.1-36.8-14.1-50.9 0L256 205.1 125.4 74.5c-14.1-14.1-36.8-14.1-50.9 0-14.1 14.1-14.1 36.8 0 50.9L205.1 256 74.5 386.6c-14.1 14.1-14.1 36.8 0 50.9 14.1 14.1 36.8 14.1 50.9 0L256 306.9l130.6 130.6c14.1 14.1 36.8 14.1 50.9 0 14-14.1 14-36.9 0-50.9z'/%3E %3C/svg%3E ");
}
}
.box {
padding: 20px 80px 20px 20px;
position: relative;
&:after {
content: '';
width: 40px;
height: 40px;
position: absolute;
right: 0;
top: 50%;
background: #FFF6DA;
transform-origin: 100% 50%;
transform: translateY(-50%);
transition: transform 0.3s var(--easing);
z-index: -1;
}
&__item {
visibility: hidden;
transform: translateX(20px);
opacity: 0;
transition:
opacity 0.2s var(--easing-2) 0;
}
}
.toggle {
display: block;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
&__checkbox {
display: none;
}
}
.icon {
cursor: pointer;
display: block;
width: 40px;
height: 40px;
background: no-repeat center / 40%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E %3Ccircle cx='12' cy='12' r='10'/%3E %3Cpath d='M12 6v6l4 2'/%3E %3C/svg%3E ");
}
/* _________ BASE LAYOUT __________ */
*,
*:before,
*:after {
box-sizing: border-box;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background: #FBC99D;
display: flex;
justify-content: flex-end;
align-items: center;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 14px;
line-height: 1.5;
}
h1, h2 {
margin: 1.75rem 0 1.05rem;
line-height: 1.15;
}
h1 {
margin-top: 0;
font-weight: 600;
font-size: 1.802em;
}
h2 {
font-size: 1.302em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment