Merge pull request #120 from sebgroup/feature/button-spinners

fix(buttons): loading state for secondary and outline version
seb-oss · May 22, 2019 · a89481a · a89481a
2 parents 05b2bee + 95a73f5
commit a89481a
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 9 deletions.
diff --git a/scss/styles/_spinners.scss b/scss/styles/_spinners.scss
@@ -108,15 +108,41 @@ $spinner-lg-size: 6rem;
   }
 }
 
-.btn .spinner {
-  //width: 1rem;
-  //height: 1rem;
-  color: $white;
-  display: inline-block;
-  vertical-align: -3px;
-  &:before,
-  &:after {
-    background: $btn-disabled-color;
+.btn {
+  .spinner {
+    //width: 1rem;
+    //height: 1rem;
+    color: $white;
+    display: inline-block;
+    vertical-align: -3px;
+    &:before,
+    &:after {
+      background: $btn-disabled-color;
+    }
+  }
+  &[class*=" btn-outline-"] {
+    .spinner-sq {
+      background-color: $btn-disabled-color;
+    }
+    .spinner {
+      color: $btn-disabled-color;
+      &:before,
+      &:after {
+        background: $gray-100;
+      }
+    }
+  }
+  &.btn-secondary {
+    .spinner-sq {
+      background-color: $btn-disabled-color;
+    }
+    .spinner {
+      color: $btn-disabled-color;
+      &:before,
+      &:after {
+        background: $white;
+      }
+    }
   }
 }
 

diff --git a/src/example/components/spinners/spinners.component.html b/src/example/components/spinners/spinners.component.html
@@ -60,6 +60,34 @@ <h2 class="my-3">Spinners</h2>
           </div>
         </button>
       </div>
+      <div class="col-auto">
+        <button class="btn btn-outline-primary disabled"><span class="mr-2">Waiting</span>
+          <div class="spinner" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </button>
+      </div>
+      <div class="col-auto">
+        <button class="btn btn-outline-primary disabled"><span class="mr-2">Waiting</span>
+          <div class="spinner-sq" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </button>
+      </div>
+      <div class="col-auto">
+        <button class="btn btn-secondary disabled"><span class="mr-2">Waiting</span>
+          <div class="spinner" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </button>
+      </div>
+      <div class="col-auto">
+        <button class="btn btn-secondary disabled"><span class="mr-2">Waiting</span>
+          <div class="spinner-sq" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+        </button>
+      </div>
     </div>
     <exemplify [selector]="'#loadersButton .btn'"></exemplify>
   </div>