feat: add toasts

techfromsage · Mar 25, 2022 · 4c41249 · 4c41249
1 parent 1571128
commit 4c41249
Show file tree

Hide file tree

Showing 6 changed files with 248 additions and 2 deletions.
diff --git a/assets/stylesheets/_bootstrap.scss b/assets/stylesheets/_bootstrap.scss
@@ -53,3 +53,8 @@
 @import "skip-link";
 @import "error";
 @import "listbox";
+@import "toasts";
+
+.px-3 {
+  padding-left: 3em !important;
+}
diff --git a/assets/stylesheets/_toasts.scss b/assets/stylesheets/_toasts.scss
@@ -0,0 +1,104 @@
+@use "sass:math";
+$grid-gutter-width:           1.5rem;
+$container-padding-x: $grid-gutter-width * .5;
+$toast-spacing:                     .75rem;
+
+
+.toast {
+  width: $toast-max-width;
+  max-width: 100%;
+  color: $toast-color;
+  pointer-events: auto;
+  background-color: $toast-background-color;
+  background-clip: padding-box;
+  border: $toast-border-width solid $toast-border-color;
+  box-shadow: $toast-box-shadow;
+  font-size: $font-size-large;
+  font-weight: $global-weight-light;
+  border-radius: 2em;
+
+  margin-bottom: $toast-spacing;
+
+  &-success {
+    background-color: #d0e6dd;
+  }
+
+  &-info {
+    background-color: #a4d1ea;
+  }
+
+  &-warning {
+    background-color: #fed989;
+  }
+
+  &-danger {
+    background-color: #f3d5d5;
+  }
+
+  .btn-close {
+    box-sizing: content-box;
+color: #000;
+border: 0;
+border-radius: 3px;
+    width: auto;
+    height: auto;
+    padding: 0;
+    font-weight: 300;
+    text-decoration: underline;
+    background: transparent;
+    opacity: 1;
+    text-underline-offset: 1px;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 1px currentColor;
+      outline: 0;
+    }
+  }
+
+  &.showing {
+    opacity: 0;
+  }
+
+  &:not(.show) {
+    display: none;
+  }
+}
+
+.toast-container {
+  position: absolute;
+
+  width: max-content;
+  max-width: 100%;
+  pointer-events: none;
+
+  z-index: $zindex-popover;
+  transform: translateX(-50%);
+  left: 50%;
+  bottom: 0;
+
+
+  > :not(:last-child) {
+    margin-bottom: $toast-spacing;
+  }
+}
+
+.toast-body {
+  padding: $toast-padding-x; // apply to both vertical and horizontal
+  word-wrap: break-word;
+}
+
+
+.toast > *:only-child {
+  display: flex;
+  align-items: center;
+  padding: $toast-padding-y $toast-padding-x;
+}
+
+.toast-body:not(:only-child) {
+  padding: 0 math.div($toast-padding-x, 2);
+}
diff --git a/assets/stylesheets/bootstrap/_variables.scss b/assets/stylesheets/bootstrap/_variables.scss
@@ -92,6 +92,10 @@ $font-size-h6:            $font-size-base !default;
 $font-size-scale:         0.85;
 $browser-context: $font-size-base !default;
 
+$global-weight-light: 300 !default;
+$global-weight-normal: 400 !default;
+$global-weight-bold: 700 !default;
+
 //** Unit-less `line-height` for use in components like buttons.
 $line-height-base:        1.6 !default; // 20/13
 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@@ -848,3 +852,14 @@ $dl-horizontal-breakpoint:    $grid-float-breakpoint !default;
 //** Horizontal line color.
 $hr-border:                   $gray300 !default;
 $hr-border--well:             $gray400 !default;
+
+$toast-padding-x: 1.5em;
+$toast-padding-y: .75em;
+$toast-font-size: 1.09375rem;
+$toast-background-color: #a4d1ea;
+$toast-border-color:                rgba($black, .1) !default;
+$toast-color: $black;
+$toast-border-radius: 2rem;
+$toast-box-shadow: 0;
+$toast-border-width: 0;
+$toast-max-width: 100%;
diff --git a/dist/app.css b/dist/app.css
diff --git a/dist/app.css.map b/dist/app.css.map
diff --git a/index.html b/index.html
@@ -5,8 +5,15 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Kitchen Sink | Talis</title>
+  <title>Bootstrap v3 Kitchen Sink | Talis</title>
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+
+  <link
+  href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
+  rel="stylesheet"
+/>
+<script src="https://kit.fontawesome.com/1f723026cf.js" crossorigin="anonymous"></script>
+
   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="dist/app.css">
   <script defer type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
@@ -941,6 +948,34 @@ <h2>Details/Summary </h2>
     </section>
 
 
+    <section class="row">
+      <div class="col-xs-12">
+        <button type="button" class="btn btn-primary btn-lg js-btn-toast">
+          Display a toast
+        </button>
+
+        <div style="position: relative;" role="alert" aria-live="assertive" aria-atomic="true">
+          <div class="toast-container">
+            <div class="toast">
+              <div>
+                <i class="fal fa-spinner-third fa-spin fa-fw"></i>
+                <span class="toast-body">Hello, world! This is a toast message.</span>
+                <button type="button" class="btn-close" data-bs-dismiss="toast">Close</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <script>
+            var toast = document.querySelector('.toast');
+
+          document.querySelector(".js-btn-toast").addEventListener("click", () => {
+            toast.classList.add('show')
+          });
+        </script>
+      </div>
+    </section>
+
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
       <div class="modal-dialog">
         <div class="modal-content">