diff options
| -rw-r--r-- | src/assets/styles/bmc/custom/_buttons.scss | 61 | ||||
| -rw-r--r-- | src/assets/styles/bmc/custom/_dropdown.scss | 39 | ||||
| -rw-r--r-- | src/assets/styles/bmc/custom/_forms.scss | 13 | ||||
| -rw-r--r-- | src/assets/styles/bmc/custom/_tables.scss | 12 | ||||
| -rw-r--r-- | src/components/Global/InputPasswordToggle.vue | 12 | ||||
| -rw-r--r-- | src/components/Global/TableDateFilter.vue | 4 | ||||
| -rw-r--r-- | src/views/Configuration/DateTimeSettings/DateTimeSettings.vue | 3 |
7 files changed, 81 insertions, 63 deletions
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss index 3f111302..e927d244 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; - + &: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; } }
\ 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 1c3e48ba..e4de5816 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 94be731e..464282c6 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 8b8c4a8e..a712d631 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 6ac98639..228746cf 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 @@ 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> diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue index e198e920..c0008dea 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 77ab430e..33e097c4 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=" |