maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-28 20:53:24 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

remove padding animation

Browse source
This commit is contained in:
Janne Koivistoinen 2017-09-29 15:58:48 +03:00
parent ccda16e28b
commit fd04982415
1 changed files with 5 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/containers/LandingPage/LandingPage.css
View file

@ -4,41 +4,21 @@
}
@keyframes animationBorders36px {
0% { border: 0px solid #FFF; }
100% { border: 36px solid #FFF;}
}
@keyframes animationBorders24px {
0% { border: 0px solid #FFF; }
100% { border: 24px solid #FFF;}
}
@keyframes animationBordersRadius {
0% { border-radius: 0px; }
100% { border-radius: 4px; }
}
/* heroContainer gives the height for HeroSection */
/* Safari has a bug with vw padding inside flexbox. Therefore we need an extra div (container) */
.heroContainer {
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--topbarHeight));
padding: 0;
@media (--viewportMedium) {
min-height: calc(100vh - var(--topbarHeightDesktop));
animation-name: animationBorders24px;
animation-duration: 0.5s;
animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
animation-delay: 1s;
border: solid 24px #FFF;
}
@media (--viewportLarge) {
animation-name: animationBorders36px;
border: solid 36px #FFF;
}
}
@ -47,15 +27,9 @@
justify-content: flex-end;
padding-bottom: 98px;
animation-name: animationBordersRadius;
animation-duration: 0.5s;
animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
animation-delay: 1s;
border-radius: 0px;
@media (min-width: 768px) {
@media (--viewportMedium) {
justify-content: center;
padding-top: 60px;
border-radius: 4px;
}
}