WIP CSR-119 spinner updates and overlay.

src/assets/img/icons/spinner.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" xml:space="preserve">
+  <path d="M2.1 16C2.1 8.3 8.3 2.1 16 2.1c3.8 0 7.2 1.5 9.7 4l1.4-1.4C24.3 1.9 20.3.1 16 .1 7.2.1.1 7.3.1 16.1l2-.1c0 .1 0 0 0 0z"/>
+</svg>

src/layouts/componentTest/componentTest.vue

@@ -74,19 +74,22 @@
         groupName="demo"
         ariaLabelBy="vehicle-year"
         radioID="2021"
-        errorMessage="Test error message"
+        spinnerColor="blue"
+        spinnerPosition="right"
         />
         <radioList
         groupName="demo"
         ariaLabelBy="vehicle-year"
         radioID="2020"
-        errorMessage="Test error message"
+        spinnerColor="blue"
+        spinnerPosition="right"
         />
         <radioList
         groupName="demo"
         ariaLabelBy="vehicle-year"
         radioID="2019"
-        errorMessage="Test error message"
+        spinnerColor="blue"
+        spinnerPosition="right"
         />
       </div>
     </div>

src/styles/commonRadioStyles.scss

@@ -37,23 +37,7 @@
           color: $danger;
         }
       }
-      &.button-loader {
+      @include spinner;
-        padding: 0 40px 0 12px;
-        &:after {
-          content: url(../../assets/img/icons/button-spinner-blue.svg);
-          position: absolute;
-          right: 14px;
-          width: 16px;
-          height: 16px;
-          margin-left: 12px;
-          animation: rotation 1s infinite linear;
-          @keyframes rotation {
-            100% {
-              transform:rotate(360deg);
-            }
-          }
-        }
-      }
     }
   }
 }

src/styles/commonStyles.scss

@@ -22,10 +22,3 @@ body {
       cursor: pointer;
     }
   }
-
-//Custom Mixins
-
-//Blue gradient background mixin
-@mixin blue-gradient {
-  background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
-}

src/styles/mixins/customMixins.scss

@@ -0,0 +1,68 @@
+//Custom Mixins
+
+//Blue gradient background mixin
+@mixin blue-gradient {
+  background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
+}
+
+//Spinner
+//Choose color and position
+@mixin spinner {
+  &.spinner {
+    //Open an overlay to prevent page interaction
+    &:before {
+      content: '';
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: transparent;
+      z-index: 9999;
+      cursor: default;
+    }
+    //Spinner basics
+    &:after {
+      content: '';
+      mask: url(../../assets/img/icons/spinner.svg);
+      mask-size: cover;
+      position: absolute;
+      width: 1rem;
+      height: 1rem;
+      animation: rotation 1s infinite linear;
+      @keyframes rotation {
+        100% {
+          transform:rotate(360deg);
+        }
+      }
+    }
+    //Spinner position
+    &.center:after {
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+    }
+    &.right:after {
+      right: 1rem;
+    }
+    &.left:after {
+      left: 1rem;
+    }
+    //Spinner color
+    &:after { //Default spinner color (blue) if no other color is specified from the options below
+      background-color: $blue;
+    }
+    &.red:after {
+      background-color: $red;
+    }
+    &.green:after {
+      background-color: $green;
+    }
+    &.white:after {
+      background-color: $white;
+    }
+    &.black:after {
+      background-color: $black;
+    }
+  }
+}

src/uxComponents/radioList/radioList.vue

@@ -3,7 +3,7 @@
     <input type="radio" v-bind:id="radioID" v-bind:name="groupName" v-bind:value="radioID">
     <label role="radio" tabindex="0" aria-checked="false" v-bind:for="radioID" class="mb-2 d-flex align-items-center p-2"
     v-on:click="showLoader()"
-    v-bind:class="[this.isLoading ? 'button-loader' : 'not-loading',this.isError ? 'error' : '']"
+    v-bind:class="[this.isLoading ? 'spinner' : 'not-loading',this.isError ? 'error' : '', this.spinnerColor, this.spinnerPosition]"
     >{{radioID}}</label>
     <p class="small">{{errorMessage}}</p>
   </div>
@@ -16,7 +16,9 @@ export default {
     "groupName",
     "ariaLabelBy",
     "radioID",
-    "errorMessage"
+    "errorMessage",
+    "spinnerColor",
+    "spinnerPosition"
 
   ],
   data() {

vue.config.js

@@ -21,6 +21,7 @@ module.exports = {
         @import "@/styles/uxVariables.scss";
         @import "./node_modules/bootstrap/scss/variables";
         @import "./node_modules/bootstrap/scss/mixins";
+        @import "@/styles/mixins/customMixins";
         @import "./node_modules/bootstrap/scss/bootstrap";
         @import "@/styles/commonStyles.scss";
         @import "@/styles/commonButtonStyles.scss";

vue.release.config.js

@@ -11,6 +11,7 @@ module.exports = {
         @import "@/styles/uxVariables.scss";
         @import "./node_modules/bootstrap/scss/variables";
         @import "./node_modules/bootstrap/scss/mixins";
+        @import "@/styles/mixins/customMixins";
         @import "./node_modules/bootstrap/scss/bootstrap";
         @import "@/styles/commonStyles.scss";
         @import "@/styles/commonButtonStyles.scss";