From 3a910bc60c77d663e4360db1d139a84e8e072832 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Wed, 15 May 2019 09:24:42 -0400
Subject: [PATCH] Fix css naming conflict

Resolves #18
---
 resources/css/app.css                 |  1 -
 resources/css/buttons.css             | 24 ++++++++++++++++++++
 resources/css/spinner.css             | 32 ---------------------------
 resources/js/Shared/LoadingButton.vue |  2 +-
 4 files changed, 25 insertions(+), 34 deletions(-)
 delete mode 100644 resources/css/spinner.css

diff --git a/resources/css/app.css b/resources/css/app.css
index 959c92e..a360df9 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -6,7 +6,6 @@
 @import "buttons";
 @import "form";
 @import "nprogress";
-@import "spinner";
 
 /* Utilities */
 @import "tailwindcss/utilities";
diff --git a/resources/css/buttons.css b/resources/css/buttons.css
index 3dd6488..a26d207 100644
--- a/resources/css/buttons.css
+++ b/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) }
+}
diff --git a/resources/css/spinner.css b/resources/css/spinner.css
deleted file mode 100644
index a2f1821..0000000
--- a/resources/css/spinner.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.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);
-  }
-}
diff --git a/resources/js/Shared/LoadingButton.vue b/resources/js/Shared/LoadingButton.vue
index e01a649..9d144be 100644
--- a/resources/js/Shared/LoadingButton.vue
+++ b/resources/js/Shared/LoadingButton.vue
@@ -1,6 +1,6 @@
 <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>