[Frontend] CSS for better startup

Fixes 
- Transitions and opacity styles moved to new _app-start.scss,
which loads at the very end of all other CSS needed by the app;
This commit is contained in:
Charles Hacskaylo 2018-03-28 18:00:56 -07:00
parent 1a23f2b390
commit ae42298d08
3 changed files with 21 additions and 10 deletions
platform/commonUI/general/res/sass

@ -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;
}

@ -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";

@ -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);