Skip to content

Commit 724dacb

Browse files
author
Federico Zivolo
committed
First version of snackbarjs.
1 parent 0561821 commit 724dacb

21 files changed

Lines changed: 1987 additions & 35 deletions

material.css renamed to css-compiled/material.css

Lines changed: 82 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ h6,
118118
background-color: #0f9d58;
119119
}
120120
.btn-info:not(.btn-link) {
121-
background-color: #3498db;
121+
background-color: #03a9f4;
122122
}
123123
.btn-warning:not(.btn-link) {
124124
background-color: #ff5722;
@@ -209,7 +209,7 @@ h6,
209209
background-color: #0f9d58;
210210
}
211211
.open > .dropdown-toggle.btn-info {
212-
background-color: #3498db;
212+
background-color: #03a9f4;
213213
}
214214
.open > .dropdown-toggle.btn-warning {
215215
background-color: #ff5722;
@@ -414,7 +414,7 @@ h6,
414414
color: #0f9d58;
415415
}
416416
.checkbox-info .check {
417-
color: #3498db;
417+
color: #03a9f4;
418418
}
419419
.checkbox-warning .check {
420420
color: #ff5722;
@@ -498,7 +498,7 @@ h6,
498498
background-color: #0f9d58;
499499
}
500500
.checkbox-info input[type=checkbox]:checked ~ .ripple {
501-
background-color: #3498db;
501+
background-color: #03a9f4;
502502
}
503503
.checkbox-warning input[type=checkbox]:checked ~ .ripple {
504504
background-color: #ff5722;
@@ -620,7 +620,7 @@ h6,
620620
background-color: #0f9d58;
621621
}
622622
.radio-info input[type=radio]:checked ~ .check {
623-
background-color: #3498db;
623+
background-color: #03a9f4;
624624
}
625625
.radio-warning input[type=radio]:checked ~ .check {
626626
background-color: #ff5722;
@@ -690,7 +690,7 @@ h6,
690690
border-color: #0f9d58;
691691
}
692692
.radio-info input[type=radio]:checked ~ .circle {
693-
border-color: #3498db;
693+
border-color: #03a9f4;
694694
}
695695
.radio-warning input[type=radio]:checked ~ .circle {
696696
border-color: #ff5722;
@@ -887,15 +887,15 @@ h6,
887887
}
888888
.form-group.has-info .material-input:before,
889889
.form-group.has-info input.form-control:focus ~ .material-input:after {
890-
background: #3498db;
890+
background: #03a9f4;
891891
}
892892
.form-group.has-info .control-label,
893893
.form-group.has-info input.form-control:focus ~ .floating-label {
894-
color: #3498db;
894+
color: #03a9f4;
895895
}
896896
.form-group .material-input:before,
897897
.form-group-default .material-input:before {
898-
background-color: #4d4d4d;
898+
background-color: #3f51b5;
899899
}
900900
.form-group-primary .material-input:before {
901901
background-color: #4285f4;
@@ -904,7 +904,7 @@ h6,
904904
background-color: #0f9d58;
905905
}
906906
.form-group-info .material-input:before {
907-
background-color: #3498db;
907+
background-color: #03a9f4;
908908
}
909909
.form-group-warning .material-input:before {
910910
background-color: #ff5722;
@@ -965,7 +965,7 @@ h6,
965965
}
966966
.form-group input.form-control:focus ~ .material-input:after,
967967
.form-group-default input.form-control:focus ~ .material-input:after {
968-
background-color: #4d4d4d;
968+
background-color: #3f51b5;
969969
}
970970
.form-group-primary input.form-control:focus ~ .material-input:after {
971971
background-color: #4285f4;
@@ -974,7 +974,7 @@ h6,
974974
background-color: #0f9d58;
975975
}
976976
.form-group-info input.form-control:focus ~ .material-input:after {
977-
background-color: #3498db;
977+
background-color: #03a9f4;
978978
}
979979
.form-group-warning input.form-control:focus ~ .material-input:after {
980980
background-color: #ff5722;
@@ -1044,7 +1044,7 @@ h6,
10441044
color: #0f9d58;
10451045
}
10461046
.form-group-info .control-label {
1047-
color: #3498db;
1047+
color: #03a9f4;
10481048
}
10491049
.form-group-warning .control-label {
10501050
color: #ff5722;
@@ -1105,7 +1105,7 @@ h6,
11051105
}
11061106
.form-group input.form-control:focus ~ .floating-label,
11071107
.form-group-default input.form-control:focus ~ .floating-label {
1108-
color: #4d4d4d;
1108+
color: #3f51b5;
11091109
}
11101110
.form-group-primary input.form-control:focus ~ .floating-label {
11111111
color: #4285f4;
@@ -1114,7 +1114,7 @@ h6,
11141114
color: #0f9d58;
11151115
}
11161116
.form-group-info input.form-control:focus ~ .floating-label {
1117-
color: #3498db;
1117+
color: #03a9f4;
11181118
}
11191119
.form-group-warning input.form-control:focus ~ .floating-label {
11201120
color: #ff5722;
@@ -1380,7 +1380,7 @@ fieldset[disabled] .navbar .btn-link:focus {
13801380
background-color: #0f9d58;
13811381
}
13821382
.navbar-info {
1383-
background-color: #3498db;
1383+
background-color: #03a9f4;
13841384
}
13851385
.navbar-warning {
13861386
background-color: #ff5722;
@@ -1475,7 +1475,7 @@ fieldset[disabled] .navbar .btn-link:focus {
14751475
background-color: #0f9d58;
14761476
}
14771477
.alert-info {
1478-
background-color: #3498db;
1478+
background-color: #03a9f4;
14791479
}
14801480
.alert-warning {
14811481
background-color: #ff5722;
@@ -1564,7 +1564,7 @@ fieldset[disabled] .navbar .btn-link:focus {
15641564
background-color: #0f9d58;
15651565
}
15661566
.progress .progress-bar-info {
1567-
background-color: #3498db;
1567+
background-color: #03a9f4;
15681568
}
15691569
.progress .progress-bar-warning {
15701570
background-color: #ff5722;
@@ -1636,7 +1636,7 @@ fieldset[disabled] .navbar .btn-link:focus {
16361636
color: #0f9d58;
16371637
}
16381638
.text-info {
1639-
color: #3498db;
1639+
color: #03a9f4;
16401640
}
16411641
.nav-tabs {
16421642
background: #4285f4;
@@ -1663,3 +1663,66 @@ fieldset[disabled] .navbar .btn-link:focus {
16631663
.nav-tabs > li.disabled > a:hover {
16641664
color: rgba(255, 255, 255, 0.5);
16651665
}
1666+
.popover,
1667+
.tooltip-inner {
1668+
background: #323232;
1669+
color: #FFF;
1670+
border-radius: 2px;
1671+
}
1672+
.tooltip,
1673+
.tooltip.in {
1674+
opacity: 1;
1675+
}
1676+
.popover.left .arrow:after,
1677+
.tooltip.left .arrow:after,
1678+
.popover.left .tooltip-arrow,
1679+
.tooltip.left .tooltip-arrow {
1680+
border-left-color: #323232;
1681+
}
1682+
.popover.right .arrow:after,
1683+
.tooltip.right .arrow:after,
1684+
.popover.right .tooltip-arrow,
1685+
.tooltip.right .tooltip-arrow {
1686+
border-right-color: #323232;
1687+
}
1688+
.popover.top .arrow:after,
1689+
.tooltip.top .arrow:after,
1690+
.popover.top .tooltip-arrow,
1691+
.tooltip.top .tooltip-arrow {
1692+
border-top-color: #323232;
1693+
}
1694+
.popover.bottom .arrow:after,
1695+
.tooltip.bottom .arrow:after,
1696+
.popover.bottom .tooltip-arrow,
1697+
.tooltip.bottom .tooltip-arrow {
1698+
border-bottom-color: #323232;
1699+
}
1700+
.snackbar {
1701+
display: inline-block;
1702+
position: fixed;
1703+
z-index: 99999;
1704+
left: 20px;
1705+
bottom: 0;
1706+
min-width: 288px;
1707+
max-width: 568px;
1708+
padding: 14px 15px;
1709+
margin-bottom: 20px;
1710+
color: #ffffff;
1711+
font-size: 14px;
1712+
background-color: #323232;
1713+
border-radius: 2px;
1714+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
1715+
opacity: 0;
1716+
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in;
1717+
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in;
1718+
-webkit-transform: translateY(200%);
1719+
transform: translateY(200%);
1720+
}
1721+
.snackbar.snackbar-opened {
1722+
opacity: 1;
1723+
-webkit-transform: none;
1724+
transform: none;
1725+
}
1726+
.snackbar.toast {
1727+
border-radius: 200px;
1728+
}

index.html renamed to demo/index.html

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@
33
<head>
44
<meta charset="utf-8">
55
<title>Bootstrap Material</title>
6-
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet">
7-
<link href="material.css" rel="stylesheet">
6+
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
7+
<link href="../css-compiled/material.css" rel="stylesheet">
88
<style>
99
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}}
1010
</style>
1111
</head>
1212
<body>
1313

14+
<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>
15+
1416
<div class="container">
1517

1618
<div class="page-header" id="banner">
@@ -1221,6 +1223,16 @@ <h2>Tooltips</h2>
12211223
</div>
12221224
</div>
12231225
</div>
1226+
<div class="row">
1227+
<div class="col-lg-6">
1228+
<h2>Toastr</h2>
1229+
<div class="bs-component">
1230+
<button type="button" class="btn btn-default" data-content="This is a snackbar! Lorem lipsum dolor sit amet..." data-toggle="snackbar">Show snackbar</button>
1231+
1232+
<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>
1233+
</div>
1234+
</div>
1235+
</div>
12241236
</div>
12251237

12261238
<div id="source-modal" class="modal fade">
@@ -1240,7 +1252,7 @@ <h4 class="modal-title">Source Code</h4>
12401252
<br>
12411253

12421254
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
1243-
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
1255+
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
12441256
<script>
12451257
(function(){
12461258

@@ -1286,6 +1298,7 @@ <h4 class="modal-title">Source Code</h4>
12861298
})();
12871299

12881300
</script>
1289-
<script src="material.js?v0.0.1"></script>
1301+
<script src="../scripts/material.js"></script>
1302+
<script src="../scripts/material-snackbar.js"></script>
12901303
</body>
12911304
</html>

README.md renamed to less/README.md

File renamed without changes.

alerts.less renamed to less/alerts.less

File renamed without changes.

animations.less renamed to less/animations.less

File renamed without changes.

buttons.less renamed to less/buttons.less

File renamed without changes.

checkboxes.less renamed to less/checkboxes.less

File renamed without changes.

inputs.less renamed to less/inputs.less

File renamed without changes.

0 commit comments

Comments
 (0)