Read the copy in the accordion sections for some info about how this was made.
A Pen by Ben Kremer on CodePen.
Read the copy in the accordion sections for some info about how this was made.
A Pen by Ben Kremer on CodePen.
<div class="centered"> | |
<ul> | |
<li> | |
<input type="checkbox" checked> | |
<i></i> | |
<h2>Toggle map</h2> | |
<p><img src="http://lorempixel.com/400/200/" alt="placeholder"></p> | |
</li> | |
</ul> | |
</div> |
$white: rgba(254,255,250,1) | |
$grey: rgba(220,231,235,1) | |
$red: rgba(255,104,115,1) | |
$black: rgba(48,69,92,0.8) | |
$sans: 'Titillium Web', sans-serif | |
.transition | |
transition: all 0.25s ease-in-out | |
.flipIn | |
animation: flipdown 0.5s ease both | |
.no-select | |
-webkit-tap-highlight-color: rgba(0,0,0,0) | |
-webkit-touch-callout: none | |
-webkit-user-select: none | |
-khtml-user-select: none | |
-moz-user-select: none | |
-ms-user-select: none | |
user-select: none | |
html | |
width: 100% | |
height: 100% | |
perspective: 900 | |
overflow-y: scroll | |
background-color: $grey | |
font-family: $sans | |
color: $black | |
body | |
min-height: 0 | |
/* display: inline-block */ | |
display: table | |
position: relative | |
margin: 10px auto | |
box-shadow: 0 10px 0 0 $red inset | |
background-color: $white | |
max-width: 100% | |
padding: 30px | |
@media ( max-width:550px ) | |
box-sizing: border-box | |
transform: translate( 0 , 0 ) | |
max-width: 100% | |
min-height: 100% | |
margin: 0 | |
left: 0 | |
.centered | |
margin: 0 auto | |
position: relative | |
text-align: center | |
width: 400px | |
h2 | |
color: $red | |
h2 | |
font-size: 26px | |
line-height: 34px | |
font-weight: 300 | |
letter-spacing: 1px | |
display: block | |
background-color: $white | |
margin: 0 | |
cursor: pointer | |
@extend .no-select | |
p | |
color: $black | |
position: relative | |
overflow: hidden | |
max-height: 300px | |
@extend .transition | |
opacity: 1 | |
transform: translate( 0 , 0 ) | |
margin-top: 14px | |
z-index: 2 | |
ul | |
list-style: none | |
perspective: 900 | |
padding: 0 | |
margin: 0 | |
li | |
position: relative | |
padding: 0 | |
margin: 0 | |
padding-bottom: 4px | |
padding-top: 18px | |
border-top: 1px dotted $grey | |
@extend .flipIn | |
&:nth-of-type(1) | |
animation-delay: 0.5s | |
&:nth-of-type(2) | |
animation-delay: 0.75s | |
&:nth-of-type(3) | |
animation-delay: 1.0s | |
&:last-of-type | |
padding-bottom: 0 | |
i | |
position: absolute | |
transform: translate( -6px , 0 ) | |
margin-top: 16px | |
right: 0 | |
&:before , &:after | |
content: "" | |
@extend .transition | |
position: absolute | |
background-color: $red | |
width: 3px | |
height: 9px | |
&:before | |
transform: translate( -2px , 0 ) rotate( 45deg ) | |
&:after | |
transform: translate( 2px , 0 ) rotate( -45deg ) | |
input[type=checkbox] | |
position: absolute | |
cursor: pointer | |
width: 100% | |
height: 100% | |
z-index: 1 | |
opacity: 0 | |
&:checked | |
&~p | |
margin-top: 0 | |
max-height: 0 | |
opacity: 0 | |
transform: translate( 0 , 50% ) | |
&~i | |
&:before | |
transform: translate( 2px , 0 ) rotate( 45deg ) | |
&:after | |
transform: translate( -2px , 0 ) rotate( -45deg ) | |
@keyframes flipdown | |
0% | |
opacity: 0 | |
transform-origin: top center | |
transform: rotateX(-90deg) | |
5% | |
opacity: 1 | |
80% | |
transform: rotateX(8deg) | |
83% | |
transform: rotateX(6deg) | |
92% | |
transform: rotateX(-3deg) | |
100% | |
transform-origin: top center | |
transform: rotateX(0deg) |