Within the message component, there are currently only two variants available: error and success.
This project is built using vue3 script setup and utilizes SCSS for styling.
<script setup lang="ts">
defineOptions({
name: 'NotificationMessage',
})
withDefaults(defineProps<{ variant?: string }>(), { variant: 'success' })
</script>
<template>
<div :class="`notifications-message notifications-message--${variant}`">
<div class="tw-flex tw-flex-row tw-items-center tw-gap-4">
<span class="notifications-message__icon material-symbols-outlined"> check_circle </span>
<div>message</div>
</div>
<span class="tw-red-primary tw-text-xl material-symbols-outlined"> close </span>
<div class="notifications-message__loader" />
</div>
</template>
<style lang="scss" scoped>
@keyframes widthIncrease {
100% {
width: 100%;
}
}
.notifications-message {
@apply tw-w-64 tw-pt-2 tw-pb-3 tw-px-4 tw-flex tw-flex-row tw-justify-between tw-items-center;
color: #6a5d6a;
word-wrap: break-word;
display: flex;
border-radius: 4px;
max-width: 100%;
box-shadow: 0 0 3px 1px $blue-secondary;
background-color: $white-primary;
&--success {
.notifications-message {
&__icon {
color: $green-primary;
}
&__loader {
background-color: $green-primary;
}
}
}
&--error {
.notifications-message {
&__icon {
color: $red-primary;
}
&__loader {
background-color: $red-primary;
}
}
}
&__loader {
@apply tw-absolute tw-bottom-0 tw-left-0 tw-w-0 tw-h-1 tw-rounded-bl-md tw-rounded-br-md;
animation: widthIncrease 4s linear forwards;
}
}
</style>
Is there a way to assign styles directly based on the parent class variant?
The :has() selector allows us to apply certain styles only if the parent contains specific elements.
Can we achieve something similar with a child element in order to avoid repetition?
For example:
.notifications-message {
// ....
&__icon {
// Apply green primary color if notifications-message contains class --success
color: $green-primary;
// Apply red primary color if notifications-message contains class --error
color: $red-primary;
}
}