feat(progressButtons): style progress button styles

src/app/pages/buttons/_buttonsPage.scss

@@ -79,9 +79,6 @@ $btn-icon-size: 34px;
 .progress-buttons-container {
   text-align: center;
   font-size: 16px;
-  .progress {
-    margin-bottom: 0;
-  }
   span.button-title {
     display: inline-block;
     width: 100%;

src/app/pages/buttons/widgets/progressButtons.html

@@ -2,83 +2,83 @@
   <div class="row">
     <section class="col-md-6 col-lg-3">
       <span class="button-title">fill horizontal</span>
-      <button progress-button="progressFunction()">Submit</button>
+      <button progress-button="progressFunction()" class="btn btn-success">Submit</button>
     </section>
     <section class="col-md-6 col-lg-3">
       <span class="button-title">fill vertical</span>
-      <button progress-button="progressFunction()" pb-direction="vertical">Submit</button>
+      <button progress-button="progressFunction()" pb-direction="vertical" class="btn btn-danger">Submit</button>
     </section>
     <section class="col-md-6 col-lg-3">
       <span class="button-title">shrink horizontal</span>
-      <button progress-button="progressFunction()" pb-style="shrink">Submit</button>
+      <button progress-button="progressFunction()" pb-style="shrink" class="btn btn-warning">Submit</button>
     </section>
     <section class="col-md-6 col-lg-3">
       <span class="button-title">shrink vertical</span>
-      <button progress-button="progressFunction()" pb-style="shrink" pb-direction="vertical">Submit</button>
+      <button progress-button="progressFunction()" pb-style="shrink" pb-direction="vertical" class="btn btn-info">Submit</button>
     </section>
   </div>
   <div class="row">
     <section class="col-md-6 col-lg-3">
       <span class="button-title">rotate-angle-bottom <br/>perspective</span>
-      <button progress-button="progressFunction()" pb-style="rotate-angle-bottom">Submit</button>
+      <button progress-button="progressFunction()" pb-style="rotate-angle-bottom" class="btn btn-success">Submit</button>
     </section>
     <section class="col-md-6 col-lg-3">
       <span class="button-title">rotate-angle-top <br/>perspective</span>
-      <button progress-button="progressFunction()" pb-style="rotate-angle-top">Submit</button>
+      <button progress-button="progressFunction()" pb-style="rotate-angle-top" class="btn btn-danger">Submit</button>
     </section>
     <section class="col-md-6 col-lg-3">
       <span class="button-title">rotate-angle-left <br/>perspective</span>
-      <button progress-button="progressFunction()" pb-style="rotate-angle-left">Submit</button>
+      <button progress-button="progressFunction()" pb-style="rotate-angle-left" class="btn btn-warning">Submit</button>
     </section>
     <section class="col-md-6 col-lg-3">
       <span class="button-title">rotate-angle-right <br/>perspective</span>
-      <button progress-button="progressFunction()" pb-style="rotate-angle-right">Submit</button>
+      <button progress-button="progressFunction()" pb-style="rotate-angle-right" class="btn btn-info">Submit</button>
     </section>
   </div>
   <div class="row">
     <section class="col-md-6 col-lg-3">
       <span class="button-title">rotate-side-down <br/>perspective</span>
-      <button progress-button="progressFunction()" pb-style="rotate-side-down">Submit</button>
+      <button progress-button="progressFunction()" pb-style="rotate-side-down" class="btn btn-success">Submit</button>
     </section>
     <section class="col-md-6 col-lg-3">
       <span class="button-title">rotate-side-up <br/>perspective</span>
-      <button progress-button="progressFunction()" pb-style="rotate-side-up">Submit</button>
+      <button progress-button="progressFunction()" pb-style="rotate-side-up" class="btn btn-danger">Submit</button>
     </section>
     <section class="col-md-6 col-lg-3">
       <span class="button-title">rotate-side-left <br/>perspective</span>
-      <button progress-button="progressFunction()" pb-style="rotate-side-left">Submit</button>
+      <button progress-button="progressFunction()" pb-style="rotate-side-left" class="btn btn-warning">Submit</button>
     </section>
     <section class="col-md-6 col-lg-3">
       <span class="button-title">rotate-side-right <br/>perspective</span>
-      <button progress-button="progressFunction()" pb-style="rotate-side-right">Submit</button>
+      <button progress-button="progressFunction()" pb-style="rotate-side-right" class="btn btn-info">Submit</button>
     </section>
   </div>
   <div class="row">
     <section class="col-md-6 col-lg-3">
       <span class="button-title">rotate-back <br/>perspective</span>
-      <button progress-button="progressFunction()" pb-style="rotate-back">Submit</button>
+      <button progress-button="progressFunction()" pb-style="rotate-back" class="btn btn-success">Submit</button>
     </section>
     <section class="col-md-6 col-lg-3">
       <span class="button-title">flip-open <br/>perspective</span>
-      <button progress-button="progressFunction()" pb-style="flip-open">Submit</button>
+      <button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-danger">Submit</button>
     </section>
     <section class="col-md-6 col-lg-3">
       <span class="button-title">slide-down <br/>horizontal</span>
-      <button progress-button="progressFunction()" pb-style="slide-down">Submit</button>
+      <button progress-button="progressFunction()" pb-style="slide-down" class="btn btn-warning">Submit</button>
     </section>
     <section class="col-md-6 col-lg-3">
       <span class="button-title">move-up <br/>horizontal</span>
-      <button progress-button="progressFunction()" pb-style="move-up">Submit</button>
+      <button progress-button="progressFunction()" pb-style="move-up" class="btn btn-info">Submit</button>
     </section>
   </div>
   <div class="row">
     <section class="col-md-6">
       <span class="button-title">top-line <br/>horizontal</span>
-      <button progress-button="progressFunction()" pb-style="top-line">Submit</button>
+      <button progress-button="progressFunction()" pb-style="top-line" class="btn btn-success">Submit</button>
     </section>
     <section class="col-md-6">
       <span class="button-title">lateral-lines <br/>vertical</span>
-      <button progress-button="progressFunction()" pb-style="lateral-lines">Submit</button>
+      <button progress-button="progressFunction()" pb-style="lateral-lines" class="btn btn-info">Submit</button>
     </section>
   </div>
 </div>

src/assets/css/_buttons.scss

@@ -108,3 +108,71 @@ $hover: 24;
 .btn .caret {
   margin-left: 2px;
 }
+
+@mixin progressButtonColor($btnColor) {
+  .content {
+    &:after, &:before {
+      color: darken($btnColor, 40);
+    }
+  }
+
+  &.progress-button-style-move-up, &.progress-button-style-slide-down {
+    .content {
+      background-color: darken($btnColor, 10);
+    }
+  }
+
+  &.progress-button-style-lateral-lines .progress-inner {
+    border-color: darken($btnColor, 10);
+    background: 0 0;
+  }
+
+  .progress {
+    background-color: darken($btnColor, 10);
+    box-shadow: 0 1px 0 darken($btnColor, 10);
+  }
+
+  .progress-inner {
+    background-color: darken($btnColor, 20);
+  }
+  &.progress-button-perspective  {
+    background: none;
+    .content {
+      background-color: $btnColor;
+    }
+  }
+}
+
+.progress-button {
+  .progress {
+    margin-bottom: 0;
+    border-radius: 0;
+  }
+  &:hover {
+    transform: none;
+  }
+
+  &.btn-primary {
+    @include progressButtonColor($primary);
+  }
+
+  &.btn-default {
+    @include progressButtonColor($default);
+  }
+
+  &.btn-success {
+    @include progressButtonColor($success);
+  }
+
+  &.btn-info {
+    @include progressButtonColor($info);
+  }
+
+  &.btn-warning {
+    @include progressButtonColor($warning);
+  }
+
+  &.btn-danger {
+    @include progressButtonColor($danger);
+  }
+}