diff options
author | Dixsie Wolmers <dixsie@ibm.com> | 2020-11-11 01:07:56 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-11-13 18:37:57 +0300 |
commit | 30f11f818168c89126777b717ab37829e25e8378 (patch) | |
tree | 2bfea87a7f99cc1143df630fda3c908e8c02b6e7 /src/assets/styles | |
parent | 151dd2491c01e70ed69baf638c22624fae598361 (diff) | |
download | webui-vue-30f11f818168c89126777b717ab37829e25e8378.tar.xz |
Align button icons
- Fixes button icon and text alignment
- App header buttons to be addressed separately
- Button documentation will be addressed in separate commit
- Aligns form input buttons: datepicker, clear search, and password toggle
- Moves title from icon to button for icon only buttons
- Aligns validation icon with form input buttons
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Ie28d7d7dd7303ab6bf1897d1fa569e1580cc2f9d
Diffstat (limited to 'src/assets/styles')
-rw-r--r-- | src/assets/styles/bmc/custom/_buttons.scss | 38 | ||||
-rw-r--r-- | src/assets/styles/bmc/custom/_calendar.scss | 9 | ||||
-rw-r--r-- | src/assets/styles/bmc/custom/_forms.scss | 2 |
3 files changed, 30 insertions, 19 deletions
diff --git a/src/assets/styles/bmc/custom/_buttons.scss b/src/assets/styles/bmc/custom/_buttons.scss index e927d244..2a7b8169 100644 --- a/src/assets/styles/bmc/custom/_buttons.scss +++ b/src/assets/styles/bmc/custom/_buttons.scss @@ -3,11 +3,11 @@ padding-right: $spacer; padding-bottom: $spacer / 2; padding-left: $spacer; - - // Buttons with SVGs and text expect - // text to be wrapped in a span element - svg + span { - margin-left: $spacer / 4; + display: inline-flex; + align-items: center; + justify-content: space-around; + svg { + margin-right: $spacer / 4; } &:disabled { color: gray("600"); @@ -60,21 +60,23 @@ } } -// Datepicker and Password toggle buttons -.input-action { +// Icon only buttons +.btn-icon-only svg { + margin-right: 0; +} + +// Datepicker, clear search and Password toggle buttons +.input-action-btn, +.btn-datepicker { position: absolute; right: 0; + top: 0; + z-index: $zindex-dropdown + 1; } -.input-action .btn-link, + +// Contain input buttons within input +.btn-datepicker .dropdown-toggle, .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; - } + padding: 7px; + margin: 1px; }
\ No newline at end of file diff --git a/src/assets/styles/bmc/custom/_calendar.scss b/src/assets/styles/bmc/custom/_calendar.scss index 641e4ed1..0307a6ce 100644 --- a/src/assets/styles/bmc/custom/_calendar.scss +++ b/src/assets/styles/bmc/custom/_calendar.scss @@ -5,4 +5,13 @@ color: theme-color("dark"); } } +} + +.b-calendar-grid .btn { + display: inline-block; +} + +// Date picker focus +.b-calendar .b-calendar-grid { + padding: 6px 12px; }
\ 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 464282c6..0451474b 100644 --- a/src/assets/styles/bmc/custom/_forms.scss +++ b/src/assets/styles/bmc/custom/_forms.scss @@ -127,6 +127,6 @@ .form-control-with-button { &.is-invalid, &.is-valid { - background-position: right 3rem bottom 50%; + background-position: right 2.5rem bottom 50%; } } |