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

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