From a7c82e1e896bb5e3fa116a3147b27ff9842a0199 Mon Sep 17 00:00:00 2001
From: Joshua Godi <jgodi@bullhorn.com>
Date: Thu, 18 May 2017 11:10:23 -0500
Subject: [PATCH] feat(toast): Adding outlined toasts

---
 demo/pages/elements/toast/ToastDemo.ts        |  21 +--
 .../form/controls/picker/PickerControl.ts     |   6 +
 src/elements/toast/Toast.scss                 | 129 ++++++++++--------
 3 files changed, 87 insertions(+), 69 deletions(-)

diff --git a/demo/pages/elements/toast/ToastDemo.ts b/demo/pages/elements/toast/ToastDemo.ts
index 40b4e57f7..901e4c7f6 100644
--- a/demo/pages/elements/toast/ToastDemo.ts
+++ b/demo/pages/elements/toast/ToastDemo.ts
@@ -41,9 +41,9 @@ const template = `
     template: template
 })
 export class ToastDemoComponent {
-    private ToastDemoTpl:string = ToastDemoTpl;
-    private ToastServiceDemoTpl:string = ToastServiceDemoTpl;
-    private positions:Array<string> = [
+    private ToastDemoTpl: string = ToastDemoTpl;
+    private ToastServiceDemoTpl: string = ToastServiceDemoTpl;
+    private positions: Array<string> = [
         'fixedTop',
         'fixedBottom',
         'growlTopLeft',
@@ -51,30 +51,30 @@ export class ToastDemoComponent {
         'growlBottomLeft',
         'growlBottomRight'
     ];
-    private themes:Array<string> = [
+    private themes: Array<string> = [
         'default',
         'success',
         'info',
         'warning',
         'danger'
     ];
-    private icons:Array<string> = [
+    private icons: Array<string> = [
         'add',
         'check',
         'clock',
         'lock',
         'caution'
     ];
-    private options:any = {
+    private options: any = {
         'title': 'Title',
         'message': 'Some Message...'
     };
-    private toast:any = {
+    private toast: any = {
         theme: 'danger',
         icon: 'caution'
     };
 
-    constructor(private toaster:NovoToastService) {
+    constructor(private toaster: NovoToastService) {
     }
 
     changeToast() {
@@ -98,8 +98,9 @@ export class ToastDemoComponent {
                 title: 'Bottom',
                 message: 'This positioning is fixedBottom',
                 icon: 'check',
-                theme: 'ocean',
-                position: 'fixedBottom'
+                theme: 'warning-outline',
+                position: 'fixedBottom',
+                hideDelay: 1000000
             };
         } else if (arg === 'growlTopRight') {
             this.options = {
diff --git a/src/elements/form/controls/picker/PickerControl.ts b/src/elements/form/controls/picker/PickerControl.ts
index a738758a5..cb0d91ad1 100644
--- a/src/elements/form/controls/picker/PickerControl.ts
+++ b/src/elements/form/controls/picker/PickerControl.ts
@@ -16,3 +16,9 @@ export class TablePickerControl extends PickerControl {
         super(Object.assign(config, { appendToBody: true, parentScrollSelector: '.table-container' }));
     }
 }
+
+export class AppendToBodyPickerControl extends PickerControl {
+    constructor(config: NovoControlConfig) {
+        super(Object.assign(config, { appendToBody: true, parentScrollSelector: '.table-container' }));
+    }
+}
diff --git a/src/elements/toast/Toast.scss b/src/elements/toast/Toast.scss
index d2c06b1e7..0090d5671 100644
--- a/src/elements/toast/Toast.scss
+++ b/src/elements/toast/Toast.scss
@@ -5,7 +5,6 @@ novo-toast {
     color: $white;
     padding: 15px 15px 15px 25px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
-
     &.show {
         display: block;
     }
@@ -24,7 +23,7 @@ novo-toast.toast-container {
     align-items: center;
 }
 
-novo-toast.toast-container > .toast-icon {
+novo-toast.toast-container>.toast-icon {
     display: flex;
     justify-content: center;
     align-content: center;
@@ -35,7 +34,6 @@ novo-toast.toast-container > .toast-icon {
     background: rgba(0, 0, 0, 0.15);
     border-radius: 3px;
     margin-right: 15px;
-
     i {
         display: flex;
         position: relative;
@@ -45,7 +43,7 @@ novo-toast.toast-container > .toast-icon {
     }
 }
 
-novo-toast.toast-container > .close-icon {
+novo-toast.toast-container>.close-icon {
     display: flex;
     justify-content: center;
     align-content: center;
@@ -66,59 +64,55 @@ novo-toast.toast-container .toast-content {
     width: calc(100% - 47px);
     flex-direction: column;
     display: flex;
-
-    h5 + p {
+    h5+p {
         top: 0;
     }
-
     p {
         position: relative;
         top: -1px;
     }
-
     .link-generated {
-      width: 100%;
-      position: relative;
-      input {
-          font-size: 1em;
-          background: transparent !important;
-          border: none;
-          border-bottom: 1px solid #EAEAEA;
-          border-radius: 0;
-          outline: none;
-          height: 2rem;
-          width: 95%;
-          margin: 0;
-          padding: 0;
-          box-shadow: none;
-          box-sizing: content-box;
-          transition: all 300ms;
-          color: $white;
-          text-overflow: ellipsis;
-          &:focus {
-              background-color: $positive;
-          }
-    }
-  }
-}
-
-novo-toast .toast-content > h5 {
+        width: 100%;
+        position: relative;
+        input {
+            font-size: 1em;
+            background: transparent !important;
+            border: none;
+            border-bottom: 1px solid #EAEAEA;
+            border-radius: 0;
+            outline: none;
+            height: 2rem;
+            width: 95%;
+            margin: 0;
+            padding: 0;
+            box-shadow: none;
+            box-sizing: content-box;
+            transition: all 300ms;
+            color: $white;
+            text-overflow: ellipsis;
+            &:focus {
+                background-color: $positive;
+            }
+        }
+    }
+}
+
+novo-toast .toast-content>h5 {
     display: block;
     color: $white;
     margin: 0 0 5px;
     font-size: 14px;
 }
 
-novo-toast:not(.default) .toast-content > h5 {
+novo-toast:not(.default) .toast-content>h5 {
     color: $white;
 }
 
-novo-toast .toast-content > p {
+novo-toast .toast-content>p {
     font-size: 14px;
     line-height: 20px;
     margin: 0;
     max-width: inherit;
-
     &.message-only {
         top: 0;
         font-size: 16px;
@@ -127,6 +121,20 @@ novo-toast .toast-content > p {
     }
 }
 
+novo-toast.warning-outline,
+novo-toast.success-outline,
+novo-toast.info-outline,
+novo-toast.danger-outline,
+{
+    color: $base-font-color;
+    .toast-content>h5 {
+        color: $base-font-color;
+    }
+    .toast-container .toast-content .link-generated input {
+        color: $base-font-color;
+    }
+}
+
 novo-toast.danger,
 novo-toast.info,
 novo-toast.success,
@@ -141,45 +149,62 @@ novo-toast.success {
     background: $grass;
 }
 
+novo-toast.success-outline {
+    border: 1px solid $grass;
+    background: white;
+}
+
 novo-toast.info {
     background: $ocean;
 }
 
+novo-toast.info-outline {
+    border: 1px solid $ocean;
+    background: white;
+}
+
 novo-toast.warning {
     background: $sunflower;
 }
 
+novo-toast.warning-outline {
+    border: 1px solid $sunflower;
+    background: white;
+}
+
 novo-toast.danger {
     background: $grapefruit;
 }
 
+novo-toast.danger-outline {
+    border: 1px solid $grapefruit;
+    background: white;
+}
+
 novo-toast {
-    @each $analytics, $color in $analytics-colors {
+    @each $analytics,
+    $color in $analytics-colors {
         &.#{$analytics} {
             background: $color;
         }
     }
-    @each $entity, $color in $entity-colors {
+    @each $entity,
+    $color in $entity-colors {
         &.#{$entity} {
             background: $color;
         }
     }
-
     &.text {
         background: $dark;
     }
-
     &.neutral {
         background: $neutral;
     }
-
     &.background {
         background: $off-white;
-
-        .toast-content > h5 {
+        .toast-content>h5 {
             color: $dark !important;
         }
-
         i,
         p {
             color: $dark;
@@ -197,7 +222,6 @@ novo-toast.fixedTop {
     top: -100%;
     padding-top: 20px;
     @include ease('all', 'swift-ease-in-out');
-
     &.animate {
         padding-top: 20px;
         top: -6px;
@@ -208,7 +232,6 @@ novo-toast.fixedBottom {
     bottom: -100%;
     padding-bottom: 20px;
     @include ease('all', 'swift-ease-in-out');
-
     &.animate {
         padding-bottom: 20px;
         bottom: -6px;
@@ -218,14 +241,12 @@ novo-toast.fixedBottom {
 novo-toast[class*="growl"] {
     border-radius: 3px;
     max-width: 350px;
-
     .toast-content h5 {
         display: block;
         color: #fff;
         margin: 0 0 5px;
         font-size: 14px;
     }
-
     .toast-content p {
         font-size: 14px;
         width: 100%;
@@ -238,7 +259,6 @@ novo-toast.growlTopLeft {
     right: auto;
     width: calc(100% - 30px);
     @include ease('all', 'swift-ease-in-out');
-
     &.animate {
         left: 15px;
     }
@@ -260,7 +280,6 @@ novo-toast.growlTopRight {
     left: auto;
     width: calc(100% - 30px);
     @include ease('all', 'swift-ease-in-out');
-
     &.animate {
         right: 15px;
     }
@@ -306,7 +325,6 @@ novo-toast.embedded.fixedTop {
     right: auto;
     width: inherit;
     margin: -1em -3em;
-
     &.animate {
         top: auto;
     }
@@ -322,11 +340,9 @@ novo-toast.dialogue {
         flex-direction: row !important;
         align-items: center;
     }
-
     p.message-only {
         flex: 3 0 0;
     }
-
     .dialogue {
         display: inherit;
     }
@@ -337,7 +353,6 @@ novo-toast.dialogue {
         transform: translateY(-100%);
         opacity: 0;
     }
-
     to {
         transform: translateY(0);
         opacity: 1;
@@ -351,24 +366,20 @@ novo-toast.dialogue {
     novo-toast[class*="growl-"] {
         min-width: 350px;
     }
-
     novo-toast.growlBottomLeft,
     novo-toast.growlTopLeft {
         left: -100%;
         right: auto;
         @include ease('all', 'swift-ease-in-out');
-
         &.animate {
             left: 15px;
         }
     }
-
     novo-toast.growlBottomRight,
     novo-toast.growlTopRight {
         right: -100%;
         left: auto;
         @include ease('all', 'swift-ease-in-out');
-
         &.animate {
             right: 15px;
         }