mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-29 04:54:12 +03:00
First version of snackbarjs.
This commit is contained in:
Federico Zivolo
parent
56b9e1b68c
commit
d094bac0fb
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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="material.css" rel="stylesheet">
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.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>
|
||||
1728
less/material.css
Normal file
1728
less/material.css
Normal file
File diff suppressed because it is too large
Load Diff
|
|
@ -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";
|
||||
|
|
@ -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;
|
||||
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 {
|
||||
|
||||
.snackbar.toast {
|
||||
border-radius: 200px;
|
||||
}
|
||||
129
scripts/material-snackbar.js
Normal file
129
scripts/material-snackbar.js
Normal file
|
|
@ -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 );
|
||||
Loading…
Reference in New Issue
Block a user