+/*\r
+ NOTIFICATION\r
+ ------------\r
+\r
+ An alert that pins to the corner of the screen when triggered by JavaScript. It can be set to disappear after a certain period of time, or to stay put until the user clicks on it. A custom action can be asigned to a notification as well.\r
+\r
+ Optionally, the notifications directive can also tap into the browser's native notification support, if it exists.\r
+*/\r
+\r
+/// @Foundation.settings\r
+// Notification\r
+$notification-default-position: right top !default;\r
+$notification-width: rem-calc(400) !default;\r
+$notification-offset: $global-padding !default;\r
+\r
+$notification-background: $primary-color !default;\r
+$notification-color: white !default;\r
+$notification-padding: $global-padding !default;\r
+$notification-radius: 4px !default;\r
+\r
+$notification-icon-size: 60px !default;\r
+$notification-icon-margin: $global-padding !default;\r
+$notification-icon-align: top !default;\r
+\r
+///\r
+\r
+%notification {\r
+ z-index: 1000;\r
+ display: flex;\r
+ position: relative;\r
+ margin-top: .5rem;\r
+ margin-bottom: .5rem;\r
+ display: none;\r
+\r
+ h1 {\r
+ font-size: 1.25em;\r
+ margin: 0;\r
+ }\r
+ p {\r
+ margin: 0;\r
+ }\r
+\r
+ // Placeholder animation\r
+ // transition: opacity 1s ease-out;\r
+\r
+ &.is-active {\r
+ display: flex;\r
+ }\r
+\r
+ .close-button {\r
+ color: white;\r
+ }\r
+}\r
+\r
+%notification-container {\r
+ z-index: 3000;\r
+ position: fixed;\r
+\r
+ display: flex;\r
+ flex-direction: column;\r
+}\r
+\r
+@mixin notification-layout(\r
+ $x: nth($notification-default-position, 1),\r
+ $y: nth($notification-default-position, 2),\r
+ $size: $notification-width,\r
+ $offset: $notification-offset\r
+) {\r
+ width: $size;\r
+\r
+ @if $x == right {\r
+ right: $offset;\r
+ }\r
+ @else if $x == left {\r
+ left: $offset;\r
+ }\r
+ @else if $x == middle {\r
+ left: 50%;\r
+ margin-left: -($size / 2);\r
+ }\r
+\r
+ @if $y == top {\r
+ top: $offset;\r
+ }\r
+ @else if $y == bottom {\r
+ top: auto;\r
+ bottom: $offset;\r
+ }\r
+\r
+ // On small screens, notifications are full width but maintain their vertical orientation\r
+ @include breakpoint(small only) {\r
+ width: auto;\r
+ left: $offset;\r
+ right: $offset;\r
+ margin-left: 0;\r
+ }\r
+}\r
+@mixin notification-style(\r
+ $background: $notification-background,\r
+ $color: $notification-color,\r
+ $padding: $notification-padding,\r
+ $radius: $notification-radius\r
+) {\r
+ background: $background;\r
+ padding: $padding;\r
+ border-radius: $radius;\r
+\r
+ &, h1, h2, h3, h4, h5, h6 {\r
+ color: $color;\r
+ }\r
+}\r
+\r
+@mixin notification(\r
+ $background: $notification-background,\r
+ $color: $notification-color,\r
+ $padding: $notification-padding,\r
+ $radius: $notification-radius\r
+) {\r
+ @extend %notification;\r
+ @include notification-style($background, $color, $padding, $radius);\r
+}\r
+\r
+@mixin notification-container(\r
+ $x: nth($notification-default-position, 1),\r
+ $y: nth($notification-default-position, 2),\r
+ $size: $notification-width,\r
+ $offset: $notification-offset\r
+) {\r
+ @extend %notification-container;\r
+ @include notification-layout($x, $y, $size, $offset);\r
+}\r
+\r
+@mixin notification-icon(\r
+ $size: $notification-icon-size,\r
+ $margin: $notification-icon-margin,\r
+ $align: $notification-icon-align\r
+) {\r
+ $alignments: (\r
+ top: flex-start,\r
+ middle: middle,\r
+ bottom: flex-end,\r
+ );\r
+ flex: 0 0 $size;\r
+ margin-right: $global-padding;\r
+ align-self: map-get($alignments, $align);\r
+\r
+ img {\r
+ width: 100%;\r
+ height: auto;\r
+ }\r
+}\r
+\r
+/*\r
+ CSS Output\r
+*/\r
+\r
+@include exports(notification) {\r
+ .notification {\r
+ @include notification;\r
+\r
+ &.success { @include notification-style($success-color) }\r
+ &.warning { @include notification-style($warning-color) }\r
+ &.alert { @include notification-style($alert-color) }\r
+ &.dark { @include notification-style($dark-color, #fff) }\r
+\r
+\r
+ }\r
+\r
+ .static-notification {\r
+ @include notification;\r
+\r
+ position: fixed !important;\r
+ \r
+ &.top-right { @include notification-layout(right, top); }\r
+ &.top-left { @include notification-layout(left, top); }\r
+ &.top-middle { @include notification-layout(middle, top); }\r
+\r
+ &.bottom-right { @include notification-layout(right, bottom); }\r
+ &.bottom-left { @include notification-layout(left, bottom); }\r
+ &.bottom-middle { @include notification-layout(middle, bottom); }\r
+\r
+ &.success { @include notification-style($success-color) }\r
+ &.warning { @include notification-style($warning-color) }\r
+ &.alert { @include notification-style($alert-color) }\r
+ &.dark { @include notification-style($dark-color, #fff) }\r
+ }\r
+\r
+ .notification-container {\r
+ @include notification-container;\r
+\r
+ &.top-right { @include notification-layout(right, top); }\r
+ &.top-left { @include notification-layout(left, top); }\r
+ &.top-middle { @include notification-layout(middle, top); }\r
+\r
+ &.bottom-right { @include notification-layout(right, bottom); }\r
+ &.bottom-left { @include notification-layout(left, bottom); }\r
+ &.bottom-middle { @include notification-layout(middle, bottom); }\r
+ }\r
+\r
+ .notification-icon {\r
+ @include notification-icon;\r
+ }\r
+ .notification-content {\r
+ flex: 1;\r
+ }\r
+\r
+}\r