From 698eef767f1d4b5028368d3a8a8ffc18762828bf Mon Sep 17 00:00:00 2001 From: Lieven VG Date: Thu, 15 Oct 2015 13:55:34 +0200 Subject: [PATCH 01/10] Basic working setup --- src/styles/tink/_notification.scss | 19 +++++++++++++++++++ src/styles/tink/_tink.scss | 1 + src/views/main.html | 4 ++++ 3 files changed, 24 insertions(+) create mode 100644 src/styles/tink/_notification.scss diff --git a/src/styles/tink/_notification.scss b/src/styles/tink/_notification.scss new file mode 100644 index 0000000000..9ae227ca5e --- /dev/null +++ b/src/styles/tink/_notification.scss @@ -0,0 +1,19 @@ +/** + * Notification + * -------------------------------------------------- + */ + +.notification { + background: #fde073; + left: 0; + line-height: 2.5; + margin: 0 auto; + overflow: hidden; + position: fixed; + right: 0; + text-align: center; + top: 100px; + width: 90%; + z-index: 101; + +} diff --git a/src/styles/tink/_tink.scss b/src/styles/tink/_tink.scss index 89f59dbb12..9b75749048 100644 --- a/src/styles/tink/_tink.scss +++ b/src/styles/tink/_tink.scss @@ -45,6 +45,7 @@ @import "hit-area-box"; // @import "timeline"; @import "bar"; +@import "notification"; /** * Angular related components diff --git a/src/views/main.html b/src/views/main.html index d94870d6b0..cbbb5cf2d2 100644 --- a/src/views/main.html +++ b/src/views/main.html @@ -10,6 +10,10 @@

Bedrijfseenheid aanpassen

+
+ Hi, I'm a notification. +
+
From 625c67d44b649a2fb660f2533034253a6c0b3e5c Mon Sep 17 00:00:00 2001 From: Lieven VG Date: Thu, 15 Oct 2015 14:13:41 +0200 Subject: [PATCH 02/10] Some cleanup, added z-index 'notification'. --- src/styles/tink/_notification.scss | 8 +++----- src/styles/tink/_variables.scss | 2 +- src/views/main.html | 4 +++- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/styles/tink/_notification.scss b/src/styles/tink/_notification.scss index 9ae227ca5e..ca2d177623 100644 --- a/src/styles/tink/_notification.scss +++ b/src/styles/tink/_notification.scss @@ -4,16 +4,14 @@ */ .notification { - background: #fde073; left: 0; - line-height: 2.5; margin: 0 auto; overflow: hidden; position: fixed; right: 0; text-align: center; - top: 100px; - width: 90%; - z-index: 101; + top: 50px; + width: 50%; + z-index: layer('notification'); } diff --git a/src/styles/tink/_variables.scss b/src/styles/tink/_variables.scss index 8a2dc8f81f..7c9d0c9663 100644 --- a/src/styles/tink/_variables.scss +++ b/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; diff --git a/src/views/main.html b/src/views/main.html index cbbb5cf2d2..61ef11e50f 100644 --- a/src/views/main.html +++ b/src/views/main.html @@ -11,7 +11,9 @@

Bedrijfseenheid aanpassen

- Hi, I'm a notification. +
+

Hi! I'm defecation, euhm ... I mean notification. (⊙﹏⊙✿)

+
From 67c79ff9213b789560f072256517c90f73835149 Mon Sep 17 00:00:00 2001 From: Lieven VG Date: Thu, 15 Oct 2015 14:36:50 +0200 Subject: [PATCH 03/10] Clean up Added variables Mobile version set --- src/styles/tink/_notification.scss | 19 ++++++++++--------- src/styles/tink/_variables.scss | 8 ++++++++ src/views/main.html | 1 + 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src/styles/tink/_notification.scss b/src/styles/tink/_notification.scss index ca2d177623..8c8e925114 100644 --- a/src/styles/tink/_notification.scss +++ b/src/styles/tink/_notification.scss @@ -4,14 +4,15 @@ */ .notification { - left: 0; - margin: 0 auto; - overflow: hidden; - position: fixed; - right: 0; - text-align: center; - top: 50px; - width: 50%; - z-index: layer('notification'); + left: 0; + margin: 1rem auto 0; + overflow: hidden; + position: fixed; + right: 0; + top: $notification-top; + z-index: layer('notification'); + @media (min-width: 768px) { + width: 50%; + } } diff --git a/src/styles/tink/_variables.scss b/src/styles/tink/_variables.scss index 7c9d0c9663..781b5f97a9 100644 --- a/src/styles/tink/_variables.scss +++ b/src/styles/tink/_variables.scss @@ -814,3 +814,11 @@ $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-top: $nav-top-height !default; diff --git a/src/views/main.html b/src/views/main.html index 61ef11e50f..4d26d06c31 100644 --- a/src/views/main.html +++ b/src/views/main.html @@ -15,6 +15,7 @@

Bedrijfseenheid aanpassen

Hi! I'm defecation, euhm ... I mean notification. (⊙﹏⊙✿)

+





From 176567d1ea45b18979d510718d74a09271c0aa11 Mon Sep 17 00:00:00 2001 From: Lieven VG Date: Thu, 15 Oct 2015 15:39:36 +0200 Subject: [PATCH 04/10] Set as ul instead of div --- src/styles/tink/_notification.scss | 4 ++- src/views/main.html | 50 ++++++++++-------------------- 2 files changed, 19 insertions(+), 35 deletions(-) diff --git a/src/styles/tink/_notification.scss b/src/styles/tink/_notification.scss index 8c8e925114..0ba1dbd914 100644 --- a/src/styles/tink/_notification.scss +++ b/src/styles/tink/_notification.scss @@ -3,7 +3,9 @@ * -------------------------------------------------- */ -.notification { +ul.notification { + @extend .list-unstyled; + left: 0; margin: 1rem auto 0; overflow: hidden; diff --git a/src/views/main.html b/src/views/main.html index 4d26d06c31..19e33d85bc 100644 --- a/src/views/main.html +++ b/src/views/main.html @@ -10,43 +10,25 @@

Bedrijfseenheid aanpassen

-
-
-

Hi! I'm defecation, euhm ... I mean notification. (⊙﹏⊙✿)

-
-
-





- -
-
-
-
-

Hi! I just called for your attention. Link

-
-
-
-
-
-
-

Well done! You successfully read this alert message. Link

-
+
    +
  • +
    +

    Hi! I'm defecation, euhm ... I mean notification. (⊙﹏⊙✿)

    -
-
-
-
-

Warning! Best check yourself, you're not looking too good. Link

-
+ +
  • +
    +

    Hi! I'm defecation, euhm ... I mean notification. (⊙﹏⊙✿)

    -
    • -
    -
    -
    -

    Danger! All your base are belong to us. Link

    -
    + +
  • +
    +

    Hi! I'm defecation, euhm ... I mean notification. (⊙﹏⊙✿)

    -
    • -
    + + + +
    From e3c64a925e2f604b87019a71fb22f849182a394f Mon Sep 17 00:00:00 2001 From: Lieven VG Date: Fri, 16 Oct 2015 14:47:15 +0200 Subject: [PATCH 05/10] Extended on Grid Separated Close button Minor tweaks on callouts --- src/styles/tink/_buttons.scss | 32 ++++++++++++++++++ src/styles/tink/_callout.scss | 6 ++-- src/styles/tink/_notification.scss | 20 ----------- src/styles/tink/_notifications.scss | 47 ++++++++++++++++++++++++++ src/styles/tink/_tink.scss | 2 +- src/views/main.html | 51 +++++++++++++++++++---------- 6 files changed, 117 insertions(+), 41 deletions(-) delete mode 100644 src/styles/tink/_notification.scss create mode 100644 src/styles/tink/_notifications.scss diff --git a/src/styles/tink/_buttons.scss b/src/styles/tink/_buttons.scss index a9bea34476..c5f032473b 100644 --- a/src/styles/tink/_buttons.scss +++ b/src/styles/tink/_buttons.scss @@ -119,6 +119,38 @@ 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); + line-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) // -------------------------------------------------- diff --git a/src/styles/tink/_callout.scss b/src/styles/tink/_callout.scss index e55576bcce..2b6a6df0f4 100644 --- a/src/styles/tink/_callout.scss +++ b/src/styles/tink/_callout.scss @@ -10,7 +10,7 @@ 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 { @@ -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; } } diff --git a/src/styles/tink/_notification.scss b/src/styles/tink/_notification.scss deleted file mode 100644 index 0ba1dbd914..0000000000 --- a/src/styles/tink/_notification.scss +++ /dev/null @@ -1,20 +0,0 @@ -/** - * Notification - * -------------------------------------------------- - */ - -ul.notification { - @extend .list-unstyled; - - left: 0; - margin: 1rem auto 0; - overflow: hidden; - position: fixed; - right: 0; - top: $notification-top; - z-index: layer('notification'); - - @media (min-width: 768px) { - width: 50%; - } -} diff --git a/src/styles/tink/_notifications.scss b/src/styles/tink/_notifications.scss new file mode 100644 index 0000000000..ccff48754f --- /dev/null +++ b/src/styles/tink/_notifications.scss @@ -0,0 +1,47 @@ +/** + * Notifications + * -------------------------------------------------- + */ + +.notifications { + left: 0; + overflow: hidden; + position: fixed; + right: 0; + top: rem($notification-top); // = height top-nav + z-index: layer('notification'); + + ul { + @extend .list-unstyled; + @extend .container; + + li { + @extend .row; + margin-bottom: rem(3); // set some bottom spacing between stacked notifications + position: relative; + + // callout styling when it's in a notification + .callout { + @extend .col-xs-10; + @extend .col-xs-offset-1; + border-left-width: 1px; + box-shadow: 0px 1px 3px rgba($black, .15); + padding-right: calc(3*#{$padding-large-horizontal}); + + @media (min-width: 768px) { + @extend .col-md-6; + @extend .col-md-offset-3; + } + } + + // position the close button + .close { + @extend .btn-close; + + position: absolute; + right: rem($padding-base-horizontal); + top: rem($padding-base-horizontal); + } + } + } +} diff --git a/src/styles/tink/_tink.scss b/src/styles/tink/_tink.scss index 9b75749048..05646ff863 100644 --- a/src/styles/tink/_tink.scss +++ b/src/styles/tink/_tink.scss @@ -45,7 +45,7 @@ @import "hit-area-box"; // @import "timeline"; @import "bar"; -@import "notification"; +@import "notifications"; /** * Angular related components diff --git a/src/views/main.html b/src/views/main.html index 19e33d85bc..ed7cf306a3 100644 --- a/src/views/main.html +++ b/src/views/main.html @@ -10,23 +10,28 @@

    Bedrijfseenheid aanpassen

    -
      -
    • -
      -

      Hi! I'm defecation, euhm ... I mean notification. (⊙﹏⊙✿)

      -
      -
      • -
    • -
      -

      Hi! I'm defecation, euhm ... I mean notification. (⊙﹏⊙✿)

      -
      -
      • -
    • -
      -

      Hi! I'm defecation, euhm ... I mean notification. (⊙﹏⊙✿)

      -
      -
      • -
    +
    +
      +
    • +
      + Sluiten +

      Hi! I'm defecation, euhm ... I mean notification. (⊙﹏⊙✿)

      +
      +
      • +
    • +
      + Sluiten +

      Hi! I'm defecation, euhm ... I mean notification. qdqs qsfjsndsdfn sfjkqnsfoize dqs qsdq qqd ... Iii sd qss jj mean notification. (⊙﹏⊙✿)

      +
      +
      • +
    • +
      +

      Hi! I'm defecation, euhm ... I mean notification. (⊙﹏⊙✿)

      + Sluiten +
      +
      • +
    +
    @@ -52,6 +57,18 @@

    Bedrijfseenheid aanpassen

    +
    +
    +
    +
    +

    Hi! I'm just a callout

    +
    +
    +
    +
    + + +

    Flex nav bar links / text fields WORKS! (except for splitting of spans)

    From 6fe1a601a8c5d110acb1e742de5d65442d09228d Mon Sep 17 00:00:00 2001 From: Lieven VG Date: Fri, 16 Oct 2015 16:42:36 +0200 Subject: [PATCH 06/10] Needs some finetuning on calc styling, but almost there... --- src/styles/tink/_buttons.scss | 1 - src/styles/tink/_notifications.scss | 40 +++++++++++++++++++---------- 2 files changed, 26 insertions(+), 15 deletions(-) diff --git a/src/styles/tink/_buttons.scss b/src/styles/tink/_buttons.scss index c5f032473b..7680f98c2d 100644 --- a/src/styles/tink/_buttons.scss +++ b/src/styles/tink/_buttons.scss @@ -125,7 +125,6 @@ input[type="submit"], @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); - line-height: rem(15); opacity: .5; text-align: center; text-decoration: none; diff --git a/src/styles/tink/_notifications.scss b/src/styles/tink/_notifications.scss index ccff48754f..6be48649a6 100644 --- a/src/styles/tink/_notifications.scss +++ b/src/styles/tink/_notifications.scss @@ -3,44 +3,56 @@ * -------------------------------------------------- */ +$position-top: rem($padding-base-vertical); +$grid-gutter-width-half: $grid-gutter-width / 2; + .notifications { + @extend .container; left: 0; overflow: hidden; position: fixed; right: 0; - top: rem($notification-top); // = height top-nav + top: rem($bar-height); // = height top-nav + spacing z-index: layer('notification'); ul { @extend .list-unstyled; - @extend .container; + @extend .row; + margin-top: $grid-gutter-width-half; li { - @extend .row; + @extend .col-xs-12; margin-bottom: rem(3); // set some bottom spacing between stacked notifications position: relative; + @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; + } + // callout styling when it's in a notification .callout { - @extend .col-xs-10; - @extend .col-xs-offset-1; border-left-width: 1px; box-shadow: 0px 1px 3px rgba($black, .15); - padding-right: calc(3*#{$padding-large-horizontal}); - - @media (min-width: 768px) { - @extend .col-md-6; - @extend .col-md-offset-3; - } + padding-right: calc(2 * #{$padding-large-horizontal}); } // position the close button .close { @extend .btn-close; - position: absolute; - right: rem($padding-base-horizontal); - top: rem($padding-base-horizontal); + top: $position-top; + right: calc(#{$position-top} + #{$grid-gutter-width-half}); } } } From 492ea9960f7e85fb7cf3637da51fcd9b6e3536dd Mon Sep 17 00:00:00 2001 From: Lieven VG Date: Mon, 19 Oct 2015 11:58:06 +0200 Subject: [PATCH 07/10] Cleaned up / Removed calcs Set padding variables Positioned close button on direct child of li instead of the li itself. --- src/styles/tink/_notifications.scss | 28 +++++++++++++++------------- src/styles/tink/_variables.scss | 5 ++++- 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/src/styles/tink/_notifications.scss b/src/styles/tink/_notifications.scss index 6be48649a6..14ed26060a 100644 --- a/src/styles/tink/_notifications.scss +++ b/src/styles/tink/_notifications.scss @@ -3,27 +3,24 @@ * -------------------------------------------------- */ -$position-top: rem($padding-base-vertical); -$grid-gutter-width-half: $grid-gutter-width / 2; - .notifications { @extend .container; left: 0; overflow: hidden; position: fixed; right: 0; - top: rem($bar-height); // = height top-nav + spacing + top: rem($bar-height); z-index: layer('notification'); ul { @extend .list-unstyled; @extend .row; - margin-top: $grid-gutter-width-half; + margin-top: $grid-gutter-width / 2; // set some top spacing between top-nav and notifications + // actual notification li { @extend .col-xs-12; margin-bottom: rem(3); // set some bottom spacing between stacked notifications - position: relative; @media (min-width: $screen-sm) { @extend .col-sm-8; @@ -44,15 +41,20 @@ $grid-gutter-width-half: $grid-gutter-width / 2; .callout { border-left-width: 1px; box-shadow: 0px 1px 3px rgba($black, .15); - padding-right: calc(2 * #{$padding-large-horizontal}); } - // position the close button - .close { - @extend .btn-close; - position: absolute; - top: $position-top; - right: calc(#{$position-top} + #{$grid-gutter-width-half}); + // all direct children of li + > * { + padding-right: $notification-padding-right; + position: relative; + + // position the close button + .close { + @extend .btn-close; + position: absolute; + top: rem($notification-padding); + right: rem($notification-padding); + } } } } diff --git a/src/styles/tink/_variables.scss b/src/styles/tink/_variables.scss index 781b5f97a9..34dcbf90fb 100644 --- a/src/styles/tink/_variables.scss +++ b/src/styles/tink/_variables.scss @@ -821,4 +821,7 @@ $loader-border-width: 2px !default; * Notification */ -$notification-top: $nav-top-height !default; +$notification-padding: $padding-base-vertical !default; +$notification-padding-right: $padding-large-horizontal * 2 !default; + + From 2570be469832ea98dc94760651549876b34a52ac Mon Sep 17 00:00:00 2001 From: Lieven VG Date: Mon, 19 Oct 2015 12:01:20 +0200 Subject: [PATCH 08/10] Little clean up --- src/styles/tink/_notifications.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/styles/tink/_notifications.scss b/src/styles/tink/_notifications.scss index 14ed26060a..781e25eef3 100644 --- a/src/styles/tink/_notifications.scss +++ b/src/styles/tink/_notifications.scss @@ -37,12 +37,6 @@ @extend .col-lg-offset-4; } - // callout styling when it's in a notification - .callout { - border-left-width: 1px; - box-shadow: 0px 1px 3px rgba($black, .15); - } - // all direct children of li > * { padding-right: $notification-padding-right; @@ -56,6 +50,12 @@ right: rem($notification-padding); } } + + // callout styling when it's set in a notification + .callout { + border-left-width: 1px; + box-shadow: 0px 1px 3px rgba($black, .15); + } } } } From e9d34a4c5f0db1a2a71401fd5ea954a7e4159af5 Mon Sep 17 00:00:00 2001 From: Lieven VG Date: Mon, 19 Oct 2015 13:36:33 +0200 Subject: [PATCH 09/10] Removed extend of .btn-close Excluded .btn-close of standard 'a' styling. --- src/styles/tink/_callout.scss | 8 ++++---- src/styles/tink/_notifications.scss | 3 +-- src/styles/tink/_scaffolding.scss | 2 +- src/views/main.html | 12 ++++++------ 4 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/styles/tink/_callout.scss b/src/styles/tink/_callout.scss index 2b6a6df0f4..e13c96bdc4 100644 --- a/src/styles/tink/_callout.scss +++ b/src/styles/tink/_callout.scss @@ -13,7 +13,7 @@ //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; @@ -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, diff --git a/src/styles/tink/_notifications.scss b/src/styles/tink/_notifications.scss index 781e25eef3..cfc4b55ccb 100644 --- a/src/styles/tink/_notifications.scss +++ b/src/styles/tink/_notifications.scss @@ -43,8 +43,7 @@ position: relative; // position the close button - .close { - @extend .btn-close; + .btn-close { position: absolute; top: rem($notification-padding); right: rem($notification-padding); diff --git a/src/styles/tink/_scaffolding.scss b/src/styles/tink/_scaffolding.scss index eb74db04eb..d346cdc239 100644 --- a/src/styles/tink/_scaffolding.scss +++ b/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; diff --git a/src/views/main.html b/src/views/main.html index ed7cf306a3..c61f07afa0 100644 --- a/src/views/main.html +++ b/src/views/main.html @@ -14,20 +14,20 @@

    Bedrijfseenheid aanpassen

    • - Sluiten -

      Hi! I'm defecation, euhm ... I mean notification. (⊙﹏⊙✿)

      + Sluiten +

      Hi! I'm a notification. (⊙﹏⊙✿)

    • - Sluiten -

      Hi! I'm defecation, euhm ... I mean notification. qdqs qsfjsndsdfn sfjkqnsfoize dqs qsdq qqd ... Iii sd qss jj mean notification. (⊙﹏⊙✿)

      + Sluiten +

      Hi! I'm a notification. With some more text so I can see what's happening when I cross the line ...

    • -

      Hi! I'm defecation, euhm ... I mean notification. (⊙﹏⊙✿)

      - Sluiten + Sluiten +

      Hi! I'm a notification. (⊙﹏⊙✿)

    From aed91b8be91e6640b744cbea9ff191811c6ca0e9 Mon Sep 17 00:00:00 2001 From: Jasper Van Proeyen Date: Mon, 19 Oct 2015 14:20:38 +0200 Subject: [PATCH 10/10] Corrected small errors --- src/styles/tink/_notifications.scss | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/styles/tink/_notifications.scss b/src/styles/tink/_notifications.scss index cfc4b55ccb..aeb4b41463 100644 --- a/src/styles/tink/_notifications.scss +++ b/src/styles/tink/_notifications.scss @@ -12,15 +12,15 @@ top: rem($bar-height); z-index: layer('notification'); - ul { + > ul { @extend .list-unstyled; @extend .row; - margin-top: $grid-gutter-width / 2; // set some top spacing between top-nav and notifications + margin-top: $grid-gutter-width / 2; // actual notification - li { + > li { @extend .col-xs-12; - margin-bottom: rem(3); // set some bottom spacing between stacked notifications + margin-bottom: rem(3); @media (min-width: $screen-sm) { @extend .col-sm-8; @@ -37,12 +37,11 @@ @extend .col-lg-offset-4; } - // all direct children of li > * { padding-right: $notification-padding-right; position: relative; - // position the close button + // close button .btn-close { position: absolute; top: rem($notification-padding); @@ -50,7 +49,7 @@ } } - // callout styling when it's set in a notification + // callout styling is a bit different .callout { border-left-width: 1px; box-shadow: 0px 1px 3px rgba($black, .15);