feat(datepicker): add theming to Show and Clear buttons (#5959)

valor-software · Nov 6, 2020 · 313fe90 · 313fe90
1 parent b7a03cc
commit 313fe90
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 3 deletions.
diff --git a/demo/src/app/components/+datepicker/demos/clear-button/clear-button.html b/demo/src/app/components/+datepicker/demos/clear-button/clear-button.html
@@ -4,7 +4,6 @@
              placeholder="Datepicker"
              class="form-control"
              bsDatepicker
-             [bsConfig]="{ showClearButton: true, clearPosition: 'right' }">
+             [bsConfig]="{ containerClass: 'theme-orange', showClearButton: true, clearPosition: 'right' }">
     </div>
   </div>
-
diff --git a/demo/src/app/components/+datepicker/demos/today-button/today-button.html b/demo/src/app/components/+datepicker/demos/today-button/today-button.html
@@ -4,6 +4,6 @@
            placeholder="Datepicker"
            class="form-control"
            bsDatepicker
-           [bsConfig]="{ showTodayButton: true, todayPosition: 'center' }">
+           [bsConfig]="{ containerClass: 'theme-dark-blue', showTodayButton: true, todayPosition: 'center' }">
   </div>
 </div>
diff --git a/src/datepicker/utils/scss/mixins.scss b/src/datepicker/utils/scss/mixins.scss
@@ -6,6 +6,104 @@
       background-color: $color;
     }
 
+    .btn-today-wrapper, .btn-clear-wrapper {
+      .btn-success {
+        background-color: $color;
+        border-color: $color;
+      }
+      .btn-success:not(:disabled):not(.disabled):active {
+        &:focus {
+          box-shadow: none;
+        }
+      }
+      .btn-success:focus {
+        box-shadow: none;
+      }
+    }
+
+    @if $name == 'green' {
+      .btn-today-wrapper, .btn-clear-wrapper {
+        .btn-success:not(:disabled):not(.disabled):active {
+          background-color: $active-theme-green;
+          border-color: $active-theme-green;
+        }
+
+        .btn-success:hover {
+          background-color: $hover-theme-green;
+          border-color: $hover-theme-green;
+        }
+      }
+    }
+
+    @if $name == 'blue' {
+      .btn-today-wrapper, .btn-clear-wrapper {
+        .btn-success:not(:disabled):not(.disabled):active {
+          background-color: $active-theme-blue;
+          border-color: $active-theme-blue;
+        }
+
+        .btn-success:hover {
+          background-color: $hover-theme-blue;
+          border-color: $hover-theme-blue;
+        }
+      }
+    }
+
+    @if $name == 'dark-blue' {
+      .btn-today-wrapper, .btn-clear-wrapper {
+        .btn-success:not(:disabled):not(.disabled):active {
+          background-color: $active-theme-dark-blue;
+          border-color: $active-theme-dark-blue;
+        }
+
+        .btn-success:hover {
+          background-color: $hover-theme-dark-blue;
+          border-color: $hover-theme-dark-blue;
+        }
+      }
+    }
+
+    @if $name == 'orange' {
+      .btn-today-wrapper, .btn-clear-wrapper {
+        .btn-success:not(:disabled):not(.disabled):active {
+          background-color: $active-theme-orange;
+          border-color: $active-theme-orange;
+        }
+
+        .btn-success:hover {
+          background-color: $hover-theme-orange;
+          border-color: $hover-theme-orange;
+        }
+      }
+    }
+
+    @if $name == 'red' {
+      .btn-today-wrapper, .btn-clear-wrapper {
+        .btn-success:not(:disabled):not(.disabled):active {
+          background-color: $active-theme-red;
+          border-color: $active-theme-red;
+        }
+
+        .btn-success:hover {
+          background-color: $hover-theme-red;
+          border-color: $hover-theme-red;
+        }
+      }
+    }
+
+    @if $name == 'default' {
+      .btn-today-wrapper, .btn-clear-wrapper {
+        .btn-success:not(:disabled):not(.disabled):active {
+          background-color: $active-theme-default;
+          border-color: $active-theme-default;
+        }
+
+        .btn-success:hover {
+          background-color: $hover-theme-default;
+          border-color: $hover-theme-default;
+        }
+      }
+    }
 
       .bs-datepicker-predefined-btns {
         button {

diff --git a/src/datepicker/utils/scss/variables.scss b/src/datepicker/utils/scss/variables.scss
@@ -26,6 +26,20 @@ $theme-orange:    #f0ad4e !default;
 $disabled-background:  rgba(221, 221, 221, 0.3) !default;
 $disabled-color:       #f5f5f5 !default;
 
+$hover-theme-default: #6F6E6E;
+$hover-theme-green: #218838;
+$hover-theme-blue: #3AB3D7;
+$hover-theme-dark-blue: #2C6FA9;
+$hover-theme-orange: #FFAC35;
+$hover-theme-red: #E33732;
+
+$active-theme-default: #616161;
+$active-theme-green: #1e7e34;
+$active-theme-blue: #2AA8CD;
+$active-theme-dark-blue: #266498;
+$active-theme-orange: #ED9C29;
+$active-theme-red: #D23531;
+
 $theme-list: (
   'default': $theme-gray,
   'green': $theme-green,