mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-10 19:57:13 +03:00
Merge branch 'develop'
Conflicts: dist/css/material-wfont.css dist/css/material-wfont.min.css dist/css/material.css dist/css/material.min.css less/material.less template/material/css/material-wfont.css template/material/css/material-wfont.min.css template/material/css/material.css template/material/css/material.min.css
This commit is contained in:
FezVrasta
commit
3a92b3b471
|
|
@ -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: {
|
||||
compilesass: {
|
||||
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"]);
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,9 @@
|
|||
"description": "Material Design theme for Bootstrap 3",
|
||||
"main": [
|
||||
"dist/css/material.css",
|
||||
"dist/js/material.js"
|
||||
"dist/js/material.js",
|
||||
"dist/css/ripples.css",
|
||||
"dist/js/ripples.js"
|
||||
],
|
||||
"ignore": [
|
||||
"test",
|
||||
|
|
|
|||
708
dist/css/material-wfont.css
vendored
708
dist/css/material-wfont.css
vendored
|
|
@ -1493,20 +1493,6 @@
|
|||
.icon-material-web22:before {
|
||||
content: "\e7e9";
|
||||
}
|
||||
@-webkit-keyframes input-highlight {
|
||||
0% {
|
||||
left: 20%;
|
||||
width: 20%;
|
||||
}
|
||||
99% {
|
||||
width: 0;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes input-highlight {
|
||||
0% {
|
||||
left: 20%;
|
||||
|
|
@ -1559,10 +1545,14 @@ h6,
|
|||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
.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-weight: 400;
|
||||
}
|
||||
body .well,
|
||||
.container .well,
|
||||
|
|
@ -1890,23 +1880,24 @@ body .jumbotron-material-lightgrey,
|
|||
border: 0;
|
||||
margin: 10px 1px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
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;
|
||||
}
|
||||
.btn:hover {
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
.btn:hover:not(.btn-link) {
|
||||
.btn:hover:not(.btn-link):not(.btn-flat) {
|
||||
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);
|
||||
}
|
||||
.btn:disabled:not(.btn-link):not(.btn-flat) {
|
||||
color: #a8a8a8 !important;
|
||||
background-color: #eaeaea !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
.btn:not(.btn-link),
|
||||
.btn-default:not(.btn-link) {
|
||||
background-color: transparent;
|
||||
|
|
@ -1977,6 +1968,155 @@ body .jumbotron-material-lightgrey,
|
|||
.btn-material-lightgrey:not(.btn-link) {
|
||||
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:not([class^="btn btn-"]),
|
||||
.btn-default {
|
||||
|
|
@ -1991,14 +2131,6 @@ body .jumbotron-material-lightgrey,
|
|||
.btn-default:hover {
|
||||
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-default {
|
||||
background-color: transparent;
|
||||
|
|
@ -2069,20 +2201,13 @@ body .jumbotron-material-lightgrey,
|
|||
.open > .dropdown-toggle.btn-material-lightgrey {
|
||||
background-color: #ececec;
|
||||
}
|
||||
.btn-flat {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.btn-flat.btn-default:hover {
|
||||
background: none;
|
||||
}
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
margin: 10px 1px;
|
||||
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-vertical:active:not(.btn-link) {
|
||||
|
|
@ -2095,8 +2220,7 @@ body .jumbotron-material-lightgrey,
|
|||
.btn-group.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);
|
||||
-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-vertical.btn-group-raised:active:not(.btn-link) {
|
||||
|
|
@ -2118,117 +2242,6 @@ body .jumbotron-material-lightgrey,
|
|||
.btn-group-flat {
|
||||
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 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
|
@ -2241,8 +2254,7 @@ body .jumbotron-material-lightgrey,
|
|||
display: block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.checkbox label .check {
|
||||
display: inline-block;
|
||||
|
|
@ -2272,9 +2284,7 @@ body .jumbotron-material-lightgrey,
|
|||
.checkbox label .check:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
display: block;
|
||||
margin-top: -4px;
|
||||
margin-left: 6px;
|
||||
|
|
@ -2287,8 +2297,7 @@ body .jumbotron-material-lightgrey,
|
|||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
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] {
|
||||
opacity: 0;
|
||||
|
|
@ -2298,30 +2307,24 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.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;
|
||||
-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 {
|
||||
-webkit-animation: rippleOff 500ms linear forwards;
|
||||
animation: rippleOff 500ms linear forwards;
|
||||
animation: rippleOff 500ms linear forwards;
|
||||
}
|
||||
.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:after {
|
||||
-webkit-animation-duration: 1ms;
|
||||
animation-duration: 1ms;
|
||||
animation-duration: 1ms;
|
||||
}
|
||||
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.checkbox input[type=checkbox][disabled] ~ .check:after {
|
||||
background-color: rgba(0, 0, 0, 0.84);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.checkbox 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 {
|
||||
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 {
|
||||
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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
@-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 {
|
||||
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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
margin-top: -4px;
|
||||
margin-left: 6px;
|
||||
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;
|
||||
}
|
||||
51% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
width: 20px;
|
||||
|
|
@ -2634,8 +2577,7 @@ body .jumbotron-material-lightgrey,
|
|||
0px 0px 0 10px inset;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
width: 20px;
|
||||
|
|
@ -2662,8 +2604,7 @@ body .jumbotron-material-lightgrey,
|
|||
position: absolute;
|
||||
left: 10px;
|
||||
top: 2px;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.radio label .circle {
|
||||
border: 2px solid rgba(0, 0, 0, 0.84);
|
||||
|
|
@ -2676,9 +2617,7 @@ body .jumbotron-material-lightgrey,
|
|||
width: 15px;
|
||||
border-radius: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.84);
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
.radio label .check:after {
|
||||
display: block;
|
||||
|
|
@ -2693,17 +2632,13 @@ body .jumbotron-material-lightgrey,
|
|||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
-webkit-transform: scale(1.5);
|
||||
-ms-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.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 {
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
.radio input[type=radio]:checked ~ .check,
|
||||
.radio-default input[type=radio]:checked ~ .check {
|
||||
|
|
@ -2853,9 +2788,7 @@ body .jumbotron-material-lightgrey,
|
|||
display: none;
|
||||
}
|
||||
.radio input[type=radio]:checked ~ .check {
|
||||
-webkit-transform: scale(0.55);
|
||||
-ms-transform: scale(0.55);
|
||||
transform: scale(0.55);
|
||||
transform: scale(0.55);
|
||||
}
|
||||
.radio input[type=radio][disabled] ~ .circle {
|
||||
border-color: rgba(0, 0, 0, 0.84);
|
||||
|
|
@ -2863,17 +2796,6 @@ body .jumbotron-material-lightgrey,
|
|||
.radio input[type=radio][disabled] ~ .check {
|
||||
background-color: rgba(0, 0, 0, 0.84);
|
||||
}
|
||||
@-webkit-keyframes rippleOn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes rippleOn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
@ -2885,17 +2807,6 @@ body .jumbotron-material-lightgrey,
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes rippleOff {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes rippleOff {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
@ -2969,8 +2880,7 @@ select[multiple].form-control.focus {
|
|||
pointer-events: none;
|
||||
left: 0px;
|
||||
top: 5px;
|
||||
-webkit-transition: 0.2s ease all;
|
||||
transition: 0.2s ease all;
|
||||
transition: 0.2s ease all;
|
||||
opacity: 0;
|
||||
}
|
||||
.form-control-wrapper .form-control:not(.empty) ~ .floating-label {
|
||||
|
|
@ -3003,19 +2913,13 @@ select[multiple].form-control.focus {
|
|||
height: 2px;
|
||||
background-color: #5264ae;
|
||||
bottom: -1px;
|
||||
-webkit-transform: scaleX(0);
|
||||
-ms-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-webkit-transition: -webkit-transform 0s;
|
||||
transition: transform 0s;
|
||||
transform: scaleX(0);
|
||||
transition: transform 0s;
|
||||
}
|
||||
.form-control-wrapper .form-control:focus ~ .material-input:before,
|
||||
.form-control-wrapper .form-control.focus ~ .material-input:before {
|
||||
-webkit-transform: scaleX(1);
|
||||
-ms-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
-webkit-transition: -webkit-transform 0.2s ease-out;
|
||||
transition: transform 0.2s ease-out;
|
||||
transform: scaleX(1);
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
.form-control-wrapper .material-input:after {
|
||||
content: "";
|
||||
|
|
@ -3027,9 +2931,7 @@ select[multiple].form-control.focus {
|
|||
left: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.9;
|
||||
-webkit-transform-origin: left;
|
||||
-ms-transform-origin: left;
|
||||
transform-origin: left;
|
||||
transform-origin: left;
|
||||
}
|
||||
.form-control-wrapper .input-lg ~ .material-input:after {
|
||||
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 {
|
||||
-webkit-animation: input-highlight 0.3s ease;
|
||||
animation: input-highlight 0.3s ease;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
animation: input-highlight 0.3s ease;
|
||||
animation-fill-mode: forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
.form-control-wrapper select ~ .material-input:after {
|
||||
|
|
@ -3465,12 +3365,10 @@ select.form-control.focus {
|
|||
@keyframes input-highlight {
|
||||
0% {
|
||||
left: 20%;
|
||||
-webkit-transform: scaleX(20%);
|
||||
transform: scaleX(20%);
|
||||
transform: scaleX(20%);
|
||||
}
|
||||
99% {
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -3492,20 +3390,6 @@ select.form-control.focus {
|
|||
legend {
|
||||
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 {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
@ -3871,7 +3755,78 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
position: relative;
|
||||
}
|
||||
.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 {
|
||||
border: 0px;
|
||||
|
|
@ -4064,14 +4019,14 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
margin: 0;
|
||||
}
|
||||
.nav-tabs > li > a:hover {
|
||||
background: transparent;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.nav-tabs > li.active > a,
|
||||
.nav-tabs > li.active > a:hover,
|
||||
.nav-tabs > li.open > a,
|
||||
.nav-tabs > li.open > a:hover {
|
||||
background: transparent !important;
|
||||
.nav-tabs > li.open > .nav-tabs > li:hover {
|
||||
background-color: transparent !important;
|
||||
border: 0 !important;
|
||||
color: #FFFFFF !important;
|
||||
font-weight: 500;
|
||||
|
|
@ -4184,6 +4139,100 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
.icon-material-lightgrey {
|
||||
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 {
|
||||
background-color: #323232;
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
|
|
@ -4191,21 +4240,15 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
border-radius: 2px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
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;
|
||||
-webkit-transform: translateY(200%);
|
||||
-ms-transform: translateY(200%);
|
||||
transform: translateY(200%);
|
||||
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%);
|
||||
}
|
||||
.snackbar.snackbar-opened {
|
||||
padding: 14px 15px;
|
||||
margin-bottom: 20px;
|
||||
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;
|
||||
-webkit-transform: none;
|
||||
-ms-transform: none;
|
||||
transform: none;
|
||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
|
||||
transform: none;
|
||||
}
|
||||
.snackbar.toast {
|
||||
border-radius: 200px;
|
||||
|
|
@ -4214,10 +4257,7 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
.noUi-target * {
|
||||
-webkit-touch-callout: none;
|
||||
-ms-touch-action: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.noUi-base {
|
||||
|
|
@ -4244,8 +4284,7 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
*z-index: -1;
|
||||
}
|
||||
.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 * {
|
||||
cursor: inherit !important;
|
||||
|
|
@ -4289,8 +4328,7 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
.noUi-handle {
|
||||
border-radius: 100%;
|
||||
cursor: default;
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
border: 1px solid;
|
||||
}
|
||||
.noUi-horizontal {
|
||||
|
|
@ -4298,9 +4336,7 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
margin: 15px 0;
|
||||
}
|
||||
.noUi-horizontal .noUi-handle.noUi-active {
|
||||
-webkit-transform: scale(2.5);
|
||||
-ms-transform: scale(2.5);
|
||||
transform: scale(2.5);
|
||||
transform: scale(2.5);
|
||||
}
|
||||
[disabled].noUi-slider {
|
||||
opacity: 0.5;
|
||||
|
|
|
|||
2
dist/css/material-wfont.min.css
vendored
2
dist/css/material-wfont.min.css
vendored
File diff suppressed because one or more lines are too long
488
dist/css/material.css
vendored
488
dist/css/material.css
vendored
|
|
@ -1558,10 +1558,14 @@ h6,
|
|||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
.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-weight: 400;
|
||||
}
|
||||
body .well,
|
||||
.container .well,
|
||||
|
|
@ -1889,7 +1893,7 @@ body .jumbotron-material-lightgrey,
|
|||
border: 0;
|
||||
margin: 10px 1px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
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);
|
||||
outline: none !important;
|
||||
}
|
||||
.btn:hover {
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
.btn:hover:not(.btn-link) {
|
||||
.btn:hover:not(.btn-link):not(.btn-flat) {
|
||||
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);
|
||||
}
|
||||
.btn:disabled:not(.btn-link):not(.btn-flat) {
|
||||
color: #a8a8a8 !important;
|
||||
background-color: #eaeaea !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
.btn:not(.btn-link),
|
||||
.btn-default:not(.btn-link) {
|
||||
background-color: transparent;
|
||||
|
|
@ -1976,6 +1982,156 @@ body .jumbotron-material-lightgrey,
|
|||
.btn-material-lightgrey:not(.btn-link) {
|
||||
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:not([class^="btn btn-"]),
|
||||
.btn-default {
|
||||
|
|
@ -1990,14 +2146,6 @@ body .jumbotron-material-lightgrey,
|
|||
.btn-default:hover {
|
||||
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-default {
|
||||
background-color: transparent;
|
||||
|
|
@ -2068,16 +2216,10 @@ body .jumbotron-material-lightgrey,
|
|||
.open > .dropdown-toggle.btn-material-lightgrey {
|
||||
background-color: #ececec;
|
||||
}
|
||||
.btn-flat {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.btn-flat.btn-default:hover {
|
||||
background: none;
|
||||
}
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
margin: 10px 1px;
|
||||
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);
|
||||
|
|
@ -2117,117 +2259,6 @@ body .jumbotron-material-lightgrey,
|
|||
.btn-group-flat {
|
||||
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 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
|
@ -3491,20 +3522,6 @@ select.form-control.focus {
|
|||
legend {
|
||||
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 {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
@ -3870,7 +3887,78 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
position: relative;
|
||||
}
|
||||
.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 {
|
||||
border: 0px;
|
||||
|
|
@ -4063,14 +4151,14 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
margin: 0;
|
||||
}
|
||||
.nav-tabs > li > a:hover {
|
||||
background: transparent;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.nav-tabs > li.active > a,
|
||||
.nav-tabs > li.active > a:hover,
|
||||
.nav-tabs > li.open > a,
|
||||
.nav-tabs > li.open > a:hover {
|
||||
background: transparent !important;
|
||||
.nav-tabs > li.open > .nav-tabs > li:hover {
|
||||
background-color: transparent !important;
|
||||
border: 0 !important;
|
||||
color: #FFFFFF !important;
|
||||
font-weight: 500;
|
||||
|
|
@ -4183,6 +4271,100 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
.icon-material-lightgrey {
|
||||
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 {
|
||||
background-color: #323232;
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
|
|
|
|||
2
dist/css/material.min.css
vendored
2
dist/css/material.min.css
vendored
File diff suppressed because one or more lines are too long
6
dist/js/material.js
vendored
6
dist/js/material.js
vendored
|
|
@ -3,7 +3,11 @@
|
|||
$(function (){
|
||||
|
||||
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() {
|
||||
|
|
|
|||
2
dist/js/material.min.js
vendored
2
dist/js/material.min.js
vendored
|
|
@ -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)})});
|
||||
|
|
|
|||
107
dist/js/ripples.js
vendored
107
dist/js/ripples.js
vendored
|
|
@ -1,15 +1,17 @@
|
|||
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
|
||||
/* globals CustomEvent */
|
||||
|
||||
window.ripples = {
|
||||
init : function(withRipple) {
|
||||
"use strict";
|
||||
|
||||
// Cross browser matches function
|
||||
function matchesSelector(domElement, selector) {
|
||||
var matches = domElement.matches || domElement.matchesSelector || domElement.webkitMatchesSelector ||
|
||||
var matches = domElement.matches ||
|
||||
domElement.matchesSelector ||
|
||||
domElement.webkitMatchesSelector ||
|
||||
domElement.mozMatchesSelector ||
|
||||
domElement.msMatchesSelector || domElement.oMatchesSelector;
|
||||
domElement.msMatchesSelector ||
|
||||
domElement.oMatchesSelector;
|
||||
return matches.call(domElement, selector);
|
||||
}
|
||||
|
||||
|
|
@ -18,28 +20,43 @@ window.ripples = {
|
|||
rippleStartTime = 500;
|
||||
|
||||
// Helper to bind events on dynamically created elements
|
||||
var bind = function(event, selector, callback) {
|
||||
document.addEventListener(event, function(e) {
|
||||
var target = (typeof e.detail !== "number") ? e.detail : e.target;
|
||||
var bind = function(events, selector, callback) {
|
||||
if (typeof events === "string") {
|
||||
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)) {
|
||||
callback(e, target);
|
||||
}
|
||||
if (matchesSelector(target, selector)) {
|
||||
callback(e, target);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
var rippleStart = function(e, target) {
|
||||
var rippleStart = function(e, target, callback) {
|
||||
|
||||
// Init variables
|
||||
var $rippleWrapper = target,
|
||||
$el = $rippleWrapper.parentNode,
|
||||
$ripple = document.createElement("div"),
|
||||
elPos = $el.getBoundingClientRect(),
|
||||
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
|
||||
scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
|
||||
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
|
||||
var $rippleWrapper = target,
|
||||
$el = $rippleWrapper.parentNode,
|
||||
$ripple = document.createElement("div"),
|
||||
elPos = $el.getBoundingClientRect(),
|
||||
// Mouse pos in most cases
|
||||
mousePos = {x: e.clientX - elPos.left, y: ((window.ontouchstart) ? e.clientY - window.scrollY: e.clientY) - elPos.top},
|
||||
scale = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
|
||||
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
|
||||
_rippleOpacity = 0.1,
|
||||
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;
|
||||
|
||||
// Set ripple class
|
||||
|
|
@ -48,6 +65,12 @@ window.ripples = {
|
|||
// Move ripple to the mouse position
|
||||
$ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
|
||||
|
||||
// Get the clicked target's text color, this will be applied to the ripple as background-color.
|
||||
var targetColor = window.getComputedStyle($el).color;
|
||||
|
||||
// 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
|
||||
$rippleWrapper.appendChild($ripple);
|
||||
|
||||
|
|
@ -57,9 +80,21 @@ window.ripples = {
|
|||
// Let other funtions know that this element is animating
|
||||
$ripple.dataset.animating = 1;
|
||||
|
||||
// Set scale value to ripple and animate it
|
||||
// Set scale value, background-color and opacity to ripple and animate it
|
||||
$ripple.className = "ripple ripple-on";
|
||||
$ripple.setAttribute("style", $ripple.getAttribute("style") + ["-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
|
||||
setTimeout(function() {
|
||||
|
|
@ -67,6 +102,9 @@ window.ripples = {
|
|||
// Let know to other functions that this element has finished the animation
|
||||
$ripple.dataset.animating = 0;
|
||||
document.dispatchEvent(rippleEnd);
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
|
||||
}, rippleStartTime);
|
||||
|
||||
|
|
@ -84,39 +122,43 @@ window.ripples = {
|
|||
|
||||
// Helper, need to know if mouse is up or down
|
||||
var mouseDown = false;
|
||||
document.body.onmousedown = function() {
|
||||
bind(["mousedown", "touchstart"], "*", function() {
|
||||
mouseDown = true;
|
||||
};
|
||||
document.body.onmouseup = function() {
|
||||
});
|
||||
bind(["mouseup", "touchend"], "*", function() {
|
||||
mouseDown = false;
|
||||
};
|
||||
});
|
||||
|
||||
// Append ripple wrapper if not exists already
|
||||
var rippleInit = function(e, target) {
|
||||
|
||||
if (target.getElementsByClassName("ripple-wrapper").length === 0) {
|
||||
target.className += " withripple";
|
||||
var $rippleWrapper = document.createElement("div");
|
||||
$rippleWrapper.className = "ripple-wrapper";
|
||||
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;
|
||||
|
||||
// Events handler
|
||||
// init RippleJS and start ripple effect on mousedown
|
||||
bind("mouseover", withRipple, rippleInit);
|
||||
bind(["mouseover", "touchstart"], withRipple, rippleInit);
|
||||
|
||||
// start ripple effect on mousedown
|
||||
bind("mousedown", ".ripple-wrapper", function(e, $ripple) {
|
||||
// Start ripple only on left or middle mouse click
|
||||
if (e.which === 1 || e.which === 2) {
|
||||
bind(["mousedown", "touchstart"], ".ripple-wrapper", function(e, $ripple) {
|
||||
// Start ripple only on left or middle mouse click and touch click
|
||||
if (e.which === 0 || e.which === 1 || e.which === 2) {
|
||||
rippleStart(e, $ripple);
|
||||
}
|
||||
});
|
||||
|
||||
// if animation ends and user is not holding mouse then destroy the ripple
|
||||
bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) {
|
||||
|
||||
|
|
@ -126,10 +168,11 @@ window.ripples = {
|
|||
rippleOut($ripple);
|
||||
}
|
||||
});
|
||||
|
||||
// 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;
|
||||
if ($ripple.dataset.animating != 1) {
|
||||
if ($ripple && $ripple.dataset.animating != 1) {
|
||||
rippleOut($ripple);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
2
dist/js/ripples.min.js
vendored
2
dist/js/ripples.min.js
vendored
|
|
@ -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=b,f=e.parentNode,g=document.createElement("div"),h=f.getBoundingClientRect(),j={x:a.clientX-h.left,y:a.clientY-h.top},k="transform:scale("+Math.round(e.offsetWidth/5)+")",l=new CustomEvent("rippleEnd",{detail:g});i=g,g.className="ripple",g.setAttribute("style","left:"+j.x+"px; top:"+j.y+"px;"),e.appendChild(g),c=window.getComputedStyle(g).opacity,g.dataset.animating=1,g.className="ripple ripple-on",g.setAttribute("style",g.getAttribute("style")+["-ms-"+k,"-moz-"+k,"-webkit-"+k,k].join(";")),setTimeout(function(){g.dataset.animating=0,document.dispatchEvent(l)},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)})}};
|
||||
|
|
|
|||
1034
index.html
1034
index.html
File diff suppressed because it is too large
Load Diff
117
less/_buttons.less → less/_buttons.import.less
vendored
117
less/_buttons.less → less/_buttons.import.less
vendored
|
|
@ -1,40 +1,87 @@
|
|||
// 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 {
|
||||
position: relative;
|
||||
padding: 8px 30px;
|
||||
border: 0;
|
||||
margin: 10px 1px;
|
||||
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: @darkbg-text;
|
||||
|
||||
&:hover {
|
||||
color: @darkbg-text;
|
||||
}
|
||||
&:hover:not(.btn-link) {
|
||||
&:hover:not(.btn-link):not(.btn-flat) {
|
||||
.shadow-z-2-hover();
|
||||
}
|
||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
&:active:not(.btn-link) {
|
||||
&:active:not(.btn-link):not(.btn-flat) {
|
||||
.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;
|
||||
|
||||
.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)
|
||||
.btn-link, .btn:not([class^="btn btn-"]), .btn-default {
|
||||
color: @lightbg-text;
|
||||
|
|
@ -47,24 +94,12 @@
|
|||
background-color: rgba(255,255,255,0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-raised {
|
||||
.btn-shadow();
|
||||
}
|
||||
|
||||
.open > .dropdown-toggle.btn {
|
||||
.variations(~"", background-color, @btn-default);
|
||||
}
|
||||
.btn-flat {
|
||||
box-shadow: none !important;
|
||||
&.btn-default:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group, .btn-group-vertical {
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
margin: 10px 1px;
|
||||
|
||||
.btn-shadow();
|
||||
|
|
@ -84,24 +119,10 @@
|
|||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// Floating Action Button (FAB)
|
||||
|
||||
.btn-fab {
|
||||
margin: 0;
|
||||
padding: 15px;
|
||||
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;
|
||||
.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();
|
||||
}
|
||||
}
|
||||
66
less/_cards.import.less
vendored
Normal file
66
less/_cards.import.less
vendored
Normal 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
38
less/_dialogs.import.less
vendored
Normal 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.less → less/_tabs.import.less
vendored
11
less/_tabs.less → less/_tabs.import.less
vendored
|
|
@ -8,12 +8,17 @@
|
|||
border: 0;
|
||||
margin: 0;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
&.active > a, &.active > a:hover, &.open > a, &.open > a:hover {
|
||||
background: transparent !important;
|
||||
&.active > a,
|
||||
&.active >
|
||||
a:hover,
|
||||
&.open > a,
|
||||
&.open >
|
||||
&:hover {
|
||||
background-color: transparent !important;
|
||||
border: 0 !important;
|
||||
color: #FFFFFF !important;
|
||||
font-weight: 500;
|
||||
|
|
@ -100,3 +100,10 @@
|
|||
@progress-warning: @warning;
|
||||
@progress-danger: @danger;
|
||||
|
||||
// Card
|
||||
@card-body-text: @lightbg-text;
|
||||
@card-body-background: #fff;
|
||||
@card-image-headline: #fff;
|
||||
|
||||
@text-disabled: #a8a8a8;
|
||||
@background-disabled: #eaeaea;
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
// Material Theme 0.0.1
|
||||
// -----------------------------------------------------
|
||||
|
||||
@import "_variables.less";
|
||||
@import "_mixins.less";
|
||||
@import "_icons-material-design.less";
|
||||
@import "_animations.less";
|
||||
@import "_shadows.less";
|
||||
@import "_variables.import.less";
|
||||
@import "_mixins.import.less";
|
||||
@import "_icons-material-design.import.less";
|
||||
@import "_animations.import.less";
|
||||
@import "_shadows.import.less";
|
||||
|
||||
body {
|
||||
background-color: #EEEEEE;
|
||||
|
|
@ -17,49 +17,41 @@ 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-weight: 400;
|
||||
}
|
||||
|
||||
// Well and Jumbotrons
|
||||
@import "_welljumbo.less";
|
||||
@import "_welljumbo.import.less";
|
||||
|
||||
// Buttons
|
||||
@import "_buttons.less";
|
||||
@import "_buttons.import.less";
|
||||
|
||||
// Checkboxes
|
||||
@import "_checkboxes.less";
|
||||
@import "_checkboxes.import.less";
|
||||
|
||||
// Radios
|
||||
@import "_radios.less";
|
||||
@import "_radios.import.less";
|
||||
|
||||
// Text inputs
|
||||
@import "_inputs.less";
|
||||
@import "_inputs.import.less";
|
||||
|
||||
legend {
|
||||
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
|
||||
@import "_lists.less";
|
||||
@import "_lists.import.less";
|
||||
|
||||
// Navbar
|
||||
@import "_navbar.less";
|
||||
@import "_navbar.import.less";
|
||||
|
||||
.dropdown-menu {
|
||||
border: 0;
|
||||
|
|
@ -71,16 +63,18 @@ legend {
|
|||
overflow: hidden;
|
||||
position: relative;
|
||||
a:hover {
|
||||
background: rgba(0,0,0,0.08);
|
||||
background-color: transparent;
|
||||
color: @primary;
|
||||
}
|
||||
}
|
||||
.variations(~" li a:hover", color, @primary);
|
||||
}
|
||||
|
||||
// Alerts
|
||||
@import "_alerts.less";
|
||||
@import "_alerts.import.less";
|
||||
|
||||
// Progress bar
|
||||
@import "_progress.less";
|
||||
@import "_progress.import.less";
|
||||
|
||||
// Typography
|
||||
.text-warning {
|
||||
|
|
@ -99,14 +93,17 @@ legend {
|
|||
color: @btn-info;
|
||||
}
|
||||
|
||||
@import "_tabs.less";
|
||||
@import "_tabs.import.less";
|
||||
|
||||
@import "_popups.less";
|
||||
@import "_popups.import.less";
|
||||
|
||||
@import "_icons.less";
|
||||
@import "_icons.import.less";
|
||||
|
||||
@import "_cards.import.less";
|
||||
|
||||
@import "_dialogs.import.less";
|
||||
|
||||
// External plugins
|
||||
@import "_plugin-snackbarjs.less";
|
||||
@import "_plugin-nouislider.less";
|
||||
@import "_plugin-selectize.less";
|
||||
@import "_plugin-snackbarjs.import.less";
|
||||
@import "_plugin-nouislider.import.less";
|
||||
@import "_plugin-selectize.import.less";
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
"grunt-contrib-sass": "^0.8.1",
|
||||
"grunt-contrib-uglify": "^0.6.0",
|
||||
"grunt-contrib-watch": "^0.6.1",
|
||||
"grunt-githooks": "^0.3.1",
|
||||
"grunt-newer": "^0.7.0",
|
||||
"jshint-stylish": "^1.0.0",
|
||||
"load-grunt-tasks": "^0.6.0"
|
||||
|
|
|
|||
2
sass/_cards.scss → sass/_cards.import.scss
vendored
2
sass/_cards.scss → sass/_cards.import.scss
vendored
|
|
@ -127,4 +127,4 @@
|
|||
}
|
||||
.card-material-lightgrey {
|
||||
@include card-variant($lightgrey, darken(#FFFFFF, 10%), darken($lightgrey, 10%));
|
||||
}
|
||||
}
|
||||
2
sass/_mixins.scss → sass/_mixins.import.scss
vendored
2
sass/_mixins.scss → sass/_mixins.import.scss
vendored
|
|
@ -29,4 +29,4 @@
|
|||
|
||||
@mixin icon-variant($color) {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
// Material Theme 0.0.1
|
||||
// -----------------------------------------------------
|
||||
|
||||
@import "_variables.scss";
|
||||
@import "_mixins.scss";
|
||||
@import "_animations.scss";
|
||||
@import "_shadows.scss";
|
||||
@import "_variables.import.scss";
|
||||
@import "_mixins.import.scss";
|
||||
@import "_animations.import.scss";
|
||||
@import "_shadows.import.scss";
|
||||
|
||||
body {
|
||||
background-color: #EEEEEE;
|
||||
|
|
@ -21,19 +21,19 @@ body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
|||
}
|
||||
|
||||
// Well and Jumbotrons
|
||||
@import "_welljumbo.scss";
|
||||
@import "_welljumbo.import.scss";
|
||||
|
||||
// Buttons
|
||||
@import "_buttons.scss";
|
||||
@import "_buttons.import.scss";
|
||||
|
||||
// Checkboxes
|
||||
@import "_checkboxes.scss";
|
||||
@import "_checkboxes.import.scss";
|
||||
|
||||
// Radios
|
||||
@import "_radios.scss";
|
||||
@import "_radios.import.scss";
|
||||
|
||||
// Text inputs
|
||||
@import "_inputs.scss";
|
||||
@import "_inputs.import.scss";
|
||||
|
||||
legend {
|
||||
border-bottom: 0;
|
||||
|
|
@ -55,10 +55,10 @@ legend {
|
|||
}
|
||||
|
||||
// Lists
|
||||
@import "_lists.scss";
|
||||
@import "_lists.import.scss";
|
||||
|
||||
// Navbar
|
||||
@import "_navbar.scss";
|
||||
@import "_navbar.import.scss";
|
||||
|
||||
.dropdown-menu {
|
||||
border: 0;
|
||||
|
|
@ -76,13 +76,13 @@ legend {
|
|||
}
|
||||
|
||||
// Alerts
|
||||
@import "_alerts.scss";
|
||||
@import "_alerts.import.scss";
|
||||
|
||||
// Progress bar
|
||||
@import "_progress.scss";
|
||||
@import "_progress.import.scss";
|
||||
|
||||
// Panels
|
||||
@import "_cards.scss";
|
||||
@import "_cards.import.scss";
|
||||
|
||||
// Typography
|
||||
.text-warning {
|
||||
|
|
@ -101,13 +101,13 @@ legend {
|
|||
color: $btn-info;
|
||||
}
|
||||
|
||||
@import "_tabs.scss";
|
||||
@import "_tabs.import.scss";
|
||||
|
||||
@import "_popups.scss";
|
||||
@import "_popups.import.scss";
|
||||
|
||||
@import "_icons.scss";
|
||||
@import "_icons.import.scss";
|
||||
|
||||
|
||||
// External plugins
|
||||
@import "_plugin-snackbarjs.scss";
|
||||
@import "_plugin-nouislider.scss";
|
||||
@import "_plugin-snackbarjs.import.scss";
|
||||
@import "_plugin-nouislider.import.scss";
|
||||
|
|
|
|||
|
|
@ -3,7 +3,11 @@
|
|||
$(function (){
|
||||
|
||||
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() {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
|
||||
/* globals CustomEvent */
|
||||
|
||||
window.ripples = {
|
||||
init : function(withRipple) {
|
||||
"use strict";
|
||||
|
||||
// Cross browser matches function
|
||||
function matchesSelector(domElement, selector) {
|
||||
var matches = domElement.matches || domElement.matchesSelector || domElement.webkitMatchesSelector ||
|
||||
var matches = domElement.matches ||
|
||||
domElement.matchesSelector ||
|
||||
domElement.webkitMatchesSelector ||
|
||||
domElement.mozMatchesSelector ||
|
||||
domElement.msMatchesSelector || domElement.oMatchesSelector;
|
||||
domElement.msMatchesSelector ||
|
||||
domElement.oMatchesSelector;
|
||||
return matches.call(domElement, selector);
|
||||
}
|
||||
|
||||
|
|
@ -18,28 +20,43 @@ window.ripples = {
|
|||
rippleStartTime = 500;
|
||||
|
||||
// Helper to bind events on dynamically created elements
|
||||
var bind = function(event, selector, callback) {
|
||||
document.addEventListener(event, function(e) {
|
||||
var target = (typeof e.detail !== "number") ? e.detail : e.target;
|
||||
var bind = function(events, selector, callback) {
|
||||
if (typeof events === "string") {
|
||||
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)) {
|
||||
callback(e, target);
|
||||
}
|
||||
if (matchesSelector(target, selector)) {
|
||||
callback(e, target);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
var rippleStart = function(e, target) {
|
||||
var rippleStart = function(e, target, callback) {
|
||||
|
||||
// Init variables
|
||||
var $rippleWrapper = target,
|
||||
$el = $rippleWrapper.parentNode,
|
||||
$ripple = document.createElement("div"),
|
||||
elPos = $el.getBoundingClientRect(),
|
||||
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
|
||||
scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
|
||||
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
|
||||
var $rippleWrapper = target,
|
||||
$el = $rippleWrapper.parentNode,
|
||||
$ripple = document.createElement("div"),
|
||||
elPos = $el.getBoundingClientRect(),
|
||||
// Mouse pos in most cases
|
||||
mousePos = {x: e.clientX - elPos.left, y: ((window.ontouchstart) ? e.clientY - window.scrollY: e.clientY) - elPos.top},
|
||||
scale = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
|
||||
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
|
||||
_rippleOpacity = 0.1,
|
||||
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;
|
||||
|
||||
// Set ripple class
|
||||
|
|
@ -48,6 +65,12 @@ window.ripples = {
|
|||
// Move ripple to the mouse position
|
||||
$ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
|
||||
|
||||
// Get the clicked target's text color, this will be applied to the ripple as background-color.
|
||||
var targetColor = window.getComputedStyle($el).color;
|
||||
|
||||
// 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
|
||||
$rippleWrapper.appendChild($ripple);
|
||||
|
||||
|
|
@ -57,9 +80,21 @@ window.ripples = {
|
|||
// Let other funtions know that this element is animating
|
||||
$ripple.dataset.animating = 1;
|
||||
|
||||
// Set scale value to ripple and animate it
|
||||
// Set scale value, background-color and opacity to ripple and animate it
|
||||
$ripple.className = "ripple ripple-on";
|
||||
$ripple.setAttribute("style", $ripple.getAttribute("style") + ["-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
|
||||
setTimeout(function() {
|
||||
|
|
@ -67,6 +102,9 @@ window.ripples = {
|
|||
// Let know to other functions that this element has finished the animation
|
||||
$ripple.dataset.animating = 0;
|
||||
document.dispatchEvent(rippleEnd);
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
|
||||
}, rippleStartTime);
|
||||
|
||||
|
|
@ -84,39 +122,43 @@ window.ripples = {
|
|||
|
||||
// Helper, need to know if mouse is up or down
|
||||
var mouseDown = false;
|
||||
document.body.onmousedown = function() {
|
||||
bind(["mousedown", "touchstart"], "*", function() {
|
||||
mouseDown = true;
|
||||
};
|
||||
document.body.onmouseup = function() {
|
||||
});
|
||||
bind(["mouseup", "touchend"], "*", function() {
|
||||
mouseDown = false;
|
||||
};
|
||||
});
|
||||
|
||||
// Append ripple wrapper if not exists already
|
||||
var rippleInit = function(e, target) {
|
||||
|
||||
if (target.getElementsByClassName("ripple-wrapper").length === 0) {
|
||||
target.className += " withripple";
|
||||
var $rippleWrapper = document.createElement("div");
|
||||
$rippleWrapper.className = "ripple-wrapper";
|
||||
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;
|
||||
|
||||
// Events handler
|
||||
// init RippleJS and start ripple effect on mousedown
|
||||
bind("mouseover", withRipple, rippleInit);
|
||||
bind(["mouseover", "touchstart"], withRipple, rippleInit);
|
||||
|
||||
// start ripple effect on mousedown
|
||||
bind("mousedown", ".ripple-wrapper", function(e, $ripple) {
|
||||
// Start ripple only on left or middle mouse click
|
||||
if (e.which === 1 || e.which === 2) {
|
||||
bind(["mousedown", "touchstart"], ".ripple-wrapper", function(e, $ripple) {
|
||||
// Start ripple only on left or middle mouse click and touch click
|
||||
if (e.which === 0 || e.which === 1 || e.which === 2) {
|
||||
rippleStart(e, $ripple);
|
||||
}
|
||||
});
|
||||
|
||||
// if animation ends and user is not holding mouse then destroy the ripple
|
||||
bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) {
|
||||
|
||||
|
|
@ -126,10 +168,11 @@ window.ripples = {
|
|||
rippleOut($ripple);
|
||||
}
|
||||
});
|
||||
|
||||
// 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;
|
||||
if ($ripple.dataset.animating != 1) {
|
||||
if ($ripple && $ripple.dataset.animating != 1) {
|
||||
rippleOut($ripple);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1559,10 +1559,14 @@ h6,
|
|||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
.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-weight: 400;
|
||||
}
|
||||
body .well,
|
||||
.container .well,
|
||||
|
|
@ -1890,7 +1894,7 @@ body .jumbotron-material-lightgrey,
|
|||
border: 0;
|
||||
margin: 10px 1px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
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);
|
||||
outline: none !important;
|
||||
}
|
||||
.btn:hover {
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
.btn:hover:not(.btn-link) {
|
||||
.btn:hover:not(.btn-link):not(.btn-flat) {
|
||||
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);
|
||||
}
|
||||
.btn:disabled:not(.btn-link):not(.btn-flat) {
|
||||
color: #a8a8a8 !important;
|
||||
background-color: #eaeaea !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
.btn:not(.btn-link),
|
||||
.btn-default:not(.btn-link) {
|
||||
background-color: transparent;
|
||||
|
|
@ -1977,6 +1983,156 @@ body .jumbotron-material-lightgrey,
|
|||
.btn-material-lightgrey:not(.btn-link) {
|
||||
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:not([class^="btn btn-"]),
|
||||
.btn-default {
|
||||
|
|
@ -1991,14 +2147,6 @@ body .jumbotron-material-lightgrey,
|
|||
.btn-default:hover {
|
||||
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-default {
|
||||
background-color: transparent;
|
||||
|
|
@ -2069,16 +2217,10 @@ body .jumbotron-material-lightgrey,
|
|||
.open > .dropdown-toggle.btn-material-lightgrey {
|
||||
background-color: #ececec;
|
||||
}
|
||||
.btn-flat {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.btn-flat.btn-default:hover {
|
||||
background: none;
|
||||
}
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
margin: 10px 1px;
|
||||
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);
|
||||
|
|
@ -2118,117 +2260,6 @@ body .jumbotron-material-lightgrey,
|
|||
.btn-group-flat {
|
||||
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 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
|
@ -3492,20 +3523,6 @@ select.form-control.focus {
|
|||
legend {
|
||||
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 {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
@ -3871,7 +3888,78 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
position: relative;
|
||||
}
|
||||
.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 {
|
||||
border: 0px;
|
||||
|
|
@ -4064,14 +4152,14 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
margin: 0;
|
||||
}
|
||||
.nav-tabs > li > a:hover {
|
||||
background: transparent;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.nav-tabs > li.active > a,
|
||||
.nav-tabs > li.active > a:hover,
|
||||
.nav-tabs > li.open > a,
|
||||
.nav-tabs > li.open > a:hover {
|
||||
background: transparent !important;
|
||||
.nav-tabs > li.open > .nav-tabs > li:hover {
|
||||
background-color: transparent !important;
|
||||
border: 0 !important;
|
||||
color: #FFFFFF !important;
|
||||
font-weight: 500;
|
||||
|
|
@ -4184,6 +4272,100 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
.icon-material-lightgrey {
|
||||
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 {
|
||||
background-color: #323232;
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
|
|
|
|||
2
template/material/css/material-wfont.min.css
vendored
2
template/material/css/material-wfont.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1558,10 +1558,14 @@ h6,
|
|||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
.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-weight: 400;
|
||||
}
|
||||
body .well,
|
||||
.container .well,
|
||||
|
|
@ -1889,7 +1893,7 @@ body .jumbotron-material-lightgrey,
|
|||
border: 0;
|
||||
margin: 10px 1px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
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);
|
||||
outline: none !important;
|
||||
}
|
||||
.btn:hover {
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
.btn:hover:not(.btn-link) {
|
||||
.btn:hover:not(.btn-link):not(.btn-flat) {
|
||||
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);
|
||||
}
|
||||
.btn:disabled:not(.btn-link):not(.btn-flat) {
|
||||
color: #a8a8a8 !important;
|
||||
background-color: #eaeaea !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
.btn:not(.btn-link),
|
||||
.btn-default:not(.btn-link) {
|
||||
background-color: transparent;
|
||||
|
|
@ -1976,6 +1982,156 @@ body .jumbotron-material-lightgrey,
|
|||
.btn-material-lightgrey:not(.btn-link) {
|
||||
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:not([class^="btn btn-"]),
|
||||
.btn-default {
|
||||
|
|
@ -1990,14 +2146,6 @@ body .jumbotron-material-lightgrey,
|
|||
.btn-default:hover {
|
||||
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-default {
|
||||
background-color: transparent;
|
||||
|
|
@ -2068,16 +2216,10 @@ body .jumbotron-material-lightgrey,
|
|||
.open > .dropdown-toggle.btn-material-lightgrey {
|
||||
background-color: #ececec;
|
||||
}
|
||||
.btn-flat {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.btn-flat.btn-default:hover {
|
||||
background: none;
|
||||
}
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
margin: 10px 1px;
|
||||
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);
|
||||
|
|
@ -2117,117 +2259,6 @@ body .jumbotron-material-lightgrey,
|
|||
.btn-group-flat {
|
||||
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 {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
|
@ -3491,20 +3522,6 @@ select.form-control.focus {
|
|||
legend {
|
||||
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 {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
@ -3870,7 +3887,78 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
position: relative;
|
||||
}
|
||||
.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 {
|
||||
border: 0px;
|
||||
|
|
@ -4063,14 +4151,14 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
margin: 0;
|
||||
}
|
||||
.nav-tabs > li > a:hover {
|
||||
background: transparent;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
.nav-tabs > li.active > a,
|
||||
.nav-tabs > li.active > a:hover,
|
||||
.nav-tabs > li.open > a,
|
||||
.nav-tabs > li.open > a:hover {
|
||||
background: transparent !important;
|
||||
.nav-tabs > li.open > .nav-tabs > li:hover {
|
||||
background-color: transparent !important;
|
||||
border: 0 !important;
|
||||
color: #FFFFFF !important;
|
||||
font-weight: 500;
|
||||
|
|
@ -4183,6 +4271,100 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
.icon-material-lightgrey {
|
||||
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 {
|
||||
background-color: #323232;
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
|
|
|
|||
2
template/material/css/material.min.css
vendored
2
template/material/css/material.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -3,7 +3,11 @@
|
|||
$(function (){
|
||||
|
||||
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() {
|
||||
|
|
|
|||
2
template/material/js/material.min.js
vendored
2
template/material/js/material.min.js
vendored
|
|
@ -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)})});
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
|
||||
/* globals CustomEvent */
|
||||
|
||||
window.ripples = {
|
||||
init : function(withRipple) {
|
||||
"use strict";
|
||||
|
||||
// Cross browser matches function
|
||||
function matchesSelector(domElement, selector) {
|
||||
var matches = domElement.matches || domElement.matchesSelector || domElement.webkitMatchesSelector ||
|
||||
var matches = domElement.matches ||
|
||||
domElement.matchesSelector ||
|
||||
domElement.webkitMatchesSelector ||
|
||||
domElement.mozMatchesSelector ||
|
||||
domElement.msMatchesSelector || domElement.oMatchesSelector;
|
||||
domElement.msMatchesSelector ||
|
||||
domElement.oMatchesSelector;
|
||||
return matches.call(domElement, selector);
|
||||
}
|
||||
|
||||
|
|
@ -18,28 +20,43 @@ window.ripples = {
|
|||
rippleStartTime = 500;
|
||||
|
||||
// Helper to bind events on dynamically created elements
|
||||
var bind = function(event, selector, callback) {
|
||||
document.addEventListener(event, function(e) {
|
||||
var target = (typeof e.detail !== "number") ? e.detail : e.target;
|
||||
var bind = function(events, selector, callback) {
|
||||
if (typeof events === "string") {
|
||||
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)) {
|
||||
callback(e, target);
|
||||
}
|
||||
if (matchesSelector(target, selector)) {
|
||||
callback(e, target);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
var rippleStart = function(e, target) {
|
||||
var rippleStart = function(e, target, callback) {
|
||||
|
||||
// Init variables
|
||||
var $rippleWrapper = target,
|
||||
$el = $rippleWrapper.parentNode,
|
||||
$ripple = document.createElement("div"),
|
||||
elPos = $el.getBoundingClientRect(),
|
||||
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
|
||||
scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
|
||||
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
|
||||
var $rippleWrapper = target,
|
||||
$el = $rippleWrapper.parentNode,
|
||||
$ripple = document.createElement("div"),
|
||||
elPos = $el.getBoundingClientRect(),
|
||||
// Mouse pos in most cases
|
||||
mousePos = {x: e.clientX - elPos.left, y: ((window.ontouchstart) ? e.clientY - window.scrollY: e.clientY) - elPos.top},
|
||||
scale = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
|
||||
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
|
||||
_rippleOpacity = 0.1,
|
||||
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;
|
||||
|
||||
// Set ripple class
|
||||
|
|
@ -48,6 +65,12 @@ window.ripples = {
|
|||
// Move ripple to the mouse position
|
||||
$ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
|
||||
|
||||
// Get the clicked target's text color, this will be applied to the ripple as background-color.
|
||||
var targetColor = window.getComputedStyle($el).color;
|
||||
|
||||
// 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
|
||||
$rippleWrapper.appendChild($ripple);
|
||||
|
||||
|
|
@ -57,9 +80,21 @@ window.ripples = {
|
|||
// Let other funtions know that this element is animating
|
||||
$ripple.dataset.animating = 1;
|
||||
|
||||
// Set scale value to ripple and animate it
|
||||
// Set scale value, background-color and opacity to ripple and animate it
|
||||
$ripple.className = "ripple ripple-on";
|
||||
$ripple.setAttribute("style", $ripple.getAttribute("style") + ["-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
|
||||
setTimeout(function() {
|
||||
|
|
@ -67,6 +102,9 @@ window.ripples = {
|
|||
// Let know to other functions that this element has finished the animation
|
||||
$ripple.dataset.animating = 0;
|
||||
document.dispatchEvent(rippleEnd);
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
|
||||
}, rippleStartTime);
|
||||
|
||||
|
|
@ -84,39 +122,43 @@ window.ripples = {
|
|||
|
||||
// Helper, need to know if mouse is up or down
|
||||
var mouseDown = false;
|
||||
document.body.onmousedown = function() {
|
||||
bind(["mousedown", "touchstart"], "*", function() {
|
||||
mouseDown = true;
|
||||
};
|
||||
document.body.onmouseup = function() {
|
||||
});
|
||||
bind(["mouseup", "touchend"], "*", function() {
|
||||
mouseDown = false;
|
||||
};
|
||||
});
|
||||
|
||||
// Append ripple wrapper if not exists already
|
||||
var rippleInit = function(e, target) {
|
||||
|
||||
if (target.getElementsByClassName("ripple-wrapper").length === 0) {
|
||||
target.className += " withripple";
|
||||
var $rippleWrapper = document.createElement("div");
|
||||
$rippleWrapper.className = "ripple-wrapper";
|
||||
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;
|
||||
|
||||
// Events handler
|
||||
// init RippleJS and start ripple effect on mousedown
|
||||
bind("mouseover", withRipple, rippleInit);
|
||||
bind(["mouseover", "touchstart"], withRipple, rippleInit);
|
||||
|
||||
// start ripple effect on mousedown
|
||||
bind("mousedown", ".ripple-wrapper", function(e, $ripple) {
|
||||
// Start ripple only on left or middle mouse click
|
||||
if (e.which === 1 || e.which === 2) {
|
||||
bind(["mousedown", "touchstart"], ".ripple-wrapper", function(e, $ripple) {
|
||||
// Start ripple only on left or middle mouse click and touch click
|
||||
if (e.which === 0 || e.which === 1 || e.which === 2) {
|
||||
rippleStart(e, $ripple);
|
||||
}
|
||||
});
|
||||
|
||||
// if animation ends and user is not holding mouse then destroy the ripple
|
||||
bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) {
|
||||
|
||||
|
|
@ -126,10 +168,11 @@ window.ripples = {
|
|||
rippleOut($ripple);
|
||||
}
|
||||
});
|
||||
|
||||
// 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;
|
||||
if ($ripple.dataset.animating != 1) {
|
||||
if ($ripple && $ripple.dataset.animating != 1) {
|
||||
rippleOut($ripple);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
2
template/material/js/ripples.min.js
vendored
2
template/material/js/ripples.min.js
vendored
|
|
@ -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=b,f=e.parentNode,g=document.createElement("div"),h=f.getBoundingClientRect(),j={x:a.clientX-h.left,y:a.clientY-h.top},k="transform:scale("+Math.round(e.offsetWidth/5)+")",l=new CustomEvent("rippleEnd",{detail:g});i=g,g.className="ripple",g.setAttribute("style","left:"+j.x+"px; top:"+j.y+"px;"),e.appendChild(g),c=window.getComputedStyle(g).opacity,g.dataset.animating=1,g.className="ripple ripple-on",g.setAttribute("style",g.getAttribute("style")+["-ms-"+k,"-moz-"+k,"-webkit-"+k,k].join(";")),setTimeout(function(){g.dataset.animating=0,document.dispatchEvent(l)},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)})}};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user