Skip to content

Instantly share code, notes, and snippets.

@persianturtle
Last active February 17, 2018 13:24
Show Gist options
  • Save persianturtle/6b25cb84b7348649e037340a30ff27a4 to your computer and use it in GitHub Desktop.
Save persianturtle/6b25cb84b7348649e037340a30ff27a4 to your computer and use it in GitHub Desktop.
.App {
min-height: 100vh;
&:after {
content: '';
transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1),
transform 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms;
position: fixed; top: 0; right: 0; bottom: 0; left: 0;
background-color: rgba(0, 0, 0, 0.33);
transform: translateX(-100%);
opacity: 0;
z-index: 1;
}
&.overlay {
&:after {
transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1);
transform: translateX(0%);
opacity: 1;
}
}
> header {
display: flex; align-items: center;
height: 60px;
background-color: dodgerblue;
color: white;
box-shadow: 0 4px 5px 0 rgba(15, 74, 133, 0.14),
0 2px 9px 1px rgba(15, 74, 133, 0.12),
0 4px 2px -2px rgba(15, 74, 133, 0.2);
> a {
display: flex; align-items: center;
width: 32px;
height: 100%;
padding: 0 10px;
cursor: pointer;
> svg {
width: 100%;
height: 100%;
path {
fill: white;
}
}
}
> h1 {
font-size: 26px;
line-height: 26px;
margin-left: 10px;
}
}
> nav {
transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1);
position: absolute; top: 0; left: 0;
transform: translateX(calc(-100% - 10px));
height: 100vh;
background-color: white;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 10px,
rgba(0, 0, 0, 0.23) 0px 3px 10px;
overflow: auto;
z-index: 2;
backface-visibility: hidden;
&.active {
transform: translateX(0%);
}
> header {
position: relative;
background-color: lavender;
height: 150px;
margin: 0;
> a {
font-size: 24px;
line-height: 24px;
position: absolute; top: 0; left: 0;
display: flex; align-items: center;
height: 40px;
padding: 10px 20px;
> svg {
width: 20px;
height: 20px;
margin-right: 20px;
}
}
> svg {
position: absolute; bottom: 45px; right: 20px;
width: 40px;
height: 40px;
}
> p {
position: absolute; right: 20px;
margin: 0;
&:first-of-type {
font-size: 18px;
line-height: 18px;
bottom: 25px;
}
&:last-of-type {
font-size: 14px;
line-height: 14px;
bottom: 10px;
}
}
}
> label {
font-weight: normal;
font-size: 12px;
line-height: 24px;
text-transform: uppercase;
display: block;
background-color: rgba(0, 0, 0, 0.32);
color: white;
padding: 0 15px;
}
> ul {
margin: 0;
padding: 0;
list-style: none;
> li {
position: relative;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
&:after {
content: url(./img/icon/arrow-right.svg);
position: absolute; top: 0; right: 15px; bottom: 0;
margin: auto;
width: 15px;
height: 15px;
}
> a {
font-size: 18px;
line-height: 54px;
display: block;
padding: 0 15px;
}
> img {
width: 15px;
height: 15px;
}
}
}
@media only screen and (max-width: 767px) {
width: 85vw;
}
@media only screen and (min-width: 768px) {
width: 300px;
}
}
> main {
padding: 15px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment