diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/Global/Alert.vue | 33 | ||||
-rw-r--r-- | src/components/Global/StatusIcon.vue | 8 |
2 files changed, 37 insertions, 4 deletions
diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue new file mode 100644 index 00000000..bc65b6e9 --- /dev/null +++ b/src/components/Global/Alert.vue @@ -0,0 +1,33 @@ +<template> + <b-alert :show="show" :variant="variant"> + <div v-if="variant == 'warning' || variant == 'danger'" class="alert-icon"> + <status-icon :status="variant" /> + </div> + <div class="alert-content"> + <div class="alert-msg"><slot /></div> + </div> + </b-alert> +</template> + +<script> +import StatusIcon from '../Global/StatusIcon'; +import { BAlert } from 'bootstrap-vue'; + +export default { + name: 'Alert', + components: { + BAlert: BAlert, + StatusIcon: StatusIcon + }, + props: { + show: { + type: Boolean, + default: true + }, + variant: { + type: String, + default: '' + } + } +}; +</script> diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue index 96074ee6..11143212 100644 --- a/src/components/Global/StatusIcon.vue +++ b/src/components/Global/StatusIcon.vue @@ -33,20 +33,20 @@ export default { .status-icon { vertical-align: text-bottom; &.success { - fill: $success; + fill: theme-color('success'); } &.danger { - fill: $danger; + fill: theme-color('danger'); } &.secondary { - fill: $gray-600; + fill: gray('600'); svg { transform: rotate(-45deg); } } &.warning { - fill: $warning; + fill: theme-color('warning'); } } </style> |