diff options
| -rw-r--r-- | docs/.vuepress/components/BmcButtons.vue | 50 | ||||
| -rw-r--r-- | docs/.vuepress/config.js | 5 | ||||
| -rw-r--r-- | docs/.vuepress/enhanceApp.js | 10 | ||||
| -rw-r--r-- | docs/guide/components/button.md | 23 | ||||
| -rw-r--r-- | src/assets/styles/_buttons.scss | 23 | ||||
| -rw-r--r-- | src/components/Global/InputPasswordToggle.vue | 1 |
6 files changed, 108 insertions, 4 deletions
diff --git a/docs/.vuepress/components/BmcButtons.vue b/docs/.vuepress/components/BmcButtons.vue new file mode 100644 index 00000000..2035e4db --- /dev/null +++ b/docs/.vuepress/components/BmcButtons.vue @@ -0,0 +1,50 @@ +<template> + <div> + <h3 class="h4">Enabled</h3> + <b-button variant="primary">Primary</b-button> + <b-button variant="primary"> + <icon-add /> + <span>Primary with icon</span> + </b-button> + <b-button variant="secondary">Secondary</b-button> + <b-button variant="danger">Danger</b-button> + <b-button variant="link">Link Button</b-button> + <b-button variant="link"> + <icon-add /> + <span>Link Button</span> + </b-button> + + <h3 class="h4">Disabled</h3> + <b-button disabled variant="primary">Primary</b-button> + <b-button disabled variant="primary"> + <icon-add /> + <span>Primary with icon</span> + </b-button> + <b-button disabled variant="secondary">Secondary</b-button> + <b-button disabled variant="danger">Danger</b-button> + <b-button disabled variant="link">Link Button</b-button> + <b-button disabled variant="link"> + <icon-add /> + <span>Link Button</span> + </b-button> + </div> +</template> + +<script> +import IconAdd from '@carbon/icons-vue/es/add--alt/20'; +import IconArrowRight from '@carbon/icons-vue/es/arrow--right/16'; +export default { + name: 'BmcButtons', + components: { IconAdd, IconArrowRight } +} +</script> +<style scoped> + button { + margin-bottom: 1rem; + margin-right: .5rem; + } + + h3 { + margin: .5rem 0 1rem; + } +</style>
\ No newline at end of file diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 5a8e601f..2be074e4 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -42,7 +42,10 @@ module.exports = { }, { title: "Components", - children: ["/guide/components/", "/guide/components/page-section"] + children: [ + "/guide/components/", + "/guide/components/button", + ] } ], "/themes/": [""] diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js new file mode 100644 index 00000000..59c1f925 --- /dev/null +++ b/docs/.vuepress/enhanceApp.js @@ -0,0 +1,10 @@ + +import "../../src/assets/styles/_obmc-custom.scss"; +import { + ButtonPlugin + } from 'bootstrap-vue'; + + +export default ({ Vue }) => { + Vue.use(ButtonPlugin); +}
\ No newline at end of file diff --git a/docs/guide/components/button.md b/docs/guide/components/button.md new file mode 100644 index 00000000..aeb93edc --- /dev/null +++ b/docs/guide/components/button.md @@ -0,0 +1,23 @@ +# Buttons + +Buttons are used to perform an action. The main buttons in the application are the `primary` and `secondary` buttons. Buttons, like all Boostrap-vue components can be themed by setting the `variant` prop on the component to one of the [theme-color map keys](/guide/guidelines/colors). To create a button that looks like a link, set the variant value to `link`. + +[Learn more about Bootstrap-vue buttons](https://bootstrap-vue.js.org/docs/components/button) + +<BmcButtons /> + +```vue +// Enabled Buttons +<b-button variant="primary">Primary</b-button> +<b-button variant="primary"> + <icon-add /> + <span>Primary with icon</span> +</b-button> +<b-button variant="secondary">Secondary</b-button> +<b-button variant="danger">Danger</b-button> +<b-button variant="link">Link Button</b-button> +<b-button variant="link"> + <icon-add /> + <span>Link Button</span> +</b-button> +```
\ No newline at end of file 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 diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue index 3199cab3..40fb7443 100644 --- a/src/components/Global/InputPasswordToggle.vue +++ b/src/components/Global/InputPasswordToggle.vue @@ -52,6 +52,7 @@ export default { svg { margin-left: 0; + vertical-align: sub; } } </style> |