Revised spinner styling

Author: Becky Sroufe

app/app-js/modules/loading/loading.view.js

@@ -17,11 +17,10 @@ define(function (require) {
         corners: 1,
         rotate: 0,
         direction: 1,
-        color: '#fff',
-        speed: 1, // Rounds per second
-        trail: 60, // Afterglow percentage
-        className: 'spinner',
-        top: '25%'
+        color: '#007bb6',
+        speed: 1,
+        trail: 60,
+        className: 'spinner'
       };
 
       var spinner = new Spinner(opts).spin();

app/less/buttons.less

@@ -2,6 +2,52 @@
 // Buttons
 // --------------------------------------------------
 
+.btn-gray,
+.btn-gray-block,
+.btn-action,
+.btn-action-block,
+.btn-green,
+.btn-green-block,
+.btn-red,
+.btn-red-block,
+.btn-yellow,
+.btn-yellow-block {
+  &:extend(.btn all, .btn-md all);
+}
+
+.btn-gray-block,
+.btn-green-block,
+.btn-action-block,
+.btn-red-block,
+.btn-yellow-block {
+  &:extend(.btn-block all);
+}
+
+.btn-gray,
+.btn-gray-block {
+  &:extend(.btn-default all);
+}
+
+.btn-action,
+.btn-action-block {
+  &:extend(.btn-primary all);
+}
+
+.btn-green,
+.btn-green-block {
+  &:extend(.btn-success all);
+}
+
+.btn-red,
+.btn-red-block {
+  &:extend(.btn-danger all);
+}
+
+.btn-yellow,
+.btn-yellow-block {
+  &:extend(.btn-warning all);
+}
+
 // NOTE: This needs to be revised in accordance with engine-ui
 .btn-green {
   // Using bootstrap mixin to bring in other styles, like "disabled"

app/less/loading.less

@@ -1,11 +1,20 @@
 // Loading
 // --------------------------------------------------
 
-.loading-modal {
+#loading-region {
   position: absolute;
   top: 0;
   width: 100%;
-  padding-top: 10%;
   height: 100%;
-  background-color: rgba(0,0,0,0.65);
+
+  .loading-modal {
+    position: relative;
+    margin: 0 auto;
+    top: 20%;
+    width: 100px;
+    height: 100px;
+    background: rgba(235, 235, 235, 0.5);
+
+    .border-radius (@radius: 10px);
+  }
 }

app/less/mixins.less

@@ -1,52 +1,6 @@
-// Buttons
+// Mixins
 // --------------------------------------------------
 
-.btn-gray,
-.btn-gray-block,
-.btn-action,
-.btn-action-block,
-.btn-green,
-.btn-green-block,
-.btn-red,
-.btn-red-block,
-.btn-yellow,
-.btn-yellow-block {
-  &:extend(.btn all, .btn-md all);
-}
-
-.btn-gray-block,
-.btn-green-block,
-.btn-action-block,
-.btn-red-block,
-.btn-yellow-block {
-  &:extend(.btn-block all);
-}
-
-.btn-gray,
-.btn-gray-block {
-  &:extend(.btn-default all);
-}
-
-.btn-action,
-.btn-action-block {
-  &:extend(.btn-primary all);
-}
-
-.btn-green,
-.btn-green-block {
-  &:extend(.btn-success all);
-}
-
-.btn-red,
-.btn-red-block {
-  &:extend(.btn-danger all);
-}
-
-.btn-yellow,
-.btn-yellow-block {
-  &:extend(.btn-warning all);
-}
-
 .border-left-radius(@radius) {
              border-top-left-radius: @radius;
           border-bottom-left-radius: @radius;
@@ -64,3 +18,13 @@
      -webkit-border-top-right-radius: @radius;
   -webkit-border-bottom-right-radius: @radius;
 }
+
+.border-radius (@radius: 0px) {
+	-webkit-border-radius:   @radius;
+	-moz-border-radius:      @radius;
+	border-radius:           @radius;
+
+	-moz-background-clip:    padding;
+	-webkit-background-clip: padding-box;
+	background-clip:         padding-box;
+}