feat(loading): Moved loading scss to its own file and added variables, closes #984

Author: adamdbradley

scss/_loading.scss

@@ -0,0 +1,46 @@
+
+/**
+ * Loading
+ * --------------------------------------------------
+ */
+
+.loading-backdrop {
+  @include transition(visibility 0s linear $loading-backdrop-fadein-duration);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $z-index-loading-backdrop;
+
+  visibility: hidden;
+  width: 100%;
+  height: 100%;
+
+  &.active {
+    @include transition-delay(0s);
+    visibility: visible;
+
+    &.show-backdrop {
+      background-color: $loading-backdrop-bg-color;
+    }
+  }
+}
+
+.loading {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  padding: $loading-padding;
+
+  border-radius: $loading-border-radius;
+  background-color: $loading-bg-color;
+
+  color: $loading-text-color;
+
+  text-align: center;
+  text-overflow: ellipsis;
+  font-size: $loading-font-size;
+
+  h1, h2, h3, h4, h5, h6 {
+    color: $loading-text-color;
+  }
+}

scss/_popup.scss

@@ -105,43 +105,3 @@
 
   background-color: rgba(0,0,0,0.4);
 }
-
-.loading-backdrop {
-  @include transition(visibility 0s linear 0.3s);
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: $z-index-popup-backdrop;
-
-  visibility: hidden;
-  width: 100%;
-  height: 100%;
-
-  &.active {
-    @include transition-delay(0s);
-    visibility: visible;
-    &.show-backdrop {
-      background-color: rgba(0,0,0,0.7);
-    }
-  }
-}
-
-.loading {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  padding: 20px;
-
-  border-radius: 5px;
-  background-color: rgba(0,0,0,0.7);
-
-  color: #fff;
-
-  text-align: center;
-  text-overflow: ellipsis;
-  font-size: 15px;
-
-  h1, h2, h3, h4, h5, h6 {
-    color: #fff;
-  }
-}

scss/_variables.scss

@@ -501,7 +501,6 @@ $checkbox-on-bg-dark:             $dark !default;
 $checkbox-off-border-default:     $positive !default;
 $checkbox-on-bg-default:          $positive !default;
 
-
 $checkbox-check-width:            3px !default;
 $checkbox-check-color:            #fff !default;
 
@@ -593,6 +592,19 @@ $popup-button-line-height:        20px !default;
 $popup-button-min-height:         45px !default;
 
 
+// Loading
+// -------------------------------
+
+$loading-text-color:              #fff !default;
+$loading-bg-color:                rgba(0,0,0,0.7) !default;
+$loading-padding:                 20px !default;
+$loading-border-radius:           5px !default;
+$loading-font-size:               15px !default;
+
+$loading-backdrop-fadein-duration:0.3s !default;
+$loading-backdrop-bg-color:       rgba(0,0,0,0.7) !default;
+
+
 // Badges
 // -------------------------------
 
@@ -648,6 +660,7 @@ $z-index-item-options:            1 !default;
 $z-index-item-radio:              3 !default;
 $z-index-item-reordering:         9 !default;
 $z-index-item-toggle:             3 !default;
+$z-index-loading-backdrop:        11 !default;
 $z-index-menu:                    0 !default;
 $z-index-modal:                   10 !default;
 $z-index-pane:                    1 !default;

scss/ionic.scss

@@ -20,6 +20,7 @@
   "menu",
   "modal",
   "popup",
+  "loading",
   "items",
   "list",
   "badge",