diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/assets/styles/bmc/custom/_alert.scss | 8 | ||||
-rw-r--r-- | src/components/Global/Alert.vue | 18 | ||||
-rw-r--r-- | src/components/Global/StatusIcon.vue | 8 |
3 files changed, 28 insertions, 6 deletions
diff --git a/src/assets/styles/bmc/custom/_alert.scss b/src/assets/styles/bmc/custom/_alert.scss index 1d28f2ae..741eb692 100644 --- a/src/assets/styles/bmc/custom/_alert.scss +++ b/src/assets/styles/bmc/custom/_alert.scss @@ -17,7 +17,7 @@ .alert-icon { display: inline-flex; - align-items: center; + align-items: flex-start; margin-right: $spacer; margin-bottom: $spacer; @@ -50,6 +50,12 @@ fill: theme-color("info"); } + &.alert-success { + border-left-color: theme-color("success"); + background-color: $success-light; + fill: theme-color("success"); + } + &.alert-danger { border-left-color: theme-color("danger"); background-color: $danger-light; diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue index 2008536a..a049a08b 100644 --- a/src/components/Global/Alert.vue +++ b/src/components/Global/Alert.vue @@ -1,12 +1,22 @@ <template> <b-alert :show="show" :variant="variant" :class="{ small }"> - <div v-if="variant == 'warning' || variant == 'danger'" class="alert-icon"> + <div + v-if=" + variant == 'info' || + variant == 'success' || + variant == 'warning' || + variant == 'danger' + " + class="alert-icon" + > <status-icon :status="variant" /> </div> - <div class="alert-content d-inline-flex align-items-center"> - <div class="alert-msg"><slot /></div> + <div class="alert-content"> + <div class="alert-msg"> + <slot /> + </div> </div> - <div class="alert-action d-inline-flex align-items-center"> + <div class="alert-action"> <slot name="action"></slot> </div> </b-alert> diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue index 6de6d310..bf58722a 100644 --- a/src/components/Global/StatusIcon.vue +++ b/src/components/Global/StatusIcon.vue @@ -1,6 +1,7 @@ <template> <span :class="['status-icon', status]"> - <icon-success v-if="status === 'success'" /> + <icon-info v-if="status === 'info'" /> + <icon-success v-else-if="status === 'success'" /> <icon-warning v-else-if="status === 'warning'" /> <icon-danger v-else-if="status === 'danger'" /> <icon-secondary v-else /> @@ -8,6 +9,7 @@ </template> <script> +import IconInfo from '@carbon/icons-vue/es/information--filled/20'; import IconCheckmark from '@carbon/icons-vue/es/checkmark--filled/20'; import IconWarning from '@carbon/icons-vue/es/warning--filled/20'; import IconError from '@carbon/icons-vue/es/error--filled/20'; @@ -16,6 +18,7 @@ import IconMisuse from '@carbon/icons-vue/es/misuse/20'; export default { name: 'StatusIcon', components: { + IconInfo: IconInfo, iconSuccess: IconCheckmark, iconDanger: IconMisuse, iconSecondary: IconError, @@ -33,6 +36,9 @@ export default { <style lang="scss" scoped> .status-icon { vertical-align: text-bottom; + &.info { + fill: theme-color('info'); + } &.success { fill: theme-color('success'); } |