82 lines
1.8 KiB
CSS
82 lines
1.8 KiB
CSS
.notification {
|
|
@apply p-8 relative;
|
|
z-index: ;
|
|
|
|
&--alert {
|
|
@apply bg-secondary-light text-secondary;
|
|
|
|
.notification__inner:before {
|
|
background-image: url('../resources/img/graphic-assets/icon-info-red.svg');
|
|
}
|
|
.notification__close {
|
|
@apply filter-secondary;
|
|
}
|
|
a[target='_blank'] {
|
|
@apply !text-secondary;
|
|
&:after {
|
|
@apply filter-secondary;
|
|
}
|
|
&:hover,
|
|
&:focus-visible {
|
|
@apply outline-secondary;
|
|
/* background: rgba(253, 245, 246, 1) !important; */
|
|
background: rgba(223, 30, 30, 0.1) !important;
|
|
}
|
|
}
|
|
}
|
|
&--info {
|
|
@apply bg-primary-light text-primary;
|
|
.notification__inner:before {
|
|
background-image: url('../resources/img/graphic-assets/icon-info-purple.svg');
|
|
}
|
|
.notification__close {
|
|
@apply filter-primary;
|
|
}
|
|
a[target='_blank'] {
|
|
@apply !text-primary;
|
|
&:after {
|
|
@apply filter-primary;
|
|
}
|
|
&:hover,
|
|
&:focus-visible {
|
|
@apply outline-primary;
|
|
background: rgba(47, 1, 84, 0.1) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&--dismissed {
|
|
@apply hidden;
|
|
}
|
|
&__inner {
|
|
@apply max-w-screen-xl px-8 mx-auto relative;
|
|
&:before {
|
|
@apply absolute top-1 left-0 w-5 h-5 bg-contain bg-no-repeat bg-center;
|
|
content: '';
|
|
}
|
|
}
|
|
&__title,
|
|
&__content {
|
|
@apply inline;
|
|
}
|
|
&__title {
|
|
@apply font-bold text-lg mr-2;
|
|
}
|
|
&__content {
|
|
@apply !text-base;
|
|
|
|
> * {
|
|
@apply inline;
|
|
}
|
|
a {
|
|
@apply font-bold underline;
|
|
}
|
|
}
|
|
&__close {
|
|
@apply absolute flex justify-center items-center top-0 right-0 z-10;
|
|
z-index: 10 !important;
|
|
|
|
@apply inline-block w-6 h-6;
|
|
}
|
|
}
|