afb-client/bower_components/foundation-apps/scss/components/_notification.scss

   1 /*
   2   NOTIFICATION
   3   ------------
   4
   5   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.
   6
   7   Optionally, the notifications directive can also tap into the browser's native notification support, if it exists.
   8 */
   9
  10 /// @Foundation.settings
  11 // Notification
  12 $notification-default-position: right top !default;
  13 $notification-width: rem-calc(400) !default;
  14 $notification-offset: $global-padding !default;
  15
  16 $notification-background: $primary-color !default;
  17 $notification-color: white !default;
  18 $notification-padding: $global-padding !default;
  19 $notification-radius: 4px !default;
  20
  21 $notification-icon-size: 60px !default;
  22 $notification-icon-margin: $global-padding !default;
  23 $notification-icon-align: top !default;
  24
  25 ///
  26
  27 %notification {
  28   z-index: 1000;
  29   display: flex;
  30   position: relative;
  31   margin-top: .5rem;
  32   margin-bottom: .5rem;
  33   display: none;
  34
  35   h1 {
  36     font-size: 1.25em;
  37     margin: 0;
  38   }
  39   p {
  40     margin: 0;
  41   }
  42
  43   // Placeholder animation
  44   // transition: opacity 1s ease-out;
  45
  46   &.is-active {
  47     display: flex;
  48   }
  49
  50   .close-button {
  51     color: white;
  52   }
  53 }
  54
  55 %notification-container {
  56   z-index: 3000;
  57   position: fixed;
  58
  59   display: flex;
  60   flex-direction: column;
  61 }
  62
  63 @mixin notification-layout(
  64   $x: nth($notification-default-position, 1),
  65   $y: nth($notification-default-position, 2),
  66   $size: $notification-width,
  67   $offset: $notification-offset
  68 ) {
  69   width: $size;
  70
  71   @if $x == right {
  72     right: $offset;
  73   }
  74   @else if $x == left {
  75     left: $offset;
  76   }
  77   @else if $x == middle {
  78     left: 50%;
  79     margin-left: -($size / 2);
  80   }
  81
  82   @if $y == top {
  83     top: $offset;
  84   }
  85   @else if $y == bottom {
  86     top: auto;
  87     bottom: $offset;
  88   }
  89
  90   // On small screens, notifications are full width but maintain their vertical orientation
  91   @include breakpoint(small only) {
  92     width: auto;
  93     left: $offset;
  94     right: $offset;
  95     margin-left: 0;
  96   }
  97 }
  98 @mixin notification-style(
  99   $background: $notification-background,
 100   $color: $notification-color,
 101   $padding: $notification-padding,
 102   $radius: $notification-radius
 103 ) {
 104   background: $background;
 105   padding: $padding;
 106   border-radius: $radius;
 107
 108   &, h1, h2, h3, h4, h5, h6 {
 109     color: $color;
 110   }
 111 }
 112
 113 @mixin notification(
 114   $background: $notification-background,
 115   $color: $notification-color,
 116   $padding: $notification-padding,
 117   $radius: $notification-radius
 118 ) {
 119   @extend %notification;
 120   @include notification-style($background, $color, $padding, $radius);
 121 }
 122
 123 @mixin notification-container(
 124   $x: nth($notification-default-position, 1),
 125   $y: nth($notification-default-position, 2),
 126   $size: $notification-width,
 127   $offset: $notification-offset
 128 ) {
 129   @extend %notification-container;
 130   @include notification-layout($x, $y, $size, $offset);
 131 }
 132
 133 @mixin notification-icon(
 134   $size: $notification-icon-size,
 135   $margin: $notification-icon-margin,
 136   $align: $notification-icon-align
 137 ) {
 138   $alignments: (
 139     top: flex-start,
 140     middle: middle,
 141     bottom: flex-end,
 142   );
 143   flex: 0 0 $size;
 144   margin-right: $global-padding;
 145   align-self: map-get($alignments, $align);
 146
 147   img {
 148     width: 100%;
 149     height: auto;
 150   }
 151 }
 152
 153 /*
 154   CSS Output
 155 */
 156
 157 @include exports(notification) {
 158   .notification {
 159     @include notification;
 160
 161     &.success   { @include notification-style($success-color) }
 162     &.warning   { @include notification-style($warning-color) }
 163     &.alert     { @include notification-style($alert-color) }
 164     &.dark      { @include notification-style($dark-color, #fff) }
 165
 166
 167   }
 168
 169   .static-notification {
 170     @include notification;
 171
 172     position: fixed !important;
 173
 174     &.top-right     { @include notification-layout(right, top); }
 175     &.top-left      { @include notification-layout(left, top); }
 176     &.top-middle    { @include notification-layout(middle, top); }
 177
 178     &.bottom-right  { @include notification-layout(right, bottom); }
 179     &.bottom-left   { @include notification-layout(left, bottom); }
 180     &.bottom-middle { @include notification-layout(middle, bottom); }
 181
 182     &.success   { @include notification-style($success-color) }
 183     &.warning   { @include notification-style($warning-color) }
 184     &.alert     { @include notification-style($alert-color) }
 185     &.dark      { @include notification-style($dark-color, #fff) }
 186   }
 187
 188   .notification-container {
 189     @include notification-container;
 190
 191     &.top-right     { @include notification-layout(right, top); }
 192     &.top-left      { @include notification-layout(left, top); }
 193     &.top-middle    { @include notification-layout(middle, top); }
 194
 195     &.bottom-right  { @include notification-layout(right, bottom); }
 196     &.bottom-left   { @include notification-layout(left, bottom); }
 197     &.bottom-middle { @include notification-layout(middle, bottom); }
 198   }
 199
 200   .notification-icon {
 201     @include notification-icon;
 202   }
 203   .notification-content {
 204     flex: 1;
 205   }
 206
 207 }