diff options
| author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2019-12-30 20:06:45 +0300 |
|---|---|---|
| committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-01-29 01:18:05 +0300 |
| commit | 996d2d57be172fd36952ec7d679e411565cac013 (patch) | |
| tree | f8d0ff86f77c5c930ec23803b6d7a4ca2e952ecc /src/assets | |
| parent | 71ac230a533fdd4819a8d36b82570285a0973b97 (diff) | |
| download | webui-vue-996d2d57be172fd36952ec7d679e411565cac013.tar.xz | |
Update button variant styles
Adding styles to leverage bootstrap-vue button components.
Using the link variant as a replacement for our current 'ghost'
button style. Use $enable-rounded flag to disable rounded
corners. This will take care of all components with rounded
corners (input fields, modals, etc).
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ie48f19a76698f896d9ebe7e72e9c0575f6db80c1
Diffstat (limited to 'src/assets')
| -rw-r--r-- | src/assets/styles/_buttons.scss | 27 | ||||
| -rw-r--r-- | src/assets/styles/_obmc-custom.scss | 4 |
2 files changed, 31 insertions, 0 deletions
diff --git a/src/assets/styles/_buttons.scss b/src/assets/styles/_buttons.scss new file mode 100644 index 00000000..02b0caea --- /dev/null +++ b/src/assets/styles/_buttons.scss @@ -0,0 +1,27 @@ +.btn { + font-weight: $headings-font-weight; + svg { + vertical-align: sub; + margin-left: $spacer / 2; + } +} + +.btn-primary { + fill: $white; +} + +.btn-secondary { + fill: $white; + @extend .btn-secondary-dark; +} + +.btn-link { + fill: $primary; + text-decoration: none !important; + &:focus { + box-shadow: $btn-focus-box-shadow; + } + &:hover { + fill: darken($primary, 15%); + } +}
\ No newline at end of file diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss index 7deb6cba..e87e01bb 100644 --- a/src/assets/styles/_obmc-custom.scss +++ b/src/assets/styles/_obmc-custom.scss @@ -1,3 +1,5 @@ +$enable-rounded: false; + // Required @import "~bootstrap/scss/functions"; @import "./functions"; @@ -49,3 +51,5 @@ $colors: map-remove($theme-colors, "light", "dark"); @import "~bootstrap/scss/print"; @import "~bootstrap-vue/src/index.scss"; + +@import "./buttons";
\ No newline at end of file |