From 7f4aa2ceb0cb47339f6e87bc6107ff2f7ef72e50 Mon Sep 17 00:00:00 2001
From: Bryan <bryan.mauger@safelite.com>
Date: Tue, 19 Oct 2021 09:36:12 -0400
Subject: [PATCH] Button updates. Add disabled button.

---
 src/Funnel1.vue                               | 12 +++++++++++-
 src/assets/scss/components/_buttons.scss      | 14 ++++++++++----
 src/components/buttons/buttonDisabled.vue     | 10 ++++++++++
 src/components/buttons/buttonPrimary.vue      |  2 +-
 src/components/buttons/buttonPrimaryFocus.vue |  2 +-
 5 files changed, 33 insertions(+), 7 deletions(-)
 create mode 100644 src/components/buttons/buttonDisabled.vue

diff --git a/src/Funnel1.vue b/src/Funnel1.vue
index d01e9de61..2c9ca1cae 100644
--- a/src/Funnel1.vue
+++ b/src/Funnel1.vue
@@ -55,6 +55,14 @@
       <div class="col my-3 d-flex align-items-center">
         <buttonPrimary class="button-loader"
           btnText="w/Loader"
+          btnClass="test"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col my-3 d-flex align-items-center">
+        <buttonDisabled
+          btnText="Disabled"
         />
       </div>
     </div>
@@ -68,6 +76,7 @@
   import confetti from './components/confetti';
   import buttonPrimary from './components/buttons/buttonPrimary';
   import buttonPrimaryFocus from './components/buttons/buttonPrimaryFocus';
+  import buttonDisabled from './components/buttons/buttonDisabled';
 
 
   export default {
@@ -78,7 +87,8 @@
       imageButton,
       confetti,
       buttonPrimary,
-      buttonPrimaryFocus
+      buttonPrimaryFocus,
+      buttonDisabled
     }
   }
 </script>
diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss
index b1453d110..efbb34ded 100644
--- a/src/assets/scss/components/_buttons.scss
+++ b/src/assets/scss/components/_buttons.scss
@@ -9,17 +9,18 @@
     border-radius: $border-radius-lg;
     height: 48px;
     color: $white;
-    transition: all 100ms linear; 
+    transition: all 150ms linear;
     &:hover {
       background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
     }
     &.button-loader {
-      padding: 0 48px 0 12px;
+      padding: 0 40px 0 12px;
       &:after {
         content: url(../../assets/img/icons/button-spinner.svg);
         position: absolute;
-        width: 24px;
-        height: 24px;
+        right: 14px;
+        width: 16px;
+        height: 16px;
         margin-left: 12px;
         animation: rotation 1s infinite linear;
         @keyframes rotation {
@@ -29,6 +30,11 @@
         }
       }
     }
+    &:disabled {
+      background: $gray-100;
+      background: linear-gradient(270deg, $gray-100 0%, $gray-100 100%);
+      color: $gray-400;
+    }
   }
   &.btn-primary-focus {
     position: relative;//Required for :after pseduo to position correctly
diff --git a/src/components/buttons/buttonDisabled.vue b/src/components/buttons/buttonDisabled.vue
new file mode 100644
index 000000000..72a4ef80b
--- /dev/null
+++ b/src/components/buttons/buttonDisabled.vue
@@ -0,0 +1,10 @@
+<template>
+  <button type="button" class="btn btn-primary" disabled>{{btnText}}</button>
+</template>
+
+<script>
+export default {
+  name: 'buttonDisabled',
+  props: ['btnText']
+}
+</script>
diff --git a/src/components/buttons/buttonPrimary.vue b/src/components/buttons/buttonPrimary.vue
index 53fb2ad65..50cd6daa7 100644
--- a/src/components/buttons/buttonPrimary.vue
+++ b/src/components/buttons/buttonPrimary.vue
@@ -1,5 +1,5 @@
 <template>
-  <button type="button" class="btn btn-primary">{{btnText}}</button>
+  <button type="button" class="btn btn-primary d-flex align-items-center">{{btnText}}</button>
 </template>
 
 <script>
diff --git a/src/components/buttons/buttonPrimaryFocus.vue b/src/components/buttons/buttonPrimaryFocus.vue
index d2c89581c..922587323 100644
--- a/src/components/buttons/buttonPrimaryFocus.vue
+++ b/src/components/buttons/buttonPrimaryFocus.vue
@@ -1,5 +1,5 @@
 <template>
-  <button type="button" class="btn btn-primary-focus">{{btnText}}</button>
+  <button type="button" class="btn btn-primary-focus d-flex align-items-center">{{btnText}}</button>
 </template>
 
 <script>