First version of snackbarjs.

css-compiled/material.css

@@ -118,7 +118,7 @@ h6,
   background-color: #0f9d58;
 }
 .btn-info:not(.btn-link) {
-  background-color: #3498db;
+  background-color: #03a9f4;
 }
 .btn-warning:not(.btn-link) {
   background-color: #ff5722;
@@ -209,7 +209,7 @@ h6,
   background-color: #0f9d58;
 }
 .open > .dropdown-toggle.btn-info {
-  background-color: #3498db;
+  background-color: #03a9f4;
 }
 .open > .dropdown-toggle.btn-warning {
   background-color: #ff5722;
@@ -414,7 +414,7 @@ h6,
   color: #0f9d58;
 }
 .checkbox-info .check {
-  color: #3498db;
+  color: #03a9f4;
 }
 .checkbox-warning .check {
   color: #ff5722;
@@ -498,7 +498,7 @@ h6,
   background-color: #0f9d58;
 }
 .checkbox-info input[type=checkbox]:checked ~ .ripple {
-  background-color: #3498db;
+  background-color: #03a9f4;
 }
 .checkbox-warning input[type=checkbox]:checked ~ .ripple {
   background-color: #ff5722;
@@ -620,7 +620,7 @@ h6,
   background-color: #0f9d58;
 }
 .radio-info input[type=radio]:checked ~ .check {
-  background-color: #3498db;
+  background-color: #03a9f4;
 }
 .radio-warning input[type=radio]:checked ~ .check {
   background-color: #ff5722;
@@ -690,7 +690,7 @@ h6,
   border-color: #0f9d58;
 }
 .radio-info input[type=radio]:checked ~ .circle {
-  border-color: #3498db;
+  border-color: #03a9f4;
 }
 .radio-warning input[type=radio]:checked ~ .circle {
   border-color: #ff5722;
@@ -887,15 +887,15 @@ h6,
 }
 .form-group.has-info .material-input:before,
 .form-group.has-info input.form-control:focus ~ .material-input:after {
-  background: #3498db;
+  background: #03a9f4;
 }
 .form-group.has-info .control-label,
 .form-group.has-info input.form-control:focus ~ .floating-label {
-  color: #3498db;
+  color: #03a9f4;
 }
 .form-group .material-input:before,
 .form-group-default .material-input:before {
-  background-color: #4d4d4d;
+  background-color: #3f51b5;
 }
 .form-group-primary .material-input:before {
   background-color: #4285f4;
@@ -904,7 +904,7 @@ h6,
   background-color: #0f9d58;
 }
 .form-group-info .material-input:before {
-  background-color: #3498db;
+  background-color: #03a9f4;
 }
 .form-group-warning .material-input:before {
   background-color: #ff5722;
@@ -965,7 +965,7 @@ h6,
 }
 .form-group input.form-control:focus ~ .material-input:after,
 .form-group-default input.form-control:focus ~ .material-input:after {
-  background-color: #4d4d4d;
+  background-color: #3f51b5;
 }
 .form-group-primary input.form-control:focus ~ .material-input:after {
   background-color: #4285f4;
@@ -974,7 +974,7 @@ h6,
   background-color: #0f9d58;
 }
 .form-group-info input.form-control:focus ~ .material-input:after {
-  background-color: #3498db;
+  background-color: #03a9f4;
 }
 .form-group-warning input.form-control:focus ~ .material-input:after {
   background-color: #ff5722;
@@ -1044,7 +1044,7 @@ h6,
   color: #0f9d58;
 }
 .form-group-info .control-label {
-  color: #3498db;
+  color: #03a9f4;
 }
 .form-group-warning .control-label {
   color: #ff5722;
@@ -1105,7 +1105,7 @@ h6,
 }
 .form-group input.form-control:focus ~ .floating-label,
 .form-group-default input.form-control:focus ~ .floating-label {
-  color: #4d4d4d;
+  color: #3f51b5;
 }
 .form-group-primary input.form-control:focus ~ .floating-label {
   color: #4285f4;
@@ -1114,7 +1114,7 @@ h6,
   color: #0f9d58;
 }
 .form-group-info input.form-control:focus ~ .floating-label {
-  color: #3498db;
+  color: #03a9f4;
 }
 .form-group-warning input.form-control:focus ~ .floating-label {
   color: #ff5722;
@@ -1380,7 +1380,7 @@ fieldset[disabled] .navbar .btn-link:focus {
   background-color: #0f9d58;
 }
 .navbar-info {
-  background-color: #3498db;
+  background-color: #03a9f4;
 }
 .navbar-warning {
   background-color: #ff5722;
@@ -1475,7 +1475,7 @@ fieldset[disabled] .navbar .btn-link:focus {
   background-color: #0f9d58;
 }
 .alert-info {
-  background-color: #3498db;
+  background-color: #03a9f4;
 }
 .alert-warning {
   background-color: #ff5722;
@@ -1564,7 +1564,7 @@ fieldset[disabled] .navbar .btn-link:focus {
   background-color: #0f9d58;
 }
 .progress .progress-bar-info {
-  background-color: #3498db;
+  background-color: #03a9f4;
 }
 .progress .progress-bar-warning {
   background-color: #ff5722;
@@ -1636,7 +1636,7 @@ fieldset[disabled] .navbar .btn-link:focus {
   color: #0f9d58;
 }
 .text-info {
-  color: #3498db;
+  color: #03a9f4;
 }
 .nav-tabs {
   background: #4285f4;
@@ -1663,3 +1663,66 @@ fieldset[disabled] .navbar .btn-link:focus {
 .nav-tabs > li.disabled > a:hover {
   color: rgba(255, 255, 255, 0.5);
 }
+.popover,
+.tooltip-inner {
+  background: #323232;
+  color: #FFF;
+  border-radius: 2px;
+}
+.tooltip,
+.tooltip.in {
+  opacity: 1;
+}
+.popover.left .arrow:after,
+.tooltip.left .arrow:after,
+.popover.left .tooltip-arrow,
+.tooltip.left .tooltip-arrow {
+  border-left-color: #323232;
+}
+.popover.right .arrow:after,
+.tooltip.right .arrow:after,
+.popover.right .tooltip-arrow,
+.tooltip.right .tooltip-arrow {
+  border-right-color: #323232;
+}
+.popover.top .arrow:after,
+.tooltip.top .arrow:after,
+.popover.top .tooltip-arrow,
+.tooltip.top .tooltip-arrow {
+  border-top-color: #323232;
+}
+.popover.bottom .arrow:after,
+.tooltip.bottom .arrow:after,
+.popover.bottom .tooltip-arrow,
+.tooltip.bottom .tooltip-arrow {
+  border-bottom-color: #323232;
+}
+.snackbar {
+  display: inline-block;
+  position: fixed;
+  z-index: 99999;
+  left: 20px;
+  bottom: 0;
+  min-width: 288px;
+  max-width: 568px;
+  padding: 14px 15px;
+  margin-bottom: 20px;
+  color: #ffffff;
+  font-size: 14px;
+  background-color: #323232;
+  border-radius: 2px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  opacity: 0;
+  -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in;
+  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in;
+  -webkit-transform: translateY(200%);
+  transform: translateY(200%);
+}
+.snackbar.snackbar-opened {
+  opacity: 1;
+  -webkit-transform: none;
+  transform: none;
+}
+.snackbar.toast {
+  border-radius: 200px;
+}

demo/index.html

@@ -3,14 +3,16 @@
     <head>
         <meta charset="utf-8">
         <title>Bootstrap Material</title>
-        <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet">
+        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
-        <link href="material.css" rel="stylesheet">
+        <link href="../css-compiled/material.css" rel="stylesheet">
         <style>
             body{padding-top:50px}#banner{border-bottom:none}.page-header h1{font-size:4em}.bs-docs-section{margin-top:8em}.bs-component{position:relative}.bs-component .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-component .modal-dialog{width:90%}.bs-component .popover{position:relative;display:inline-block;width:220px;margin:20px}#source-button{position:absolute;top:0;right:0;z-index:100;font-weight:bold;padding: 5px 10px;}.progress{margin-bottom:10px}footer{margin:5em 0}footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}footer p{clear:left;margin-bottom:0}.splash{padding:4em 0 0;background-color:#141d27;color:#fff;text-align:center}.splash h1{font-size:4em}.splash #social{margin:2em 0}.splash .alert{margin:2em 0}.section-tout{padding:4em 0 3em;border-bottom:1px solid rgba(0,0,0,0.05);background-color:#eaf1f1}.section-tout .fa{margin-right:.5em}.section-tout p{margin-bottom:3em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1}.section-preview .preview .image{position:relative}.section-preview .preview .image:before{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);position:absolute;top:0;left:0;width:100%;height:100%;content:"";pointer-events:none}.section-preview .preview .options{padding:1em 2em 2em;border:1px solid rgba(0,0,0,0.05);border-top:none;text-align:center}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width:767px){.section-preview .image img{width:100%}}.sponsor{text-align:center}.sponsor a:hover{text-decoration:none}@media (max-width:767px){#banner{margin-bottom:2em;text-align:center}}
         </style>
     </head>
     <body>
 
+        <a href="https://github.com/FezVrasta/bootstrap-material-design"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
+
         <div class="container">
 
             <div class="page-header" id="banner">
@@ -1221,6 +1223,16 @@
                         </div>
                     </div>
                 </div>
+                <div class="row">
+                    <div class="col-lg-6">
+                        <h2>Toastr</h2>
+                        <div class="bs-component">
+                            <button type="button" class="btn btn-default" data-content="This is a snackbar! Lorem lipsum dolor sit amet..." data-toggle="snackbar">Show snackbar</button>
+
+                            <button type="button" class="btn btn-default" data-style="toast" data-content="This is a toast! Lorem lipsum dolor sit amet..." data-toggle="snackbar">Show snackbar</button>
+                        </div>
+                    </div>
+                </div>
             </div>
 
             <div id="source-modal" class="modal fade">
@@ -1240,7 +1252,7 @@
         <br>
 
         <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
-        <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
+        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
         <script>
             (function(){
 
@@ -1286,6 +1298,7 @@
             })();
 
         </script>
-        <script src="material.js?v0.0.1"></script>
+        <script src="../scripts/material.js"></script>
+        <script src="../scripts/material-snackbar.js"></script>
     </body>
 </html>

less/material.less

@@ -1,4 +1,4 @@
-// out: material.css
+// out: ../css-compiled/material.css
 // Material Theme 0.0.1
 // -----------------------------------------------------
 
@@ -123,3 +123,5 @@ legend {
 }
 
 @import "tabs.less";
+
+@import "popups.less";

less/popups.less

@@ -29,21 +29,38 @@
 // Support for toastr plugin (in material they are snackbars)
 // http://codeseven.github.io/toastr/
 
-#toast-container > div {
+.snackbar {
+    display: inline-block;
+    position: fixed;
+    z-index: 99999;
+    left: 20px;
+    bottom: 0;
+    min-width: 288px;
+    max-width: 568px;
+    padding: 14px 15px;
+    margin-bottom: 20px;
+
+    color: @darkbg-text;
+    font-size: 14px;
     background-color: #323232;
-    .shadow-z-1;
     border-radius: 2px;
+    .shadow-z-1;
+
+    opacity: 0;
+    -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in;
+    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in;
+
+    -webkit-transform: translateY(200%);
+    transform: translateY(200%);
+
+}
+
+.snackbar.snackbar-opened {
     opacity: 1;
-    color: @darkbg-text;
+    -webkit-transform: none;
+    transform: none;
 }
-.toast-close-button:hover, .toast-close-button:focus {
+
-    color: @darkbg-text;
+.snackbar.toast {
-    opacity: 1;
-}
-#toast-container.toast-top-full-width > div, #toast-container.toast-bottom-full-width > div {
-    width: 100%;
-    border-radius: 0;
-}
-#toast-container.rounded > div {
     border-radius: 200px;
 }

scripts/material-snackbar.js

@@ -0,0 +1,129 @@
+// Material Snackbar plugin - generates snackbars and toasts
+
+/* globals jQuery */
+
+var snackbars = [];
+
+(function( $ ){
+
+    $(document).ready(function() {
+        $("body").append("<div/>").attr("id", "snackbar-container");
+    });
+
+    function isset(variable) {
+        if (typeof variable !== "undefined" && variable !== null) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    $(document).on("click", "[data-toggle=snackbar]", function() {
+        $(this).snackbar("toggle");
+    });
+
+    $.snackbar = function(options) {
+
+        if (isset(options) && options === Object(options)) {
+            var $snackbar;
+
+            if (!isset(options.id)) {
+                $snackbar = $("<div/>").attr("id", "snackbar" + Date.now()).attr("class", "snackbar");
+            } else {
+                $snackbar = $("#" + options.id);
+            }
+
+            var snackbarStatus = $snackbar.hasClass("snackbar-opened");
+
+            if (isset(options.style)) {
+                $snackbar.attr("class", "snackbar " + options.style);
+            } else {
+                $snackbar.attr("class", "snackbar");
+            }
+
+            options.autohide = (isset(options.autohide)) ? options.autohide : 3000;
+
+            if (isset(options.content)) {
+                if ($snackbar.find(".snackbar-content").length) {
+                    $snackbar.find(".snackbar-content").text(options.content);
+                } else {
+                    $snackbar.prepend("<span class=snackbar-content>" + options.content + "</span>");
+                }
+            }
+
+            if (!isset(options.id)) {
+                $snackbar.appendTo("#snackbar-container");
+            }
+
+            // Show or hide item
+            if (isset(options.action) && options.action == "toggle") {
+                if (snackbarStatus) {
+                    options.action = "hide";
+                } else {
+                    options.action = "show";
+                }
+            }
+
+            var animationId1 = Date.now();
+            $snackbar.data("animationId1", animationId1);
+            setTimeout(function() {
+                if ($snackbar.data("animationId1") === animationId1) {
+                    if (!isset(options.action) || options.action == "show") {
+                        var offset = 20;
+                        console.log($(".snackbar-opened").length);
+                        if ($(".snackbar-opened").length) {
+                            offset = $(".snackbar-opened:last").offset().top - $(window).scrollTop();
+                            console.log(offset);
+                        }
+                        $snackbar.addClass("snackbar-opened").css("bottom", offset);
+                    } else if (isset(options.action) && options.action == "hide") {
+                        $snackbar.removeClass("snackbar-opened");
+                    }
+                }
+            }, 50);
+
+            // Set timer for item autohide
+            var animationId2 = Date.now();
+            $snackbar.data("animationId2", animationId2);
+
+            if (options.authide !== 0) {
+                setTimeout(function() {
+                    if ($snackbar.data("animationId2") === animationId2) {
+                        $snackbar.removeClass("snackbar-opened");
+                    }
+                }, options.autohide);
+            }
+
+            return $snackbar;
+
+        } else {
+            return false;
+        }
+    };
+
+    $.fn.snackbar = function(action) {
+
+        var options;
+
+        if (!isset(action) || action === "show" || action === "hide" || action == "toggle") {
+            options = {
+                content: $(this).attr("data-content"),
+                style: $(this).attr("data-style")
+            };
+        }
+
+        if (isset(action)) {
+            options.id = this.attr("data-snackbar-id");
+
+            if(action === "show" || action === "hide" || action == "toggle") {
+                options.action = action;
+            }
+        }
+
+        var $snackbar = $.snackbar(options);
+        this.attr("data-snackbar-id", $snackbar.attr("id"));
+
+        return $snackbar;
+
+    };
+})( jQuery );