CodePen Embed - Bootstrap 4.3.1 — KonKon Theme, Toast Notifications (Gritter update 2019)


<div id="btn_list" style="padding: 20px;">
   <button id="showall" class="btn btn-primary">Show All</button>
   <div id="n_pos" class="mt-4">
      <button id="show_default" class="btn btn-secondary" data-position="">Top Right</button>
      <button id="show_bottom_right" class="btn btn-secondary" data-position="bottom-right">Bottom Right</button>
      <button id="show_top_left" class="btn btn-secondary" data-position="top-left">Top Left</button>
      <button id="show_bottom_left" class="btn btn-secondary" data-position="bottom-left">Bottom Left</button>
   </div>
</div>

<div id="toast_wrapper" class="toast-wrapper">




      <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
         <div class="toast-header">
            <span class="mr-2"><i class="icon zmdi zmdi-rss"></i></span>
            <strong class="mr-auto">Default Bootstrap Notification</strong>
            <small>11 mins ago</small>
            <button type="button" class="ml-2 close" data-dismiss="toast" aria-label="Close">
               <span aria-hidden="true"><i class="zmdi zmdi-close"></i></span>
            </button>
         </div>
         <div class="toast-body">Hello, world! This is a toast message.</div>
      </div>
   
      <div class="toast toast-youtube" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
         <div class="toast-img-container">
            <svg class="toast-image" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve"><g><path style="fill:#fff;" d="M490.24,113.92c-13.888-24.704-28.96-29.248-59.648-30.976C399.936,80.864,322.848,80,256.064,80 c-66.912,0-144.032,0.864-174.656,2.912c-30.624,1.76-45.728,6.272-59.744,31.008C7.36,138.592,0,181.088,0,255.904 C0,255.968,0,256,0,256c0,0.064,0,0.096,0,0.096v0.064c0,74.496,7.36,117.312,21.664,141.728 c14.016,24.704,29.088,29.184,59.712,31.264C112.032,430.944,189.152,432,256.064,432c66.784,0,143.872-1.056,174.56-2.816 c30.688-2.08,45.76-6.56,59.648-31.264C504.704,373.504,512,330.688,512,256.192c0,0,0-0.096,0-0.16c0,0,0-0.064,0-0.096 C512,181.088,504.704,138.592,490.24,113.92z"></path><polygon style="fill:#ef4e41;" points="192,352 192,160 352,256   "></polygon></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
         </div>
         <div class="toast-content toast-with-image">
            <a class="toast-close" href="#" data-dismiss="toast" aria-label="Close">
               <span aria-hidden="true">Close Notification</span>
            </a>
            <span class="toast-title"><b>yomatsuoka</b> replied:</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing eli...</p>
            <small>11 mins ago</small>
         </div>
      </div>
   
      <div class="toast toast-twitter" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
         <div class="toast-img-container">
            <svg class="toast-image" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve"><path style="fill:#ffffff;" d="M512,97.248c-19.04,8.352-39.328,13.888-60.48,16.576c21.76-12.992,38.368-33.408,46.176-58.016 c-20.288,12.096-42.688,20.64-66.56,25.408C411.872,60.704,384.416,48,354.464,48c-58.112,0-104.896,47.168-104.896,104.992 c0,8.32,0.704,16.32,2.432,23.936c-87.264-4.256-164.48-46.08-216.352-109.792c-9.056,15.712-14.368,33.696-14.368,53.056 c0,36.352,18.72,68.576,46.624,87.232c-16.864-0.32-33.408-5.216-47.424-12.928c0,0.32,0,0.736,0,1.152 c0,51.008,36.384,93.376,84.096,103.136c-8.544,2.336-17.856,3.456-27.52,3.456c-6.72,0-13.504-0.384-19.872-1.792 c13.6,41.568,52.192,72.128,98.08,73.12c-35.712,27.936-81.056,44.768-130.144,44.768c-8.608,0-16.864-0.384-25.12-1.44 C46.496,446.88,101.6,464,161.024,464c193.152,0,298.752-160,298.752-298.688c0-4.64-0.16-9.12-0.384-13.568 C480.224,136.96,497.728,118.496,512,97.248z"/><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
         </div>
         <div class="toast-content toast-with-image">
            <a class="toast-close" href="#" data-dismiss="toast" aria-label="Close">
               <span aria-hidden="true">Close Notification</span>
            </a>
            <span class="toast-title"><b>Yuta Oomiya</b> liked your reply</span>
            <p>生あ三失イトコ出確位そ就減エトシコ任29父注フ析81傷宮13傷宮。。。</p>
            <small>20 mins ago</small>
         </div>
      </div>
   
      <div class="toast toast-facebook" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
         <div class="toast-img-container">
            <svg class="toast-image" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 155.139 155.139" style="enable-background:new 0 0 155.139 155.139;" xml:space="preserve"><g><path id="f_1_" style="fill:#ffffff;" d="M89.584,155.139V84.378h23.742l3.562-27.585H89.584V39.184 c0-7.984,2.208-13.425,13.67-13.425l14.595-0.006V1.08C115.325,0.752,106.661,0,96.577,0C75.52,0,61.104,12.853,61.104,36.452 v20.341H37.29v27.585h23.814v70.761H89.584z"/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
         </div>
         <div class="toast-content toast-with-image">
            <a class="toast-close" href="#" data-dismiss="toast" aria-label="Close">
               <span aria-hidden="true">Close Notification</span>
            </a>
            <span class="toast-title">Message from <b>Facebook</b></span>
            <p>We've noticed an unusual login from a device or location you don't usu...</p>
            <small>2 hours ago</small>
         </div>
      </div>
   
      <div class="toast toast-konkon" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
         <div class="toast-content toast-without-image">
            <a class="toast-close" href="#" data-dismiss="toast" aria-label="Close">
               <span aria-hidden="true">Close Notification</span>
            </a>
            <span class="toast-title">Message from <b>Studio KonKon</b></span>
            <p>As I spend a lot of time working and away from home, I've began to use CodePen as a base for codi...</p>
            <small>21 days ago</small>
         </div>
      </div>

   </div>

