Add new style guide to global button style

- Updated new style guide for Primary, Secondary and Link button variants
- Changed box-shadow style from outer to inside on focus and active state
- Updated font weight from bold to regular for normal buttons and font
weight bold for link button.

Signed-off-by: Suren Neware <[email protected]>
Change-Id: I38ca94baa9daec3fd03b830fc7b6d676fcce15b0

Author: SurenNeware

src/assets/styles/bmc/custom/_buttons.scss

@@ -1,5 +1,4 @@
 .btn {
-  font-weight: $headings-font-weight;
   padding-top: $spacer / 2;
   padding-right: $spacer;
   padding-bottom: $spacer / 2;
@@ -10,34 +9,72 @@
   svg + span {
     margin-left: $spacer / 4;
   }
+  &:disabled {
+    color: gray("600");
+    fill: currentColor;
+    box-shadow: none !important;
+    &:not(.btn-link) {
+      border-color: gray("400");
+      background-color: gray("400");
+    }
+  }
 }
 
 .btn-primary {
   fill: currentColor;
+  &:focus,
+  &:not(:disabled):not(.disabled):active:focus {
+    border-color: $white;
+    box-shadow: inset 0 0 0 3px theme-color('primary'), inset 0 0 0 5px $white;
+  }
 }
 
 .btn-secondary {
   fill: currentColor;
+  &:focus,
+  &:not(:disabled):not(.disabled):active:focus {
+    border-color: $white;
+    box-shadow: inset 0 0 0 3px theme-color('secondary'), inset 0 0 0 5px $white;
+  }
 }
 
+// Global style for all button link
 .btn-link {
+  font-weight: $headings-font-weight;
   fill: theme-color("primary");
   text-decoration: none !important;
-
+  &:hover {
+    background-color: gray("200");
+    color: theme-color("primary");
+  }
+  &:active {
+    background-color: gray("300");
+  }
   &:focus {
-    box-shadow: $btn-focus-box-shadow;
+    box-shadow: inset 0 0 0 2px theme-color("primary");
+    color: theme-color("primary");
+    outline: none;
   }
-  &:hover {
-    fill: darken(theme-color("primary"), 15%);
+  &:disabled {
+    box-shadow: $btn-focus-box-shadow;
   }
 }
 
-.btn:disabled {
-  color: gray("600");
-  fill: currentColor;
-
-  &:not(.btn-link) {
-    border-color: gray("400");
-    background-color: gray("400");
+// Datepicker and Password toggle buttons
+.input-action {
+  position: absolute;
+  right: 0;
+}
+.input-action .btn-link,
+.input-action-btn {
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  z-index: $zindex-dropdown + 1;
+  padding: 0;
+  width: 36px;
+  height: 35.8px;
+  svg {
+    vertical-align: sub;
   }
 }

src/assets/styles/bmc/custom/_dropdown.scss

@@ -1,35 +1,30 @@
+// Make calendar visible over the table
+.dropdown-menu {
+  z-index: $zindex-dropdown + 1;
+  padding: 0;
+}
 .dropdown-item {
   padding-left: $spacer/2;
 }
-
 .b-dropdown-form {
   padding: $spacer/2;
   .form-group {
     margin-bottom: $spacer/2;
   }
 }
-
-// Adding component style to global stylesheet because
-// single-file component scoped styles aren't
-// being applied to dynamically appended elements
-// The overflow menu should be above the table
-
+// Table filter dropdown clear button style
 .table-filter {
-  .dropdown-menu {
-    z-index: $zindex-dropdown + 1;
-    padding: 0;
-    .dropdown-item {
-      &:hover {
-        background-color: gray("200");
-      }
-      &:active {
-        background-color: gray("300");
-      }
-      &:focus {
-        outline: none;
-        background-color: transparent;
-        box-shadow: inset 0 0 0 2px theme-color("primary");
-      }
+  .dropdown-item {
+    &:hover {
+      background-color: gray("200");
+    }
+    &:active {
+      background-color: gray("300");
+    }
+    &:focus {
+      outline: none;
+      background-color: transparent;
+      box-shadow: inset 0 0 0 2px theme-color("primary");
     }
   }
 }

src/assets/styles/bmc/custom/_forms.scss

@@ -117,19 +117,6 @@
   }
 }
 
-.b-form-datepicker {
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: $zindex-dropdown + 1;
-  .btn {
-    padding: 0.4rem 1rem;
-      svg {
-        margin-left: 0;
-      }
-  }
-}
-
 // Form validation icon
   .form-control.is-invalid,
   .form-control.is-valid {

src/assets/styles/bmc/custom/_tables.scss

@@ -11,6 +11,16 @@
     &:last-of-type {
       border-right: 1px solid gray("300");
     }
+
+    // Table action buttons
+    .btn-link {
+      width: 40px;
+      height: 40px;
+      padding: 5px !important;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+    }
   }
 
   // thead-light added for specificiy
@@ -147,4 +157,4 @@
   .table.b-table.b-table-stacked-sm > tbody > tr > :first-child {
     border-top-width: 1px;
   }
-}
+}

src/components/Global/InputPasswordToggle.vue

@@ -4,6 +4,7 @@
     <b-button
       :aria-label="$t('global.ariaLabel.showPassword')"
       variant="link"
+      class="input-action-btn"
       :class="{ isVisible: isVisible }"
       @click="toggleVisibility"
     >
@@ -52,15 +53,4 @@ export default {
 .input-password-toggle-container {
   position: relative;
 }
-
-.btn {
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding: 0.4rem 1rem;
-  svg {
-    margin-left: 0;
-    vertical-align: sub;
-  }
-}
 </style>

src/components/Global/TableDateFilter.vue

@@ -26,9 +26,9 @@
           <template slot:append>
             <b-form-datepicker
               v-model="fromDate"
+              class="input-action"
               button-only
               right
-              size="sm"
               :max="toDate"
               :hide-header="true"
               :locale="locale"
@@ -76,9 +76,9 @@
           <template slot:append>
             <b-form-datepicker
               v-model="toDate"
+              class="input-action"
               button-only
               right
-              size="sm"
               :min="fromDate"
               :hide-header="true"
               :locale="locale"

src/views/Configuration/DateTimeSettings/DateTimeSettings.vue

@@ -73,9 +73,8 @@
                   </b-form-invalid-feedback>
                   <b-form-datepicker
                     v-model="form.manual.date"
+                    class="input-action"
                     button-only
-                    right
-                    size="sm"
                     :hide-header="true"
                     :locale="locale"
                     :label-help="