Feature/notifications

src/styles/tink/_buttons.scss

@@ -112,6 +112,37 @@ input[type="submit"],
   @include button-variant($btn-transparent-invert-color, $btn-transparent-invert-bg, $btn-transparent-invert-border, $btn-transparent-invert-hover-bg);
 }
 
+// Close button
+.btn-close {
+  //@extend %btn;
+  @include button-variant($upload-delete-icon-color, $btn-transparent-bg, $btn-transparent-border, $upload-delete-icon-bg-hover-color);
+  @include button-size(0, 0, $font-size-base, rem(15), $border-radius-base);
+    height: rem(15);
+    opacity: .5;
+    text-align: center;
+    text-decoration: none;
+    user-select: none;
+    transition: all $animation-speed linear;
+    width: rem(15);
+
+    &:before {
+      content: "×";
+    }
+
+    &:hover {
+      //background-color: $upload-delete-icon-bg-hover-color;
+
+      &:before {
+        color: rgba($black, .85)
+      }
+    }
+    span {
+      @extend .sr-only;
+    }
+  }
+
+
+
 
 // Line buttons (only outline has color)
 // --------------------------------------------------

src/styles/tink/_callout.scss

@@ -10,10 +10,10 @@
   border-radius: rem($callout-border-radius);
   box-shadow: 0 1px 1px rgba(0,0,0,.05);
   color: $callout-color;
-  margin: rem($line-height-computed) 0;
+  //margin: rem($line-height-computed) 0;
   padding: rem($padding-large-vertical $padding-large-horizontal);
 
-  a {
+  a:not(.btn-close) {
     color: darken($callout-link-color, 8%);
     text-decoration: underline;
 
@@ -28,8 +28,8 @@
     margin: rem($line-height-computed / 2) 0;
   }
 
-  > p:last-child,
-  > ul {
+  > p:last-of-type,
+  > ul:last-of-type {
     margin-bottom: 0;
   }
 }
@@ -40,7 +40,7 @@
   border-color: $callout-border-success;
   color: $callout-color-success;
 
-  a {
+  a:not(.btn-close) {
     color: darken($callout-link-color-success, 8%);
 
     &:hover,
@@ -60,7 +60,7 @@
   border-color: $callout-border-warning;
   color: $callout-color-warning;
 
-  a {
+  a:not(.btn-close) {
     color: darken($callout-link-color-warning, 8%);
 
     &:hover,
@@ -80,7 +80,7 @@
   border-color: $callout-border-danger;
   color: $callout-color-danger;
 
-  a {
+  a:not(.btn-close) {
     color: darken($callout-link-color-danger, 8%);
 
     &:hover,

src/styles/tink/_notifications.scss

@@ -0,0 +1,59 @@
+/**
+ * Notifications
+ * --------------------------------------------------
+ */
+
+.notifications {
+  @extend .container;
+  left: 0;
+  overflow: hidden;
+  position: fixed;
+  right: 0;
+  top: rem($bar-height);
+  z-index: layer('notification');
+
+  > ul {
+    @extend .list-unstyled;
+    @extend .row;
+    margin-top: $grid-gutter-width / 2;
+
+    // actual notification
+    > li {
+      @extend .col-xs-12;
+      margin-bottom: rem(3);
+
+      @media (min-width: $screen-sm) {
+        @extend .col-sm-8;
+        @extend .col-sm-offset-2;
+      }
+
+      @media (min-width: $screen-md) {
+        @extend .col-md-6;
+        @extend .col-md-offset-3;
+      }
+
+      @media (min-width: $screen-lg) {
+        @extend .col-lg-4;
+        @extend .col-lg-offset-4;
+      }
+
+      > * {
+        padding-right: $notification-padding-right;
+        position: relative;
+
+        // close button
+        .btn-close {
+          position: absolute;
+          top: rem($notification-padding);
+          right: rem($notification-padding);
+        }
+      }
+
+      // callout styling is a bit different
+      .callout {
+        border-left-width: 1px;
+        box-shadow: 0px 1px 3px rgba($black, .15);
+      }
+    }
+  }
+}

src/styles/tink/_scaffolding.scss

@@ -66,7 +66,7 @@ textarea {
 
 
 // Links
-a {
+a:not(.btn-close) {
   color: $link-color;
   text-decoration: none;
   transition: all $animation-speed linear;

src/styles/tink/_tink.scss

@@ -45,6 +45,7 @@
 @import "hit-area-box";
 // @import "timeline";
 @import "bar";
+@import "notifications";
 
 /**
  * Angular related components

src/styles/tink/_variables.scss

@@ -346,7 +346,7 @@ $input-group-addon-border-color: $input-border !default; // Border color for tex
  * Complete layer list (for reference, add these to $layers only if needed)
  * $layers: base, navbar, dropdown, tooltip, navbar-sticky, navbar-fixed, modal-background, modal, popover;
  */
-$layers: base, pseudo, above-pseudo, nav-aside, popover, sticky, nav-top, modal !default;
+$layers: base, pseudo, above-pseudo, nav-aside, popover, sticky, nav-top, notification, modal !default;
 
 
 
@@ -814,3 +814,14 @@ $breadcrumb-separator-size:     $breadcrumb-font-size * .6 !default;
 $loader-color: rgba($brand, .8) !default;
 $loader-color-alt: rgba($brand-light, .8) !default;
 $loader-border-width: 2px !default;
+
+
+
+/**
+ * Notification
+ */
+
+$notification-padding: $padding-base-vertical !default;
+$notification-padding-right: $padding-large-horizontal * 2 !default;
+
+

src/views/main.html

@@ -1,4 +1,40 @@
 
+<div class="notifications">
+  <ul>
+    <li>
+      <div class="callout">
+        <a href="#" class="btn-close ng-scope" ng-click="close($event)"><span>Sluiten</span></a>
+        <p><strong>Hi!</strong> I'm a notification. (⊙﹏⊙✿)</p>
+      </div>
+    </li>
+    <li>
+      <div class="callout-warning">
+        <a href="#" class="btn-close ng-scope" ng-click="close($event)"><span>Sluiten</span></a>
+        <p><strong>Hi!</strong> I'm a notification. With some more text so I can see what's happening when I cross the line ...</p>
+      </div>
+    </li>
+    <li>
+      <div class="callout-success">
+        <a href="#" class="btn-close ng-scope" ng-click="close($event)"><span>Sluiten</span></a>
+        <p><strong>Hi!</strong> I'm a notification. (⊙﹏⊙✿)</p>
+      </div>
+    </li>
+  </ul>
+</div>
+
+
+
+<div class="container margin-top">
+  <div class="row margin-top">
+    <div class="col-xs-6 col-xs-push-3">
+      <div class="select">
+        <select><option selected="selected" disabled="disabled">Selecteer…</option><optgroup label="Groep 1"><option value="1">Optie 1</option><option value="1">Optie 2</option><option value="1">Optie 3</option></optgroup><optgroup label="Groep 2"><option value="1">Optie 1</option><option value="1">Optie 2</option><option value="1">Optie 3</option></optgroup>
+        </select>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="container margin-top">
   <div class="row margin-top">
     <div class="col-xs-12 text-center">