Merge pull request #60 from Safelite/CSR-119-loader-qa-updates

Move loader css to component.

src/styles/common-radio-styles.scss

@@ -37,8 +37,6 @@
           color: $danger;
         }
       }
-      //Add spinner. Specify width and height
-      @include loader();
     }
   }
 }

src/styles/mixins/customMixins.scss

@@ -4,66 +4,3 @@
 @mixin blue-gradient {
   background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
 }
-
-//Spinner
-//Choose color and position
-@mixin loader() {
-  .loader {
-    display: flex;
-    //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: relative;
-      width: 100%;
-      height: 100%;
-      animation: rotation 1s infinite linear;
-      @keyframes rotation {
-        100% {
-          transform:rotate(360deg);
-        }
-      }
-    }
-    //Spinner position
-    &.center {
-      left: 0;
-      right: 0;
-      margin: 0 auto;
-    }
-    &.right {
-      margin: 0 0 0 auto;
-    }
-    &.left {
-      margin: 0 auto 0 0;
-    }
-    //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/ux-components/loader/loader.vue

@@ -27,5 +27,62 @@ export default {
 </script>
 
 <style lang="scss">
-@include loader();
+.loader {
+  display: flex;
+  //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: relative;
+    width: 100%;
+    height: 100%;
+    animation: rotation 1s infinite linear;
+    @keyframes rotation {
+      100% {
+        transform:rotate(360deg);
+      }
+    }
+  }
+  //Spinner position
+  &.center {
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+  }
+  &.right {
+    margin: 0 0 0 auto;
+  }
+  &.left {
+    margin: 0 auto 0 0;
+  }
+  //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;
+  }
+}
 </style>