diff options
author | SurenNeware <sneware9@in.ibm.com> | 2020-08-17 16:12:20 +0300 |
---|---|---|
committer | SurenNeware <sneware9@in.ibm.com> | 2020-10-07 14:39:31 +0300 |
commit | dc618a8dbc778c273015540e438cf81e1933175f (patch) | |
tree | 930aa1f4b2dcca2863f95d87fa6d69c66e9e3a33 /src/assets/styles/bmc/custom/_buttons.scss | |
parent | fde429e08a1643a9fab05131aaef563260743aa6 (diff) | |
download | webui-vue-dc618a8dbc778c273015540e438cf81e1933175f.tar.xz |
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
Diffstat (limited to 'src/assets/styles/bmc/custom/_buttons.scss')
-rw-r--r-- | src/assets/styles/bmc/custom/_buttons.scss | 61 |
1 files changed, 49 insertions, 12 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 |