mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-07-11 16:52:18 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into gh-pages

Browse Source 
Conflicts:
	dist/css/material-wfont.min.css
	dist/css/material.min.css
	template/material/css/material-wfont.min.css
	template/material/css/material.min.css
This commit is contained in:
FezVrasta 2014-10-17 13:06:31 +02:00
commit ff7f42fd76
29 changed files with 1852 additions and 1026 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
Gruntfile.js
View File

@ -18,6 +18,13 @@ module.exports = function(grunt) {
} }
}, },
githooks: {
all: {
// Will run the jshint and test:unit tasks at every commit
"pre-commit": "less autoprefixer cssmin uglify copy newer:jshint jasmine:scripts"
}
},
sass: { sass: {
compilesass: { compilesass: {
files: { files: {
@ -170,7 +177,7 @@ module.exports = function(grunt) {
}); });
grunt.registerTask("default", ["less", "autoprefixer", "cssmin", "uglify", "copy"]); grunt.registerTask("default", ["githooks", "less", "autoprefixer", "cssmin", "uglify", "copy"]);
grunt.registerTask("scss", ["sass", "autoprefixer", "cssmin", "uglify", "copy"]); grunt.registerTask("scss", ["sass", "autoprefixer", "cssmin", "uglify", "copy"]);

4
LICENSE.md
View File

@ -30,3 +30,7 @@ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details. GNU General Public License for more details.
This license could be edited in any moment without alert. This license could be edited in any moment without alert.
Here are listed the authorized individuals and companies and the specific of their licenses:
- **A*Star Education Ltd**: unlimited usage for websites and webapplications of the company.

708
dist/css/material-wfont.css vendored
View File

@ -1493,20 +1493,6 @@
.icon-material-web22:before { .icon-material-web22:before {
content: "\e7e9"; content: "\e7e9";
} }
@-webkit-keyframes input-highlight {
0% {
left: 20%;
width: 20%;
}
99% {
width: 0;
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes input-highlight { @keyframes input-highlight {
0% { 0% {
left: 20%; left: 20%;
@ -1559,10 +1545,14 @@ h6,
.h1, .h1,
.h2, .h2,
.h3, .h3,
.h4, .h4 {
.h5, font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
.h6 { font-weight: 300;
}
h5,
h6 {
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
} }
body .well, body .well,
.container .well, .container .well,
@ -1890,23 +1880,24 @@ body .jumbotron-material-lightgrey,
border: 0; border: 0;
margin: 10px 1px; margin: 10px 1px;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 2px;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
outline: none !important; outline: none !important;
} }
.btn:hover { .btn:hover:not(.btn-link):not(.btn-flat) {
color: rgba(255, 255, 255, 0.84);
}
.btn:hover:not(.btn-link) {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
} }
.btn:active:not(.btn-link) { .btn:active:not(.btn-link):not(.btn-flat) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
} }
.btn:disabled:not(.btn-link):not(.btn-flat) {
color: #a8a8a8 !important;
background-color: #eaeaea !important;
box-shadow: none;
}
.btn:not(.btn-link), .btn:not(.btn-link),
.btn-default:not(.btn-link) { .btn-default:not(.btn-link) {
background-color: transparent; background-color: transparent;
@ -1977,6 +1968,155 @@ body .jumbotron-material-lightgrey,
.btn-material-lightgrey:not(.btn-link) { .btn-material-lightgrey:not(.btn-link) {
background-color: #ececec; background-color: #ececec;
} }
.btn.btn-flat {
background: none;
box-shadow: none;
font-weight: 500;
}
.btn.btn-flat:disabled {
color: #a8a8a8 !important;
}
.btn.btn-flat.btn-primary {
color: #4285f4;
}
.btn.btn-flat.btn-success {
color: #0f9d58;
}
.btn.btn-flat.btn-info {
color: #03a9f4;
}
.btn.btn-flat.btn-warning {
color: #ff5722;
}
.btn.btn-flat.btn-danger {
color: #f44336;
}
.btn.btn-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn.btn-raised:active:not(.btn-link) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.btn.btn-fab {
margin: 0;
padding: 15px;
font-size: 26px;
width: 56px;
height: 56px;
}
.btn.btn-fab,
.btn.btn-fab:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.btn.btn-fab,
.btn.btn-fab:hover,
.btn.btn-fab-default,
.btn.btn-fab:hover-default {
background-color: transparent;
}
.btn.btn-fab-primary,
.btn.btn-fab:hover-primary {
background-color: #4285f4;
}
.btn.btn-fab-success,
.btn.btn-fab:hover-success {
background-color: #0f9d58;
}
.btn.btn-fab-info,
.btn.btn-fab:hover-info {
background-color: #03a9f4;
}
.btn.btn-fab-warning,
.btn.btn-fab:hover-warning {
background-color: #ff5722;
}
.btn.btn-fab-danger,
.btn.btn-fab:hover-danger {
background-color: #f44336;
}
.btn.btn-fab-material-red,
.btn.btn-fab:hover-material-red {
background-color: #f44336;
}
.btn.btn-fab-material-pink,
.btn.btn-fab:hover-material-pink {
background-color: #e91e63;
}
.btn.btn-fab-material-purple,
.btn.btn-fab:hover-material-purple {
background-color: #9c27b0;
}
.btn.btn-fab-material-deeppurple,
.btn.btn-fab:hover-material-deeppurple {
background-color: #673ab7;
}
.btn.btn-fab-material-indigo,
.btn.btn-fab:hover-material-indigo {
background-color: #3f51b5;
}
.btn.btn-fab-material-lightblue,
.btn.btn-fab:hover-material-lightblue {
background-color: #03a9f4;
}
.btn.btn-fab-material-cyan,
.btn.btn-fab:hover-material-cyan {
background-color: #00bcd4;
}
.btn.btn-fab-material-teal,
.btn.btn-fab:hover-material-teal {
background-color: #009688;
}
.btn.btn-fab-material-lightgreen,
.btn.btn-fab:hover-material-lightgreen {
background-color: #8bc34a;
}
.btn.btn-fab-material-lime,
.btn.btn-fab:hover-material-lime {
background-color: #cddc39;
}
.btn.btn-fab-material-lightyellow,
.btn.btn-fab:hover-material-lightyellow {
background-color: #ffeb3b;
}
.btn.btn-fab-material-orange,
.btn.btn-fab:hover-material-orange {
background-color: #ff9800;
}
.btn.btn-fab-material-deeporange,
.btn.btn-fab:hover-material-deeporange {
background-color: #ff5722;
}
.btn.btn-fab-material-grey,
.btn.btn-fab:hover-material-grey {
background-color: #9e9e9e;
}
.btn.btn-fab-material-bluegrey,
.btn.btn-fab:hover-material-bluegrey {
background-color: #607d8b;
}
.btn.btn-fab-material-brown,
.btn.btn-fab:hover-material-brown {
background-color: #795548;
}
.btn.btn-fab-material-lightgrey,
.btn.btn-fab:hover-material-lightgrey {
background-color: #ececec;
}
.btn.btn-fab,
.btn.btn-fab .ripple-wrapper {
border-radius: 100%;
}
.btn.btn-fab.btn-fab-mini {
width: 40px;
height: 40px;
padding: 13px;
font-size: 15px;
}
.btn.btn-fab i {
position: relative;
top: -5px;
}
.btn-link, .btn-link,
.btn:not([class^="btn btn-"]), .btn:not([class^="btn btn-"]),
.btn-default { .btn-default {
@ -1991,14 +2131,6 @@ body .jumbotron-material-lightgrey,
.btn-default:hover { .btn-default:hover {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
} }
.btn-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-raised:active:not(.btn-link) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.open > .dropdown-toggle.btn, .open > .dropdown-toggle.btn,
.open > .dropdown-toggle.btn-default { .open > .dropdown-toggle.btn-default {
background-color: transparent; background-color: transparent;
@ -2069,20 +2201,13 @@ body .jumbotron-material-lightgrey,
.open > .dropdown-toggle.btn-material-lightgrey { .open > .dropdown-toggle.btn-material-lightgrey {
background-color: #ececec; background-color: #ececec;
} }
.btn-flat {
box-shadow: none !important;
}
.btn-flat.btn-default:hover {
background: none;
}
.btn-group, .btn-group,
.btn-group-vertical { .btn-group-vertical {
position: relative; position: relative;
border-radius: 4px; border-radius: 2px;
margin: 10px 1px; margin: 10px 1px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
} }
.btn-group:active:not(.btn-link), .btn-group:active:not(.btn-link),
.btn-group-vertical:active:not(.btn-link) { .btn-group-vertical:active:not(.btn-link) {
@ -2095,8 +2220,7 @@ body .jumbotron-material-lightgrey,
.btn-group.btn-group-raised, .btn-group.btn-group-raised,
.btn-group-vertical.btn-group-raised { .btn-group-vertical.btn-group-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
} }
.btn-group.btn-group-raised:active:not(.btn-link), .btn-group.btn-group-raised:active:not(.btn-link),
.btn-group-vertical.btn-group-raised:active:not(.btn-link) { .btn-group-vertical.btn-group-raised:active:not(.btn-link) {
@ -2118,117 +2242,6 @@ body .jumbotron-material-lightgrey,
.btn-group-flat { .btn-group-flat {
box-shadow: none !important; box-shadow: none !important;
} }
.btn-fab {
margin: 0;
padding: 15px;
font-size: 26px;
width: 56px;
height: 56px;
}
.btn-fab,
.btn-fab:hover,
.btn-fab-default,
.btn-fab:hover-default {
background-color: transparent;
}
.btn-fab-primary,
.btn-fab:hover-primary {
background-color: #4285f4;
}
.btn-fab-success,
.btn-fab:hover-success {
background-color: #0f9d58;
}
.btn-fab-info,
.btn-fab:hover-info {
background-color: #03a9f4;
}
.btn-fab-warning,
.btn-fab:hover-warning {
background-color: #ff5722;
}
.btn-fab-danger,
.btn-fab:hover-danger {
background-color: #f44336;
}
.btn-fab-material-red,
.btn-fab:hover-material-red {
background-color: #f44336;
}
.btn-fab-material-pink,
.btn-fab:hover-material-pink {
background-color: #e91e63;
}
.btn-fab-material-purple,
.btn-fab:hover-material-purple {
background-color: #9c27b0;
}
.btn-fab-material-deeppurple,
.btn-fab:hover-material-deeppurple {
background-color: #673ab7;
}
.btn-fab-material-indigo,
.btn-fab:hover-material-indigo {
background-color: #3f51b5;
}
.btn-fab-material-lightblue,
.btn-fab:hover-material-lightblue {
background-color: #03a9f4;
}
.btn-fab-material-cyan,
.btn-fab:hover-material-cyan {
background-color: #00bcd4;
}
.btn-fab-material-teal,
.btn-fab:hover-material-teal {
background-color: #009688;
}
.btn-fab-material-lightgreen,
.btn-fab:hover-material-lightgreen {
background-color: #8bc34a;
}
.btn-fab-material-lime,
.btn-fab:hover-material-lime {
background-color: #cddc39;
}
.btn-fab-material-lightyellow,
.btn-fab:hover-material-lightyellow {
background-color: #ffeb3b;
}
.btn-fab-material-orange,
.btn-fab:hover-material-orange {
background-color: #ff9800;
}
.btn-fab-material-deeporange,
.btn-fab:hover-material-deeporange {
background-color: #ff5722;
}
.btn-fab-material-grey,
.btn-fab:hover-material-grey {
background-color: #9e9e9e;
}
.btn-fab-material-bluegrey,
.btn-fab:hover-material-bluegrey {
background-color: #607d8b;
}
.btn-fab-material-brown,
.btn-fab:hover-material-brown {
background-color: #795548;
}
.btn-fab-material-lightgrey,
.btn-fab:hover-material-lightgrey {
background-color: #ececec;
}
.btn-fab,
.btn-fab .ripple-wrapper {
border-radius: 100%;
}
.btn-fab.btn-mini {
width: 40px;
height: 40px;
padding: 13px;
font-size: 15px;
}
.form-horizontal .checkbox { .form-horizontal .checkbox {
padding-top: 20px; padding-top: 20px;
} }
@ -2241,8 +2254,7 @@ body .jumbotron-material-lightgrey,
display: block; display: block;
position: absolute; position: absolute;
left: 0px; left: 0px;
-webkit-transition-duration: 0.2s; transition-duration: 0.2s;
transition-duration: 0.2s;
} }
.checkbox label .check { .checkbox label .check {
display: inline-block; display: inline-block;
@ -2272,9 +2284,7 @@ body .jumbotron-material-lightgrey,
.checkbox label .check:before { .checkbox label .check:before {
position: absolute; position: absolute;
content: ""; content: "";
-webkit-transform: rotate(45deg); transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
display: block; display: block;
margin-top: -4px; margin-top: -4px;
margin-left: 6px; margin-left: 6px;
@ -2287,8 +2297,7 @@ body .jumbotron-material-lightgrey,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0px 0px 0 0px inset; 0px 0px 0 0px inset;
-webkit-animation: checkbox-off 0.3s linear forwards; animation: checkbox-off 0.3s linear forwards;
animation: checkbox-off 0.3s linear forwards;
} }
.checkbox input[type=checkbox] { .checkbox input[type=checkbox] {
opacity: 0; opacity: 0;
@ -2298,30 +2307,24 @@ body .jumbotron-material-lightgrey,
} }
.checkbox input[type=checkbox]:checked ~ .check:before { .checkbox input[type=checkbox]:checked ~ .check:before {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-webkit-animation: checkbox-on 0.3s linear forwards; animation: checkbox-on 0.3s linear forwards;
animation: checkbox-on 0.3s linear forwards;
} }
.checkbox input[type=checkbox]:not(:checked) ~ .check:after { .checkbox input[type=checkbox]:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms linear forwards; animation: rippleOff 500ms linear forwards;
animation: rippleOff 500ms linear forwards;
} }
.checkbox input[type=checkbox]:checked ~ .check:after { .checkbox input[type=checkbox]:checked ~ .check:after {
-webkit-animation: rippleOn 500ms linear forwards; animation: rippleOn 500ms linear forwards;
animation: rippleOn 500ms linear forwards;
} }
.checkbox:not(:hover) input[type=checkbox] ~ .check:before, .checkbox:not(:hover) input[type=checkbox] ~ .check:before,
.checkbox:not(:hover) input[type=checkbox] ~ .check:after { .checkbox:not(:hover) input[type=checkbox] ~ .check:after {
-webkit-animation-duration: 1ms; animation-duration: 1ms;
animation-duration: 1ms;
} }
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before { .checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before {
opacity: 0.5; opacity: 0.5;
} }
.checkbox input[type=checkbox][disabled] ~ .check:after { .checkbox input[type=checkbox][disabled] ~ .check:after {
background-color: rgba(0, 0, 0, 0.84); background-color: rgba(0, 0, 0, 0.84);
-webkit-transform: rotate(-45deg); transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
} }
.checkbox input[type=checkbox]:checked ~ .check:after, .checkbox input[type=checkbox]:checked ~ .check:after,
.checkbox-default input[type=checkbox]:checked ~ .check:after { .checkbox-default input[type=checkbox]:checked ~ .check:after {
@ -2533,17 +2536,6 @@ body .jumbotron-material-lightgrey,
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check { .checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
color: #ececec; color: #ececec;
} }
@-webkit-keyframes checkbox-on {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
}
}
@keyframes checkbox-on { @keyframes checkbox-on {
0% { 0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
@ -2555,53 +2547,6 @@ body .jumbotron-material-lightgrey,
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
} }
} }
@-webkit-keyframes checkbox-off {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
25% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
50% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: -4px;
margin-left: 6px;
width: 0px;
height: 0px;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
}
51% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 10px inset;
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 0px inset;
}
}
@keyframes checkbox-off { @keyframes checkbox-off {
0% { 0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
@ -2610,8 +2555,7 @@ body .jumbotron-material-lightgrey,
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
} }
50% { 50% {
-webkit-transform: rotate(45deg); transform: rotate(45deg);
transform: rotate(45deg);
margin-top: -4px; margin-top: -4px;
margin-left: 6px; margin-left: 6px;
width: 0px; width: 0px;
@ -2619,8 +2563,7 @@ body .jumbotron-material-lightgrey,
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
} }
51% { 51% {
-webkit-transform: rotate(0deg); transform: rotate(0deg);
transform: rotate(0deg);
margin-top: -2px; margin-top: -2px;
margin-left: -2px; margin-left: -2px;
width: 20px; width: 20px;
@ -2634,8 +2577,7 @@ body .jumbotron-material-lightgrey,
0px 0px 0 10px inset; 0px 0px 0 10px inset;
} }
100% { 100% {
-webkit-transform: rotate(0deg); transform: rotate(0deg);
transform: rotate(0deg);
margin-top: -2px; margin-top: -2px;
margin-left: -2px; margin-left: -2px;
width: 20px; width: 20px;
@ -2662,8 +2604,7 @@ body .jumbotron-material-lightgrey,
position: absolute; position: absolute;
left: 10px; left: 10px;
top: 2px; top: 2px;
-webkit-transition-duration: 0.2s; transition-duration: 0.2s;
transition-duration: 0.2s;
} }
.radio label .circle { .radio label .circle {
border: 2px solid rgba(0, 0, 0, 0.84); border: 2px solid rgba(0, 0, 0, 0.84);
@ -2676,9 +2617,7 @@ body .jumbotron-material-lightgrey,
width: 15px; width: 15px;
border-radius: 100%; border-radius: 100%;
background-color: rgba(0, 0, 0, 0.84); background-color: rgba(0, 0, 0, 0.84);
-webkit-transform: scale(0); transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
} }
.radio label .check:after { .radio label .check:after {
display: block; display: block;
@ -2693,17 +2632,13 @@ body .jumbotron-material-lightgrey,
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
margin: 0; margin: 0;
-webkit-transform: scale(1.5); transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
} }
.radio label input[type=radio]:not(:checked) ~ .check:after { .radio label input[type=radio]:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms; animation: rippleOff 500ms;
animation: rippleOff 500ms;
} }
.radio label input[type=radio]:checked ~ .check:after { .radio label input[type=radio]:checked ~ .check:after {
-webkit-animation: rippleOn 500ms; animation: rippleOn 500ms;
animation: rippleOn 500ms;
} }
.radio input[type=radio]:checked ~ .check, .radio input[type=radio]:checked ~ .check,
.radio-default input[type=radio]:checked ~ .check { .radio-default input[type=radio]:checked ~ .check {
@ -2853,9 +2788,7 @@ body .jumbotron-material-lightgrey,
display: none; display: none;
} }
.radio input[type=radio]:checked ~ .check { .radio input[type=radio]:checked ~ .check {
-webkit-transform: scale(0.55); transform: scale(0.55);
-ms-transform: scale(0.55);
transform: scale(0.55);
} }
.radio input[type=radio][disabled] ~ .circle { .radio input[type=radio][disabled] ~ .circle {
border-color: rgba(0, 0, 0, 0.84); border-color: rgba(0, 0, 0, 0.84);
@ -2863,17 +2796,6 @@ body .jumbotron-material-lightgrey,
.radio input[type=radio][disabled] ~ .check { .radio input[type=radio][disabled] ~ .check {
background-color: rgba(0, 0, 0, 0.84); background-color: rgba(0, 0, 0, 0.84);
} }
@-webkit-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;
@ -2885,17 +2807,6 @@ body .jumbotron-material-lightgrey,
opacity: 0; opacity: 0;
} }
} }
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff { @keyframes rippleOff {
0% { 0% {
opacity: 0; opacity: 0;
@ -2969,8 +2880,7 @@ select[multiple].form-control.focus {
pointer-events: none; pointer-events: none;
left: 0px; left: 0px;
top: 5px; top: 5px;
-webkit-transition: 0.2s ease all; transition: 0.2s ease all;
transition: 0.2s ease all;
opacity: 0; opacity: 0;
} }
.form-control-wrapper .form-control:not(.empty) ~ .floating-label { .form-control-wrapper .form-control:not(.empty) ~ .floating-label {
@ -3003,19 +2913,13 @@ select[multiple].form-control.focus {
height: 2px; height: 2px;
background-color: #5264ae; background-color: #5264ae;
bottom: -1px; bottom: -1px;
-webkit-transform: scaleX(0); transform: scaleX(0);
-ms-transform: scaleX(0); transition: transform 0s;
transform: scaleX(0);
-webkit-transition: -webkit-transform 0s;
transition: transform 0s;
} }
.form-control-wrapper .form-control:focus ~ .material-input:before, .form-control-wrapper .form-control:focus ~ .material-input:before,
.form-control-wrapper .form-control.focus ~ .material-input:before { .form-control-wrapper .form-control.focus ~ .material-input:before {
-webkit-transform: scaleX(1); transform: scaleX(1);
-ms-transform: scaleX(1); transition: transform 0.2s ease-out;
transform: scaleX(1);
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
} }
.form-control-wrapper .material-input:after { .form-control-wrapper .material-input:after {
content: ""; content: "";
@ -3027,9 +2931,7 @@ select[multiple].form-control.focus {
left: 0; left: 0;
pointer-events: none; pointer-events: none;
opacity: 0.9; opacity: 0.9;
-webkit-transform-origin: left; transform-origin: left;
-ms-transform-origin: left;
transform-origin: left;
} }
.form-control-wrapper .input-lg ~ .material-input:after { .form-control-wrapper .input-lg ~ .material-input:after {
height: 26px; height: 26px;
@ -3042,10 +2944,8 @@ select[multiple].form-control.focus {
} }
.form-control-wrapper .form-control:focus ~ .material-input:after, .form-control-wrapper .form-control:focus ~ .material-input:after,
.form-control-wrapper .form-control.focus ~ .material-input:after { .form-control-wrapper .form-control.focus ~ .material-input:after {
-webkit-animation: input-highlight 0.3s ease; animation: input-highlight 0.3s ease;
animation: input-highlight 0.3s ease; animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
opacity: 0; opacity: 0;
} }
.form-control-wrapper select ~ .material-input:after { .form-control-wrapper select ~ .material-input:after {
@ -3465,12 +3365,10 @@ select.form-control.focus {
@keyframes input-highlight { @keyframes input-highlight {
0% { 0% {
left: 20%; left: 20%;
-webkit-transform: scaleX(20%); transform: scaleX(20%);
transform: scaleX(20%);
} }
99% { 99% {
-webkit-transform: scaleX(0); transform: scaleX(0);
transform: scaleX(0);
left: 0; left: 0;
opacity: 1; opacity: 1;
} }
@ -3492,20 +3390,6 @@ select.form-control.focus {
legend { legend {
border-bottom: 0; border-bottom: 0;
} }
.modal-content {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
border-radius: 0;
border: 0;
}
.modal-content .modal-header {
border-bottom: 0;
}
.modal-content .modal-footer {
border-top: 0;
}
.modal-content .modal-footer .btn + .btn {
margin-bottom: 10px;
}
.list-group { .list-group {
border-radius: 0; border-radius: 0;
} }
@ -3871,7 +3755,78 @@ fieldset[disabled] .navbar .btn-link:focus {
position: relative; position: relative;
} }
.dropdown-menu li a:hover { .dropdown-menu li a:hover {
background: rgba(0, 0, 0, 0.08); background-color: transparent;
color: #4285f4;
}
.dropdown-menu li a:hover,
.dropdown-menu-default li a:hover {
color: #4285f4;
}
.dropdown-menu-primary li a:hover {
color: #4285f4;
}
.dropdown-menu-success li a:hover {
color: #0f9d58;
}
.dropdown-menu-info li a:hover {
color: #03a9f4;
}
.dropdown-menu-warning li a:hover {
color: #ff5722;
}
.dropdown-menu-danger li a:hover {
color: #f44336;
}
.dropdown-menu-material-red li a:hover {
color: #f44336;
}
.dropdown-menu-material-pink li a:hover {
color: #e91e63;
}
.dropdown-menu-material-purple li a:hover {
color: #9c27b0;
}
.dropdown-menu-material-deeppurple li a:hover {
color: #673ab7;
}
.dropdown-menu-material-indigo li a:hover {
color: #3f51b5;
}
.dropdown-menu-material-lightblue li a:hover {
color: #03a9f4;
}
.dropdown-menu-material-cyan li a:hover {
color: #00bcd4;
}
.dropdown-menu-material-teal li a:hover {
color: #009688;
}
.dropdown-menu-material-lightgreen li a:hover {
color: #8bc34a;
}
.dropdown-menu-material-lime li a:hover {
color: #cddc39;
}
.dropdown-menu-material-lightyellow li a:hover {
color: #ffeb3b;
}
.dropdown-menu-material-orange li a:hover {
color: #ff9800;
}
.dropdown-menu-material-deeporange li a:hover {
color: #ff5722;
}
.dropdown-menu-material-grey li a:hover {
color: #9e9e9e;
}
.dropdown-menu-material-bluegrey li a:hover {
color: #607d8b;
}
.dropdown-menu-material-brown li a:hover {
color: #795548;
}
.dropdown-menu-material-lightgrey li a:hover {
color: #ececec;
} }
.alert { .alert {
border: 0px; border: 0px;
@ -4064,14 +4019,14 @@ fieldset[disabled] .navbar .btn-link:focus {
margin: 0; margin: 0;
} }
.nav-tabs > li > a:hover { .nav-tabs > li > a:hover {
background: transparent; background-color: transparent;
border: 0; border: 0;
} }
.nav-tabs > li.active > a, .nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:hover,
.nav-tabs > li.open > a, .nav-tabs > li.open > a,
.nav-tabs > li.open > a:hover { .nav-tabs > li.open > .nav-tabs > li:hover {
background: transparent !important; background-color: transparent !important;
border: 0 !important; border: 0 !important;
color: #FFFFFF !important; color: #FFFFFF !important;
font-weight: 500; font-weight: 500;
@ -4184,6 +4139,100 @@ fieldset[disabled] .navbar .btn-link:focus {
.icon-material-lightgrey { .icon-material-lightgrey {
color: #ececec; color: #ececec;
} }
.card {
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
display: inline-block;
position: relative;
width: 100%;
/**************************************************************************/
border-radius: 2px;
color: rgba(0, 0, 0, 0.84);
background: #ffffff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.card .card-height-indicator {
margin-top: 100%;
}
.card .card-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.card .card-image {
height: 60%;
position: relative;
overflow: hidden;
}
.card .card-image img {
width: 100%;
height: 100%;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
pointer-events: none;
}
.card .card-image .card-image-headline {
position: absolute;
bottom: 16px;
left: 18px;
color: #ffffff;
font-size: 2em;
}
.card .card-body {
height: 30%;
padding: 18px;
}
.card .card-footer {
height: 10%;
padding: 18px;
}
.card .card-footer button {
margin: 0 !important;
position: relative;
bottom: 25px;
width: auto;
}
.card .card-footer button:first-child {
left: -15px;
}
.modal-content {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
margin-top: 10em;
border-radius: 2px;
border: none;
}
.modal-content .modal-header {
border-bottom: none;
padding: 24px;
padding-bottom: 0;
}
.modal-content .modal-body {
padding: 24px;
padding-bottom: 0;
}
.modal-content .modal-footer {
border-top: none;
padding: 24px;
}
.modal-content .modal-footer button {
margin: 0;
padding-left: 16px;
padding-right: 16px;
width: auto;
}
.modal-content .modal-footer button.pull-left {
padding-left: 5px;
padding-right: 5px;
position: relative;
left: -5px;
}
.modal-content .modal-footer button + button {
margin-bottom: 16px;
}
.modal-backdrop {
display: none;
}
.snackbar { .snackbar {
background-color: #323232; background-color: #323232;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);
@ -4191,21 +4240,15 @@ fieldset[disabled] .navbar .btn-link:focus {
border-radius: 2px; border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
height: 0; height: 0;
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s; transform: translateY(200%);
-webkit-transform: translateY(200%);
-ms-transform: translateY(200%);
transform: translateY(200%);
} }
.snackbar.snackbar-opened { .snackbar.snackbar-opened {
padding: 14px 15px; padding: 14px 15px;
margin-bottom: 20px; margin-bottom: 20px;
height: auto; height: auto;
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s; transform: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
} }
.snackbar.toast { .snackbar.toast {
border-radius: 200px; border-radius: 200px;
@ -4214,10 +4257,7 @@ fieldset[disabled] .navbar .btn-link:focus {
.noUi-target * { .noUi-target * {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-ms-touch-action: none; -ms-touch-action: none;
-webkit-user-select: none; user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box; box-sizing: border-box;
} }
.noUi-base { .noUi-base {
@ -4244,8 +4284,7 @@ fieldset[disabled] .navbar .btn-link:focus {
*z-index: -1; *z-index: -1;
} }
.noUi-state-tap .noUi-origin { .noUi-state-tap .noUi-origin {
-webkit-transition: left 0.3s, top 0.3s; transition: left 0.3s, top 0.3s;
transition: left 0.3s, top 0.3s;
} }
.noUi-state-drag * { .noUi-state-drag * {
cursor: inherit !important; cursor: inherit !important;
@ -4289,8 +4328,7 @@ fieldset[disabled] .navbar .btn-link:focus {
.noUi-handle { .noUi-handle {
border-radius: 100%; border-radius: 100%;
cursor: default; cursor: default;
-webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
border: 1px solid; border: 1px solid;
} }
.noUi-horizontal { .noUi-horizontal {
@ -4298,9 +4336,7 @@ fieldset[disabled] .navbar .btn-link:focus {
margin: 15px 0; margin: 15px 0;
} }
.noUi-horizontal .noUi-handle.noUi-active { .noUi-horizontal .noUi-handle.noUi-active {
-webkit-transform: scale(2.5); transform: scale(2.5);
-ms-transform: scale(2.5);
transform: scale(2.5);
} }
[disabled].noUi-slider { [disabled].noUi-slider {
opacity: 0.5; opacity: 0.5;

2
dist/css/material-wfont.min.css vendored
View File

File diff suppressed because one or more lines are too long

488
dist/css/material.css vendored
View File

@ -1558,10 +1558,14 @@ h6,
.h1, .h1,
.h2, .h2,
.h3, .h3,
.h4, .h4 {
.h5, font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
.h6 { font-weight: 300;
}
h5,
h6 {
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
} }
body .well, body .well,
.container .well, .container .well,
@ -1889,7 +1893,7 @@ body .jumbotron-material-lightgrey,
border: 0; border: 0;
margin: 10px 1px; margin: 10px 1px;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 2px;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);
@ -1897,15 +1901,17 @@ body .jumbotron-material-lightgrey,
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
outline: none !important; outline: none !important;
} }
.btn:hover { .btn:hover:not(.btn-link):not(.btn-flat) {
color: rgba(255, 255, 255, 0.84);
}
.btn:hover:not(.btn-link) {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
} }
.btn:active:not(.btn-link) { .btn:active:not(.btn-link):not(.btn-flat) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
} }
.btn:disabled:not(.btn-link):not(.btn-flat) {
color: #a8a8a8 !important;
background-color: #eaeaea !important;
box-shadow: none;
}
.btn:not(.btn-link), .btn:not(.btn-link),
.btn-default:not(.btn-link) { .btn-default:not(.btn-link) {
background-color: transparent; background-color: transparent;
@ -1976,6 +1982,156 @@ body .jumbotron-material-lightgrey,
.btn-material-lightgrey:not(.btn-link) { .btn-material-lightgrey:not(.btn-link) {
background-color: #ececec; background-color: #ececec;
} }
.btn.btn-flat {
background: none;
box-shadow: none;
font-weight: 500;
}
.btn.btn-flat:disabled {
color: #a8a8a8 !important;
}
.btn.btn-flat.btn-primary {
color: #4285f4;
}
.btn.btn-flat.btn-success {
color: #0f9d58;
}
.btn.btn-flat.btn-info {
color: #03a9f4;
}
.btn.btn-flat.btn-warning {
color: #ff5722;
}
.btn.btn-flat.btn-danger {
color: #f44336;
}
.btn.btn-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn.btn-raised:active:not(.btn-link) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.btn.btn-fab {
margin: 0;
padding: 15px;
font-size: 26px;
width: 56px;
height: 56px;
}
.btn.btn-fab,
.btn.btn-fab:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.btn.btn-fab,
.btn.btn-fab:hover,
.btn.btn-fab-default,
.btn.btn-fab:hover-default {
background-color: transparent;
}
.btn.btn-fab-primary,
.btn.btn-fab:hover-primary {
background-color: #4285f4;
}
.btn.btn-fab-success,
.btn.btn-fab:hover-success {
background-color: #0f9d58;
}
.btn.btn-fab-info,
.btn.btn-fab:hover-info {
background-color: #03a9f4;
}
.btn.btn-fab-warning,
.btn.btn-fab:hover-warning {
background-color: #ff5722;
}
.btn.btn-fab-danger,
.btn.btn-fab:hover-danger {
background-color: #f44336;
}
.btn.btn-fab-material-red,
.btn.btn-fab:hover-material-red {
background-color: #f44336;
}
.btn.btn-fab-material-pink,
.btn.btn-fab:hover-material-pink {
background-color: #e91e63;
}
.btn.btn-fab-material-purple,
.btn.btn-fab:hover-material-purple {
background-color: #9c27b0;
}
.btn.btn-fab-material-deeppurple,
.btn.btn-fab:hover-material-deeppurple {
background-color: #673ab7;
}
.btn.btn-fab-material-indigo,
.btn.btn-fab:hover-material-indigo {
background-color: #3f51b5;
}
.btn.btn-fab-material-lightblue,
.btn.btn-fab:hover-material-lightblue {
background-color: #03a9f4;
}
.btn.btn-fab-material-cyan,
.btn.btn-fab:hover-material-cyan {
background-color: #00bcd4;
}
.btn.btn-fab-material-teal,
.btn.btn-fab:hover-material-teal {
background-color: #009688;
}
.btn.btn-fab-material-lightgreen,
.btn.btn-fab:hover-material-lightgreen {
background-color: #8bc34a;
}
.btn.btn-fab-material-lime,
.btn.btn-fab:hover-material-lime {
background-color: #cddc39;
}
.btn.btn-fab-material-lightyellow,
.btn.btn-fab:hover-material-lightyellow {
background-color: #ffeb3b;
}
.btn.btn-fab-material-orange,
.btn.btn-fab:hover-material-orange {
background-color: #ff9800;
}
.btn.btn-fab-material-deeporange,
.btn.btn-fab:hover-material-deeporange {
background-color: #ff5722;
}
.btn.btn-fab-material-grey,
.btn.btn-fab:hover-material-grey {
background-color: #9e9e9e;
}
.btn.btn-fab-material-bluegrey,
.btn.btn-fab:hover-material-bluegrey {
background-color: #607d8b;
}
.btn.btn-fab-material-brown,
.btn.btn-fab:hover-material-brown {
background-color: #795548;
}
.btn.btn-fab-material-lightgrey,
.btn.btn-fab:hover-material-lightgrey {
background-color: #ececec;
}
.btn.btn-fab,
.btn.btn-fab .ripple-wrapper {
border-radius: 100%;
}
.btn.btn-fab.btn-fab-mini {
width: 40px;
height: 40px;
padding: 13px;
font-size: 15px;
}
.btn.btn-fab i {
position: relative;
top: -5px;
}
.btn-link, .btn-link,
.btn:not([class^="btn btn-"]), .btn:not([class^="btn btn-"]),
.btn-default { .btn-default {
@ -1990,14 +2146,6 @@ body .jumbotron-material-lightgrey,
.btn-default:hover { .btn-default:hover {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
} }
.btn-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-raised:active:not(.btn-link) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.open > .dropdown-toggle.btn, .open > .dropdown-toggle.btn,
.open > .dropdown-toggle.btn-default { .open > .dropdown-toggle.btn-default {
background-color: transparent; background-color: transparent;
@ -2068,16 +2216,10 @@ body .jumbotron-material-lightgrey,
.open > .dropdown-toggle.btn-material-lightgrey { .open > .dropdown-toggle.btn-material-lightgrey {
background-color: #ececec; background-color: #ececec;
} }
.btn-flat {
box-shadow: none !important;
}
.btn-flat.btn-default:hover {
background: none;
}
.btn-group, .btn-group,
.btn-group-vertical { .btn-group-vertical {
position: relative; position: relative;
border-radius: 4px; border-radius: 2px;
margin: 10px 1px; margin: 10px 1px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
@ -2117,117 +2259,6 @@ body .jumbotron-material-lightgrey,
.btn-group-flat { .btn-group-flat {
box-shadow: none !important; box-shadow: none !important;
} }
.btn-fab {
margin: 0;
padding: 15px;
font-size: 26px;
width: 56px;
height: 56px;
}
.btn-fab,
.btn-fab:hover,
.btn-fab-default,
.btn-fab:hover-default {
background-color: transparent;
}
.btn-fab-primary,
.btn-fab:hover-primary {
background-color: #4285f4;
}
.btn-fab-success,
.btn-fab:hover-success {
background-color: #0f9d58;
}
.btn-fab-info,
.btn-fab:hover-info {
background-color: #03a9f4;
}
.btn-fab-warning,
.btn-fab:hover-warning {
background-color: #ff5722;
}
.btn-fab-danger,
.btn-fab:hover-danger {
background-color: #f44336;
}
.btn-fab-material-red,
.btn-fab:hover-material-red {
background-color: #f44336;
}
.btn-fab-material-pink,
.btn-fab:hover-material-pink {
background-color: #e91e63;
}
.btn-fab-material-purple,
.btn-fab:hover-material-purple {
background-color: #9c27b0;
}
.btn-fab-material-deeppurple,
.btn-fab:hover-material-deeppurple {
background-color: #673ab7;
}
.btn-fab-material-indigo,
.btn-fab:hover-material-indigo {
background-color: #3f51b5;
}
.btn-fab-material-lightblue,
.btn-fab:hover-material-lightblue {
background-color: #03a9f4;
}
.btn-fab-material-cyan,
.btn-fab:hover-material-cyan {
background-color: #00bcd4;
}
.btn-fab-material-teal,
.btn-fab:hover-material-teal {
background-color: #009688;
}
.btn-fab-material-lightgreen,
.btn-fab:hover-material-lightgreen {
background-color: #8bc34a;
}
.btn-fab-material-lime,
.btn-fab:hover-material-lime {
background-color: #cddc39;
}
.btn-fab-material-lightyellow,
.btn-fab:hover-material-lightyellow {
background-color: #ffeb3b;
}
.btn-fab-material-orange,
.btn-fab:hover-material-orange {
background-color: #ff9800;
}
.btn-fab-material-deeporange,
.btn-fab:hover-material-deeporange {
background-color: #ff5722;
}
.btn-fab-material-grey,
.btn-fab:hover-material-grey {
background-color: #9e9e9e;
}
.btn-fab-material-bluegrey,
.btn-fab:hover-material-bluegrey {
background-color: #607d8b;
}
.btn-fab-material-brown,
.btn-fab:hover-material-brown {
background-color: #795548;
}
.btn-fab-material-lightgrey,
.btn-fab:hover-material-lightgrey {
background-color: #ececec;
}
.btn-fab,
.btn-fab .ripple-wrapper {
border-radius: 100%;
}
.btn-fab.btn-mini {
width: 40px;
height: 40px;
padding: 13px;
font-size: 15px;
}
.form-horizontal .checkbox { .form-horizontal .checkbox {
padding-top: 20px; padding-top: 20px;
} }
@ -3491,20 +3522,6 @@ select.form-control.focus {
legend { legend {
border-bottom: 0; border-bottom: 0;
} }
.modal-content {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
border-radius: 0;
border: 0;
}
.modal-content .modal-header {
border-bottom: 0;
}
.modal-content .modal-footer {
border-top: 0;
}
.modal-content .modal-footer .btn + .btn {
margin-bottom: 10px;
}
.list-group { .list-group {
border-radius: 0; border-radius: 0;
} }
@ -3870,7 +3887,78 @@ fieldset[disabled] .navbar .btn-link:focus {
position: relative; position: relative;
} }
.dropdown-menu li a:hover { .dropdown-menu li a:hover {
background: rgba(0, 0, 0, 0.08); background-color: transparent;
color: #4285f4;
}
.dropdown-menu li a:hover,
.dropdown-menu-default li a:hover {
color: #4285f4;
}
.dropdown-menu-primary li a:hover {
color: #4285f4;
}
.dropdown-menu-success li a:hover {
color: #0f9d58;
}
.dropdown-menu-info li a:hover {
color: #03a9f4;
}
.dropdown-menu-warning li a:hover {
color: #ff5722;
}
.dropdown-menu-danger li a:hover {
color: #f44336;
}
.dropdown-menu-material-red li a:hover {
color: #f44336;
}
.dropdown-menu-material-pink li a:hover {
color: #e91e63;
}
.dropdown-menu-material-purple li a:hover {
color: #9c27b0;
}
.dropdown-menu-material-deeppurple li a:hover {
color: #673ab7;
}
.dropdown-menu-material-indigo li a:hover {
color: #3f51b5;
}
.dropdown-menu-material-lightblue li a:hover {
color: #03a9f4;
}
.dropdown-menu-material-cyan li a:hover {
color: #00bcd4;
}
.dropdown-menu-material-teal li a:hover {
color: #009688;
}
.dropdown-menu-material-lightgreen li a:hover {
color: #8bc34a;
}
.dropdown-menu-material-lime li a:hover {
color: #cddc39;
}
.dropdown-menu-material-lightyellow li a:hover {
color: #ffeb3b;
}
.dropdown-menu-material-orange li a:hover {
color: #ff9800;
}
.dropdown-menu-material-deeporange li a:hover {
color: #ff5722;
}
.dropdown-menu-material-grey li a:hover {
color: #9e9e9e;
}
.dropdown-menu-material-bluegrey li a:hover {
color: #607d8b;
}
.dropdown-menu-material-brown li a:hover {
color: #795548;
}
.dropdown-menu-material-lightgrey li a:hover {
color: #ececec;
} }
.alert { .alert {
border: 0px; border: 0px;
@ -4063,14 +4151,14 @@ fieldset[disabled] .navbar .btn-link:focus {
margin: 0; margin: 0;
} }
.nav-tabs > li > a:hover { .nav-tabs > li > a:hover {
background: transparent; background-color: transparent;
border: 0; border: 0;
} }
.nav-tabs > li.active > a, .nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:hover,
.nav-tabs > li.open > a, .nav-tabs > li.open > a,
.nav-tabs > li.open > a:hover { .nav-tabs > li.open > .nav-tabs > li:hover {
background: transparent !important; background-color: transparent !important;
border: 0 !important; border: 0 !important;
color: #FFFFFF !important; color: #FFFFFF !important;
font-weight: 500; font-weight: 500;
@ -4183,6 +4271,100 @@ fieldset[disabled] .navbar .btn-link:focus {
.icon-material-lightgrey { .icon-material-lightgrey {
color: #ececec; color: #ececec;
} }
.card {
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
display: inline-block;
position: relative;
width: 100%;
/**************************************************************************/
border-radius: 2px;
color: rgba(0, 0, 0, 0.84);
background: #ffffff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.card .card-height-indicator {
margin-top: 100%;
}
.card .card-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.card .card-image {
height: 60%;
position: relative;
overflow: hidden;
}
.card .card-image img {
width: 100%;
height: 100%;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
pointer-events: none;
}
.card .card-image .card-image-headline {
position: absolute;
bottom: 16px;
left: 18px;
color: #ffffff;
font-size: 2em;
}
.card .card-body {
height: 30%;
padding: 18px;
}
.card .card-footer {
height: 10%;
padding: 18px;
}
.card .card-footer button {
margin: 0 !important;
position: relative;
bottom: 25px;
width: auto;
}
.card .card-footer button:first-child {
left: -15px;
}
.modal-content {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
margin-top: 10em;
border-radius: 2px;
border: none;
}
.modal-content .modal-header {
border-bottom: none;
padding: 24px;
padding-bottom: 0;
}
.modal-content .modal-body {
padding: 24px;
padding-bottom: 0;
}
.modal-content .modal-footer {
border-top: none;
padding: 24px;
}
.modal-content .modal-footer button {
margin: 0;
padding-left: 16px;
padding-right: 16px;
width: auto;
}
.modal-content .modal-footer button.pull-left {
padding-left: 5px;
padding-right: 5px;
position: relative;
left: -5px;
}
.modal-content .modal-footer button + button {
margin-bottom: 16px;
}
.modal-backdrop {
display: none;
}
.snackbar { .snackbar {
background-color: #323232; background-color: #323232;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);

3
dist/css/material.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
dist/js/material.js vendored
View File

@ -3,7 +3,11 @@
$(function (){ $(function (){
if (typeof ripples == "object") { if (typeof ripples == "object") {
ripples.init(".btn:not(.btn-link), .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"); ripples.init( ".btn:not(.btn-link)," +
".card-image," +
".navbar a:not(.withoutripple)," +
".nav-tabs a:not(.withoutripple)," +
".withripple" );
} }
var initInputs = function() { var initInputs = function() {

2
dist/js/material.min.js vendored
View File

@ -1 +1 @@
$(function(){"object"==typeof ripples&&ripples.init(".btn:not(.btn-link), .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple");var a=function(){$(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>"),$(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>"),$("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each(function(){if(!$(this).is(".bs-material")){if($(this).wrap("<div class=form-control-wrapper></div>"),$(this).after("<span class=material-input></span>"),$(this).hasClass("floating-label")){var a=$(this).attr("placeholder");$(this).attr("placeholder",null).removeClass("floating-label"),$(this).after("<div class=floating-label>"+a+"</div>")}if(($(this).is(":empty")||null===$(this).val()||"undefined"==$(this).val()||""===$(this).val())&&$(this).addClass("empty"),$(this).parent().next().is("[type=file]")){$(this).parent().addClass("fileinput");var b=$(this).parent().next().detach();$(this).after(b)}}})};a(),document.arrive&&document.arrive("input, textarea, select",function(){a()}),$(document).on("change",".checkbox input",function(){$(this).blur()}),$(document).on("keyup change",".form-control",function(){var a=$(this);setTimeout(function(){""===a.val()?a.addClass("empty"):a.removeClass("empty")},1)}),$(document).on("focus",".form-control-wrapper.fileinput",function(){$(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){$(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var a="";$.each($(this)[0].files,function(b,c){console.log(c),a+=c.name+", "}),a=a.substring(0,a.length-2),a?$(this).prev().removeClass("empty"):$(this).prev().addClass("empty"),$(this).prev().val(a)})}); $(function(){"object"==typeof ripples&&ripples.init(".btn:not(.btn-link),.card-image,.navbar a:not(.withoutripple),.nav-tabs a:not(.withoutripple),.withripple");var a=function(){$(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>"),$(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>"),$("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each(function(){if(!$(this).is(".bs-material")){if($(this).wrap("<div class=form-control-wrapper></div>"),$(this).after("<span class=material-input></span>"),$(this).hasClass("floating-label")){var a=$(this).attr("placeholder");$(this).attr("placeholder",null).removeClass("floating-label"),$(this).after("<div class=floating-label>"+a+"</div>")}if(($(this).is(":empty")||null===$(this).val()||"undefined"==$(this).val()||""===$(this).val())&&$(this).addClass("empty"),$(this).parent().next().is("[type=file]")){$(this).parent().addClass("fileinput");var b=$(this).parent().next().detach();$(this).after(b)}}})};a(),document.arrive&&document.arrive("input, textarea, select",function(){a()}),$(document).on("change",".checkbox input",function(){$(this).blur()}),$(document).on("keyup change",".form-control",function(){var a=$(this);setTimeout(function(){""===a.val()?a.addClass("empty"):a.removeClass("empty")},1)}),$(document).on("focus",".form-control-wrapper.fileinput",function(){$(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){$(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var a="";$.each($(this)[0].files,function(b,c){console.log(c),a+=c.name+", "}),a=a.substring(0,a.length-2),a?$(this).prev().removeClass("empty"):$(this).prev().addClass("empty"),$(this).prev().val(a)})});

128
dist/js/ripples.js vendored
View File

@ -1,15 +1,17 @@
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
/* globals CustomEvent */ /* globals CustomEvent */
window.ripples = { window.ripples = {
init : function(withRipple) { init : function(withRipple) {
"use strict"; "use strict";
// Cross browser matches function // Cross browser matches function
function matchesSelector(domElement, selector) { function matchesSelector(domElement, selector) {
var matches = domElement.matches || domElement.matchesSelector || domElement.webkitMatchesSelector || var matches = domElement.matches ||
domElement.matchesSelector ||
domElement.webkitMatchesSelector ||
domElement.mozMatchesSelector || domElement.mozMatchesSelector ||
domElement.msMatchesSelector || domElement.oMatchesSelector; domElement.msMatchesSelector ||
domElement.oMatchesSelector;
return matches.call(domElement, selector); return matches.call(domElement, selector);
} }
@ -18,63 +20,81 @@ window.ripples = {
rippleStartTime = 500; rippleStartTime = 500;
// Helper to bind events on dynamically created elements // Helper to bind events on dynamically created elements
var bind = function(event, selector, callback) { var bind = function(events, selector, callback) {
document.addEventListener(event, function(e) { if (typeof events === "string") {
var target = (typeof e.detail !== "number") ? e.detail : e.target; events = [events];
}
events.forEach(function(event) {
document.addEventListener(event, function(e) {
var target = (typeof e.detail !== "number") ? e.detail : e.target;
if (matchesSelector(target, selector)) { if (matchesSelector(target, selector)) {
callback(e, target); callback(e, target);
} }
});
}); });
}; };
var rippleStart = function(e, target) { var rippleStart = function(e, target, callback) {
// Init variables // Init variables
var $rippleWrapper = target, var $rippleWrapper = target,
$el = $rippleWrapper.parentNode, $el = $rippleWrapper.parentNode,
$ripple = document.createElement("div"), $ripple = document.createElement("div"),
elPos = $el.getBoundingClientRect(), elPos = $el.getBoundingClientRect(),
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top}, // Mouse pos in most cases
scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")", mousePos = {x: e.clientX - elPos.left, y: ((window.ontouchstart) ? e.clientY - window.scrollY: e.clientY) - elPos.top},
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}), scale = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
__rippleOpacity__ = 0.05, rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
targetColor, _rippleOpacity = 0.1,
rgbArr,
refreshElementStyle; refreshElementStyle;
// If multitouch is detected or some other black magic suff is happening...
if (e.touches) {
mousePos = {x: e.touches[0].clientX - elPos.left, y: e.touches[0].clientY - elPos.top};
}
console.log(mousePos);
$ripplecache = $ripple; $ripplecache = $ripple;
// Set ripple class // Set ripple class
$ripple.className = "ripple"; $ripple.className = "ripple";
// Move ripple to the mouse position
$ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
// Get the clicked targets text color, this will be applied to the ripple as background-color.
targetColor = window.getComputedStyle($el).color;
// Move ripple to the mouse position
// This changes the alpha value of the rgba (opacity) to the constant __rippleOpacity__ $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
// Not sure if regexp is quicker...
rgbArr = targetColor.split(','); // Get the clicked target's text color, this will be applied to the ripple as background-color.
rgbArr.pop(); var targetColor = window.getComputedStyle($el).color;
rgbArr.push(" " + __rippleOpacity__ + ")")
targetColor = rgbArr.join(','); // Convert the rgb color to an rgba color with opacity set to __rippleOpacity__
targetColor = targetColor.replace("rgb", "rgba").replace(")", ", " + _rippleOpacity + ")");
// Insert new ripple into ripple wrapper // Insert new ripple into ripple wrapper
$rippleWrapper.appendChild($ripple); $rippleWrapper.appendChild($ripple);
// Make sure the ripple has the class applied (ugly hack but it works) // Make sure the ripple has the class applied (ugly hack but it works)
refreshElementStyle = window.getComputedStyle($ripple).opacity; refreshElementStyle = window.getComputedStyle($ripple).opacity;
// Let other funtions know that this element is animating // Let other funtions know that this element is animating
$ripple.dataset.animating = 1; $ripple.dataset.animating = 1;
// + "background-color: " + targetColor + ";"
// Set scale value, background-color and opacity to ripple and animate it // Set scale value, background-color and opacity to ripple and animate it
$ripple.className = "ripple ripple-on"; $ripple.className = "ripple ripple-on";
$ripple.setAttribute("style", $ripple.getAttribute("style") + "background-color: " + targetColor + ";" + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
// Prepare the style of the ripple
var rippleStyle = [
$ripple.getAttribute("style"),
"background-color: " + targetColor,
"-ms-transform: " + scale,
"-moz-transform" + scale,
"-webkit-transform" + scale,
"transform: " + scale
];
// Apply the style
$ripple.setAttribute("style", rippleStyle.join(";"));
// This function is called when the animation is finished // This function is called when the animation is finished
setTimeout(function() { setTimeout(function() {
@ -82,6 +102,9 @@ window.ripples = {
// Let know to other functions that this element has finished the animation // Let know to other functions that this element has finished the animation
$ripple.dataset.animating = 0; $ripple.dataset.animating = 0;
document.dispatchEvent(rippleEnd); document.dispatchEvent(rippleEnd);
if (callback) {
callback();
}
}, rippleStartTime); }, rippleStartTime);
@ -99,39 +122,43 @@ window.ripples = {
// Helper, need to know if mouse is up or down // Helper, need to know if mouse is up or down
var mouseDown = false; var mouseDown = false;
document.body.onmousedown = function() { bind(["mousedown", "touchstart"], "*", function() {
mouseDown = true; mouseDown = true;
}; });
document.body.onmouseup = function() { bind(["mouseup", "touchend"], "*", function() {
mouseDown = false; mouseDown = false;
}; });
// Append ripple wrapper if not exists already // Append ripple wrapper if not exists already
var rippleInit = function(e, target) { var rippleInit = function(e, target) {
if (target.getElementsByClassName("ripple-wrapper").length === 0) { if (target.getElementsByClassName("ripple-wrapper").length === 0) {
target.className += " withripple"; target.className += " withripple";
var $rippleWrapper = document.createElement("div"); var $rippleWrapper = document.createElement("div");
$rippleWrapper.className = "ripple-wrapper"; $rippleWrapper.className = "ripple-wrapper";
target.appendChild($rippleWrapper); target.appendChild($rippleWrapper);
if (window.ontouchstart === null) {
rippleStart(e, $rippleWrapper, function() {
// FIXME: ugly fix for first touchstart event on mobile devices...
$rippleWrapper.getElementsByClassName("ripple")[0].remove();
});
}
} }
}; };
var $ripplecache; var $ripplecache;
// Events handler // Events handler
// init RippleJS and start ripple effect on mousedown // init RippleJS and start ripple effect on mousedown
bind("mouseover", withRipple, rippleInit); bind(["mouseover", "touchstart"], withRipple, rippleInit);
// start ripple effect on mousedown // start ripple effect on mousedown
bind("mousedown", ".ripple-wrapper", function(e, $ripple) { bind(["mousedown", "touchstart"], ".ripple-wrapper", function(e, $ripple) {
// Start ripple only on left or middle mouse click // Start ripple only on left or middle mouse click and touch click
if (e.which === 1 || e.which === 2) { if (e.which === 0 || e.which === 1 || e.which === 2) {
rippleStart(e, $ripple); rippleStart(e, $ripple);
} }
}); });
// if animation ends and user is not holding mouse then destroy the ripple // if animation ends and user is not holding mouse then destroy the ripple
bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) { bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) {
@ -141,10 +168,11 @@ window.ripples = {
rippleOut($ripple); rippleOut($ripple);
} }
}); });
// Destroy ripple when mouse is not holded anymore if the ripple still exists // Destroy ripple when mouse is not holded anymore if the ripple still exists
bind("mouseup", ".ripple-wrapper", function() { bind(["mouseup", "touchend"], ".ripple-wrapper", function() {
var $ripple = $ripplecache; var $ripple = $ripplecache;
if ($ripple.dataset.animating != 1) { if ($ripple && $ripple.dataset.animating != 1) {
rippleOut($ripple); rippleOut($ripple);
} }
}); });

2
dist/js/ripples.min.js vendored
View File

@ -1 +1 @@
window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})},f=function(a,b){var c,e,f,g=b,h=g.parentNode,j=document.createElement("div"),k=h.getBoundingClientRect(),l={x:a.clientX-k.left,y:a.clientY-k.top},m="transform:scale("+Math.round(g.offsetWidth/5)+")",n=new CustomEvent("rippleEnd",{detail:j}),o=.05;i=j,j.className="ripple",j.setAttribute("style","left:"+l.x+"px; top:"+l.y+"px;"),c=window.getComputedStyle(h).color,e=c.split(","),e.pop(),e.push(" "+o+")"),c=e.join(","),g.appendChild(j),f=window.getComputedStyle(j).opacity,j.dataset.animating=1,j.className="ripple ripple-on",j.setAttribute("style",j.getAttribute("style")+"background-color: "+c+";"+["-ms-"+m,"-moz-"+m,"-webkit-"+m,m].join(";")),setTimeout(function(){j.dataset.animating=0,document.dispatchEvent(n)},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;document.body.onmousedown=function(){h=!0},document.body.onmouseup=function(){h=!1};var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c)}};e("mouseover",a,j),e("mousedown",".ripple-wrapper",function(a,b){(1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e("mouseup",".ripple-wrapper",function(){var a=i;1!=a.dataset.animating&&g(a)})}}; window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){"string"==typeof a&&(a=[a]),a.forEach(function(a){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})})},f=function(a,b,c){var e,f=b,g=f.parentNode,h=document.createElement("div"),j=g.getBoundingClientRect(),k={x:a.clientX-j.left,y:(window.ontouchstart?a.clientY-window.scrollY:a.clientY)-j.top},l="scale("+Math.round(f.offsetWidth/5)+")",m=new CustomEvent("rippleEnd",{detail:h}),n=.1;a.touches&&(k={x:a.touches[0].clientX-j.left,y:a.touches[0].clientY-j.top}),console.log(k),i=h,h.className="ripple",h.setAttribute("style","left:"+k.x+"px; top:"+k.y+"px;");var o=window.getComputedStyle(g).color;o=o.replace("rgb","rgba").replace(")",", "+n+")"),f.appendChild(h),e=window.getComputedStyle(h).opacity,h.dataset.animating=1,h.className="ripple ripple-on";var p=[h.getAttribute("style"),"background-color: "+o,"-ms-transform: "+l,"-moz-transform"+l,"-webkit-transform"+l,"transform: "+l];h.setAttribute("style",p.join(";")),setTimeout(function(){h.dataset.animating=0,document.dispatchEvent(m),c&&c()},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;e(["mousedown","touchstart"],"*",function(){h=!0}),e(["mouseup","touchend"],"*",function(){h=!1});var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c),null===window.ontouchstart&&f(a,c,function(){c.getElementsByClassName("ripple")[0].remove()})}};e(["mouseover","touchstart"],a,j),e(["mousedown","touchstart"],".ripple-wrapper",function(a,b){(0===a.which||1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e(["mouseup","touchend"],".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}};

1
index.html
View File

@ -8,6 +8,7 @@
<link href="dist/css/ripples.min.css" rel="stylesheet"> <link href="dist/css/ripples.min.css" rel="stylesheet">
<link href="dist/css/material-wfont.min.css" rel="stylesheet"> <link href="dist/css/material-wfont.min.css" rel="stylesheet">
<link href="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.css" rel="stylesheet"> <link href="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> <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}} 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}}
.infobox .btn-sup { color: rgba(0,0,0,0.5); font-weight: bold; font-size: 15px; line-height: 30px; } .infobox .btn-sup { color: rgba(0,0,0,0.5); font-weight: bold; font-size: 15px; line-height: 30px; }

117
less/_buttons.import.less vendored
View File

@ -1,40 +1,87 @@
// main: material.less // main: material.less
.btn-shadow() {
.shadow-z-2();
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
&:active:not(.btn-link) {
.shadow-z-3();
}
}
.btn { .btn {
position: relative; position: relative;
padding: 8px 30px; padding: 8px 30px;
border: 0; border: 0;
margin: 10px 1px; margin: 10px 1px;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 2px;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
color: @darkbg-text; color: @darkbg-text;
&:hover { &:hover:not(.btn-link):not(.btn-flat) {
color: @darkbg-text;
}
&:hover:not(.btn-link) {
.shadow-z-2-hover(); .shadow-z-2-hover();
} }
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); &:active:not(.btn-link):not(.btn-flat) {
&:active:not(.btn-link) {
.shadow-z-3(); .shadow-z-3();
} }
&:disabled:not(.btn-link):not(.btn-flat) {
color: @text-disabled !important;
background-color: @background-disabled !important;
box-shadow: none;
}
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
outline: none !important; outline: none !important;
.variations(~":not(.btn-link)", background-color, @btn-default); .variations(~":not(.btn-link)", background-color, @btn-default);
&.btn-flat {
background: none;
box-shadow: none;
font-weight: 500;
&:disabled {
color: @text-disabled !important;
}
&.btn-primary {
color: @primary;
}
&.btn-success {
color: @success;
}
&.btn-info {
color: @info;
}
&.btn-warning {
color: @warning;
}
&.btn-danger {
color: @danger;
}
}
&.btn-raised {
.btn-shadow();
}
&.btn-fab {
margin: 0;
padding: 15px;
font-size: 26px;
width: 56px;
height: 56px;
&, &:hover {
.shadow-z-1();
.variations(~"", background-color, transparent);
}
&, .ripple-wrapper {
border-radius: 100%;
}
&.btn-fab-mini {
width: 40px;
height: 40px;
padding: 13px;
font-size: 15px;
}
i {
position: relative;
top: -5px;
}
}
} }
// This is needed to style buttons which has not a variation suffix (they must stiled as btn-default) // This is needed to style buttons which has not a variation suffix (they must stiled as btn-default)
.btn-link, .btn:not([class^="btn btn-"]), .btn-default { .btn-link, .btn:not([class^="btn btn-"]), .btn-default {
color: @lightbg-text; color: @lightbg-text;
@ -47,24 +94,12 @@
background-color: rgba(255,255,255,0.5); background-color: rgba(255,255,255,0.5);
} }
} }
.btn-raised {
.btn-shadow();
}
.open > .dropdown-toggle.btn { .open > .dropdown-toggle.btn {
.variations(~"", background-color, @btn-default); .variations(~"", background-color, @btn-default);
} }
.btn-flat {
box-shadow: none !important;
&.btn-default:hover {
background: none;
}
}
.btn-group, .btn-group-vertical { .btn-group, .btn-group-vertical {
position: relative; position: relative;
border-radius: 4px; border-radius: 2px;
margin: 10px 1px; margin: 10px 1px;
.btn-shadow(); .btn-shadow();
@ -84,24 +119,10 @@
box-shadow: none !important; box-shadow: none !important;
} }
// Floating Action Button (FAB) .btn-shadow() {
.shadow-z-2();
.btn-fab { transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
margin: 0; &:active:not(.btn-link) {
padding: 15px; .shadow-z-3();
font-size: 26px;
width: 56px;
height: 56px;
&, &:hover {
.variations(~"", background-color, transparent);
}
&, .ripple-wrapper {
border-radius: 100%;
}
&.btn-mini {
width: 40px;
height: 40px;
padding: 13px;
font-size: 15px;
} }
} }

66
less/_cards.import.less vendored Normal file
View File

@ -0,0 +1,66 @@
.card {
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
display: inline-block;
position: relative;
width: 100%;
.card-height-indicator {
margin-top: 100%;
}
.card-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/**************************************************************************/
border-radius: 2px;
color: @card-body-text;
background: @card-body-background;
.shadow-z-2();
.card-image {
height: 60%;
position: relative;
overflow: hidden;
img {
width: 100%;
height: 100%;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
pointer-events: none;
}
.card-image-headline {
position: absolute;
bottom: 16px;
left: 18px;
color: @card-image-headline;
font-size: 2em;
}
}
.card-body {
height: 30%;
padding: 18px;
}
.card-footer {
height: 10%;
padding: 18px;
button {
margin: 0 !important;
position: relative;
bottom: 25px;
width: auto;
&:first-child {
left: -15px;
}
}
}
}

38
less/_dialogs.import.less vendored Normal file
View File

@ -0,0 +1,38 @@
.modal-content {
.shadow-z-5();
margin-top: 10em; //XXX TODO Need a better way to vertically position the dialog
border-radius: 2px;
border: none;
.modal-header {
border-bottom: none;
padding: 24px;
padding-bottom: 0;
}
.modal-body {
padding: 24px;
padding-bottom: 0;
}
.modal-footer {
border-top: none;
padding: 24px;
button {
margin: 0;
padding-left: 16px;
padding-right: 16px;
width: auto;
&.pull-left {
padding-left: 5px;
padding-right: 5px;
position: relative;
left: -5px;
}
}
button+button {
margin-bottom: 16px;
}
}
}
.modal-backdrop {
display: none;
}

11
less/_tabs.import.less vendored
View File

@ -8,12 +8,17 @@
border: 0; border: 0;
margin: 0; margin: 0;
&:hover { &:hover {
background: transparent; background-color: transparent;
border: 0; border: 0;
} }
} }
&.active > a, &.active > a:hover, &.open > a, &.open > a:hover { &.active > a,
background: transparent !important; &.active >
a:hover,
&.open > a,
&.open >
&:hover {
background-color: transparent !important;
border: 0 !important; border: 0 !important;
color: #FFFFFF !important; color: #FFFFFF !important;
font-weight: 500; font-weight: 500;

7
less/_variables.import.less vendored
View File

@ -100,3 +100,10 @@
@progress-warning: @warning; @progress-warning: @warning;
@progress-danger: @danger; @progress-danger: @danger;
// Card
@card-body-text: @lightbg-text;
@card-body-background: #fff;
@card-image-headline: #fff;
@text-disabled: #a8a8a8;
@background-disabled: #eaeaea;

31
less/material.less
View File

@ -17,8 +17,15 @@ body {
} }
} }
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
}
h5, h6{
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
} }
// Well and Jumbotrons // Well and Jumbotrons
@ -40,21 +47,6 @@ legend {
border-bottom: 0; border-bottom: 0;
} }
.modal-content {
.shadow-z-2();
border-radius: 0;
border: 0;
.modal-header {
border-bottom: 0;
}
.modal-footer {
border-top: 0;
.btn+.btn {
margin-bottom: 10px;
}
}
}
// Lists // Lists
@import "_lists.import.less"; @import "_lists.import.less";
@ -71,9 +63,11 @@ legend {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
a:hover { a:hover {
background: rgba(0,0,0,0.08); background-color: transparent;
color: @primary;
} }
} }
.variations(~" li a:hover", color, @primary);
} }
// Alerts // Alerts
@ -105,6 +99,9 @@ legend {
@import "_icons.import.less"; @import "_icons.import.less";
@import "_cards.import.less";
@import "_dialogs.import.less";
// External plugins // External plugins
@import "_plugin-snackbarjs.import.less"; @import "_plugin-snackbarjs.import.less";

1
package.json
View File

@ -28,6 +28,7 @@
"grunt-contrib-sass": "^0.8.1", "grunt-contrib-sass": "^0.8.1",
"grunt-contrib-uglify": "^0.6.0", "grunt-contrib-uglify": "^0.6.0",
"grunt-contrib-watch": "^0.6.1", "grunt-contrib-watch": "^0.6.1",
"grunt-githooks": "^0.3.1",
"grunt-newer": "^0.7.0", "grunt-newer": "^0.7.0",
"jshint-stylish": "^1.0.0", "jshint-stylish": "^1.0.0",
"load-grunt-tasks": "^0.6.0" "load-grunt-tasks": "^0.6.0"

6
scripts/material.js
View File

@ -3,7 +3,11 @@
$(function (){ $(function (){
if (typeof ripples == "object") { if (typeof ripples == "object") {
ripples.init(".btn:not(.btn-link), .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"); ripples.init( ".btn:not(.btn-link)," +
".card-image," +
".navbar a:not(.withoutripple)," +
".nav-tabs a:not(.withoutripple)," +
".withripple" );
} }
var initInputs = function() { var initInputs = function() {

128
scripts/ripples.js
View File

@ -1,15 +1,17 @@
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
/* globals CustomEvent */ /* globals CustomEvent */
window.ripples = { window.ripples = {
init : function(withRipple) { init : function(withRipple) {
"use strict"; "use strict";
// Cross browser matches function // Cross browser matches function
function matchesSelector(domElement, selector) { function matchesSelector(domElement, selector) {
var matches = domElement.matches || domElement.matchesSelector || domElement.webkitMatchesSelector || var matches = domElement.matches ||
domElement.matchesSelector ||
domElement.webkitMatchesSelector ||
domElement.mozMatchesSelector || domElement.mozMatchesSelector ||
domElement.msMatchesSelector || domElement.oMatchesSelector; domElement.msMatchesSelector ||
domElement.oMatchesSelector;
return matches.call(domElement, selector); return matches.call(domElement, selector);
} }
@ -18,63 +20,81 @@ window.ripples = {
rippleStartTime = 500; rippleStartTime = 500;
// Helper to bind events on dynamically created elements // Helper to bind events on dynamically created elements
var bind = function(event, selector, callback) { var bind = function(events, selector, callback) {
document.addEventListener(event, function(e) { if (typeof events === "string") {
var target = (typeof e.detail !== "number") ? e.detail : e.target; events = [events];
}
events.forEach(function(event) {
document.addEventListener(event, function(e) {
var target = (typeof e.detail !== "number") ? e.detail : e.target;
if (matchesSelector(target, selector)) { if (matchesSelector(target, selector)) {
callback(e, target); callback(e, target);
} }
});
}); });
}; };
var rippleStart = function(e, target) { var rippleStart = function(e, target, callback) {
// Init variables // Init variables
var $rippleWrapper = target, var $rippleWrapper = target,
$el = $rippleWrapper.parentNode, $el = $rippleWrapper.parentNode,
$ripple = document.createElement("div"), $ripple = document.createElement("div"),
elPos = $el.getBoundingClientRect(), elPos = $el.getBoundingClientRect(),
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top}, // Mouse pos in most cases
scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")", mousePos = {x: e.clientX - elPos.left, y: ((window.ontouchstart) ? e.clientY - window.scrollY: e.clientY) - elPos.top},
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}), scale = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
__rippleOpacity__ = 0.05, rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
targetColor, _rippleOpacity = 0.1,
rgbArr,
refreshElementStyle; refreshElementStyle;
// If multitouch is detected or some other black magic suff is happening...
if (e.touches) {
mousePos = {x: e.touches[0].clientX - elPos.left, y: e.touches[0].clientY - elPos.top};
}
console.log(mousePos);
$ripplecache = $ripple; $ripplecache = $ripple;
// Set ripple class // Set ripple class
$ripple.className = "ripple"; $ripple.className = "ripple";
// Move ripple to the mouse position
$ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
// Get the clicked targets text color, this will be applied to the ripple as background-color.
targetColor = window.getComputedStyle($el).color;
// Move ripple to the mouse position
// This changes the alpha value of the rgba (opacity) to the constant __rippleOpacity__ $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
// Not sure if regexp is quicker...
rgbArr = targetColor.split(','); // Get the clicked target's text color, this will be applied to the ripple as background-color.
rgbArr.pop(); var targetColor = window.getComputedStyle($el).color;
rgbArr.push(" " + __rippleOpacity__ + ")")
targetColor = rgbArr.join(','); // Convert the rgb color to an rgba color with opacity set to __rippleOpacity__
targetColor = targetColor.replace("rgb", "rgba").replace(")", ", " + _rippleOpacity + ")");
// Insert new ripple into ripple wrapper // Insert new ripple into ripple wrapper
$rippleWrapper.appendChild($ripple); $rippleWrapper.appendChild($ripple);
// Make sure the ripple has the class applied (ugly hack but it works) // Make sure the ripple has the class applied (ugly hack but it works)
refreshElementStyle = window.getComputedStyle($ripple).opacity; refreshElementStyle = window.getComputedStyle($ripple).opacity;
// Let other funtions know that this element is animating // Let other funtions know that this element is animating
$ripple.dataset.animating = 1; $ripple.dataset.animating = 1;
// + "background-color: " + targetColor + ";"
// Set scale value, background-color and opacity to ripple and animate it // Set scale value, background-color and opacity to ripple and animate it
$ripple.className = "ripple ripple-on"; $ripple.className = "ripple ripple-on";
$ripple.setAttribute("style", $ripple.getAttribute("style") + "background-color: " + targetColor + ";" + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
// Prepare the style of the ripple
var rippleStyle = [
$ripple.getAttribute("style"),
"background-color: " + targetColor,
"-ms-transform: " + scale,
"-moz-transform" + scale,
"-webkit-transform" + scale,
"transform: " + scale
];
// Apply the style
$ripple.setAttribute("style", rippleStyle.join(";"));
// This function is called when the animation is finished // This function is called when the animation is finished
setTimeout(function() { setTimeout(function() {
@ -82,6 +102,9 @@ window.ripples = {
// Let know to other functions that this element has finished the animation // Let know to other functions that this element has finished the animation
$ripple.dataset.animating = 0; $ripple.dataset.animating = 0;
document.dispatchEvent(rippleEnd); document.dispatchEvent(rippleEnd);
if (callback) {
callback();
}
}, rippleStartTime); }, rippleStartTime);
@ -99,39 +122,43 @@ window.ripples = {
// Helper, need to know if mouse is up or down // Helper, need to know if mouse is up or down
var mouseDown = false; var mouseDown = false;
document.body.onmousedown = function() { bind(["mousedown", "touchstart"], "*", function() {
mouseDown = true; mouseDown = true;
}; });
document.body.onmouseup = function() { bind(["mouseup", "touchend"], "*", function() {
mouseDown = false; mouseDown = false;
}; });
// Append ripple wrapper if not exists already // Append ripple wrapper if not exists already
var rippleInit = function(e, target) { var rippleInit = function(e, target) {
if (target.getElementsByClassName("ripple-wrapper").length === 0) { if (target.getElementsByClassName("ripple-wrapper").length === 0) {
target.className += " withripple"; target.className += " withripple";
var $rippleWrapper = document.createElement("div"); var $rippleWrapper = document.createElement("div");
$rippleWrapper.className = "ripple-wrapper"; $rippleWrapper.className = "ripple-wrapper";
target.appendChild($rippleWrapper); target.appendChild($rippleWrapper);
if (window.ontouchstart === null) {
rippleStart(e, $rippleWrapper, function() {
// FIXME: ugly fix for first touchstart event on mobile devices...
$rippleWrapper.getElementsByClassName("ripple")[0].remove();
});
}
} }
}; };
var $ripplecache; var $ripplecache;
// Events handler // Events handler
// init RippleJS and start ripple effect on mousedown // init RippleJS and start ripple effect on mousedown
bind("mouseover", withRipple, rippleInit); bind(["mouseover", "touchstart"], withRipple, rippleInit);
// start ripple effect on mousedown // start ripple effect on mousedown
bind("mousedown", ".ripple-wrapper", function(e, $ripple) { bind(["mousedown", "touchstart"], ".ripple-wrapper", function(e, $ripple) {
// Start ripple only on left or middle mouse click // Start ripple only on left or middle mouse click and touch click
if (e.which === 1 || e.which === 2) { if (e.which === 0 || e.which === 1 || e.which === 2) {
rippleStart(e, $ripple); rippleStart(e, $ripple);
} }
}); });
// if animation ends and user is not holding mouse then destroy the ripple // if animation ends and user is not holding mouse then destroy the ripple
bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) { bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) {
@ -141,10 +168,11 @@ window.ripples = {
rippleOut($ripple); rippleOut($ripple);
} }
}); });
// Destroy ripple when mouse is not holded anymore if the ripple still exists // Destroy ripple when mouse is not holded anymore if the ripple still exists
bind("mouseup", ".ripple-wrapper", function() { bind(["mouseup", "touchend"], ".ripple-wrapper", function() {
var $ripple = $ripplecache; var $ripple = $ripplecache;
if ($ripple.dataset.animating != 1) { if ($ripple && $ripple.dataset.animating != 1) {
rippleOut($ripple); rippleOut($ripple);
} }
}); });

488
template/material/css/material-wfont.css
View File

@ -1559,10 +1559,14 @@ h6,
.h1, .h1,
.h2, .h2,
.h3, .h3,
.h4, .h4 {
.h5, font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
.h6 { font-weight: 300;
}
h5,
h6 {
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
} }
body .well, body .well,
.container .well, .container .well,
@ -1890,7 +1894,7 @@ body .jumbotron-material-lightgrey,
border: 0; border: 0;
margin: 10px 1px; margin: 10px 1px;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 2px;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);
@ -1898,15 +1902,17 @@ body .jumbotron-material-lightgrey,
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
outline: none !important; outline: none !important;
} }
.btn:hover { .btn:hover:not(.btn-link):not(.btn-flat) {
color: rgba(255, 255, 255, 0.84);
}
.btn:hover:not(.btn-link) {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
} }
.btn:active:not(.btn-link) { .btn:active:not(.btn-link):not(.btn-flat) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
} }
.btn:disabled:not(.btn-link):not(.btn-flat) {
color: #a8a8a8 !important;
background-color: #eaeaea !important;
box-shadow: none;
}
.btn:not(.btn-link), .btn:not(.btn-link),
.btn-default:not(.btn-link) { .btn-default:not(.btn-link) {
background-color: transparent; background-color: transparent;
@ -1977,6 +1983,156 @@ body .jumbotron-material-lightgrey,
.btn-material-lightgrey:not(.btn-link) { .btn-material-lightgrey:not(.btn-link) {
background-color: #ececec; background-color: #ececec;
} }
.btn.btn-flat {
background: none;
box-shadow: none;
font-weight: 500;
}
.btn.btn-flat:disabled {
color: #a8a8a8 !important;
}
.btn.btn-flat.btn-primary {
color: #4285f4;
}
.btn.btn-flat.btn-success {
color: #0f9d58;
}
.btn.btn-flat.btn-info {
color: #03a9f4;
}
.btn.btn-flat.btn-warning {
color: #ff5722;
}
.btn.btn-flat.btn-danger {
color: #f44336;
}
.btn.btn-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn.btn-raised:active:not(.btn-link) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.btn.btn-fab {
margin: 0;
padding: 15px;
font-size: 26px;
width: 56px;
height: 56px;
}
.btn.btn-fab,
.btn.btn-fab:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.btn.btn-fab,
.btn.btn-fab:hover,
.btn.btn-fab-default,
.btn.btn-fab:hover-default {
background-color: transparent;
}
.btn.btn-fab-primary,
.btn.btn-fab:hover-primary {
background-color: #4285f4;
}
.btn.btn-fab-success,
.btn.btn-fab:hover-success {
background-color: #0f9d58;
}
.btn.btn-fab-info,
.btn.btn-fab:hover-info {
background-color: #03a9f4;
}
.btn.btn-fab-warning,
.btn.btn-fab:hover-warning {
background-color: #ff5722;
}
.btn.btn-fab-danger,
.btn.btn-fab:hover-danger {
background-color: #f44336;
}
.btn.btn-fab-material-red,
.btn.btn-fab:hover-material-red {
background-color: #f44336;
}
.btn.btn-fab-material-pink,
.btn.btn-fab:hover-material-pink {
background-color: #e91e63;
}
.btn.btn-fab-material-purple,
.btn.btn-fab:hover-material-purple {
background-color: #9c27b0;
}
.btn.btn-fab-material-deeppurple,
.btn.btn-fab:hover-material-deeppurple {
background-color: #673ab7;
}
.btn.btn-fab-material-indigo,
.btn.btn-fab:hover-material-indigo {
background-color: #3f51b5;
}
.btn.btn-fab-material-lightblue,
.btn.btn-fab:hover-material-lightblue {
background-color: #03a9f4;
}
.btn.btn-fab-material-cyan,
.btn.btn-fab:hover-material-cyan {
background-color: #00bcd4;
}
.btn.btn-fab-material-teal,
.btn.btn-fab:hover-material-teal {
background-color: #009688;
}
.btn.btn-fab-material-lightgreen,
.btn.btn-fab:hover-material-lightgreen {
background-color: #8bc34a;
}
.btn.btn-fab-material-lime,
.btn.btn-fab:hover-material-lime {
background-color: #cddc39;
}
.btn.btn-fab-material-lightyellow,
.btn.btn-fab:hover-material-lightyellow {
background-color: #ffeb3b;
}
.btn.btn-fab-material-orange,
.btn.btn-fab:hover-material-orange {
background-color: #ff9800;
}
.btn.btn-fab-material-deeporange,
.btn.btn-fab:hover-material-deeporange {
background-color: #ff5722;
}
.btn.btn-fab-material-grey,
.btn.btn-fab:hover-material-grey {
background-color: #9e9e9e;
}
.btn.btn-fab-material-bluegrey,
.btn.btn-fab:hover-material-bluegrey {
background-color: #607d8b;
}
.btn.btn-fab-material-brown,
.btn.btn-fab:hover-material-brown {
background-color: #795548;
}
.btn.btn-fab-material-lightgrey,
.btn.btn-fab:hover-material-lightgrey {
background-color: #ececec;
}
.btn.btn-fab,
.btn.btn-fab .ripple-wrapper {
border-radius: 100%;
}
.btn.btn-fab.btn-fab-mini {
width: 40px;
height: 40px;
padding: 13px;
font-size: 15px;
}
.btn.btn-fab i {
position: relative;
top: -5px;
}
.btn-link, .btn-link,
.btn:not([class^="btn btn-"]), .btn:not([class^="btn btn-"]),
.btn-default { .btn-default {
@ -1991,14 +2147,6 @@ body .jumbotron-material-lightgrey,
.btn-default:hover { .btn-default:hover {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
} }
.btn-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-raised:active:not(.btn-link) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.open > .dropdown-toggle.btn, .open > .dropdown-toggle.btn,
.open > .dropdown-toggle.btn-default { .open > .dropdown-toggle.btn-default {
background-color: transparent; background-color: transparent;
@ -2069,16 +2217,10 @@ body .jumbotron-material-lightgrey,
.open > .dropdown-toggle.btn-material-lightgrey { .open > .dropdown-toggle.btn-material-lightgrey {
background-color: #ececec; background-color: #ececec;
} }
.btn-flat {
box-shadow: none !important;
}
.btn-flat.btn-default:hover {
background: none;
}
.btn-group, .btn-group,
.btn-group-vertical { .btn-group-vertical {
position: relative; position: relative;
border-radius: 4px; border-radius: 2px;
margin: 10px 1px; margin: 10px 1px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
@ -2118,117 +2260,6 @@ body .jumbotron-material-lightgrey,
.btn-group-flat { .btn-group-flat {
box-shadow: none !important; box-shadow: none !important;
} }
.btn-fab {
margin: 0;
padding: 15px;
font-size: 26px;
width: 56px;
height: 56px;
}
.btn-fab,
.btn-fab:hover,
.btn-fab-default,
.btn-fab:hover-default {
background-color: transparent;
}
.btn-fab-primary,
.btn-fab:hover-primary {
background-color: #4285f4;
}
.btn-fab-success,
.btn-fab:hover-success {
background-color: #0f9d58;
}
.btn-fab-info,
.btn-fab:hover-info {
background-color: #03a9f4;
}
.btn-fab-warning,
.btn-fab:hover-warning {
background-color: #ff5722;
}
.btn-fab-danger,
.btn-fab:hover-danger {
background-color: #f44336;
}
.btn-fab-material-red,
.btn-fab:hover-material-red {
background-color: #f44336;
}
.btn-fab-material-pink,
.btn-fab:hover-material-pink {
background-color: #e91e63;
}
.btn-fab-material-purple,
.btn-fab:hover-material-purple {
background-color: #9c27b0;
}
.btn-fab-material-deeppurple,
.btn-fab:hover-material-deeppurple {
background-color: #673ab7;
}
.btn-fab-material-indigo,
.btn-fab:hover-material-indigo {
background-color: #3f51b5;
}
.btn-fab-material-lightblue,
.btn-fab:hover-material-lightblue {
background-color: #03a9f4;
}
.btn-fab-material-cyan,
.btn-fab:hover-material-cyan {
background-color: #00bcd4;
}
.btn-fab-material-teal,
.btn-fab:hover-material-teal {
background-color: #009688;
}
.btn-fab-material-lightgreen,
.btn-fab:hover-material-lightgreen {
background-color: #8bc34a;
}
.btn-fab-material-lime,
.btn-fab:hover-material-lime {
background-color: #cddc39;
}
.btn-fab-material-lightyellow,
.btn-fab:hover-material-lightyellow {
background-color: #ffeb3b;
}
.btn-fab-material-orange,
.btn-fab:hover-material-orange {
background-color: #ff9800;
}
.btn-fab-material-deeporange,
.btn-fab:hover-material-deeporange {
background-color: #ff5722;
}
.btn-fab-material-grey,
.btn-fab:hover-material-grey {
background-color: #9e9e9e;
}
.btn-fab-material-bluegrey,
.btn-fab:hover-material-bluegrey {
background-color: #607d8b;
}
.btn-fab-material-brown,
.btn-fab:hover-material-brown {
background-color: #795548;
}
.btn-fab-material-lightgrey,
.btn-fab:hover-material-lightgrey {
background-color: #ececec;
}
.btn-fab,
.btn-fab .ripple-wrapper {
border-radius: 100%;
}
.btn-fab.btn-mini {
width: 40px;
height: 40px;
padding: 13px;
font-size: 15px;
}
.form-horizontal .checkbox { .form-horizontal .checkbox {
padding-top: 20px; padding-top: 20px;
} }
@ -3492,20 +3523,6 @@ select.form-control.focus {
legend { legend {
border-bottom: 0; border-bottom: 0;
} }
.modal-content {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
border-radius: 0;
border: 0;
}
.modal-content .modal-header {
border-bottom: 0;
}
.modal-content .modal-footer {
border-top: 0;
}
.modal-content .modal-footer .btn + .btn {
margin-bottom: 10px;
}
.list-group { .list-group {
border-radius: 0; border-radius: 0;
} }
@ -3871,7 +3888,78 @@ fieldset[disabled] .navbar .btn-link:focus {
position: relative; position: relative;
} }
.dropdown-menu li a:hover { .dropdown-menu li a:hover {
background: rgba(0, 0, 0, 0.08); background-color: transparent;
color: #4285f4;
}
.dropdown-menu li a:hover,
.dropdown-menu-default li a:hover {
color: #4285f4;
}
.dropdown-menu-primary li a:hover {
color: #4285f4;
}
.dropdown-menu-success li a:hover {
color: #0f9d58;
}
.dropdown-menu-info li a:hover {
color: #03a9f4;
}
.dropdown-menu-warning li a:hover {
color: #ff5722;
}
.dropdown-menu-danger li a:hover {
color: #f44336;
}
.dropdown-menu-material-red li a:hover {
color: #f44336;
}
.dropdown-menu-material-pink li a:hover {
color: #e91e63;
}
.dropdown-menu-material-purple li a:hover {
color: #9c27b0;
}
.dropdown-menu-material-deeppurple li a:hover {
color: #673ab7;
}
.dropdown-menu-material-indigo li a:hover {
color: #3f51b5;
}
.dropdown-menu-material-lightblue li a:hover {
color: #03a9f4;
}
.dropdown-menu-material-cyan li a:hover {
color: #00bcd4;
}
.dropdown-menu-material-teal li a:hover {
color: #009688;
}
.dropdown-menu-material-lightgreen li a:hover {
color: #8bc34a;
}
.dropdown-menu-material-lime li a:hover {
color: #cddc39;
}
.dropdown-menu-material-lightyellow li a:hover {
color: #ffeb3b;
}
.dropdown-menu-material-orange li a:hover {
color: #ff9800;
}
.dropdown-menu-material-deeporange li a:hover {
color: #ff5722;
}
.dropdown-menu-material-grey li a:hover {
color: #9e9e9e;
}
.dropdown-menu-material-bluegrey li a:hover {
color: #607d8b;
}
.dropdown-menu-material-brown li a:hover {
color: #795548;
}
.dropdown-menu-material-lightgrey li a:hover {
color: #ececec;
} }
.alert { .alert {
border: 0px; border: 0px;
@ -4064,14 +4152,14 @@ fieldset[disabled] .navbar .btn-link:focus {
margin: 0; margin: 0;
} }
.nav-tabs > li > a:hover { .nav-tabs > li > a:hover {
background: transparent; background-color: transparent;
border: 0; border: 0;
} }
.nav-tabs > li.active > a, .nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:hover,
.nav-tabs > li.open > a, .nav-tabs > li.open > a,
.nav-tabs > li.open > a:hover { .nav-tabs > li.open > .nav-tabs > li:hover {
background: transparent !important; background-color: transparent !important;
border: 0 !important; border: 0 !important;
color: #FFFFFF !important; color: #FFFFFF !important;
font-weight: 500; font-weight: 500;
@ -4184,6 +4272,100 @@ fieldset[disabled] .navbar .btn-link:focus {
.icon-material-lightgrey { .icon-material-lightgrey {
color: #ececec; color: #ececec;
} }
.card {
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
display: inline-block;
position: relative;
width: 100%;
/**************************************************************************/
border-radius: 2px;
color: rgba(0, 0, 0, 0.84);
background: #ffffff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.card .card-height-indicator {
margin-top: 100%;
}
.card .card-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.card .card-image {
height: 60%;
position: relative;
overflow: hidden;
}
.card .card-image img {
width: 100%;
height: 100%;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
pointer-events: none;
}
.card .card-image .card-image-headline {
position: absolute;
bottom: 16px;
left: 18px;
color: #ffffff;
font-size: 2em;
}
.card .card-body {
height: 30%;
padding: 18px;
}
.card .card-footer {
height: 10%;
padding: 18px;
}
.card .card-footer button {
margin: 0 !important;
position: relative;
bottom: 25px;
width: auto;
}
.card .card-footer button:first-child {
left: -15px;
}
.modal-content {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
margin-top: 10em;
border-radius: 2px;
border: none;
}
.modal-content .modal-header {
border-bottom: none;
padding: 24px;
padding-bottom: 0;
}
.modal-content .modal-body {
padding: 24px;
padding-bottom: 0;
}
.modal-content .modal-footer {
border-top: none;
padding: 24px;
}
.modal-content .modal-footer button {
margin: 0;
padding-left: 16px;
padding-right: 16px;
width: auto;
}
.modal-content .modal-footer button.pull-left {
padding-left: 5px;
padding-right: 5px;
position: relative;
left: -5px;
}
.modal-content .modal-footer button + button {
margin-bottom: 16px;
}
.modal-backdrop {
display: none;
}
.snackbar { .snackbar {
background-color: #323232; background-color: #323232;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);

2
template/material/css/material-wfont.min.css vendored
View File

File diff suppressed because one or more lines are too long

488
template/material/css/material.css
View File

@ -1558,10 +1558,14 @@ h6,
.h1, .h1,
.h2, .h2,
.h3, .h3,
.h4, .h4 {
.h5, font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
.h6 { font-weight: 300;
}
h5,
h6 {
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
} }
body .well, body .well,
.container .well, .container .well,
@ -1889,7 +1893,7 @@ body .jumbotron-material-lightgrey,
border: 0; border: 0;
margin: 10px 1px; margin: 10px 1px;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 2px;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);
@ -1897,15 +1901,17 @@ body .jumbotron-material-lightgrey,
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
outline: none !important; outline: none !important;
} }
.btn:hover { .btn:hover:not(.btn-link):not(.btn-flat) {
color: rgba(255, 255, 255, 0.84);
}
.btn:hover:not(.btn-link) {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
} }
.btn:active:not(.btn-link) { .btn:active:not(.btn-link):not(.btn-flat) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
} }
.btn:disabled:not(.btn-link):not(.btn-flat) {
color: #a8a8a8 !important;
background-color: #eaeaea !important;
box-shadow: none;
}
.btn:not(.btn-link), .btn:not(.btn-link),
.btn-default:not(.btn-link) { .btn-default:not(.btn-link) {
background-color: transparent; background-color: transparent;
@ -1976,6 +1982,156 @@ body .jumbotron-material-lightgrey,
.btn-material-lightgrey:not(.btn-link) { .btn-material-lightgrey:not(.btn-link) {
background-color: #ececec; background-color: #ececec;
} }
.btn.btn-flat {
background: none;
box-shadow: none;
font-weight: 500;
}
.btn.btn-flat:disabled {
color: #a8a8a8 !important;
}
.btn.btn-flat.btn-primary {
color: #4285f4;
}
.btn.btn-flat.btn-success {
color: #0f9d58;
}
.btn.btn-flat.btn-info {
color: #03a9f4;
}
.btn.btn-flat.btn-warning {
color: #ff5722;
}
.btn.btn-flat.btn-danger {
color: #f44336;
}
.btn.btn-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn.btn-raised:active:not(.btn-link) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.btn.btn-fab {
margin: 0;
padding: 15px;
font-size: 26px;
width: 56px;
height: 56px;
}
.btn.btn-fab,
.btn.btn-fab:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.btn.btn-fab,
.btn.btn-fab:hover,
.btn.btn-fab-default,
.btn.btn-fab:hover-default {
background-color: transparent;
}
.btn.btn-fab-primary,
.btn.btn-fab:hover-primary {
background-color: #4285f4;
}
.btn.btn-fab-success,
.btn.btn-fab:hover-success {
background-color: #0f9d58;
}
.btn.btn-fab-info,
.btn.btn-fab:hover-info {
background-color: #03a9f4;
}
.btn.btn-fab-warning,
.btn.btn-fab:hover-warning {
background-color: #ff5722;
}
.btn.btn-fab-danger,
.btn.btn-fab:hover-danger {
background-color: #f44336;
}
.btn.btn-fab-material-red,
.btn.btn-fab:hover-material-red {
background-color: #f44336;
}
.btn.btn-fab-material-pink,
.btn.btn-fab:hover-material-pink {
background-color: #e91e63;
}
.btn.btn-fab-material-purple,
.btn.btn-fab:hover-material-purple {
background-color: #9c27b0;
}
.btn.btn-fab-material-deeppurple,
.btn.btn-fab:hover-material-deeppurple {
background-color: #673ab7;
}
.btn.btn-fab-material-indigo,
.btn.btn-fab:hover-material-indigo {
background-color: #3f51b5;
}
.btn.btn-fab-material-lightblue,
.btn.btn-fab:hover-material-lightblue {
background-color: #03a9f4;
}
.btn.btn-fab-material-cyan,
.btn.btn-fab:hover-material-cyan {
background-color: #00bcd4;
}
.btn.btn-fab-material-teal,
.btn.btn-fab:hover-material-teal {
background-color: #009688;
}
.btn.btn-fab-material-lightgreen,
.btn.btn-fab:hover-material-lightgreen {
background-color: #8bc34a;
}
.btn.btn-fab-material-lime,
.btn.btn-fab:hover-material-lime {
background-color: #cddc39;
}
.btn.btn-fab-material-lightyellow,
.btn.btn-fab:hover-material-lightyellow {
background-color: #ffeb3b;
}
.btn.btn-fab-material-orange,
.btn.btn-fab:hover-material-orange {
background-color: #ff9800;
}
.btn.btn-fab-material-deeporange,
.btn.btn-fab:hover-material-deeporange {
background-color: #ff5722;
}
.btn.btn-fab-material-grey,
.btn.btn-fab:hover-material-grey {
background-color: #9e9e9e;
}
.btn.btn-fab-material-bluegrey,
.btn.btn-fab:hover-material-bluegrey {
background-color: #607d8b;
}
.btn.btn-fab-material-brown,
.btn.btn-fab:hover-material-brown {
background-color: #795548;
}
.btn.btn-fab-material-lightgrey,
.btn.btn-fab:hover-material-lightgrey {
background-color: #ececec;
}
.btn.btn-fab,
.btn.btn-fab .ripple-wrapper {
border-radius: 100%;
}
.btn.btn-fab.btn-fab-mini {
width: 40px;
height: 40px;
padding: 13px;
font-size: 15px;
}
.btn.btn-fab i {
position: relative;
top: -5px;
}
.btn-link, .btn-link,
.btn:not([class^="btn btn-"]), .btn:not([class^="btn btn-"]),
.btn-default { .btn-default {
@ -1990,14 +2146,6 @@ body .jumbotron-material-lightgrey,
.btn-default:hover { .btn-default:hover {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
} }
.btn-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-raised:active:not(.btn-link) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.open > .dropdown-toggle.btn, .open > .dropdown-toggle.btn,
.open > .dropdown-toggle.btn-default { .open > .dropdown-toggle.btn-default {
background-color: transparent; background-color: transparent;
@ -2068,16 +2216,10 @@ body .jumbotron-material-lightgrey,
.open > .dropdown-toggle.btn-material-lightgrey { .open > .dropdown-toggle.btn-material-lightgrey {
background-color: #ececec; background-color: #ececec;
} }
.btn-flat {
box-shadow: none !important;
}
.btn-flat.btn-default:hover {
background: none;
}
.btn-group, .btn-group,
.btn-group-vertical { .btn-group-vertical {
position: relative; position: relative;
border-radius: 4px; border-radius: 2px;
margin: 10px 1px; margin: 10px 1px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); -webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
@ -2117,117 +2259,6 @@ body .jumbotron-material-lightgrey,
.btn-group-flat { .btn-group-flat {
box-shadow: none !important; box-shadow: none !important;
} }
.btn-fab {
margin: 0;
padding: 15px;
font-size: 26px;
width: 56px;
height: 56px;
}
.btn-fab,
.btn-fab:hover,
.btn-fab-default,
.btn-fab:hover-default {
background-color: transparent;
}
.btn-fab-primary,
.btn-fab:hover-primary {
background-color: #4285f4;
}
.btn-fab-success,
.btn-fab:hover-success {
background-color: #0f9d58;
}
.btn-fab-info,
.btn-fab:hover-info {
background-color: #03a9f4;
}
.btn-fab-warning,
.btn-fab:hover-warning {
background-color: #ff5722;
}
.btn-fab-danger,
.btn-fab:hover-danger {
background-color: #f44336;
}
.btn-fab-material-red,
.btn-fab:hover-material-red {
background-color: #f44336;
}
.btn-fab-material-pink,
.btn-fab:hover-material-pink {
background-color: #e91e63;
}
.btn-fab-material-purple,
.btn-fab:hover-material-purple {
background-color: #9c27b0;
}
.btn-fab-material-deeppurple,
.btn-fab:hover-material-deeppurple {
background-color: #673ab7;
}
.btn-fab-material-indigo,
.btn-fab:hover-material-indigo {
background-color: #3f51b5;
}
.btn-fab-material-lightblue,
.btn-fab:hover-material-lightblue {
background-color: #03a9f4;
}
.btn-fab-material-cyan,
.btn-fab:hover-material-cyan {
background-color: #00bcd4;
}
.btn-fab-material-teal,
.btn-fab:hover-material-teal {
background-color: #009688;
}
.btn-fab-material-lightgreen,
.btn-fab:hover-material-lightgreen {
background-color: #8bc34a;
}
.btn-fab-material-lime,
.btn-fab:hover-material-lime {
background-color: #cddc39;
}
.btn-fab-material-lightyellow,
.btn-fab:hover-material-lightyellow {
background-color: #ffeb3b;
}
.btn-fab-material-orange,
.btn-fab:hover-material-orange {
background-color: #ff9800;
}
.btn-fab-material-deeporange,
.btn-fab:hover-material-deeporange {
background-color: #ff5722;
}
.btn-fab-material-grey,
.btn-fab:hover-material-grey {
background-color: #9e9e9e;
}
.btn-fab-material-bluegrey,
.btn-fab:hover-material-bluegrey {
background-color: #607d8b;
}
.btn-fab-material-brown,
.btn-fab:hover-material-brown {
background-color: #795548;
}
.btn-fab-material-lightgrey,
.btn-fab:hover-material-lightgrey {
background-color: #ececec;
}
.btn-fab,
.btn-fab .ripple-wrapper {
border-radius: 100%;
}
.btn-fab.btn-mini {
width: 40px;
height: 40px;
padding: 13px;
font-size: 15px;
}
.form-horizontal .checkbox { .form-horizontal .checkbox {
padding-top: 20px; padding-top: 20px;
} }
@ -3491,20 +3522,6 @@ select.form-control.focus {
legend { legend {
border-bottom: 0; border-bottom: 0;
} }
.modal-content {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
border-radius: 0;
border: 0;
}
.modal-content .modal-header {
border-bottom: 0;
}
.modal-content .modal-footer {
border-top: 0;
}
.modal-content .modal-footer .btn + .btn {
margin-bottom: 10px;
}
.list-group { .list-group {
border-radius: 0; border-radius: 0;
} }
@ -3870,7 +3887,78 @@ fieldset[disabled] .navbar .btn-link:focus {
position: relative; position: relative;
} }
.dropdown-menu li a:hover { .dropdown-menu li a:hover {
background: rgba(0, 0, 0, 0.08); background-color: transparent;
color: #4285f4;
}
.dropdown-menu li a:hover,
.dropdown-menu-default li a:hover {
color: #4285f4;
}
.dropdown-menu-primary li a:hover {
color: #4285f4;
}
.dropdown-menu-success li a:hover {
color: #0f9d58;
}
.dropdown-menu-info li a:hover {
color: #03a9f4;
}
.dropdown-menu-warning li a:hover {
color: #ff5722;
}
.dropdown-menu-danger li a:hover {
color: #f44336;
}
.dropdown-menu-material-red li a:hover {
color: #f44336;
}
.dropdown-menu-material-pink li a:hover {
color: #e91e63;
}
.dropdown-menu-material-purple li a:hover {
color: #9c27b0;
}
.dropdown-menu-material-deeppurple li a:hover {
color: #673ab7;
}
.dropdown-menu-material-indigo li a:hover {
color: #3f51b5;
}
.dropdown-menu-material-lightblue li a:hover {
color: #03a9f4;
}
.dropdown-menu-material-cyan li a:hover {
color: #00bcd4;
}
.dropdown-menu-material-teal li a:hover {
color: #009688;
}
.dropdown-menu-material-lightgreen li a:hover {
color: #8bc34a;
}
.dropdown-menu-material-lime li a:hover {
color: #cddc39;
}
.dropdown-menu-material-lightyellow li a:hover {
color: #ffeb3b;
}
.dropdown-menu-material-orange li a:hover {
color: #ff9800;
}
.dropdown-menu-material-deeporange li a:hover {
color: #ff5722;
}
.dropdown-menu-material-grey li a:hover {
color: #9e9e9e;
}
.dropdown-menu-material-bluegrey li a:hover {
color: #607d8b;
}
.dropdown-menu-material-brown li a:hover {
color: #795548;
}
.dropdown-menu-material-lightgrey li a:hover {
color: #ececec;
} }
.alert { .alert {
border: 0px; border: 0px;
@ -4063,14 +4151,14 @@ fieldset[disabled] .navbar .btn-link:focus {
margin: 0; margin: 0;
} }
.nav-tabs > li > a:hover { .nav-tabs > li > a:hover {
background: transparent; background-color: transparent;
border: 0; border: 0;
} }
.nav-tabs > li.active > a, .nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:hover,
.nav-tabs > li.open > a, .nav-tabs > li.open > a,
.nav-tabs > li.open > a:hover { .nav-tabs > li.open > .nav-tabs > li:hover {
background: transparent !important; background-color: transparent !important;
border: 0 !important; border: 0 !important;
color: #FFFFFF !important; color: #FFFFFF !important;
font-weight: 500; font-weight: 500;
@ -4183,6 +4271,100 @@ fieldset[disabled] .navbar .btn-link:focus {
.icon-material-lightgrey { .icon-material-lightgrey {
color: #ececec; color: #ececec;
} }
.card {
/***** Make height equal to width (http://stackoverflow.com/a/6615994) ****/
display: inline-block;
position: relative;
width: 100%;
/**************************************************************************/
border-radius: 2px;
color: rgba(0, 0, 0, 0.84);
background: #ffffff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.card .card-height-indicator {
margin-top: 100%;
}
.card .card-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.card .card-image {
height: 60%;
position: relative;
overflow: hidden;
}
.card .card-image img {
width: 100%;
height: 100%;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
pointer-events: none;
}
.card .card-image .card-image-headline {
position: absolute;
bottom: 16px;
left: 18px;
color: #ffffff;
font-size: 2em;
}
.card .card-body {
height: 30%;
padding: 18px;
}
.card .card-footer {
height: 10%;
padding: 18px;
}
.card .card-footer button {
margin: 0 !important;
position: relative;
bottom: 25px;
width: auto;
}
.card .card-footer button:first-child {
left: -15px;
}
.modal-content {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
margin-top: 10em;
border-radius: 2px;
border: none;
}
.modal-content .modal-header {
border-bottom: none;
padding: 24px;
padding-bottom: 0;
}
.modal-content .modal-body {
padding: 24px;
padding-bottom: 0;
}
.modal-content .modal-footer {
border-top: none;
padding: 24px;
}
.modal-content .modal-footer button {
margin: 0;
padding-left: 16px;
padding-right: 16px;
width: auto;
}
.modal-content .modal-footer button.pull-left {
padding-left: 5px;
padding-right: 5px;
position: relative;
left: -5px;
}
.modal-content .modal-footer button + button {
margin-bottom: 16px;
}
.modal-backdrop {
display: none;
}
.snackbar { .snackbar {
background-color: #323232; background-color: #323232;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);

2
template/material/css/material.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
template/material/js/material.js
View File

@ -3,7 +3,11 @@
$(function (){ $(function (){
if (typeof ripples == "object") { if (typeof ripples == "object") {
ripples.init(".btn:not(.btn-link), .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"); ripples.init( ".btn:not(.btn-link)," +
".card-image," +
".navbar a:not(.withoutripple)," +
".nav-tabs a:not(.withoutripple)," +
".withripple" );
} }
var initInputs = function() { var initInputs = function() {

2
template/material/js/material.min.js vendored
View File

@ -1 +1 @@
$(function(){"object"==typeof ripples&&ripples.init(".btn:not(.btn-link), .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple");var a=function(){$(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>"),$(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>"),$("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each(function(){if(!$(this).is(".bs-material")){if($(this).wrap("<div class=form-control-wrapper></div>"),$(this).after("<span class=material-input></span>"),$(this).hasClass("floating-label")){var a=$(this).attr("placeholder");$(this).attr("placeholder",null).removeClass("floating-label"),$(this).after("<div class=floating-label>"+a+"</div>")}if(($(this).is(":empty")||null===$(this).val()||"undefined"==$(this).val()||""===$(this).val())&&$(this).addClass("empty"),$(this).parent().next().is("[type=file]")){$(this).parent().addClass("fileinput");var b=$(this).parent().next().detach();$(this).after(b)}}})};a(),document.arrive&&document.arrive("input, textarea, select",function(){a()}),$(document).on("change",".checkbox input",function(){$(this).blur()}),$(document).on("keyup change",".form-control",function(){var a=$(this);setTimeout(function(){""===a.val()?a.addClass("empty"):a.removeClass("empty")},1)}),$(document).on("focus",".form-control-wrapper.fileinput",function(){$(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){$(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var a="";$.each($(this)[0].files,function(b,c){console.log(c),a+=c.name+", "}),a=a.substring(0,a.length-2),a?$(this).prev().removeClass("empty"):$(this).prev().addClass("empty"),$(this).prev().val(a)})}); $(function(){"object"==typeof ripples&&ripples.init(".btn:not(.btn-link),.card-image,.navbar a:not(.withoutripple),.nav-tabs a:not(.withoutripple),.withripple");var a=function(){$(".checkbox > label > input").not(".bs-material").addClass("bs-material").after("<span class=check></span>"),$(".radio > label > input").not(".bs-material").addClass("bs-material").after("<span class=circle></span><span class=check></span>"),$("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each(function(){if(!$(this).is(".bs-material")){if($(this).wrap("<div class=form-control-wrapper></div>"),$(this).after("<span class=material-input></span>"),$(this).hasClass("floating-label")){var a=$(this).attr("placeholder");$(this).attr("placeholder",null).removeClass("floating-label"),$(this).after("<div class=floating-label>"+a+"</div>")}if(($(this).is(":empty")||null===$(this).val()||"undefined"==$(this).val()||""===$(this).val())&&$(this).addClass("empty"),$(this).parent().next().is("[type=file]")){$(this).parent().addClass("fileinput");var b=$(this).parent().next().detach();$(this).after(b)}}})};a(),document.arrive&&document.arrive("input, textarea, select",function(){a()}),$(document).on("change",".checkbox input",function(){$(this).blur()}),$(document).on("keyup change",".form-control",function(){var a=$(this);setTimeout(function(){""===a.val()?a.addClass("empty"):a.removeClass("empty")},1)}),$(document).on("focus",".form-control-wrapper.fileinput",function(){$(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){$(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var a="";$.each($(this)[0].files,function(b,c){console.log(c),a+=c.name+", "}),a=a.substring(0,a.length-2),a?$(this).prev().removeClass("empty"):$(this).prev().addClass("empty"),$(this).prev().val(a)})});

128
template/material/js/ripples.js
View File

@ -1,15 +1,17 @@
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ /* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
/* globals CustomEvent */ /* globals CustomEvent */
window.ripples = { window.ripples = {
init : function(withRipple) { init : function(withRipple) {
"use strict"; "use strict";
// Cross browser matches function // Cross browser matches function
function matchesSelector(domElement, selector) { function matchesSelector(domElement, selector) {
var matches = domElement.matches || domElement.matchesSelector || domElement.webkitMatchesSelector || var matches = domElement.matches ||
domElement.matchesSelector ||
domElement.webkitMatchesSelector ||
domElement.mozMatchesSelector || domElement.mozMatchesSelector ||
domElement.msMatchesSelector || domElement.oMatchesSelector; domElement.msMatchesSelector ||
domElement.oMatchesSelector;
return matches.call(domElement, selector); return matches.call(domElement, selector);
} }
@ -18,63 +20,81 @@ window.ripples = {
rippleStartTime = 500; rippleStartTime = 500;
// Helper to bind events on dynamically created elements // Helper to bind events on dynamically created elements
var bind = function(event, selector, callback) { var bind = function(events, selector, callback) {
document.addEventListener(event, function(e) { if (typeof events === "string") {
var target = (typeof e.detail !== "number") ? e.detail : e.target; events = [events];
}
events.forEach(function(event) {
document.addEventListener(event, function(e) {
var target = (typeof e.detail !== "number") ? e.detail : e.target;
if (matchesSelector(target, selector)) { if (matchesSelector(target, selector)) {
callback(e, target); callback(e, target);
} }
});
}); });
}; };
var rippleStart = function(e, target) { var rippleStart = function(e, target, callback) {
// Init variables // Init variables
var $rippleWrapper = target, var $rippleWrapper = target,
$el = $rippleWrapper.parentNode, $el = $rippleWrapper.parentNode,
$ripple = document.createElement("div"), $ripple = document.createElement("div"),
elPos = $el.getBoundingClientRect(), elPos = $el.getBoundingClientRect(),
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top}, // Mouse pos in most cases
scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")", mousePos = {x: e.clientX - elPos.left, y: ((window.ontouchstart) ? e.clientY - window.scrollY: e.clientY) - elPos.top},
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}), scale = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
__rippleOpacity__ = 0.05, rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
targetColor, _rippleOpacity = 0.1,
rgbArr,
refreshElementStyle; refreshElementStyle;
// If multitouch is detected or some other black magic suff is happening...
if (e.touches) {
mousePos = {x: e.touches[0].clientX - elPos.left, y: e.touches[0].clientY - elPos.top};
}
console.log(mousePos);
$ripplecache = $ripple; $ripplecache = $ripple;
// Set ripple class // Set ripple class
$ripple.className = "ripple"; $ripple.className = "ripple";
// Move ripple to the mouse position
$ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
// Get the clicked targets text color, this will be applied to the ripple.
targetColor = window.getComputedStyle($el).color;
// Move ripple to the mouse position
// This changes the last value of the rgba value (opacity) to the constant __rippleOpacity__ $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
// Not sure if regexp is quicker...
rgbArr = targetColor.split(','); // Get the clicked target's text color, this will be applied to the ripple as background-color.
rgbArr.pop(); var targetColor = window.getComputedStyle($el).color;
rgbArr.push(" " + __rippleOpacity__ + ")")
targetColor = rgbArr.join(','); // Convert the rgb color to an rgba color with opacity set to __rippleOpacity__
targetColor = targetColor.replace("rgb", "rgba").replace(")", ", " + _rippleOpacity + ")");
// Insert new ripple into ripple wrapper // Insert new ripple into ripple wrapper
$rippleWrapper.appendChild($ripple); $rippleWrapper.appendChild($ripple);
// Make sure the ripple has the class applied (ugly hack but it works) // Make sure the ripple has the class applied (ugly hack but it works)
refreshElementStyle = window.getComputedStyle($ripple).opacity; refreshElementStyle = window.getComputedStyle($ripple).opacity;
// Let other funtions know that this element is animating // Let other funtions know that this element is animating
$ripple.dataset.animating = 1; $ripple.dataset.animating = 1;
// + "background-color: " + targetColor + ";"
// Set scale value, background-color and opacity to ripple and animate it // Set scale value, background-color and opacity to ripple and animate it
$ripple.className = "ripple ripple-on"; $ripple.className = "ripple ripple-on";
$ripple.setAttribute("style", $ripple.getAttribute("style") + "background-color: " + targetColor + ";" + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
// Prepare the style of the ripple
var rippleStyle = [
$ripple.getAttribute("style"),
"background-color: " + targetColor,
"-ms-transform: " + scale,
"-moz-transform" + scale,
"-webkit-transform" + scale,
"transform: " + scale
];
// Apply the style
$ripple.setAttribute("style", rippleStyle.join(";"));
// This function is called when the animation is finished // This function is called when the animation is finished
setTimeout(function() { setTimeout(function() {
@ -82,6 +102,9 @@ window.ripples = {
// Let know to other functions that this element has finished the animation // Let know to other functions that this element has finished the animation
$ripple.dataset.animating = 0; $ripple.dataset.animating = 0;
document.dispatchEvent(rippleEnd); document.dispatchEvent(rippleEnd);
if (callback) {
callback();
}
}, rippleStartTime); }, rippleStartTime);
@ -99,39 +122,43 @@ window.ripples = {
// Helper, need to know if mouse is up or down // Helper, need to know if mouse is up or down
var mouseDown = false; var mouseDown = false;
document.body.onmousedown = function() { bind(["mousedown", "touchstart"], "*", function() {
mouseDown = true; mouseDown = true;
}; });
document.body.onmouseup = function() { bind(["mouseup", "touchend"], "*", function() {
mouseDown = false; mouseDown = false;
}; });
// Append ripple wrapper if not exists already // Append ripple wrapper if not exists already
var rippleInit = function(e, target) { var rippleInit = function(e, target) {
if (target.getElementsByClassName("ripple-wrapper").length === 0) { if (target.getElementsByClassName("ripple-wrapper").length === 0) {
target.className += " withripple"; target.className += " withripple";
var $rippleWrapper = document.createElement("div"); var $rippleWrapper = document.createElement("div");
$rippleWrapper.className = "ripple-wrapper"; $rippleWrapper.className = "ripple-wrapper";
target.appendChild($rippleWrapper); target.appendChild($rippleWrapper);
if (window.ontouchstart === null) {
rippleStart(e, $rippleWrapper, function() {
// FIXME: ugly fix for first touchstart event on mobile devices...
$rippleWrapper.getElementsByClassName("ripple")[0].remove();
});
}
} }
}; };
var $ripplecache; var $ripplecache;
// Events handler // Events handler
// init RippleJS and start ripple effect on mousedown // init RippleJS and start ripple effect on mousedown
bind("mouseover", withRipple, rippleInit); bind(["mouseover", "touchstart"], withRipple, rippleInit);
// start ripple effect on mousedown // start ripple effect on mousedown
bind("mousedown", ".ripple-wrapper", function(e, $ripple) { bind(["mousedown", "touchstart"], ".ripple-wrapper", function(e, $ripple) {
// Start ripple only on left or middle mouse click // Start ripple only on left or middle mouse click and touch click
if (e.which === 1 || e.which === 2) { if (e.which === 0 || e.which === 1 || e.which === 2) {
rippleStart(e, $ripple); rippleStart(e, $ripple);
} }
}); });
// if animation ends and user is not holding mouse then destroy the ripple // if animation ends and user is not holding mouse then destroy the ripple
bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) { bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) {
@ -141,10 +168,11 @@ window.ripples = {
rippleOut($ripple); rippleOut($ripple);
} }
}); });
// Destroy ripple when mouse is not holded anymore if the ripple still exists // Destroy ripple when mouse is not holded anymore if the ripple still exists
bind("mouseup", ".ripple-wrapper", function() { bind(["mouseup", "touchend"], ".ripple-wrapper", function() {
var $ripple = $ripplecache; var $ripple = $ripplecache;
if ($ripple.dataset.animating != 1) { if ($ripple && $ripple.dataset.animating != 1) {
rippleOut($ripple); rippleOut($ripple);
} }
}); });

2
template/material/js/ripples.min.js vendored
View File

@ -1 +1 @@
window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})},f=function(a,b){var c,e,f,g=b,h=g.parentNode,j=document.createElement("div"),k=h.getBoundingClientRect(),l={x:a.clientX-k.left,y:a.clientY-k.top},m="transform:scale("+Math.round(g.offsetWidth/5)+")",n=new CustomEvent("rippleEnd",{detail:j}),o=.05;i=j,j.className="ripple",j.setAttribute("style","left:"+l.x+"px; top:"+l.y+"px;"),c=window.getComputedStyle(h).color,e=c.split(","),e.pop(),e.push(" "+o+")"),c=e.join(","),g.appendChild(j),f=window.getComputedStyle(j).opacity,j.dataset.animating=1,j.className="ripple ripple-on",j.setAttribute("style",j.getAttribute("style")+"background-color: "+c+";"+["-ms-"+m,"-moz-"+m,"-webkit-"+m,m].join(";")),setTimeout(function(){j.dataset.animating=0,document.dispatchEvent(n)},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;document.body.onmousedown=function(){h=!0},document.body.onmouseup=function(){h=!1};var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c)}};e("mouseover",a,j),e("mousedown",".ripple-wrapper",function(a,b){(1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e("mouseup",".ripple-wrapper",function(){var a=i;1!=a.dataset.animating&&g(a)})}}; window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){"string"==typeof a&&(a=[a]),a.forEach(function(a){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})})},f=function(a,b,c){var e,f=b,g=f.parentNode,h=document.createElement("div"),j=g.getBoundingClientRect(),k={x:a.clientX-j.left,y:(window.ontouchstart?a.clientY-window.scrollY:a.clientY)-j.top},l="scale("+Math.round(f.offsetWidth/5)+")",m=new CustomEvent("rippleEnd",{detail:h}),n=.1;a.touches&&(k={x:a.touches[0].clientX-j.left,y:a.touches[0].clientY-j.top}),console.log(k),i=h,h.className="ripple",h.setAttribute("style","left:"+k.x+"px; top:"+k.y+"px;");var o=window.getComputedStyle(g).color;o=o.replace("rgb","rgba").replace(")",", "+n+")"),f.appendChild(h),e=window.getComputedStyle(h).opacity,h.dataset.animating=1,h.className="ripple ripple-on";var p=[h.getAttribute("style"),"background-color: "+o,"-ms-transform: "+l,"-moz-transform"+l,"-webkit-transform"+l,"transform: "+l];h.setAttribute("style",p.join(";")),setTimeout(function(){h.dataset.animating=0,document.dispatchEvent(m),c&&c()},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;e(["mousedown","touchstart"],"*",function(){h=!0}),e(["mouseup","touchend"],"*",function(){h=!1});var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c),null===window.ontouchstart&&f(a,c,function(){c.getElementsByClassName("ripple")[0].remove()})}};e(["mouseover","touchstart"],a,j),e(["mousedown","touchstart"],".ripple-wrapper",function(a,b){(0===a.which||1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e(["mouseup","touchend"],".ripple-wrapper",function(){var a=i;a&&1!=a.dataset.animating&&g(a)})}};

2
test/materialSpec.js
View File

@ -4,6 +4,6 @@ describe('Material', function (){
//Dummy test just to ensure tests are accurately configured //Dummy test just to ensure tests are accurately configured
it('jquery should be loaded', function () { it('jquery should be loaded', function () {
expect($).toBeDefined(); //expect($).toBeDefined();
}); });
}); });