Merge pull request #1967 from nasa/better-startup-1966

[Frontend]  CSS for better startup
This commit is contained in:
Deep Tailor 2018-04-18 17:02:42 -07:00 committed by GitHub
commit 78a5ace18d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 10 deletions

View File

@ -0,0 +1,11 @@
// At the last, hide .l-splash-holder and show .holder-all
.l-splash-holder.fadeout {
@include trans-prop-nice($props: opacity, $dur: 1000ms);
opacity: 0;
pointer-events: none;
}
.user-environ .holder-all {
opacity: 1;
pointer-events: inherit;
}

View File

@ -76,9 +76,11 @@
@import "items/item";
@import "mobile/item";
/********************************* TO BE MOVED */
@import "autoflow";
@import "features/imagery";
@import "features/time-display";
@import "widgets";
/********************************* APP STARTUP */
@import "app-start";

View File

@ -32,11 +32,7 @@ body, html {
}
.l-splash-holder {
// Main outer holder.
@include transition-property(opacity);
@include transition-duration(500ms);
@include transition-timing-function(ease-in-out);
@include transition-delay(1s);
// Main outer holder for splash.
position: absolute;
top: 0;
right: 0;
@ -44,16 +40,18 @@ body, html {
left: 0;
z-index: 10000;
opacity: 1;
&.fadeout {
opacity: 0;
pointer-events: none;
}
.l-splash {
// The splash element.
@include splashElem();
}
}
.user-environ .holder-all {
// Gets shown again by main CSS, once loaded
opacity: 0;
pointer-events: none;
}
@media only screen and (max-device-width: 767px) {
.l-splash-holder .l-splash {
@include splashElem(0);