// Context notification component styles @use "sass:map"; @use "../../shared/media"; @use "../../shared/style"; @use "../../shared/theme"; @use "../../utilities/marker/shared" as marker; // Selector prefix $prefix: "cwf" !default; .#{$prefix}-notification { margin-bottom: 1rem; padding: 0.5rem 0; background-color: var(--cwf-notification--primary-color); border-bottom: 10px solid var(--cwf-notification--secondary-color); font-family: theme.font--sans-serif(); color: var(--cwf-notification--body-color); @include media.breakpoint { padding: 1rem 0; } } .#{$prefix}-notification[aria-expanded="false"] { display: none; } // Notification alert colors $color--body--alert: style.color("white") !default; $color--primary--alert: style.color("red", "accent") !default; $color--secondary--alert: style.darken( style.color("red", "accent"), 28% ) !default; $color--title--alert: style.color("white") !default; // Notification info colors $color--body--info: style.color("white") !default; $color--primary--info: style.color("blue", "accent") !default; $color--secondary--info: style.darken( style.color("blue", "accent"), 34.75% ) !default; $color--title--info: style.color("white") !default; // Notification primary colors $color--body--primary: style.color("white") !default; $color--primary--primary: style.darken("gray-dark", 33%) !default; // #222 $color--secondary--primary: style.color("gray") !default; $color--title--primary: style.color("gold") !default; // Notification secondary colors $color--body--secondary: style.color("black") !default; $color--primary--secondary: style.color("gold") !default; $color--secondary--secondary: style.darken("gold", 20.5%) !default; $color--title--secondary: style.color("black") !default; // Notification success colors $color--body--success: style.color("white") !default; $color--primary--success: style.color("green", "accent") !default; $color--secondary--success: style.darken( style.color("green", "accent"), 40.5% ) !default; $color--title--success: style.color("white") !default; // Notification themes $themes: ( "alert": ( "body": $color--body--alert, "primary": $color--primary--alert, "secondary": $color--secondary--alert, "title": $color--title--alert ), "info": ( "body": $color--body--info, "primary": $color--primary--info, "secondary": $color--secondary--info, "title": $color--title--info ), "primary": ( "body": $color--body--primary, "primary": $color--primary--primary, "secondary": $color--secondary--primary, "title": $color--title--primary ), "secondary": ( "body": $color--body--secondary, "primary": $color--primary--secondary, "secondary": $color--secondary--secondary, "title": $color--title--secondary ), "success": ( "body": $color--body--success, "primary": $color--primary--success, "secondary": $color--secondary--success, "title": $color--title--success ) ); $theme--keys: "body", "primary", "secondary", "title", "theme"; @function theme--validate($instructions) { @return map.keys($instructions) == $theme--keys; } @mixin theme($instructions) { @if theme--validate($instructions) { $theme: map.get($instructions, "theme"); $body: map.get($instructions, "body"); $primary: map.get($instructions, "primary"); $secondary: map.get($instructions, "secondary"); $title: map.get($instructions, "title"); .#{$prefix}-notification--#{$theme} { --cwf-notification--body-color: #{$body}; --cwf-notification--primary-color: #{$primary}; --cwf-notification--secondary-color: #{$secondary}; --cwf-notification--title-color: #{$title}; } } @else { @warn "Invalid notification themes provided!"; } } @mixin theme--official($theme) { $colors: map.get($themes, $theme); $instructions: map.merge( $colors, ( "theme": $theme ) ); @include theme($instructions); } @each $theme, $colors in $themes { @include theme--official($theme); } .#{$prefix}-notification__container { align-items: center; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; @include theme.contain; @include media.breakpoint { flex-direction: row; flex-wrap: nowrap; } } .#{$prefix}-notification__header { align-items: center; color: var(--cwf-notification--title-color); display: flex; flex-wrap: nowrap; font-size: 1.25rem; font-weight: 700; justify-content: center; order: 1; padding: 0.5rem 1rem; @include media.breakpoint { align-items: flex-start; border-right: 1px solid var(--cwf-notification--secondary-color); justify-content: flex-start; max-width: 480px; margin: 0 1rem 0 0; order: 0; } } .#{$prefix}-notification__icon, .#{$prefix}-notification__title { padding: 0 0.5rem; } .#{$prefix}-notification__body { align-items: center; justify-content: center; order: 1; padding: 0 0.5rem 1rem; text-align: center; @include media.breakpoint { margin-right: auto; order: 0; padding: 0 1rem; text-align: left; } @include style.children; a { color: var(--cwf-notification--title-color); } .#{$prefix}-button { background-color: var(--cwf-notification--primary-color) !important; border-color: var(--cwf-notification--secondary-color) !important; border-width: 2px; color: var(--cwf-notification--body-color) !important; margin: 0 1rem; &:focus, &:hover { background-color: var( --cwf-notification--secondary-color ) !important; } } } $close__background-color: transparent !default; $close__color: style.color("black") !default; .#{$prefix}-notification__close { align-items: center; align-self: flex-end; background-color: var(--cwf-notification__close--background-color); border: none; border-radius: 4px; color: var(--cwf-notification__close--color); display: flex; font-size: var(--cwf-notification--font-size); justify-content: right; line-height: 1; margin: 0rem 1rem; padding: 0.25rem; color: var(--cwf-notification--body-color); --cwf-notification__close--background-color: #{$close__background-color}; --cwf-notification__close--color: #{$close__color}; @include media.breakpoint { align-self: flex-start; width: auto; } @include style.cursor; &:hover, &:focus { background-color: var(--cwf-notification--secondary-color); } } .#{$prefix}-notification__close span { align-content: flex-end; } .#{$prefix}-notification__times { flex: 1; min-width: 0.8rem; margin-left: 0.5rem; width: 0.8rem; } // Compact variation .#{$prefix}-notification--compact { padding: 0.5rem 0; .#{$prefix}-notification__header { border: none; font-size: 1rem; margin-right: 0; } .#{$prefix}-notification__close { font-size: 0.9rem; } } // Stacked variation @include media.breakpoint { .#{$prefix}-notification__container--stacked { flex-direction: row-reverse; flex-wrap: wrap; padding: 0 1rem; .#{$prefix}-notification__header, .#{$prefix}-notification__body { border-right: none; max-width: none; padding: 0; width: 100%; } .#{$prefix}-notification__header { flex: 1; } .#{$prefix}-notification__body { padding-left: 3rem; } .#{$prefix}-notification__close { align-self: flex-start; order: -1; } } .#{$prefix}-notification--compact .#{$prefix}-notification__container--stacked .#{$prefix}-notification__body { padding-left: 2.6rem !important; } }