// Based on: https://github.com/jboesch/Gritter (last updated: 13 Sep 2013)
// Bootstrap 4.3.1 — KonKon Theme (Updated: 12 Jun 2019)

// Bootstrap 4 SCSS
$white:                     #fff !default;
$gray-900:                  #212529 !default;
$yiq-text-dark:             $gray-900 !default;
$yiq-text-light:            #fff !default;
$yiq-contrasted-threshold:  150 !default;

// Color contrast
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
   $r: red($color);
   $g: green($color);
   $b: blue($color);

   $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

   @if ($yiq >= $yiq-contrasted-threshold) {
      @return $dark;
   } @else {
      @return $light;
   }
}

$dark-color:          #343b42;
$black-color:           #24292e;
$light-color:           #ffffff;

small, .small
{
   font-size: 85%;
}

//
// Our code begins
//

$notification-width:    360px;
$notification-y:        20px;
$notification-x:        20px;
$icons-font:            "Material-Design-Iconic-Font";

.toast-wrapper
{
   display: inline-block;
   width: $notification-width;
   top: $notification-y;
  right: $notification-x;
   position: fixed;
  z-index: 9999;
   margin: 0;
   
   &.top-left {
      left: $notification-x;
      right: auto;
   }
   
   &.bottom-right {
      top: auto;
      left: auto;
      bottom: 20px;
      right: 20px;
   }
   
   &.bottom-left {
      top: auto;
      right: auto;
      bottom: 20px;
      left: 20px;
   }
   
   > .toast
   {
      max-width: 100%; // Fixes right auto margin issue
   }
}

