Create toast module, begin styling work

pages/css/components/toasts.md

@@ -0,0 +1,66 @@
+---
+title: Toasts
+path: components/toasts
+status: Experimental
+status_issue: 'https://github.com/github/design-systems/issues/101'
+source: ''
+bundle: toasts
+---
+
+# Toasts
+
+To create a default toast, use `.Toast`
+
+```html title="Toast"
+<div class="Toast">
+  Submitting issue to <strong>github/github</strong>
+</div>
+```
+
+
+## Classic style
+
+```html title="Classic style"
+<div class="Toast Toast-classic-default">
+  <span>Submitting issue to <strong>github/github</strong></span>
+</div>
+<div class="Toast Toast-classic-warning">
+  <span>Submitting issue to <strong>github/github</strong></span>
+</div>
+<div class="Toast Toast-classic-success">
+  <span>Submitting issue to <strong>github/github</strong></span>
+</div>
+<div class="Toast Toast-classic-error">
+  <span>Submitting issue to <strong>github/github</strong></span>
+</div>
+```
+
+## Light style
+
+```html title="Light style"
+<div class="Toast Toast-light-default">
+  <span>Submitting issue to <strong>github/github</strong></span>
+</div>
+<div class="Toast Toast-light-warning">
+  <span class="Toast-octicon"></span>
+  <span>Submitting issue to <strong>github/github</strong></span>
+</div>
+<div class="Toast Toast-light-success">
+  <span class="Toast-octicon"></span>
+  <span>Submitting issue to <strong>github/github</strong></span>
+</div>
+<div class="Toast Toast-light-error">
+  <span class="Toast-octicon"></span>
+  <span>Submitting issue to <strong>github/github</strong></span>
+</div>
+```
+
+## Toast with action
+
+```html title="Toast with action"
+<div class="Toast Toast-light-error">
+  <span class="Toast-octicon"></span>
+  <span>Submitting issue to <strong>github/github</strong></span>
+  <button class="Toast-action btn btn-sm btn-outline">Try again</button>
+</div>
+```

src/product/index.scss

@@ -23,3 +23,4 @@
 @import "../popover/index.scss";
 @import "../progress/index.scss";
 @import "../subhead/index.scss";
+@import "../toasts/index.scss"

src/toasts/README.md

@@ -0,0 +1 @@
+# Primer Toasts

src/toasts/index.scss

@@ -0,0 +1,2 @@
+@import "../support/index.scss";
+@import "./toasts.scss";

src/toasts/toasts.scss

@@ -0,0 +1,107 @@
+// Toast
+
+.Toast {
+  display: flex;
+  align-items: center;
+  background-color: white;
+  color: $black;
+  padding: $spacer-3;
+  margin: $spacer-3;
+  border-radius: 3px;
+  border: 1px solid $black-fade-15;
+  max-width: 400px;
+  min-width: 200px;
+  box-shadow: $box-shadow-large;
+}
+
+// Temporary placeholder for real octicons
+.Toast-octicon {
+  width:16px;
+  height:16px;
+  background-color: $gray-500;
+  margin-right: $spacer-2;
+  border-radius: 50%;
+}
+
+.Toast-action {
+  margin-left: auto;
+}
+
+
+// Temporarily splitting this out
+// to play with static styles.
+.Toast-animated {
+  position: fixed;
+  bottom: -100px;
+  left: 0;
+  animation-name: toast;
+  animation-duration: 10s;
+  animation-delay: 1s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease;
+}
+
+// Pop up animation
+@keyframes toast {
+  0%   {bottom:-100px;}
+  5%  {bottom:0px;}
+  90%  {bottom:0px;}
+  100% {bottom:-100px;}
+}
+
+
+
+
+// Style options
+// -----
+
+// 1. Classic GitHub style
+
+.Toast-classic-default {
+  background-color: $blue-100;
+  color: $blue-900;
+  border: 1px solid $gray-300;
+}
+
+.Toast-classic-error {
+  background-color: $red-100;
+  color: $red-900;
+}
+
+.Toast-classic-warning {
+  background-color: $yellow-100;
+  color: $yellow-900;
+}
+
+.Toast-classic-success {
+  background-color: $green-100;
+  color: $green-900;
+}
+
+
+
+// 2. Light style
+
+.Toast-light-error {
+  border-top: 4px solid $red-500;
+
+  .Toast-octicon {
+    background-color: $red-500;
+  }
+}
+
+.Toast-light-warning {
+  border-top: 4px solid $yellow-600;
+
+  .Toast-octicon {
+    background-color: $yellow-600;
+  }
+}
+
+.Toast-light-success {
+  border-top: 4px solid $green-500;
+
+  .Toast-octicon {
+    background-color: $green-500;
+  }
+}