Forked from hamedbaatour/Minimus - app.component.css
Created
January 15, 2019 23:27
-
-
Save admaesmo/d867b6002ba217c43a8d1a0089493b75 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.root__container { | |
width: 100vw; | |
height: 100vh; | |
display: grid; | |
grid-template-columns: auto; | |
grid-template-rows: 0.5fr auto; | |
position: relative; | |
} | |
/* | |
================ | |
Header | |
================ | |
*/ | |
/* | |
Slide Menu | |
= = = = = = = = = | |
*/ | |
.side-menu__container { | |
position: fixed; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
overflow: hidden; | |
pointer-events: none; | |
z-index: 25; | |
} | |
.side-menu__container-active { | |
pointer-events: auto; | |
} | |
.side-menu__container::before { | |
content: ''; | |
cursor: pointer; | |
position: absolute; | |
display: block; | |
top: 0; | |
left: 0; | |
height: 100%; | |
width: 100%; | |
background-color: #0c1066; | |
opacity: 0; | |
transition: opacity 300ms linear; | |
will-change: opacity; | |
} | |
.side-menu__container-active::before { | |
opacity: 0.3; | |
} | |
.slide-menu { | |
box-sizing: border-box; | |
transform: translateX(-103%); | |
position: relative; | |
top: 0; | |
left: 0; | |
z-index: 10; | |
height: 100%; | |
width: 90%; | |
max-width: 26rem; | |
background-color: white; | |
box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1); | |
display: grid; | |
grid-template-columns: 1fr; | |
grid-template-rows: 2fr 4fr 1fr; | |
grid-gap: 1rem; | |
transition: transform 300ms linear; | |
will-change: transform; | |
} | |
.slide-menu-active { | |
transform: none; | |
} | |
.menu-header { | |
background: linear-gradient(to right, #00FF9B, #5f84fb); | |
display: grid; | |
grid-template-rows: 1fr 4fr; | |
grid-template-columns: 1fr 4fr; | |
grid-template-areas: "greeting greeting" "image details"; | |
box-sizing: border-box; | |
width: 100%; | |
align-content: center; | |
color: white; | |
box-shadow: 0 0.5rem 2rem rgba(0, 0, 255, 0.2); | |
} | |
.greeting__text { | |
grid-area: greeting; | |
font-size: 1.25rem; | |
letter-spacing: 0.15rem; | |
text-transform: uppercase; | |
margin-top: 1rem; | |
justify-self: center; | |
align-self: center; | |
} | |
.account-details { | |
grid-area: details; | |
display: flex; | |
flex-flow: column; | |
margin-left: 1rem; | |
align-self: center; | |
} | |
.name__text { | |
font-size: 1.15rem; | |
margin-bottom: 0.5rem; | |
} | |
.email__text { | |
font-size: 0.9rem; | |
letter-spacing: 0.1rem; | |
} | |
.menu-body { | |
display: grid; | |
width: 100%; | |
} | |
.profile-image__container { | |
grid-area: image; | |
margin-right: 0.5rem; | |
border-radius: 50%; | |
height: 4rem; | |
width: 4rem; | |
overflow: hidden; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
background-color: white; | |
align-self: center; | |
margin-left: 2rem; | |
} | |
.profile__image { | |
max-width: 4rem; | |
} | |
/*Header*/ | |
.main__header { | |
width: 100%; | |
display: grid; | |
grid-template-columns: 1fr 1fr 0.25fr; | |
grid-template-rows: 1fr; | |
box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1); | |
height: 4rem; | |
margin: 0; | |
align-items: center; | |
transition: background-color 500ms linear; | |
animation: 1s ease-in-out 0ms 1 fadein; | |
} | |
.main__header-dark { | |
background-color: #2B244D; | |
color: white; | |
} | |
.toggle-button__container { | |
cursor: pointer; | |
position: relative; | |
margin: 0 0.5rem; | |
} | |
.mode-toggle__input { | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
} | |
.mode-toggle__bg { | |
height: 1rem; | |
width: 2rem; | |
border-radius: 0.5rem; | |
background-color: rgba(0, 0, 0, 0.5); | |
display: inline-block; | |
transition: background-color 300ms linear; | |
} | |
.mode-toggle__circle { | |
height: 1.30rem; | |
width: 1.30rem; | |
background-color: #2B244D; | |
position: absolute; | |
top: -0.2rem; | |
border-radius: 50%; | |
box-shadow: 0 0 0 rgba(0, 0, 255, 0.5); | |
transition: left 300ms linear; | |
left: 0.1rem; | |
} | |
.mode-toggle__circle-checked { | |
background-color: white; | |
left: 1.75rem; | |
} | |
.mode-toggle__bg-checked { | |
background-color: #FF0070; | |
} | |
.mode-toggle__text { | |
font-size: 0.75rem; | |
text-transform: uppercase; | |
letter-spacing: 0.1rem; | |
} | |
/*Content*/ | |
.left__section { | |
display: grid; | |
grid-template-rows: 1fr; | |
grid-template-columns: 1fr 1fr; | |
max-width: 5rem; | |
} | |
.date__text { | |
text-transform: uppercase; | |
letter-spacing: 0.1rem; | |
display: inline; | |
margin: 0.5rem 0; | |
} | |
/*SVGs*/ | |
.hamburger__icon { | |
position: relative; | |
z-index: 35; | |
height: 1rem; | |
padding: 0.5rem 1.5rem; | |
margin-right: 1rem; | |
cursor: pointer; | |
} | |
.logo__icon { | |
height: 2rem; | |
margin-left: 1rem; | |
} | |
.logo__text { | |
fill: #2B244D; | |
} | |
.logo__text-dark { | |
fill: #ffff; | |
} | |
.hamburger__icon__fill { | |
fill: #2B244D; | |
} | |
.hamburger__icon__fill-dark { | |
fill: #ffff; | |
} | |
/* | |
================ | |
Body | |
================ | |
*/ | |
.main-container__bg { | |
height: 100%; | |
width: 100%; | |
position: absolute; | |
top: 0; | |
left: 0; | |
z-index: -2; | |
opacity: 0; | |
background: white; | |
transition: opacity 300ms linear; | |
} | |
.main-container__bg-dark { | |
opacity: 1; | |
background: linear-gradient(to bottom, #B290FF, #2E1D65); | |
transition: opacity 300ms linear; | |
} | |
/* | |
================- | |
Footer | |
================ | |
*/ | |
.main__footer { | |
background: transparent; | |
position: absolute; | |
bottom: 1rem; | |
left: 1.5rem; | |
z-index: 100; | |
} | |
.copyright__text { | |
letter-spacing: 0.1rem; | |
color: white; | |
} | |
@media only screen and (max-width: 300px) { | |
.slide-menu { | |
width: 100%; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment