Fix css naming conflict

Resolves #18

resources/css/app.css

@@ -6,7 +6,6 @@
 @import "buttons";
 @import "form";
 @import "nprogress";
-@import "spinner";
 
 /* Utilities */
 @import "tailwindcss/utilities";

resources/css/buttons.css

@@ -3,3 +3,27 @@
 
   &:hover, &:focus { @apply bg-orange }
 }
+
+.btn-spinner,
+.btn-spinner:after {
+  border-radius: 50%;
+  width: 1.5em;
+  height: 1.5em;
+}
+
+.btn-spinner {
+  font-size: 10px;
+  position: relative;
+  text-indent: -9999em;
+  border-top: .2em solid white;
+  border-right: .2em solid white;
+  border-bottom: .2em solid white;
+  border-left: .2em solid transparent;
+  transform: translateZ(0);
+  animation: spinning 1s infinite linear;
+}
+
+@keyframes spinning {
+  0% { transform: rotate(0deg) }
+  100% { transform: rotate(360deg) }
+}

resources/css/spinner.css

-.spinner,
-.spinner:after {
-  border-radius: 50%;
-  width: 1.5em;
-  height: 1.5em;
-}
-
-.spinner {
-  font-size: 10px;
-  position: relative;
-  text-indent: -9999em;
-  border-top: .2em solid white;
-  border-right: .2em solid white;
-  border-bottom: .2em solid white;
-  border-left: .2em solid transparent;
-  -webkit-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  transform: translateZ(0);
-  -webkit-animation: loading 1s infinite linear;
-  animation: loading 1s infinite linear;
-}
-
-@keyframes loading {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}

resources/js/Shared/LoadingButton.vue

 <template>
   <button :disabled="loading" class="flex items-center">
-    <div v-if="loading" class="spinner mr-2" />
+    <div v-if="loading" class="btn-spinner mr-2" />
     <slot />
   </button>
 </template>