Update JSON API

[src/app-framework-demo.git] / afm-client / bower_components / foundation-apps / scss / components / _notification.scss

diff --git a/afm-client/bower_components/foundation-apps/scss/components/_notification.scss b/afm-client/bower_components/foundation-apps/scss/components/_notification.scss
new file mode 100644 (file)
index 0000000..ef54456
--- /dev/null
+++ b/afm-client/bower_components/foundation-apps/scss/components/_notification.scss
@@ -0,0 +1,207 @@
+/*\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