First version of snackbarjs.

This commit is contained in:
Federico Zivolo 2014-08-20 17:00:55 +02:00
parent 0561821390
commit 724dacbcf5
21 changed files with 1988 additions and 36 deletions

View File

@ -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;
}

View File

@ -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

File diff suppressed because it is too large Load Diff

View File

@ -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";

View File

@ -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;
}

View 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 );