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 <sneware9@in.ibm.com>
Change-Id: I38ca94baa9daec3fd03b830fc7b6d676fcce15b0
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss
index 3f11130..e927d24 100644
--- a/src/assets/styles/bmc/custom/_buttons.scss
+++ b/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;
-
- &:focus {
- box-shadow: $btn-focus-box-shadow;
- }
&:hover {
- fill: darken(theme-color("primary"), 15%);
+ background-color: gray("200");
+ color: theme-color("primary");
+ }
+ &:active {
+ background-color: gray("300");
+ }
+ &:focus {
+ box-shadow: inset 0 0 0 2px theme-color("primary");
+ color: theme-color("primary");
+ outline: none;
+ }
+ &: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;
}
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_dropdown.scss b/src/assets/styles/bmc/custom/_dropdown.scss
index 1c3e48b..e4de581 100644
--- a/src/assets/styles/bmc/custom/_dropdown.scss
+++ b/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");
}
}
}
\ No newline at end of file
diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 94be731..464282c 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/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 {
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index 8b8c4a8..a712d63 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/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;
}
-}
\ No newline at end of file
+}
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index 6ac9863..228746c 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/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 @@
.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>
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue
index e198e92..c0008de 100644
--- a/src/components/Global/TableDateFilter.vue
+++ b/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"
diff --git a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
index 77ab430..33e097c 100644
--- a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue
+++ b/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="