.toast
{
   position: relative;
   
   .toast-img-container
   {
      display: table-cell;
      width: 26%;
      vertical-align: middle;
      text-align: center;
      background-color: darken($dark-color, 5%);

      .toast-image
      {
         width: 48px;
         height: 48px;
      }
   }
   
   .toast-content
   {
      width: auto;

      &.toast-with-image,
      &.toast-without-image
      {
         display: table-cell;
         padding: 15px 35px 17px 15px;
      }
      
      &.toast-with-image
      {
         width: 267px;
      }
      
      &.toast-without-image
      {
         border-left: 0;
      }

      .toast-close
      {
         display: block;
         position: absolute;
         top: 0;
         right: 0;
         left: auto;
         height: 30px;
         width: 30px;
         cursor: pointer;
         font-size: 0;
         background: 0 0;
         text-indent: inherit;
         opacity: 0.7;

         &:hover
         {
            opacity: 1;
         }

         &:after
         {
            content: '\f136';
            font-family: $icons-font;
            color: $light-color;
            font-size: 1.538rem;
            text-shadow: none;
            line-height: 35px;
            margin-left: 7px;
            color: #222;
         }
      }
      
      .toast-title
      {
         display: block;
         font-size: 1.308rem;
         padding: 0 0 7px 0;
      }
      
      p
      {
         padding: 0;
         margin: 0;
         font-size: .9231rem;
         line-height: 19px;
      }
   }
}





// ---

// Social colours
$facebook:       #5d82d1;
$twitter:        #50bff5;
$google-plus:    #eb5e4c;
$dribbble:       #f7659c;
$youtube:        #ef4e41;
$flickr:         #0063dc;
$linkedin:       #238cc8;
$pinterest:      #e13138;
$github:         $black-color;
$tumblr:         #426d9b;
$evernote:       #2DBE60;
$dropbox:        #007EE5;
$stack-overflow: #fe7a15;
$codepen:        #24292e;

$social-colors: ();
$social-colors: map-merge(
  (
    "facebook":       $facebook,
    "twitter":        $twitter,
    "google-plus":    $google-plus,
    "dribbble":       $dribbble,
    "youtube":        $youtube,
    "flickr":         $flickr,
    "linkedin":       $linkedin,
    "pinterest":      $pinterest,
    "github":         $github,
    "tumblr":         $tumblr,
    "evernote":       $evernote,
    "dropbox":        $dropbox,
    "stack-overflow": $stack-overflow,
    "codepen":        $codepen,
     "konkon":        #fe669e
  ),
  $social-colors
);

@mixin toast-colour($parent, $bg-color, $text-color: null)
{
   .toast#{$parent}
   {
      background-color: $bg-color;

      .toast-img-container
      {
         background-color: darken($bg-color, 3%);
      }
      
      // Prevent generating unnecessary rules and save space by using inherited text color
      @if not($text-color) and color-yiq($bg-color, #000000, #ffffff) == #ffffff
      {
         .toast-content,
         .toast-close:after
         {
            color: #fff;
         }
      }
      @else if $text-color != null
      {
         .toast-content,
         .toast-close:after
         {
            color: $text-color;
         }
      }
   }
}


@include toast-colour(".toast-youtube", map-get($social-colors, "youtube"));
@include toast-colour(".toast-twitter", map-get($social-colors, "twitter"), #fff);
@include toast-colour(".toast-facebook", map-get($social-colors, "facebook"));
@include toast-colour(".toast-konkon", map-get($social-colors, "konkon"), #fff);

//@each $social-colors, $social-color in $social-colors
//{
//   @include toast-colour(".toast-#{$social-colors}", $social-color);
//}

View Compiled

console.clear();
"use strict";

$(".toast").toast('show');

$("#showall").on("click", function() {
   $(".toast").toast('show');
});

$("#n_pos .btn").on("click", function(e) {
   var $this = $(this),
       $class = $this.attr("data-position"),
       $toast_wrapper = $("#toast_wrapper"),
       $btn_list = $("#btn_list");
   
   $class = (typeof($class) != undefined) ? $class : "";
   
   $btn_list.css({
      "text-align": ($class == "top-left" || $class == "bottom-left") ? "right" : "left"
   });
   
   $toast_wrapper.removeClass("top-left bottom-right bottom-left").addClass($class);
});

This Pen is owned by Studio KonKon on CodePen.

See more by @StudioKonKon on CodePen

External CSS

External JavaScript