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
diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue
index 4457a31..cf713ac 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 @@
type: Boolean,
default: true,
},
+ variant: {
+ type: String,
+ default: 'secondary',
+ },
},
data() {
return {
file: null,
};
},
+ computed: {
+ isSecondary() {
+ return this.variant === 'secondary';
+ },
+ },
};
</script>
@@ -77,6 +93,12 @@
// 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 {