feat: add toasts

demo/src/scss/demo.scss

@@ -13,7 +13,7 @@ root {
 .demo-navbar {
   width: 100%;
   background-color: $navbar-bg-color;
-  
+
   .navbar-brand {
     width: 37.75px;
     text-align: center;
@@ -191,6 +191,27 @@ root {
       border: 1px solid #eee;
     }
   }
+  &.translucent-toast-demo,
+  &.basic-toast-demo,
+  &.stacking-toast-demo {
+    .demo-preview-box {
+      background-color: $light;
+    }
+    .toast {
+      display: block;
+      opacity: 1;
+    }
+    .toast-header img {
+      width: $toast-font-size * 1.25;
+      height: $toast-font-size * 1.25;
+      background-color: $primary;
+    }
+  }
+  &.translucent-toast-demo {
+    .demo-preview-box {
+      background-color: $dark;
+    }
+  }
 }
 
 $container-header-height: rem2px(3);

docs/components/toasts.md

@@ -0,0 +1,81 @@
+# Toasts
+
+Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
+
+Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.
+
+## Examples
+
+### Basic
+
+To encourage extensible and predictable toasts, we recommend a header and body.
+
+``` basic-toast-demo-xml
+<w class="toast">
+  <w class="toast-header">
+    <img class="rounded mr-2" />
+    <strong>LC Design</strong>
+    <w class="toast-header-right">
+      <small class="text-muted">11 mins ago</small>
+      <button class="ml-2 close" data-dismiss="toast">&#215;</button>
+    </w>
+  </w>
+  <text class="toast-body">
+    Hello, world! This is a toast message.
+  </text>
+</w>
+```
+
+### Translucent
+
+Toasts are slightly translucent, too, so they blend over whatever they might appear over.
+
+``` translucent-toast-demo-xml
+<w class="toast">
+  <w class="toast-header">
+    <img class="rounded mr-2" />
+    <strong>LC Design</strong>
+    <w class="toast-header-right">
+      <small class="text-muted">11 mins ago</small>
+      <button class="ml-2 close" data-dismiss="toast">&#215;</button>
+    </w>
+  </w>
+  <text class="toast-body">
+    Hello, world! This is a toast message.
+  </text>
+</w>
+```
+
+### Stacking
+
+When you have multiple toasts, we default to vertically stacking them in a readable manner.
+
+``` stacking-toast-demo-xml
+<w class="toast">
+  <w class="toast-header">
+    <img class="rounded mr-2" />
+    <strong>LC Design</strong>
+    <w class="toast-header-right">
+      <small class="text-muted">just now</small>
+      <button class="ml-2 close" data-dismiss="toast">&#215;</button>
+    </w>
+  </w>
+  <text class="toast-body">
+    See? Just like this.
+  </text>
+</w>
+
+<w class="toast">
+  <w class="toast-header">
+    <img class="rounded mr-2" />
+    <strong>LC Design</strong>
+    <w class="toast-header-right">
+      <small class="text-muted">2 seconds ago</small>
+      <button class="ml-2 close" data-dismiss="toast">&#215;</button>
+    </w>
+  </w>
+  <text class="toast-body">
+    Heads up, toasts will stack automatically
+  </text>
+</w>
+```

src/scss/_reboot.scss

@@ -29,6 +29,6 @@ p {
   @include text-default-style;
 }
 
-strong, b, cite, textview {
+span, small, strong, b, cite, img, text, textview {
   display: inline-block;
 }

src/scss/_toasts.scss

@@ -0,0 +1,63 @@
+.toast {
+  max-width: $toast-max-width;
+  background-color: $toast-background-color;
+  background-clip: padding-box;
+  border: $toast-border-width solid $toast-border-color;
+  box-shadow: $toast-box-shadow;
+  margin-bottom: $toast-padding-x;
+  opacity: 0;
+
+  @include text {
+    font-size: $toast-font-size;
+  }
+
+  @include border-radius($toast-border-radius);
+
+  small, small {
+    font-size: $toast-font-size * 0.8;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.showing {
+    opacity: 1;
+  }
+
+  &.show {
+    display: block;
+    opacity: 1;
+  }
+
+  &.hide {
+    display: none;
+  }
+}
+
+.toast-header {
+  @include text {
+    color: $toast-header-color;
+  }
+
+  padding: $toast-padding-y $toast-padding-x;
+  background-color: $toast-header-background-color;
+  border-bottom: $toast-border-width solid $toast-header-border-color;
+}
+
+.toast-header-right {
+  @include float-right;
+
+  top: $toast-padding-y;
+  right: $toast-padding-x;
+
+  .close {
+    top: -$toast-padding-y;
+    font-size: $close-font-size;
+    position: relative;
+  }
+}
+
+.toast-body {
+  padding: $toast-padding-x; // apply to both vertical and horizontal
+}

src/scss/_type.scss

@@ -59,7 +59,7 @@ code-block, pre {
 //
 
 blockquote, .blockquote {
-  margin-bottom: rem2px(1); 
+  margin-bottom: rem2px(1);
   padding: rem2px(.4) rem2px(.8);
   border-left: $blockquote-border-width solid $blockquote-border-color;
 }

src/scss/_variables.scss

@@ -60,6 +60,15 @@ $colors: map-merge((
   "gray-dark":  $gray-800
 ), $colors);
 
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
 $theme-colors: () !default;
 $theme-colors: map-merge((
   "primary":    $blue,
@@ -120,7 +129,7 @@ $sizes: (
 ) !default;
 
 $text-elements: i, b, a, p, h1, h2, h3, h4, h5, h6,
-label, cite, strong, textview, textedit, password, button;
+label, cite, small, strong, text, textview, textedit, password, button;
 
 // Body
 //
@@ -179,6 +188,10 @@ $border-radius:               0;
 $border-radius-lg:            0;
 $border-radius-sm:            0;
 
+$box-shadow-sm:               0 rem2px(.125) rem2px(.25) rgba($black, .075) !default;
+$box-shadow:                  0 rem2px(.5) rem2px(1) rgba($black, .15) !default;
+$box-shadow-lg:               0 rem2px(1) rem2px(3) rgba($black, .175) !default;
+
 $component-active-color:      $white !default;
 $component-active-bg:         theme-color("primary") !default;
 
@@ -218,7 +231,7 @@ $headings-color:              $font-color-base !default;
 $lead-font-size:              ($font-size-base * 1.25) !default;
 $lead-font-weight:            300 !default;
 
-$small-font-size:             80% !default;
+$small-font-size:             ($font-size-base * 0.8) !default;
 
 $text-muted:                  $gray-600 !default;
 
@@ -375,6 +388,23 @@ $dropdown-item-padding-x:           rem2px(1.5) !default;
 $dropdown-header-color:             $gray-600 !default;
 
 
+// Toasts
+
+$toast-max-width:                   350px !default;
+$toast-padding-x:                   rem2px(.75) !default;
+$toast-padding-y:                   rem2px(.25) !default;
+$toast-font-size:                   rem2px(.875) !default;
+$toast-background-color:            rgba($white, .85) !default;
+$toast-border-width:                1px !default;
+$toast-border-color:                rgba(0, 0, 0, .1) !default;
+$toast-border-radius:               $border-radius !default;
+$toast-box-shadow:                  $box-shadow !default;
+
+$toast-header-color:                $gray-600 !default;
+$toast-header-background-color:     rgba($white, .85) !default;
+$toast-header-border-color:         rgba(0, 0, 0, .05) !default;
+
+
 // Z-index master list
 //
 // Warning: Avoid customizing these values. They're used for a bird's eye view

src/scss/lc-design.scss

@@ -0,0 +1,19 @@
+@import "functions";
+@import "variables";
+@import "mixins";
+@import "reboot";
+@import "font";
+@import "iconfont";
+@import "type";
+@import "grid";
+@import "alert";
+@import "forms";
+@import "nav";
+@import "navbar";
+@import "buttons";
+@import "dropdown";
+@import "list-group";
+@import "close";
+@import "modal";
+@import "toasts";
+@import "utilities";

src/scss/mixins/_text.scss

@@ -10,7 +10,7 @@
     @content;
   }
 
-  textview, .text {
+  #{$text-elements}, .text {
     @content;
   }
 }