MOBILE-3565 core: Add init splash

src/app/core/login/pages/init/init.html

@@ -1,5 +1,7 @@
-<ion-content>
-    <div class="core-bglogo">
-        <ion-spinner></ion-spinner>
+<ion-content fullscreen="true" scrollY="false">
+    <div class="core-bglogo" slot="fixed">
+        <div class="core-center-spinner">
+            <ion-spinner></ion-spinner>
+        </div>
     </div>
 </ion-content>

src/app/core/login/pages/init/init.scss

@@ -1,2 +1,25 @@
-app-root page-core-login-init {
+ion-content::part(background) {
+    --background: var(--core-splash-screen-background, #ffffff);
+
+    background-image: url("../../../../../assets/img/splash.png");
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-size: var(--core-splash-bgsize, 100vmax);
+    background-position: center;
+}
+
+.core-bglogo {
+    display: table;
+    width: 100%;
+    height: 100%;
+
+    .core-center-spinner {
+        display: table-cell;
+        vertical-align: middle;
+        text-align: center;
+    }
+
+    ion-spinner {
+        --color: var(--core-splash-spinner-color, var(--core-color));
+    }
 }

src/theme/custom.scss

@@ -0,0 +1,4 @@
+// Place here custom styles.
+:root {
+
+}

src/theme/variables.scss

@@ -1,9 +1,13 @@
 // Ionic Variables and Theming. For more info, please see:
 // http://ionicframework.com/docs/theming/
 
+@import "custom.scss";
+
 /** Ionic CSS Variables **/
 :root {
-  --ion-color-primary: var(--bma-core-color, #f98012);
+  --core-color: var(--custom-main-color, #f98012);
+
+  --ion-color-primary: var(--core-color);
   --ion-color-primary-rgb: 249,128,18;
   --ion-color-primary-contrast: #ffffff;
   --ion-color-primary-contrast-rgb: 255,255,255;
@@ -80,7 +84,6 @@
     --color: #ffffff;
   }
 
-
   ion-toolbar {
     --color: var(--ion-color-primary-contrast);
     --background: var(--ion-color-primary);