diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2021-02-08 21:50:53 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2021-02-10 21:12:46 +0300 |
commit | 391f94921bffb243d1eb3d72a49402a930b42160 (patch) | |
tree | eb0dfda41b5a7606a81363c1df0aee06b14a2446 /src/components/Global | |
parent | 2ef114758a8b1a7fcd7fa24e19f0b87ff0471d62 (diff) | |
download | webui-vue-391f94921bffb243d1eb3d72a49402a930b42160.tar.xz |
Update FormFile component button style
Default file upload button will be secondary, with the ability to
optionally pass 'primary' variant as a prop.
Added correct disabled button styles to the SFC scoped styles.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Idacb84a9298db0d5bce727f20842d2a1a15b7448
Diffstat (limited to 'src/components/Global')
-rw-r--r-- | src/components/Global/FormFile.vue | 24 |
1 files changed, 23 insertions, 1 deletions
diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue index 4457a312..cf713acf 100644 --- a/src/components/Global/FormFile.vue +++ b/src/components/Global/FormFile.vue @@ -11,7 +11,14 @@ @input="$emit('input', file)" > </b-form-file> - <span class="add-file-btn btn btn-primary" :class="{ disabled }"> + <span + class="add-file-btn btn" + :class="{ + disabled, + 'btn-secondary': isSecondary, + 'btn-primary': !isSecondary, + }" + > {{ $t('global.fileUpload.browseText') }} </span> <slot name="invalid"></slot> @@ -56,12 +63,21 @@ export default { type: Boolean, default: true, }, + variant: { + type: String, + default: 'secondary', + }, }, data() { return { file: null, }; }, + computed: { + isSecondary() { + return this.variant === 'secondary'; + }, + }, }; </script> @@ -77,6 +93,12 @@ export default { // Get mouse pointer on complete element .add-file-btn { position: relative; + &.disabled { + border-color: gray('400'); + background-color: gray('400'); + color: gray('600'); + box-shadow: none !important; + } } .clear-selected-file { |