mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 11:29:10 +03:00
fixes #94 - ripple background color
This commit is contained in:
shockwork
parent
085590ea67
commit
2450dbdc78
106
dist/css/material-wfont.css
vendored
106
dist/css/material-wfont.css
vendored
|
|
@ -1562,23 +1562,7 @@ h6,
|
|||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
body .well.well-sm,
|
||||
.container .well.well-sm,
|
||||
.container-fluid .well.well-sm,
|
||||
body .well:not([class^="well well-material-"]).well-sm,
|
||||
.container .well:not([class^="well well-material-"]).well-sm,
|
||||
.container-fluid .well:not([class^="well well-material-"]).well-sm {
|
||||
padding: 9px;
|
||||
}
|
||||
body .well.well-lg,
|
||||
.container .well.well-lg,
|
||||
.container-fluid .well.well-lg,
|
||||
body .well:not([class^="well well-material-"]).well-lg,
|
||||
.container .well:not([class^="well well-material-"]).well-lg,
|
||||
.container-fluid .well:not([class^="well well-material-"]).well-lg {
|
||||
padding: 24px;
|
||||
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
body .well,
|
||||
.container .well,
|
||||
|
|
@ -1914,12 +1898,10 @@ body .jumbotron-material-lightgrey,
|
|||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
outline: none !important;
|
||||
}
|
||||
.btn:hover,
|
||||
.btn:focus {
|
||||
.btn:hover {
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
.btn:hover:not(.btn-link),
|
||||
.btn:focus:not(.btn-link) {
|
||||
.btn:hover:not(.btn-link) {
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
.btn:active:not(.btn-link) {
|
||||
|
|
@ -2002,16 +1984,11 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.btn-link:hover,
|
||||
.btn:not([class^="btn btn-"]):hover,
|
||||
.btn-default:hover,
|
||||
.btn-link:focus,
|
||||
.btn:not([class^="btn btn-"]):focus,
|
||||
.btn-default:focus {
|
||||
.btn-default:hover {
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
}
|
||||
.btn:not([class^="btn btn-"]):hover,
|
||||
.btn-default:hover,
|
||||
.btn:not([class^="btn btn-"]):focus,
|
||||
.btn-default:focus {
|
||||
.btn-default:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.btn-raised {
|
||||
|
|
@ -2095,8 +2072,7 @@ body .jumbotron-material-lightgrey,
|
|||
.btn-flat {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.btn-flat.btn-default:hover,
|
||||
.btn-flat.btn-default:focus {
|
||||
.btn-flat.btn-default:hover {
|
||||
background: none;
|
||||
}
|
||||
.btn-group,
|
||||
|
|
@ -2151,120 +2127,96 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.btn-fab,
|
||||
.btn-fab:hover,
|
||||
.btn-fab:focus,
|
||||
.btn-fab-default,
|
||||
.btn-fab:hover-default,
|
||||
.btn-fab:focus-default {
|
||||
.btn-fab:hover-default {
|
||||
background-color: transparent;
|
||||
}
|
||||
.btn-fab-primary,
|
||||
.btn-fab:hover-primary,
|
||||
.btn-fab:focus-primary {
|
||||
.btn-fab:hover-primary {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
.btn-fab-success,
|
||||
.btn-fab:hover-success,
|
||||
.btn-fab:focus-success {
|
||||
.btn-fab:hover-success {
|
||||
background-color: #0f9d58;
|
||||
}
|
||||
.btn-fab-info,
|
||||
.btn-fab:hover-info,
|
||||
.btn-fab:focus-info {
|
||||
.btn-fab:hover-info {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
.btn-fab-warning,
|
||||
.btn-fab:hover-warning,
|
||||
.btn-fab:focus-warning {
|
||||
.btn-fab:hover-warning {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.btn-fab-danger,
|
||||
.btn-fab:hover-danger,
|
||||
.btn-fab:focus-danger {
|
||||
.btn-fab:hover-danger {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.btn-fab-material-red,
|
||||
.btn-fab:hover-material-red,
|
||||
.btn-fab:focus-material-red {
|
||||
.btn-fab:hover-material-red {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.btn-fab-material-pink,
|
||||
.btn-fab:hover-material-pink,
|
||||
.btn-fab:focus-material-pink {
|
||||
.btn-fab:hover-material-pink {
|
||||
background-color: #e91e63;
|
||||
}
|
||||
.btn-fab-material-purple,
|
||||
.btn-fab:hover-material-purple,
|
||||
.btn-fab:focus-material-purple {
|
||||
.btn-fab:hover-material-purple {
|
||||
background-color: #9c27b0;
|
||||
}
|
||||
.btn-fab-material-deeppurple,
|
||||
.btn-fab:hover-material-deeppurple,
|
||||
.btn-fab:focus-material-deeppurple {
|
||||
.btn-fab:hover-material-deeppurple {
|
||||
background-color: #673ab7;
|
||||
}
|
||||
.btn-fab-material-indigo,
|
||||
.btn-fab:hover-material-indigo,
|
||||
.btn-fab:focus-material-indigo {
|
||||
.btn-fab:hover-material-indigo {
|
||||
background-color: #3f51b5;
|
||||
}
|
||||
.btn-fab-material-lightblue,
|
||||
.btn-fab:hover-material-lightblue,
|
||||
.btn-fab:focus-material-lightblue {
|
||||
.btn-fab:hover-material-lightblue {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
.btn-fab-material-cyan,
|
||||
.btn-fab:hover-material-cyan,
|
||||
.btn-fab:focus-material-cyan {
|
||||
.btn-fab:hover-material-cyan {
|
||||
background-color: #00bcd4;
|
||||
}
|
||||
.btn-fab-material-teal,
|
||||
.btn-fab:hover-material-teal,
|
||||
.btn-fab:focus-material-teal {
|
||||
.btn-fab:hover-material-teal {
|
||||
background-color: #009688;
|
||||
}
|
||||
.btn-fab-material-lightgreen,
|
||||
.btn-fab:hover-material-lightgreen,
|
||||
.btn-fab:focus-material-lightgreen {
|
||||
.btn-fab:hover-material-lightgreen {
|
||||
background-color: #8bc34a;
|
||||
}
|
||||
.btn-fab-material-lime,
|
||||
.btn-fab:hover-material-lime,
|
||||
.btn-fab:focus-material-lime {
|
||||
.btn-fab:hover-material-lime {
|
||||
background-color: #cddc39;
|
||||
}
|
||||
.btn-fab-material-lightyellow,
|
||||
.btn-fab:hover-material-lightyellow,
|
||||
.btn-fab:focus-material-lightyellow {
|
||||
.btn-fab:hover-material-lightyellow {
|
||||
background-color: #ffeb3b;
|
||||
}
|
||||
.btn-fab-material-orange,
|
||||
.btn-fab:hover-material-orange,
|
||||
.btn-fab:focus-material-orange {
|
||||
.btn-fab:hover-material-orange {
|
||||
background-color: #ff9800;
|
||||
}
|
||||
.btn-fab-material-deeporange,
|
||||
.btn-fab:hover-material-deeporange,
|
||||
.btn-fab:focus-material-deeporange {
|
||||
.btn-fab:hover-material-deeporange {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.btn-fab-material-grey,
|
||||
.btn-fab:hover-material-grey,
|
||||
.btn-fab:focus-material-grey {
|
||||
.btn-fab:hover-material-grey {
|
||||
background-color: #9e9e9e;
|
||||
}
|
||||
.btn-fab-material-bluegrey,
|
||||
.btn-fab:hover-material-bluegrey,
|
||||
.btn-fab:focus-material-bluegrey {
|
||||
.btn-fab:hover-material-bluegrey {
|
||||
background-color: #607d8b;
|
||||
}
|
||||
.btn-fab-material-brown,
|
||||
.btn-fab:hover-material-brown,
|
||||
.btn-fab:focus-material-brown {
|
||||
.btn-fab:hover-material-brown {
|
||||
background-color: #795548;
|
||||
}
|
||||
.btn-fab-material-lightgrey,
|
||||
.btn-fab:hover-material-lightgrey,
|
||||
.btn-fab:focus-material-lightgrey {
|
||||
.btn-fab:hover-material-lightgrey {
|
||||
background-color: #ececec;
|
||||
}
|
||||
.btn-fab,
|
||||
|
|
|
|||
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
332
dist/css/material.css
vendored
332
dist/css/material.css
vendored
|
|
@ -1492,6 +1492,20 @@
|
|||
.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%;
|
||||
|
|
@ -1547,23 +1561,7 @@ h6,
|
|||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
body .well.well-sm,
|
||||
.container .well.well-sm,
|
||||
.container-fluid .well.well-sm,
|
||||
body .well:not([class^="well well-material-"]).well-sm,
|
||||
.container .well:not([class^="well well-material-"]).well-sm,
|
||||
.container-fluid .well:not([class^="well well-material-"]).well-sm {
|
||||
padding: 9px;
|
||||
}
|
||||
body .well.well-lg,
|
||||
.container .well.well-lg,
|
||||
.container-fluid .well.well-lg,
|
||||
body .well:not([class^="well well-material-"]).well-lg,
|
||||
.container .well:not([class^="well well-material-"]).well-lg,
|
||||
.container-fluid .well:not([class^="well well-material-"]).well-lg {
|
||||
padding: 24px;
|
||||
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
body .well,
|
||||
.container .well,
|
||||
|
|
@ -1895,15 +1893,14 @@ body .jumbotron-material-lightgrey,
|
|||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
outline: none !important;
|
||||
}
|
||||
.btn:hover,
|
||||
.btn:focus {
|
||||
.btn:hover {
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
.btn:hover:not(.btn-link),
|
||||
.btn:focus:not(.btn-link) {
|
||||
.btn:hover:not(.btn-link) {
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
.btn:active:not(.btn-link) {
|
||||
|
|
@ -1986,21 +1983,17 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.btn-link:hover,
|
||||
.btn:not([class^="btn btn-"]):hover,
|
||||
.btn-default:hover,
|
||||
.btn-link:focus,
|
||||
.btn:not([class^="btn btn-"]):focus,
|
||||
.btn-default:focus {
|
||||
.btn-default:hover {
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
}
|
||||
.btn:not([class^="btn btn-"]):hover,
|
||||
.btn-default:hover,
|
||||
.btn:not([class^="btn btn-"]):focus,
|
||||
.btn-default:focus {
|
||||
.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);
|
||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
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);
|
||||
|
|
@ -2078,8 +2071,7 @@ body .jumbotron-material-lightgrey,
|
|||
.btn-flat {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.btn-flat.btn-default:hover,
|
||||
.btn-flat.btn-default:focus {
|
||||
.btn-flat.btn-default:hover {
|
||||
background: none;
|
||||
}
|
||||
.btn-group,
|
||||
|
|
@ -2088,7 +2080,8 @@ body .jumbotron-material-lightgrey,
|
|||
border-radius: 4px;
|
||||
margin: 10px 1px;
|
||||
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);
|
||||
-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-group:active:not(.btn-link),
|
||||
.btn-group-vertical:active:not(.btn-link) {
|
||||
|
|
@ -2101,7 +2094,8 @@ 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);
|
||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
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) {
|
||||
|
|
@ -2132,120 +2126,96 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.btn-fab,
|
||||
.btn-fab:hover,
|
||||
.btn-fab:focus,
|
||||
.btn-fab-default,
|
||||
.btn-fab:hover-default,
|
||||
.btn-fab:focus-default {
|
||||
.btn-fab:hover-default {
|
||||
background-color: transparent;
|
||||
}
|
||||
.btn-fab-primary,
|
||||
.btn-fab:hover-primary,
|
||||
.btn-fab:focus-primary {
|
||||
.btn-fab:hover-primary {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
.btn-fab-success,
|
||||
.btn-fab:hover-success,
|
||||
.btn-fab:focus-success {
|
||||
.btn-fab:hover-success {
|
||||
background-color: #0f9d58;
|
||||
}
|
||||
.btn-fab-info,
|
||||
.btn-fab:hover-info,
|
||||
.btn-fab:focus-info {
|
||||
.btn-fab:hover-info {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
.btn-fab-warning,
|
||||
.btn-fab:hover-warning,
|
||||
.btn-fab:focus-warning {
|
||||
.btn-fab:hover-warning {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.btn-fab-danger,
|
||||
.btn-fab:hover-danger,
|
||||
.btn-fab:focus-danger {
|
||||
.btn-fab:hover-danger {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.btn-fab-material-red,
|
||||
.btn-fab:hover-material-red,
|
||||
.btn-fab:focus-material-red {
|
||||
.btn-fab:hover-material-red {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.btn-fab-material-pink,
|
||||
.btn-fab:hover-material-pink,
|
||||
.btn-fab:focus-material-pink {
|
||||
.btn-fab:hover-material-pink {
|
||||
background-color: #e91e63;
|
||||
}
|
||||
.btn-fab-material-purple,
|
||||
.btn-fab:hover-material-purple,
|
||||
.btn-fab:focus-material-purple {
|
||||
.btn-fab:hover-material-purple {
|
||||
background-color: #9c27b0;
|
||||
}
|
||||
.btn-fab-material-deeppurple,
|
||||
.btn-fab:hover-material-deeppurple,
|
||||
.btn-fab:focus-material-deeppurple {
|
||||
.btn-fab:hover-material-deeppurple {
|
||||
background-color: #673ab7;
|
||||
}
|
||||
.btn-fab-material-indigo,
|
||||
.btn-fab:hover-material-indigo,
|
||||
.btn-fab:focus-material-indigo {
|
||||
.btn-fab:hover-material-indigo {
|
||||
background-color: #3f51b5;
|
||||
}
|
||||
.btn-fab-material-lightblue,
|
||||
.btn-fab:hover-material-lightblue,
|
||||
.btn-fab:focus-material-lightblue {
|
||||
.btn-fab:hover-material-lightblue {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
.btn-fab-material-cyan,
|
||||
.btn-fab:hover-material-cyan,
|
||||
.btn-fab:focus-material-cyan {
|
||||
.btn-fab:hover-material-cyan {
|
||||
background-color: #00bcd4;
|
||||
}
|
||||
.btn-fab-material-teal,
|
||||
.btn-fab:hover-material-teal,
|
||||
.btn-fab:focus-material-teal {
|
||||
.btn-fab:hover-material-teal {
|
||||
background-color: #009688;
|
||||
}
|
||||
.btn-fab-material-lightgreen,
|
||||
.btn-fab:hover-material-lightgreen,
|
||||
.btn-fab:focus-material-lightgreen {
|
||||
.btn-fab:hover-material-lightgreen {
|
||||
background-color: #8bc34a;
|
||||
}
|
||||
.btn-fab-material-lime,
|
||||
.btn-fab:hover-material-lime,
|
||||
.btn-fab:focus-material-lime {
|
||||
.btn-fab:hover-material-lime {
|
||||
background-color: #cddc39;
|
||||
}
|
||||
.btn-fab-material-lightyellow,
|
||||
.btn-fab:hover-material-lightyellow,
|
||||
.btn-fab:focus-material-lightyellow {
|
||||
.btn-fab:hover-material-lightyellow {
|
||||
background-color: #ffeb3b;
|
||||
}
|
||||
.btn-fab-material-orange,
|
||||
.btn-fab:hover-material-orange,
|
||||
.btn-fab:focus-material-orange {
|
||||
.btn-fab:hover-material-orange {
|
||||
background-color: #ff9800;
|
||||
}
|
||||
.btn-fab-material-deeporange,
|
||||
.btn-fab:hover-material-deeporange,
|
||||
.btn-fab:focus-material-deeporange {
|
||||
.btn-fab:hover-material-deeporange {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.btn-fab-material-grey,
|
||||
.btn-fab:hover-material-grey,
|
||||
.btn-fab:focus-material-grey {
|
||||
.btn-fab:hover-material-grey {
|
||||
background-color: #9e9e9e;
|
||||
}
|
||||
.btn-fab-material-bluegrey,
|
||||
.btn-fab:hover-material-bluegrey,
|
||||
.btn-fab:focus-material-bluegrey {
|
||||
.btn-fab:hover-material-bluegrey {
|
||||
background-color: #607d8b;
|
||||
}
|
||||
.btn-fab-material-brown,
|
||||
.btn-fab:hover-material-brown,
|
||||
.btn-fab:focus-material-brown {
|
||||
.btn-fab:hover-material-brown {
|
||||
background-color: #795548;
|
||||
}
|
||||
.btn-fab-material-lightgrey,
|
||||
.btn-fab:hover-material-lightgrey,
|
||||
.btn-fab:focus-material-lightgrey {
|
||||
.btn-fab:hover-material-lightgrey {
|
||||
background-color: #ececec;
|
||||
}
|
||||
.btn-fab,
|
||||
|
|
@ -2270,7 +2240,8 @@ body .jumbotron-material-lightgrey,
|
|||
display: block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
transition-duration: 0.2s;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.checkbox label .check {
|
||||
display: inline-block;
|
||||
|
|
@ -2300,7 +2271,9 @@ body .jumbotron-material-lightgrey,
|
|||
.checkbox label .check:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
display: block;
|
||||
margin-top: -4px;
|
||||
margin-left: 6px;
|
||||
|
|
@ -2313,7 +2286,8 @@ body .jumbotron-material-lightgrey,
|
|||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0px 0px 0 0px inset;
|
||||
animation: checkbox-off 0.3s linear forwards;
|
||||
-webkit-animation: checkbox-off 0.3s linear forwards;
|
||||
animation: checkbox-off 0.3s linear forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox] {
|
||||
opacity: 0;
|
||||
|
|
@ -2323,24 +2297,30 @@ 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;
|
||||
animation: checkbox-on 0.3s linear forwards;
|
||||
-webkit-animation: checkbox-on 0.3s linear forwards;
|
||||
animation: checkbox-on 0.3s linear forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox]:not(:checked) ~ .check:after {
|
||||
animation: rippleOff 500ms linear forwards;
|
||||
-webkit-animation: rippleOff 500ms linear forwards;
|
||||
animation: rippleOff 500ms linear forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check:after {
|
||||
animation: rippleOn 500ms linear forwards;
|
||||
-webkit-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 {
|
||||
animation-duration: 1ms;
|
||||
-webkit-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);
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check:after,
|
||||
.checkbox-default input[type=checkbox]:checked ~ .check:after {
|
||||
|
|
@ -2552,6 +2532,17 @@ 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;
|
||||
|
|
@ -2563,7 +2554,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;
|
||||
}
|
||||
}
|
||||
@keyframes checkbox-off {
|
||||
@-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;
|
||||
}
|
||||
|
|
@ -2571,7 +2562,8 @@ 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% {
|
||||
transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
margin-top: -4px;
|
||||
margin-left: 6px;
|
||||
width: 0px;
|
||||
|
|
@ -2579,7 +2571,8 @@ 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% {
|
||||
transform: rotate(0deg);
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
width: 20px;
|
||||
|
|
@ -2593,7 +2586,55 @@ body .jumbotron-material-lightgrey,
|
|||
0px 0px 0 10px inset;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
-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;
|
||||
}
|
||||
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;
|
||||
|
|
@ -2620,7 +2661,8 @@ body .jumbotron-material-lightgrey,
|
|||
position: absolute;
|
||||
left: 10px;
|
||||
top: 2px;
|
||||
transition-duration: 0.2s;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.radio label .circle {
|
||||
border: 2px solid rgba(0, 0, 0, 0.84);
|
||||
|
|
@ -2633,7 +2675,9 @@ body .jumbotron-material-lightgrey,
|
|||
width: 15px;
|
||||
border-radius: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.84);
|
||||
transform: scale(0);
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
.radio label .check:after {
|
||||
display: block;
|
||||
|
|
@ -2648,13 +2692,17 @@ body .jumbotron-material-lightgrey,
|
|||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
transform: scale(1.5);
|
||||
-webkit-transform: scale(1.5);
|
||||
-ms-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.radio label input[type=radio]:not(:checked) ~ .check:after {
|
||||
animation: rippleOff 500ms;
|
||||
-webkit-animation: rippleOff 500ms;
|
||||
animation: rippleOff 500ms;
|
||||
}
|
||||
.radio label input[type=radio]:checked ~ .check:after {
|
||||
animation: rippleOn 500ms;
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
.radio input[type=radio]:checked ~ .check,
|
||||
.radio-default input[type=radio]:checked ~ .check {
|
||||
|
|
@ -2804,7 +2852,9 @@ body .jumbotron-material-lightgrey,
|
|||
display: none;
|
||||
}
|
||||
.radio input[type=radio]:checked ~ .check {
|
||||
transform: scale(0.55);
|
||||
-webkit-transform: scale(0.55);
|
||||
-ms-transform: scale(0.55);
|
||||
transform: scale(0.55);
|
||||
}
|
||||
.radio input[type=radio][disabled] ~ .circle {
|
||||
border-color: rgba(0, 0, 0, 0.84);
|
||||
|
|
@ -2812,6 +2862,17 @@ 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;
|
||||
|
|
@ -2823,6 +2884,17 @@ body .jumbotron-material-lightgrey,
|
|||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes rippleOff {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes rippleOff {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
|
@ -2896,7 +2968,8 @@ select[multiple].form-control.focus {
|
|||
pointer-events: none;
|
||||
left: 0px;
|
||||
top: 5px;
|
||||
transition: 0.2s ease all;
|
||||
-webkit-transition: 0.2s ease all;
|
||||
transition: 0.2s ease all;
|
||||
opacity: 0;
|
||||
}
|
||||
.form-control-wrapper .form-control:not(.empty) ~ .floating-label {
|
||||
|
|
@ -2929,13 +3002,19 @@ select[multiple].form-control.focus {
|
|||
height: 2px;
|
||||
background-color: #5264ae;
|
||||
bottom: -1px;
|
||||
transform: scaleX(0);
|
||||
transition: transform 0s;
|
||||
-webkit-transform: scaleX(0);
|
||||
-ms-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-webkit-transition: -webkit-transform 0s;
|
||||
transition: transform 0s;
|
||||
}
|
||||
.form-control-wrapper .form-control:focus ~ .material-input:before,
|
||||
.form-control-wrapper .form-control.focus ~ .material-input:before {
|
||||
transform: scaleX(1);
|
||||
transition: transform 0.2s ease-out;
|
||||
-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;
|
||||
}
|
||||
.form-control-wrapper .material-input:after {
|
||||
content: "";
|
||||
|
|
@ -2947,7 +3026,9 @@ select[multiple].form-control.focus {
|
|||
left: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.9;
|
||||
transform-origin: left;
|
||||
-webkit-transform-origin: left;
|
||||
-ms-transform-origin: left;
|
||||
transform-origin: left;
|
||||
}
|
||||
.form-control-wrapper .input-lg ~ .material-input:after {
|
||||
height: 26px;
|
||||
|
|
@ -2960,8 +3041,10 @@ select[multiple].form-control.focus {
|
|||
}
|
||||
.form-control-wrapper .form-control:focus ~ .material-input:after,
|
||||
.form-control-wrapper .form-control.focus ~ .material-input:after {
|
||||
animation: input-highlight 0.3s ease;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation: input-highlight 0.3s ease;
|
||||
animation: input-highlight 0.3s ease;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
.form-control-wrapper select ~ .material-input:after {
|
||||
|
|
@ -3381,10 +3464,12 @@ select.form-control.focus {
|
|||
@keyframes input-highlight {
|
||||
0% {
|
||||
left: 20%;
|
||||
transform: scaleX(20%);
|
||||
-webkit-transform: scaleX(20%);
|
||||
transform: scaleX(20%);
|
||||
}
|
||||
99% {
|
||||
transform: scaleX(0);
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -4105,15 +4190,21 @@ 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;
|
||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
|
||||
transform: translateY(200%);
|
||||
-webkit-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%);
|
||||
}
|
||||
.snackbar.snackbar-opened {
|
||||
padding: 14px 15px;
|
||||
margin-bottom: 20px;
|
||||
height: auto;
|
||||
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
|
||||
transform: none;
|
||||
-webkit-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;
|
||||
}
|
||||
.snackbar.toast {
|
||||
border-radius: 200px;
|
||||
|
|
@ -4122,7 +4213,10 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
.noUi-target * {
|
||||
-webkit-touch-callout: none;
|
||||
-ms-touch-action: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.noUi-base {
|
||||
|
|
@ -4149,7 +4243,8 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
*z-index: -1;
|
||||
}
|
||||
.noUi-state-tap .noUi-origin {
|
||||
transition: left 0.3s, top 0.3s;
|
||||
-webkit-transition: left 0.3s, top 0.3s;
|
||||
transition: left 0.3s, top 0.3s;
|
||||
}
|
||||
.noUi-state-drag * {
|
||||
cursor: inherit !important;
|
||||
|
|
@ -4193,7 +4288,8 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
.noUi-handle {
|
||||
border-radius: 100%;
|
||||
cursor: default;
|
||||
transition: all 0.2s ease-out;
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
border: 1px solid;
|
||||
}
|
||||
.noUi-horizontal {
|
||||
|
|
@ -4201,7 +4297,9 @@ fieldset[disabled] .navbar .btn-link:focus {
|
|||
margin: 15px 0;
|
||||
}
|
||||
.noUi-horizontal .noUi-handle.noUi-active {
|
||||
transform: scale(2.5);
|
||||
-webkit-transform: scale(2.5);
|
||||
-ms-transform: scale(2.5);
|
||||
transform: scale(2.5);
|
||||
}
|
||||
[disabled].noUi-slider {
|
||||
opacity: 0.5;
|
||||
|
|
|
|||
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
43
dist/js/ripples.js
vendored
43
dist/js/ripples.js
vendored
|
|
@ -31,35 +31,50 @@ window.ripples = {
|
|||
var rippleStart = function(e, target) {
|
||||
|
||||
// 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(),
|
||||
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}),
|
||||
__rippleOpacity__ = 0.05,
|
||||
targetColor,
|
||||
rgbArr,
|
||||
refreshElementStyle;
|
||||
|
||||
$ripplecache = $ripple;
|
||||
|
||||
// Set ripple class
|
||||
$ripple.className = "ripple";
|
||||
|
||||
// Move ripple to the mouse position
|
||||
$ripple.className = "ripple";
|
||||
// Move ripple to the mouse position
|
||||
$ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
|
||||
|
||||
// Get the clicked targets text color, this will be applied to the ripple as background-color.
|
||||
targetColor = window.getComputedStyle($el).color;
|
||||
|
||||
|
||||
// This changes the alpha value of the rgba (opacity) to the constant __rippleOpacity__
|
||||
// Not sure if regexp is quicker...
|
||||
rgbArr = targetColor.split(',');
|
||||
rgbArr.pop();
|
||||
rgbArr.push(" " + __rippleOpacity__ + ")")
|
||||
targetColor = rgbArr.join(',');
|
||||
|
||||
|
||||
// Insert new ripple into ripple wrapper
|
||||
$rippleWrapper.appendChild($ripple);
|
||||
$rippleWrapper.appendChild($ripple);
|
||||
|
||||
// Make sure the ripple has the class applied (ugly hack but it works)
|
||||
refreshElementStyle = window.getComputedStyle($ripple).opacity;
|
||||
|
||||
// Let other funtions know that this element is animating
|
||||
$ripple.dataset.animating = 1;
|
||||
|
||||
// Set scale value to ripple and animate it
|
||||
// + "background-color: " + targetColor + ";"
|
||||
// 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(";"));
|
||||
$ripple.setAttribute("style", $ripple.getAttribute("style") + "background-color: " + targetColor + ";" + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
|
||||
|
||||
|
||||
// This function is called when the animation is finished
|
||||
setTimeout(function() {
|
||||
|
|
|
|||
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){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})},f=function(a,b){var c,e,f,g=b,h=g.parentNode,j=document.createElement("div"),k=h.getBoundingClientRect(),l={x:a.clientX-k.left,y:a.clientY-k.top},m="transform:scale("+Math.round(g.offsetWidth/5)+")",n=new CustomEvent("rippleEnd",{detail:j}),o=.05;i=j,j.className="ripple",j.setAttribute("style","left:"+l.x+"px; top:"+l.y+"px;"),c=window.getComputedStyle(h).color,e=c.split(","),e.pop(),e.push(" "+o+")"),c=e.join(","),g.appendChild(j),f=window.getComputedStyle(j).opacity,j.dataset.animating=1,j.className="ripple ripple-on",j.setAttribute("style",j.getAttribute("style")+"background-color: "+c+";"+["-ms-"+m,"-moz-"+m,"-webkit-"+m,m].join(";")),setTimeout(function(){j.dataset.animating=0,document.dispatchEvent(n)},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;document.body.onmousedown=function(){h=!0},document.body.onmouseup=function(){h=!1};var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c)}};e("mouseover",a,j),e("mousedown",".ripple-wrapper",function(a,b){(1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e("mouseup",".ripple-wrapper",function(){var a=i;1!=a.dataset.animating&&g(a)})}};
|
||||
|
|
@ -31,35 +31,50 @@ window.ripples = {
|
|||
var rippleStart = function(e, target) {
|
||||
|
||||
// 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(),
|
||||
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}),
|
||||
__rippleOpacity__ = 0.05,
|
||||
targetColor,
|
||||
rgbArr,
|
||||
refreshElementStyle;
|
||||
|
||||
$ripplecache = $ripple;
|
||||
|
||||
// Set ripple class
|
||||
$ripple.className = "ripple";
|
||||
|
||||
// Move ripple to the mouse position
|
||||
$ripple.className = "ripple";
|
||||
// Move ripple to the mouse position
|
||||
$ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
|
||||
|
||||
// Get the clicked targets text color, this will be applied to the ripple as background-color.
|
||||
targetColor = window.getComputedStyle($el).color;
|
||||
|
||||
|
||||
// This changes the alpha value of the rgba (opacity) to the constant __rippleOpacity__
|
||||
// Not sure if regexp is quicker...
|
||||
rgbArr = targetColor.split(',');
|
||||
rgbArr.pop();
|
||||
rgbArr.push(" " + __rippleOpacity__ + ")")
|
||||
targetColor = rgbArr.join(',');
|
||||
|
||||
|
||||
// Insert new ripple into ripple wrapper
|
||||
$rippleWrapper.appendChild($ripple);
|
||||
$rippleWrapper.appendChild($ripple);
|
||||
|
||||
// Make sure the ripple has the class applied (ugly hack but it works)
|
||||
refreshElementStyle = window.getComputedStyle($ripple).opacity;
|
||||
|
||||
// Let other funtions know that this element is animating
|
||||
$ripple.dataset.animating = 1;
|
||||
|
||||
// Set scale value to ripple and animate it
|
||||
// + "background-color: " + targetColor + ";"
|
||||
// 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(";"));
|
||||
$ripple.setAttribute("style", $ripple.getAttribute("style") + "background-color: " + targetColor + ";" + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
|
||||
|
||||
|
||||
// This function is called when the animation is finished
|
||||
setTimeout(function() {
|
||||
|
|
|
|||
|
|
@ -1562,23 +1562,7 @@ h6,
|
|||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
body .well.well-sm,
|
||||
.container .well.well-sm,
|
||||
.container-fluid .well.well-sm,
|
||||
body .well:not([class^="well well-material-"]).well-sm,
|
||||
.container .well:not([class^="well well-material-"]).well-sm,
|
||||
.container-fluid .well:not([class^="well well-material-"]).well-sm {
|
||||
padding: 9px;
|
||||
}
|
||||
body .well.well-lg,
|
||||
.container .well.well-lg,
|
||||
.container-fluid .well.well-lg,
|
||||
body .well:not([class^="well well-material-"]).well-lg,
|
||||
.container .well:not([class^="well well-material-"]).well-lg,
|
||||
.container-fluid .well:not([class^="well well-material-"]).well-lg {
|
||||
padding: 24px;
|
||||
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
body .well,
|
||||
.container .well,
|
||||
|
|
@ -1914,12 +1898,10 @@ body .jumbotron-material-lightgrey,
|
|||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
outline: none !important;
|
||||
}
|
||||
.btn:hover,
|
||||
.btn:focus {
|
||||
.btn:hover {
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
.btn:hover:not(.btn-link),
|
||||
.btn:focus:not(.btn-link) {
|
||||
.btn:hover:not(.btn-link) {
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
.btn:active:not(.btn-link) {
|
||||
|
|
@ -2002,16 +1984,11 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.btn-link:hover,
|
||||
.btn:not([class^="btn btn-"]):hover,
|
||||
.btn-default:hover,
|
||||
.btn-link:focus,
|
||||
.btn:not([class^="btn btn-"]):focus,
|
||||
.btn-default:focus {
|
||||
.btn-default:hover {
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
}
|
||||
.btn:not([class^="btn btn-"]):hover,
|
||||
.btn-default:hover,
|
||||
.btn:not([class^="btn btn-"]):focus,
|
||||
.btn-default:focus {
|
||||
.btn-default:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.btn-raised {
|
||||
|
|
@ -2095,8 +2072,7 @@ body .jumbotron-material-lightgrey,
|
|||
.btn-flat {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.btn-flat.btn-default:hover,
|
||||
.btn-flat.btn-default:focus {
|
||||
.btn-flat.btn-default:hover {
|
||||
background: none;
|
||||
}
|
||||
.btn-group,
|
||||
|
|
@ -2151,120 +2127,96 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.btn-fab,
|
||||
.btn-fab:hover,
|
||||
.btn-fab:focus,
|
||||
.btn-fab-default,
|
||||
.btn-fab:hover-default,
|
||||
.btn-fab:focus-default {
|
||||
.btn-fab:hover-default {
|
||||
background-color: transparent;
|
||||
}
|
||||
.btn-fab-primary,
|
||||
.btn-fab:hover-primary,
|
||||
.btn-fab:focus-primary {
|
||||
.btn-fab:hover-primary {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
.btn-fab-success,
|
||||
.btn-fab:hover-success,
|
||||
.btn-fab:focus-success {
|
||||
.btn-fab:hover-success {
|
||||
background-color: #0f9d58;
|
||||
}
|
||||
.btn-fab-info,
|
||||
.btn-fab:hover-info,
|
||||
.btn-fab:focus-info {
|
||||
.btn-fab:hover-info {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
.btn-fab-warning,
|
||||
.btn-fab:hover-warning,
|
||||
.btn-fab:focus-warning {
|
||||
.btn-fab:hover-warning {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.btn-fab-danger,
|
||||
.btn-fab:hover-danger,
|
||||
.btn-fab:focus-danger {
|
||||
.btn-fab:hover-danger {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.btn-fab-material-red,
|
||||
.btn-fab:hover-material-red,
|
||||
.btn-fab:focus-material-red {
|
||||
.btn-fab:hover-material-red {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.btn-fab-material-pink,
|
||||
.btn-fab:hover-material-pink,
|
||||
.btn-fab:focus-material-pink {
|
||||
.btn-fab:hover-material-pink {
|
||||
background-color: #e91e63;
|
||||
}
|
||||
.btn-fab-material-purple,
|
||||
.btn-fab:hover-material-purple,
|
||||
.btn-fab:focus-material-purple {
|
||||
.btn-fab:hover-material-purple {
|
||||
background-color: #9c27b0;
|
||||
}
|
||||
.btn-fab-material-deeppurple,
|
||||
.btn-fab:hover-material-deeppurple,
|
||||
.btn-fab:focus-material-deeppurple {
|
||||
.btn-fab:hover-material-deeppurple {
|
||||
background-color: #673ab7;
|
||||
}
|
||||
.btn-fab-material-indigo,
|
||||
.btn-fab:hover-material-indigo,
|
||||
.btn-fab:focus-material-indigo {
|
||||
.btn-fab:hover-material-indigo {
|
||||
background-color: #3f51b5;
|
||||
}
|
||||
.btn-fab-material-lightblue,
|
||||
.btn-fab:hover-material-lightblue,
|
||||
.btn-fab:focus-material-lightblue {
|
||||
.btn-fab:hover-material-lightblue {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
.btn-fab-material-cyan,
|
||||
.btn-fab:hover-material-cyan,
|
||||
.btn-fab:focus-material-cyan {
|
||||
.btn-fab:hover-material-cyan {
|
||||
background-color: #00bcd4;
|
||||
}
|
||||
.btn-fab-material-teal,
|
||||
.btn-fab:hover-material-teal,
|
||||
.btn-fab:focus-material-teal {
|
||||
.btn-fab:hover-material-teal {
|
||||
background-color: #009688;
|
||||
}
|
||||
.btn-fab-material-lightgreen,
|
||||
.btn-fab:hover-material-lightgreen,
|
||||
.btn-fab:focus-material-lightgreen {
|
||||
.btn-fab:hover-material-lightgreen {
|
||||
background-color: #8bc34a;
|
||||
}
|
||||
.btn-fab-material-lime,
|
||||
.btn-fab:hover-material-lime,
|
||||
.btn-fab:focus-material-lime {
|
||||
.btn-fab:hover-material-lime {
|
||||
background-color: #cddc39;
|
||||
}
|
||||
.btn-fab-material-lightyellow,
|
||||
.btn-fab:hover-material-lightyellow,
|
||||
.btn-fab:focus-material-lightyellow {
|
||||
.btn-fab:hover-material-lightyellow {
|
||||
background-color: #ffeb3b;
|
||||
}
|
||||
.btn-fab-material-orange,
|
||||
.btn-fab:hover-material-orange,
|
||||
.btn-fab:focus-material-orange {
|
||||
.btn-fab:hover-material-orange {
|
||||
background-color: #ff9800;
|
||||
}
|
||||
.btn-fab-material-deeporange,
|
||||
.btn-fab:hover-material-deeporange,
|
||||
.btn-fab:focus-material-deeporange {
|
||||
.btn-fab:hover-material-deeporange {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.btn-fab-material-grey,
|
||||
.btn-fab:hover-material-grey,
|
||||
.btn-fab:focus-material-grey {
|
||||
.btn-fab:hover-material-grey {
|
||||
background-color: #9e9e9e;
|
||||
}
|
||||
.btn-fab-material-bluegrey,
|
||||
.btn-fab:hover-material-bluegrey,
|
||||
.btn-fab:focus-material-bluegrey {
|
||||
.btn-fab:hover-material-bluegrey {
|
||||
background-color: #607d8b;
|
||||
}
|
||||
.btn-fab-material-brown,
|
||||
.btn-fab:hover-material-brown,
|
||||
.btn-fab:focus-material-brown {
|
||||
.btn-fab:hover-material-brown {
|
||||
background-color: #795548;
|
||||
}
|
||||
.btn-fab-material-lightgrey,
|
||||
.btn-fab:hover-material-lightgrey,
|
||||
.btn-fab:focus-material-lightgrey {
|
||||
.btn-fab:hover-material-lightgrey {
|
||||
background-color: #ececec;
|
||||
}
|
||||
.btn-fab,
|
||||
|
|
|
|||
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
|
|
@ -1561,23 +1561,7 @@ h6,
|
|||
.h4,
|
||||
.h5,
|
||||
.h6 {
|
||||
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
body .well.well-sm,
|
||||
.container .well.well-sm,
|
||||
.container-fluid .well.well-sm,
|
||||
body .well:not([class^="well well-material-"]).well-sm,
|
||||
.container .well:not([class^="well well-material-"]).well-sm,
|
||||
.container-fluid .well:not([class^="well well-material-"]).well-sm {
|
||||
padding: 9px;
|
||||
}
|
||||
body .well.well-lg,
|
||||
.container .well.well-lg,
|
||||
.container-fluid .well.well-lg,
|
||||
body .well:not([class^="well well-material-"]).well-lg,
|
||||
.container .well:not([class^="well well-material-"]).well-lg,
|
||||
.container-fluid .well:not([class^="well well-material-"]).well-lg {
|
||||
padding: 24px;
|
||||
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
body .well,
|
||||
.container .well,
|
||||
|
|
@ -1913,12 +1897,10 @@ body .jumbotron-material-lightgrey,
|
|||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
outline: none !important;
|
||||
}
|
||||
.btn:hover,
|
||||
.btn:focus {
|
||||
.btn:hover {
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
.btn:hover:not(.btn-link),
|
||||
.btn:focus:not(.btn-link) {
|
||||
.btn:hover:not(.btn-link) {
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
.btn:active:not(.btn-link) {
|
||||
|
|
@ -2001,16 +1983,11 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.btn-link:hover,
|
||||
.btn:not([class^="btn btn-"]):hover,
|
||||
.btn-default:hover,
|
||||
.btn-link:focus,
|
||||
.btn:not([class^="btn btn-"]):focus,
|
||||
.btn-default:focus {
|
||||
.btn-default:hover {
|
||||
color: rgba(0, 0, 0, 0.84);
|
||||
}
|
||||
.btn:not([class^="btn btn-"]):hover,
|
||||
.btn-default:hover,
|
||||
.btn:not([class^="btn btn-"]):focus,
|
||||
.btn-default:focus {
|
||||
.btn-default:hover {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.btn-raised {
|
||||
|
|
@ -2094,8 +2071,7 @@ body .jumbotron-material-lightgrey,
|
|||
.btn-flat {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.btn-flat.btn-default:hover,
|
||||
.btn-flat.btn-default:focus {
|
||||
.btn-flat.btn-default:hover {
|
||||
background: none;
|
||||
}
|
||||
.btn-group,
|
||||
|
|
@ -2150,120 +2126,96 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.btn-fab,
|
||||
.btn-fab:hover,
|
||||
.btn-fab:focus,
|
||||
.btn-fab-default,
|
||||
.btn-fab:hover-default,
|
||||
.btn-fab:focus-default {
|
||||
.btn-fab:hover-default {
|
||||
background-color: transparent;
|
||||
}
|
||||
.btn-fab-primary,
|
||||
.btn-fab:hover-primary,
|
||||
.btn-fab:focus-primary {
|
||||
.btn-fab:hover-primary {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
.btn-fab-success,
|
||||
.btn-fab:hover-success,
|
||||
.btn-fab:focus-success {
|
||||
.btn-fab:hover-success {
|
||||
background-color: #0f9d58;
|
||||
}
|
||||
.btn-fab-info,
|
||||
.btn-fab:hover-info,
|
||||
.btn-fab:focus-info {
|
||||
.btn-fab:hover-info {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
.btn-fab-warning,
|
||||
.btn-fab:hover-warning,
|
||||
.btn-fab:focus-warning {
|
||||
.btn-fab:hover-warning {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.btn-fab-danger,
|
||||
.btn-fab:hover-danger,
|
||||
.btn-fab:focus-danger {
|
||||
.btn-fab:hover-danger {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.btn-fab-material-red,
|
||||
.btn-fab:hover-material-red,
|
||||
.btn-fab:focus-material-red {
|
||||
.btn-fab:hover-material-red {
|
||||
background-color: #f44336;
|
||||
}
|
||||
.btn-fab-material-pink,
|
||||
.btn-fab:hover-material-pink,
|
||||
.btn-fab:focus-material-pink {
|
||||
.btn-fab:hover-material-pink {
|
||||
background-color: #e91e63;
|
||||
}
|
||||
.btn-fab-material-purple,
|
||||
.btn-fab:hover-material-purple,
|
||||
.btn-fab:focus-material-purple {
|
||||
.btn-fab:hover-material-purple {
|
||||
background-color: #9c27b0;
|
||||
}
|
||||
.btn-fab-material-deeppurple,
|
||||
.btn-fab:hover-material-deeppurple,
|
||||
.btn-fab:focus-material-deeppurple {
|
||||
.btn-fab:hover-material-deeppurple {
|
||||
background-color: #673ab7;
|
||||
}
|
||||
.btn-fab-material-indigo,
|
||||
.btn-fab:hover-material-indigo,
|
||||
.btn-fab:focus-material-indigo {
|
||||
.btn-fab:hover-material-indigo {
|
||||
background-color: #3f51b5;
|
||||
}
|
||||
.btn-fab-material-lightblue,
|
||||
.btn-fab:hover-material-lightblue,
|
||||
.btn-fab:focus-material-lightblue {
|
||||
.btn-fab:hover-material-lightblue {
|
||||
background-color: #03a9f4;
|
||||
}
|
||||
.btn-fab-material-cyan,
|
||||
.btn-fab:hover-material-cyan,
|
||||
.btn-fab:focus-material-cyan {
|
||||
.btn-fab:hover-material-cyan {
|
||||
background-color: #00bcd4;
|
||||
}
|
||||
.btn-fab-material-teal,
|
||||
.btn-fab:hover-material-teal,
|
||||
.btn-fab:focus-material-teal {
|
||||
.btn-fab:hover-material-teal {
|
||||
background-color: #009688;
|
||||
}
|
||||
.btn-fab-material-lightgreen,
|
||||
.btn-fab:hover-material-lightgreen,
|
||||
.btn-fab:focus-material-lightgreen {
|
||||
.btn-fab:hover-material-lightgreen {
|
||||
background-color: #8bc34a;
|
||||
}
|
||||
.btn-fab-material-lime,
|
||||
.btn-fab:hover-material-lime,
|
||||
.btn-fab:focus-material-lime {
|
||||
.btn-fab:hover-material-lime {
|
||||
background-color: #cddc39;
|
||||
}
|
||||
.btn-fab-material-lightyellow,
|
||||
.btn-fab:hover-material-lightyellow,
|
||||
.btn-fab:focus-material-lightyellow {
|
||||
.btn-fab:hover-material-lightyellow {
|
||||
background-color: #ffeb3b;
|
||||
}
|
||||
.btn-fab-material-orange,
|
||||
.btn-fab:hover-material-orange,
|
||||
.btn-fab:focus-material-orange {
|
||||
.btn-fab:hover-material-orange {
|
||||
background-color: #ff9800;
|
||||
}
|
||||
.btn-fab-material-deeporange,
|
||||
.btn-fab:hover-material-deeporange,
|
||||
.btn-fab:focus-material-deeporange {
|
||||
.btn-fab:hover-material-deeporange {
|
||||
background-color: #ff5722;
|
||||
}
|
||||
.btn-fab-material-grey,
|
||||
.btn-fab:hover-material-grey,
|
||||
.btn-fab:focus-material-grey {
|
||||
.btn-fab:hover-material-grey {
|
||||
background-color: #9e9e9e;
|
||||
}
|
||||
.btn-fab-material-bluegrey,
|
||||
.btn-fab:hover-material-bluegrey,
|
||||
.btn-fab:focus-material-bluegrey {
|
||||
.btn-fab:hover-material-bluegrey {
|
||||
background-color: #607d8b;
|
||||
}
|
||||
.btn-fab-material-brown,
|
||||
.btn-fab:hover-material-brown,
|
||||
.btn-fab:focus-material-brown {
|
||||
.btn-fab:hover-material-brown {
|
||||
background-color: #795548;
|
||||
}
|
||||
.btn-fab-material-lightgrey,
|
||||
.btn-fab:hover-material-lightgrey,
|
||||
.btn-fab:focus-material-lightgrey {
|
||||
.btn-fab:hover-material-lightgrey {
|
||||
background-color: #ececec;
|
||||
}
|
||||
.btn-fab,
|
||||
|
|
|
|||
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
|
|
@ -31,35 +31,50 @@ window.ripples = {
|
|||
var rippleStart = function(e, target) {
|
||||
|
||||
// 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(),
|
||||
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}),
|
||||
__rippleOpacity__ = 0.05,
|
||||
targetColor,
|
||||
rgbArr,
|
||||
refreshElementStyle;
|
||||
|
||||
$ripplecache = $ripple;
|
||||
|
||||
// Set ripple class
|
||||
$ripple.className = "ripple";
|
||||
|
||||
// Move ripple to the mouse position
|
||||
$ripple.className = "ripple";
|
||||
// Move ripple to the mouse position
|
||||
$ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
|
||||
|
||||
// Get the clicked targets text color, this will be applied to the ripple.
|
||||
targetColor = window.getComputedStyle($el).color;
|
||||
|
||||
|
||||
// This changes the last value of the rgba value (opacity) to the constant __rippleOpacity__
|
||||
// Not sure if regexp is quicker...
|
||||
rgbArr = targetColor.split(',');
|
||||
rgbArr.pop();
|
||||
rgbArr.push(" " + __rippleOpacity__ + ")")
|
||||
targetColor = rgbArr.join(',');
|
||||
|
||||
|
||||
// Insert new ripple into ripple wrapper
|
||||
$rippleWrapper.appendChild($ripple);
|
||||
$rippleWrapper.appendChild($ripple);
|
||||
|
||||
// Make sure the ripple has the class applied (ugly hack but it works)
|
||||
refreshElementStyle = window.getComputedStyle($ripple).opacity;
|
||||
|
||||
// Let other funtions know that this element is animating
|
||||
$ripple.dataset.animating = 1;
|
||||
|
||||
// Set scale value to ripple and animate it
|
||||
// + "background-color: " + targetColor + ";"
|
||||
// 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(";"));
|
||||
$ripple.setAttribute("style", $ripple.getAttribute("style") + "background-color: " + targetColor + ";" + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";"));
|
||||
|
||||
|
||||
// This function is called when the animation is finished
|
||||
setTimeout(function() {
|
||||
|
|
|
|||
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){document.addEventListener(a,function(a){var e="number"!=typeof a.detail?a.detail:a.target;b(e,c)&&d(a,e)})},f=function(a,b){var c,e,f,g=b,h=g.parentNode,j=document.createElement("div"),k=h.getBoundingClientRect(),l={x:a.clientX-k.left,y:a.clientY-k.top},m="transform:scale("+Math.round(g.offsetWidth/5)+")",n=new CustomEvent("rippleEnd",{detail:j}),o=.05;i=j,j.className="ripple",j.setAttribute("style","left:"+l.x+"px; top:"+l.y+"px;"),c=window.getComputedStyle(h).color,e=c.split(","),e.pop(),e.push(" "+o+")"),c=e.join(","),g.appendChild(j),f=window.getComputedStyle(j).opacity,j.dataset.animating=1,j.className="ripple ripple-on",j.setAttribute("style",j.getAttribute("style")+"background-color: "+c+";"+["-ms-"+m,"-moz-"+m,"-webkit-"+m,m].join(";")),setTimeout(function(){j.dataset.animating=0,document.dispatchEvent(n)},d)},g=function(a){a.className="ripple ripple-on ripple-out",setTimeout(function(){a.remove()},c)},h=!1;document.body.onmousedown=function(){h=!0},document.body.onmouseup=function(){h=!1};var i,j=function(a,b){if(0===b.getElementsByClassName("ripple-wrapper").length){b.className+=" withripple";var c=document.createElement("div");c.className="ripple-wrapper",b.appendChild(c)}};e("mouseover",a,j),e("mousedown",".ripple-wrapper",function(a,b){(1===a.which||2===a.which)&&f(a,b)}),e("rippleEnd",".ripple-wrapper .ripple",function(a,b){var c=b.parentNode.getElementsByClassName("ripple");(!h||c[0]==b&&c.length>1)&&g(b)}),e("mouseup",".ripple-wrapper",function(){var a=i;1!=a.dataset.animating&&g(a)})}};
|
||||
Loading…
Reference in New Issue
Block a user