diff options
| author | Derick Montague <derick.montague@ibm.com> | 2020-03-04 09:59:47 +0300 |
|---|---|---|
| committer | Derick Montague <derick.montague@ibm.com> | 2020-03-20 21:26:14 +0300 |
| commit | 3f6710a09c953405cc0bc8014eab89887122b17d (patch) | |
| tree | 713e6118de3922bee39a690e2e3361069697056e /src/assets | |
| parent | a06fe4695e7e4c09ea07540d3353cb05c36f1e37 (diff) | |
| download | webui-vue-3f6710a09c953405cc0bc8014eab89887122b17d.tar.xz | |
Add buttons documentation
- Add documentation for how to use buttons
- Update markup and CSS rulesets to support icons on the left or the
right of text
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ic897f416e85824287360bc7ef5dc47c402d64eba
Diffstat (limited to 'src/assets')
| -rw-r--r-- | src/assets/styles/_buttons.scss | 23 |
1 files changed, 20 insertions, 3 deletions
diff --git a/src/assets/styles/_buttons.scss b/src/assets/styles/_buttons.scss index 2f961e00..b9b8073b 100644 --- a/src/assets/styles/_buttons.scss +++ b/src/assets/styles/_buttons.scss @@ -1,8 +1,14 @@ .btn { font-weight: $headings-font-weight; - svg { - vertical-align: sub; - margin-left: $spacer / 2; + padding-top: $spacer / 2; + 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; } } @@ -17,10 +23,21 @@ .btn-link { fill: $primary; text-decoration: none !important; + &:focus { box-shadow: $btn-focus-box-shadow; } &:hover { fill: darken($primary, 15%); } +} + +.btn:disabled { + color: $gray-600; + fill: currentColor; + + &:not(.btn-link) { + border-color: $gray-400; + background-color: $gray-400; + } }
\ No newline at end of file |