mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-22 09:36:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

security fix

Browse Source
This commit is contained in:
FezVrasta 2014-10-02 11:36:05 +02:00
parent 39fc813c42
commit 8cc954a887
31 changed files with 294 additions and 1899 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -3,4 +3,5 @@
# Example .gitignore files: https://github.com/github/gitignore
Thumbs.db
.DS_Store
.DS_Store
/node_modules/

11
CONTRIBUTING.md Normal file
View File

@ -0,0 +1,11 @@
## Playground
Use this pen to test and deveop new features of Material Design for Bootstrap:
http://codepen.io/FezVrasta/pen/ihmea
It already includes every needed dependency and is based on the latest version of the theme.
## Grunt
**Grunt!** Ok... when you edit something please run `grunt` to compile CSS and copy stuff in the correct folders. Thanks!

4
README.md
View File

@ -56,6 +56,10 @@ If you like this project you may support me by donating something on Gittip, sta
[![gittip](screenshots/gittip-button.jpg)](https://www.gittip.com/FezVrasta/)
[![issues](screenshots/issues-button.jpg)](https://github.com/FezVrasta/bootstrap-material-design/issues)
# Contribute
Please see the [contrib](CONTRIBUTING.md) file.
# Documentation
Material Design for Bootstrap provides some additional stuff to get the best from Material Design.

1
compile.json Normal file
View File

@ -0,0 +1 @@
{ "less": [] }

518
css-compiled/material-wfont.css
View File

@ -1,19 +1,4 @@
/* Generated by less 1.7.5 */
@import url(//fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic);
@-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%;
@ -401,8 +386,7 @@ body .jumbotron-material-lightgrey,
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 {
@ -500,8 +484,7 @@ body .jumbotron-material-lightgrey,
}
.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);
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);
@ -588,8 +571,7 @@ 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);
-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) {
@ -602,8 +584,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) {
@ -740,9 +721,7 @@ body .jumbotron-material-lightgrey,
padding-top: 15px;
}
.checkbox {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
}
.checkbox label {
cursor: pointer;
@ -753,8 +732,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:after {
display: block;
@ -776,7 +754,6 @@ body .jumbotron-material-lightgrey,
border: 2px solid rgba(0, 0, 0, 0.84);
height: 20px;
width: 20px;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.checkbox .check,
@ -860,36 +837,30 @@ body .jumbotron-material-lightgrey,
height: 18px;
border: solid 2px;
border-color: #5a5a5a;
-webkit-animation: uncheck 300ms ease-out forwards;
-ms-animation: uncheck 300ms ease-out forwards;
animation: uncheck 300ms ease-out forwards;
}
.checkbox input[type=checkbox]:focus ~ .check:after {
opacity: 0.2;
}
.checkbox input[type=checkbox]:checked ~ .check:before {
-webkit-animation: check 300ms ease-out forwards;
-ms-animation: check 300ms ease-out forwards;
animation: check 300ms ease-out forwards;
}
.checkbox input[type=checkbox]:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms;
-ms-animation: rippleOff 500ms;
animation: rippleOff 500ms;
animation: rippleOff 500ms linear forwards;
}
.checkbox input[type=checkbox]:checked ~ .check:after {
-webkit-animation: rippleOn 500ms;
-ms-animation: rippleOn 500ms;
animation: rippleOn 500ms;
animation: rippleOn 500ms linear forwards;
}
.checkbox:not(:hover) input[type=checkbox] ~ .check:before,
.checkbox:not(:hover) input[type=checkbox] ~ .check:after {
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 {
@ -961,86 +932,6 @@ body .jumbotron-material-lightgrey,
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after {
background-color: #ececec;
}
@-webkit-keyframes uncheck {
0% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
100% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@-ms-keyframes uncheck {
0% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
100% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-ms-transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@keyframes uncheck {
0% {
top: -3px;
@ -1050,16 +941,14 @@ body .jumbotron-material-lightgrey,
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform: rotate(45deg);
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
@ -1074,86 +963,7 @@ body .jumbotron-material-lightgrey,
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@-webkit-keyframes check {
100% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-left: transparent;
border-top-color: transparent;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@-ms-keyframes check {
100% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-left: transparent;
border-top-color: transparent;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-ms-transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
@ -1165,8 +975,7 @@ body .jumbotron-material-lightgrey,
left: 17px;
width: 10px;
height: 21px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
@ -1180,8 +989,7 @@ body .jumbotron-material-lightgrey,
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
@ -1191,53 +999,12 @@ body .jumbotron-material-lightgrey,
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@-webkit-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-ms-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
@ -1248,55 +1015,6 @@ body .jumbotron-material-lightgrey,
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-ms-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
@ -1308,15 +1026,6 @@ body .jumbotron-material-lightgrey,
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
.form-horizontal .radio {
margin-bottom: 10px;
@ -1331,8 +1040,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);
@ -1345,9 +1053,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;
@ -1362,18 +1068,12 @@ 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;
-ms-animation: rippleOff 500ms;
animation: rippleOff 500ms;
}
.radio label input[type=radio]:checked ~ .check:after {
-webkit-animation: rippleOn 500ms;
-ms-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
.radio input[type=radio]:checked ~ .check,
@ -1524,9 +1224,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);
@ -1534,46 +1232,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;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-ms-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
@ -1584,55 +1242,6 @@ body .jumbotron-material-lightgrey,
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-ms-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
@ -1644,15 +1253,6 @@ body .jumbotron-material-lightgrey,
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
fieldset[disabled] .form-control,
.form-control-wrapper .form-control,
@ -1716,8 +1316,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 {
@ -1750,19 +1349,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: "";
@ -1774,9 +1367,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;
@ -1789,9 +1380,7 @@ 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;
opacity: 0;
}
@ -2212,12 +1801,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;
}
@ -2306,7 +1893,6 @@ legend {
}
.list-group .list-group-item .row-content {
display: inline-block;
width: -webkit-calc(100% - 92px);
width: calc(100% - 92px);
min-height: 66px;
}
@ -2321,7 +1907,6 @@ legend {
cursor: pointer;
}
.list-group .list-group-item .row-content .action-secondary ~ * {
max-width: -webkit-calc(100% - 30px);
max-width: calc(100% - 30px);
}
.list-group .list-group-item .row-content .least-content {
@ -2344,7 +1929,6 @@ legend {
}
.list-group .list-group-separator:before {
content: "";
width: -webkit-calc(100% - 90px);
width: calc(100% - 90px);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
float: right;
@ -2392,8 +1976,14 @@ legend {
color: #e5e5e5;
background-color: transparent;
}
.navbar .navbar-toggle {
border-color: rgba(255, 255, 255, 0.84);
.navbar-toggle {
margin-top: 13px;
}
.navbar-default .navbar-toggle {
border-color: transparent;
}
.navbar-inverse .navbar-toggle {
border-color: transparent;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
@ -2923,21 +2513,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%);
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;
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;
transform: none;
}
.snackbar.toast {
border-radius: 200px;
@ -2945,11 +2529,8 @@ fieldset[disabled] .navbar .btn-link:focus {
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
-moz-box-sizing: border-box;
user-select: none;
box-sizing: border-box;
}
.noUi-base {
@ -2967,9 +2548,7 @@ fieldset[disabled] .navbar .btn-link:focus {
.noUi-handle {
position: relative;
z-index: 1;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-stacking .noUi-handle {
z-index: 10;
@ -2978,7 +2557,6 @@ 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;
}
.noUi-state-drag * {
@ -2988,8 +2566,7 @@ fieldset[disabled] .navbar .btn-link:focus {
height: 10px;
}
.noUi-horizontal .noUi-handle {
-moz-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
width: 12px;
height: 12px;
left: -10px;
@ -3024,8 +2601,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 {
@ -3033,9 +2609,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;

1
css-compiled/material-wfont.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

518
css-compiled/material.css
View File

@ -1,18 +1,3 @@
/* Generated by less 1.7.5 */
@-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%;
@ -400,8 +385,7 @@ body .jumbotron-material-lightgrey,
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 {
@ -499,8 +483,7 @@ body .jumbotron-material-lightgrey,
}
.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);
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);
@ -587,8 +570,7 @@ 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);
-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) {
@ -601,8 +583,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) {
@ -739,9 +720,7 @@ body .jumbotron-material-lightgrey,
padding-top: 15px;
}
.checkbox {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
}
.checkbox label {
cursor: pointer;
@ -752,8 +731,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:after {
display: block;
@ -775,7 +753,6 @@ body .jumbotron-material-lightgrey,
border: 2px solid rgba(0, 0, 0, 0.84);
height: 20px;
width: 20px;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.checkbox .check,
@ -859,36 +836,30 @@ body .jumbotron-material-lightgrey,
height: 18px;
border: solid 2px;
border-color: #5a5a5a;
-webkit-animation: uncheck 300ms ease-out forwards;
-ms-animation: uncheck 300ms ease-out forwards;
animation: uncheck 300ms ease-out forwards;
}
.checkbox input[type=checkbox]:focus ~ .check:after {
opacity: 0.2;
}
.checkbox input[type=checkbox]:checked ~ .check:before {
-webkit-animation: check 300ms ease-out forwards;
-ms-animation: check 300ms ease-out forwards;
animation: check 300ms ease-out forwards;
}
.checkbox input[type=checkbox]:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms;
-ms-animation: rippleOff 500ms;
animation: rippleOff 500ms;
animation: rippleOff 500ms linear forwards;
}
.checkbox input[type=checkbox]:checked ~ .check:after {
-webkit-animation: rippleOn 500ms;
-ms-animation: rippleOn 500ms;
animation: rippleOn 500ms;
animation: rippleOn 500ms linear forwards;
}
.checkbox:not(:hover) input[type=checkbox] ~ .check:before,
.checkbox:not(:hover) input[type=checkbox] ~ .check:after {
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 {
@ -960,86 +931,6 @@ body .jumbotron-material-lightgrey,
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after {
background-color: #ececec;
}
@-webkit-keyframes uncheck {
0% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
100% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@-ms-keyframes uncheck {
0% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
100% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-ms-transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@keyframes uncheck {
0% {
top: -3px;
@ -1049,16 +940,14 @@ body .jumbotron-material-lightgrey,
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform: rotate(45deg);
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
@ -1073,86 +962,7 @@ body .jumbotron-material-lightgrey,
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@-webkit-keyframes check {
100% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-left: transparent;
border-top-color: transparent;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@-ms-keyframes check {
100% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-left: transparent;
border-top-color: transparent;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-ms-transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
@ -1164,8 +974,7 @@ body .jumbotron-material-lightgrey,
left: 17px;
width: 10px;
height: 21px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
@ -1179,8 +988,7 @@ body .jumbotron-material-lightgrey,
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
@ -1190,53 +998,12 @@ body .jumbotron-material-lightgrey,
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@-webkit-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-ms-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
@ -1247,55 +1014,6 @@ body .jumbotron-material-lightgrey,
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-ms-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
@ -1307,15 +1025,6 @@ body .jumbotron-material-lightgrey,
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
.form-horizontal .radio {
margin-bottom: 10px;
@ -1330,8 +1039,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);
@ -1344,9 +1052,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;
@ -1361,18 +1067,12 @@ 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;
-ms-animation: rippleOff 500ms;
animation: rippleOff 500ms;
}
.radio label input[type=radio]:checked ~ .check:after {
-webkit-animation: rippleOn 500ms;
-ms-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
.radio input[type=radio]:checked ~ .check,
@ -1523,9 +1223,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);
@ -1533,46 +1231,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;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-ms-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
@ -1583,55 +1241,6 @@ body .jumbotron-material-lightgrey,
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-ms-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
@ -1643,15 +1252,6 @@ body .jumbotron-material-lightgrey,
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
fieldset[disabled] .form-control,
.form-control-wrapper .form-control,
@ -1715,8 +1315,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 {
@ -1749,19 +1348,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: "";
@ -1773,9 +1366,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;
@ -1788,9 +1379,7 @@ 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;
opacity: 0;
}
@ -2211,12 +1800,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;
}
@ -2305,7 +1892,6 @@ legend {
}
.list-group .list-group-item .row-content {
display: inline-block;
width: -webkit-calc(100% - 92px);
width: calc(100% - 92px);
min-height: 66px;
}
@ -2320,7 +1906,6 @@ legend {
cursor: pointer;
}
.list-group .list-group-item .row-content .action-secondary ~ * {
max-width: -webkit-calc(100% - 30px);
max-width: calc(100% - 30px);
}
.list-group .list-group-item .row-content .least-content {
@ -2343,7 +1928,6 @@ legend {
}
.list-group .list-group-separator:before {
content: "";
width: -webkit-calc(100% - 90px);
width: calc(100% - 90px);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
float: right;
@ -2391,8 +1975,14 @@ legend {
color: #e5e5e5;
background-color: transparent;
}
.navbar .navbar-toggle {
border-color: rgba(255, 255, 255, 0.84);
.navbar-toggle {
margin-top: 13px;
}
.navbar-default .navbar-toggle {
border-color: transparent;
}
.navbar-inverse .navbar-toggle {
border-color: transparent;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
@ -2922,21 +2512,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%);
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;
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;
transform: none;
}
.snackbar.toast {
border-radius: 200px;
@ -2944,11 +2528,8 @@ fieldset[disabled] .navbar .btn-link:focus {
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
-moz-box-sizing: border-box;
user-select: none;
box-sizing: border-box;
}
.noUi-base {
@ -2966,9 +2547,7 @@ fieldset[disabled] .navbar .btn-link:focus {
.noUi-handle {
position: relative;
z-index: 1;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-stacking .noUi-handle {
z-index: 10;
@ -2977,7 +2556,6 @@ 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;
}
.noUi-state-drag * {
@ -2987,8 +2565,7 @@ fieldset[disabled] .navbar .btn-link:focus {
height: 10px;
}
.noUi-horizontal .noUi-handle {
-moz-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
width: 12px;
height: 12px;
left: -10px;
@ -3023,8 +2600,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 {
@ -3032,9 +2608,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;

1
css-compiled/material.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

11
css-compiled/ripples.css
View File

@ -1,4 +1,3 @@
/* Generated by less 1.7.5 */
.withripple {
position: relative;
}
@ -20,22 +19,16 @@
margin-top: -10px;
border-radius: 100%;
background-color: rgba(0, 0, 0, 0.05);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
transform: scale(1);
transform-origin: 50%;
opacity: 0;
pointer-events: none;
}
.ripple.ripple-on {
-webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
opacity: 1;
}
.ripple.ripple-out {
-webkit-transition: opacity 0.1s linear 0s !important;
transition: opacity 0.1s linear 0s !important;
opacity: 0;
}

1
css-compiled/ripples.min.css vendored Normal file
View File

@ -0,0 +1 @@
.withripple{position:relative}.ripple-wrapper{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:2px}.ripple{position:absolute;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:100%;background-color:rgba(0,0,0,.05);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;opacity:0;pointer-events:none}.ripple.ripple-on{-webkit-transition:opacity .15s ease-in 0s,-webkit-transform .5s cubic-bezier(0.4,0,.2,1) .1s;transition:opacity .15s ease-in 0s,transform .5s cubic-bezier(0.4,0,.2,1) .1s;opacity:1}.ripple.ripple-out{-webkit-transition:opacity .1s linear 0s!important;transition:opacity .1s linear 0s!important;opacity:0}

61
gruntfile.js Normal file
View File

@ -0,0 +1,61 @@
module.exports = function(grunt) {
"use strict";
grunt.initConfig({
less: {
production: {
options: {
paths: ["less"]
},
files: {
"css-compiled/material.css": "less/material.less",
"css-compiled/material-wfont.css": "less/material-wfont.less",
"css-compiled/ripples.css": "less/ripples.less"
}
}
},
autoprefixer: {
options: {
browsers: ["last 3 versions", "ie 8", "ie 9", "ie 10", "ie 11"]
},
dist: {
files: {
"css-compiled/material.css": "css-compiled/material.css",
"css-compiled/material-wfont.css": "css-compiled/material-wfont.css",
"css-compiled/ripples.css": "css-compiled/ripples.css"
}
},
},
cssmin: {
minify: {
expand: true,
cwd: "css-compiled/",
src: ["*.css", "!*.min.css"],
dest: "css-compiled/",
ext: ".min.css"
}
},
copy: {
css: {
src: "css-compiled/*.min.css",
dest: "template/material/"
},
js: {
src: "scripts/*.js",
dest: "template/material/"
}
}
});
grunt.loadNpmTasks("grunt-contrib-less");
grunt.loadNpmTasks("grunt-autoprefixer");
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.registerTask("default", ["less", "autoprefixer", "cssmin", "copy"]);
};

28
less/animations.less
View File

@ -1,33 +1,5 @@
// main: material.less
@-webkit-keyframes input-highlight {
0% {
left: 20%;
width: 20%;
}
99% {
width: 0;
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes input-highlight {
0% {
left: 20%;
width: 20%;
}
99% {
width: 0;
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes input-highlight {
0% {
left: 20%;

56
less/checkboxes.less
View File

@ -35,7 +35,7 @@
border: 2px solid @lightbg-text;
height: 20px;
width: 20px;
.transition-delay(0.2s);
transition-delay: 0.2s;
}
}
@ -53,7 +53,7 @@
height: 18px;
border: solid 2px;
border-color: #5a5a5a;
.animation(uncheck 300ms ease-out forwards);
animation: uncheck 300ms ease-out forwards;
}
input[type=checkbox]:focus ~ .check:after {
@ -61,22 +61,22 @@
}
input[type=checkbox]:checked ~ .check:before {
.animation(check 300ms ease-out forwards);
animation: check 300ms ease-out forwards;
}
// Ripple effect on click
input[type=checkbox]:not(:checked) ~ .check:after {
.animation(rippleOff 500ms linear forwards);
animation: rippleOff 500ms linear forwards;
}
input[type=checkbox]:checked ~ .check:after {
.animation(rippleOn 500ms linear forwards);
animation: rippleOn 500ms linear forwards;
}
// Make animate quickly when not hover
&:not(:hover) input[type=checkbox] ~ .check {
&:before, &:after {
.animation-duration(1ms);
}
&:before, &:after {
animation-duration: 1ms;
}
}
// Style for disabled inputs
@ -91,8 +91,7 @@
.variations(~" input[type=checkbox]:checked ~ .check:after", background-color, @success);
}
.keyframe-uncheck() {
@keyframes uncheck {
0% {
top: -3px;
left: 17px;
@ -130,7 +129,7 @@
}
}
.keyframe-check() {
@keyframes check {
100% {
top: -3px;
left: 17px;
@ -166,19 +165,8 @@
border-top-color: #5a5a5a;
}
}
@-webkit-keyframes uncheck {.keyframe-uncheck()}
@-moz-keyframes uncheck {.keyframe-uncheck()}
@-ms-keyframes uncheck {.keyframe-uncheck()}
@-o-keyframes uncheck {.keyframe-uncheck()}
@keyframes uncheck {.keyframe-uncheck()}
@-webkit-keyframes check {.keyframe-check()}
@-moz-keyframes check {.keyframe-check()}
@-ms-keyframes check {.keyframe-check()}
@-o-keyframes check {.keyframe-check()}
@keyframes check {.keyframe-check()}
.ripple() {
@keyframes rippleOn {
0% {
opacity: 0;
}
@ -190,14 +178,14 @@
}
}
@-webkit-keyframes rippleOn {.ripple()}
@-moz-keyframes rippleOn {.ripple()}
@-ms-keyframes rippleOn {.ripple()}
@-o-keyframes rippleOn {.ripple()}
@keyframes rippleOn {.ripple()}
@-webkit-keyframes rippleOff {.ripple()}
@-moz-keyframes rippleOff {.ripple()}
@-ms-keyframes rippleOn {.ripple()}
@-o-keyframes rippleOff {.ripple()}
@keyframes rippleOff {.ripple()}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}

2
less/inputs.less
View File

@ -99,9 +99,7 @@ select[multiple].form-control {
/* active state */
.form-control:focus ~ .material-input:after, .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;
opacity: 0;
}

1
less/material-wfont.less
View File

@ -1,3 +1,2 @@
// out: ../css-compiled/material-wfont.css
@import url(//fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic);
@import "material.less";

431
template/material/material.css → less/material.css
View File

@ -1,18 +1,4 @@
/* Generated by less 1.7.5 */
@-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%;
@ -400,8 +386,7 @@ body .jumbotron-material-lightgrey,
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 {
@ -499,8 +484,7 @@ body .jumbotron-material-lightgrey,
}
.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);
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);
@ -587,8 +571,7 @@ 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);
-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) {
@ -601,8 +584,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) {
@ -739,9 +721,7 @@ body .jumbotron-material-lightgrey,
padding-top: 15px;
}
.checkbox {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
}
.checkbox label {
cursor: pointer;
@ -752,8 +732,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:after {
display: block;
@ -775,7 +754,6 @@ body .jumbotron-material-lightgrey,
border: 2px solid rgba(0, 0, 0, 0.84);
height: 20px;
width: 20px;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.checkbox .check,
@ -859,36 +837,30 @@ body .jumbotron-material-lightgrey,
height: 18px;
border: solid 2px;
border-color: #5a5a5a;
-webkit-animation: uncheck 300ms ease-out forwards;
-ms-animation: uncheck 300ms ease-out forwards;
animation: uncheck 300ms ease-out forwards;
}
.checkbox input[type=checkbox]:focus ~ .check:after {
opacity: 0.2;
}
.checkbox input[type=checkbox]:checked ~ .check:before {
-webkit-animation: check 300ms ease-out forwards;
-ms-animation: check 300ms ease-out forwards;
animation: check 300ms ease-out forwards;
}
.checkbox input[type=checkbox]:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms;
-ms-animation: rippleOff 500ms;
animation: rippleOff 500ms;
animation: rippleOff 500ms linear forwards;
}
.checkbox input[type=checkbox]:checked ~ .check:after {
-webkit-animation: rippleOn 500ms;
-ms-animation: rippleOn 500ms;
animation: rippleOn 500ms;
animation: rippleOn 500ms linear forwards;
}
.checkbox:not(:hover) input[type=checkbox] ~ .check:before,
.checkbox:not(:hover) input[type=checkbox] ~ .check:after {
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 {
@ -960,7 +932,7 @@ body .jumbotron-material-lightgrey,
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after {
background-color: #ececec;
}
@-webkit-keyframes uncheck {
@keyframes uncheck {
0% {
top: -3px;
left: 17px;
@ -969,16 +941,14 @@ body .jumbotron-material-lightgrey,
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform: rotate(45deg);
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
@ -993,86 +963,7 @@ body .jumbotron-material-lightgrey,
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@-webkit-keyframes check {
100% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-left: transparent;
border-top-color: transparent;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@-ms-keyframes check {
100% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
}
51% {
border-left: transparent;
border-top-color: transparent;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
-ms-transform: rotate(45deg);
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
-ms-transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
@ -1084,8 +975,7 @@ body .jumbotron-material-lightgrey,
left: 17px;
width: 10px;
height: 21px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
@ -1099,8 +989,7 @@ body .jumbotron-material-lightgrey,
left: 17px;
width: 4px;
height: 4px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
@ -1110,53 +999,12 @@ body .jumbotron-material-lightgrey,
left: 12px;
width: 18px;
height: 18px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@-webkit-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-ms-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
@ -1167,55 +1015,6 @@ body .jumbotron-material-lightgrey,
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-ms-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
@ -1227,15 +1026,6 @@ body .jumbotron-material-lightgrey,
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
.form-horizontal .radio {
margin-bottom: 10px;
@ -1250,8 +1040,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);
@ -1264,9 +1053,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;
@ -1281,18 +1068,12 @@ 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;
-ms-animation: rippleOff 500ms;
animation: rippleOff 500ms;
}
.radio label input[type=radio]:checked ~ .check:after {
-webkit-animation: rippleOn 500ms;
-ms-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
.radio input[type=radio]:checked ~ .check,
@ -1443,9 +1224,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);
@ -1453,46 +1232,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;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-ms-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
@ -1503,55 +1242,6 @@ body .jumbotron-material-lightgrey,
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-ms-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
@ -1563,15 +1253,6 @@ body .jumbotron-material-lightgrey,
100% {
opacity: 0;
}
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
fieldset[disabled] .form-control,
.form-control-wrapper .form-control,
@ -1635,8 +1316,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 {
@ -1669,19 +1349,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: "";
@ -1693,9 +1367,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;
@ -1708,9 +1380,7 @@ 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;
opacity: 0;
}
@ -2131,12 +1801,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;
}
@ -2225,7 +1893,6 @@ legend {
}
.list-group .list-group-item .row-content {
display: inline-block;
width: -webkit-calc(100% - 92px);
width: calc(100% - 92px);
min-height: 66px;
}
@ -2240,7 +1907,6 @@ legend {
cursor: pointer;
}
.list-group .list-group-item .row-content .action-secondary ~ * {
max-width: -webkit-calc(100% - 30px);
max-width: calc(100% - 30px);
}
.list-group .list-group-item .row-content .least-content {
@ -2263,7 +1929,6 @@ legend {
}
.list-group .list-group-separator:before {
content: "";
width: -webkit-calc(100% - 90px);
width: calc(100% - 90px);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
float: right;
@ -2842,21 +2507,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%);
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;
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;
transform: none;
}
.snackbar.toast {
border-radius: 200px;
@ -2864,11 +2523,8 @@ fieldset[disabled] .navbar .btn-link:focus {
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
-moz-box-sizing: border-box;
user-select: none;
box-sizing: border-box;
}
.noUi-base {
@ -2886,9 +2542,7 @@ fieldset[disabled] .navbar .btn-link:focus {
.noUi-handle {
position: relative;
z-index: 1;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-stacking .noUi-handle {
z-index: 10;
@ -2897,7 +2551,6 @@ 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;
}
.noUi-state-drag * {
@ -2907,8 +2560,7 @@ fieldset[disabled] .navbar .btn-link:focus {
height: 10px;
}
.noUi-horizontal .noUi-handle {
-moz-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
width: 12px;
height: 12px;
left: -10px;
@ -2943,8 +2595,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 {
@ -2952,9 +2603,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;
@ -3244,4 +2893,4 @@ fieldset[disabled] .navbar .btn-link:focus {
}
.slider-material-lightgrey .noUi-handle {
border-color: #ececec;
}
}

2
less/material.less
View File

@ -1,10 +1,8 @@
// out: ../css-compiled/material.css
// Material Theme 0.0.1
// -----------------------------------------------------
@import "variables.less";
@import "mixins.less";
@import "prefixer.less";
@import "animations.less";
@import "shadows.less";

8
less/navbar.less
View File

@ -55,7 +55,8 @@
// Darken the responsive nav toggle
.navbar-toggle {
border-color: @navbar-toggle-border-color;
margin-top: 13px;
border-color: transparent;
&:hover,
&:focus {
background-color: @navbar-toggle-hover-bg;
@ -65,6 +66,11 @@
}
}
.navbar-default .navbar-toggle,
.navbar-inverse .navbar-toggle {
border-color: transparent;
}
.navbar-collapse,
.navbar-form {
border-color: rgba(0,0,0,0.1);

7
less/plugin-nouislider.less
View File

@ -2,11 +2,8 @@
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
-moz-box-sizing: border-box;
user-select: none;
box-sizing: border-box;
}
.noUi-base {
@ -25,7 +22,6 @@
position: relative;
z-index: 1;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.noUi-stacking .noUi-handle {
z-index: 10;
@ -34,7 +30,6 @@
*z-index: -1;
}
.noUi-state-tap .noUi-origin {
-webkit-transition: left 0.3s, top 0.3s;
transition: left 0.3s, top 0.3s;
}
.noUi-state-drag * {

8
less/plugin-snackbarjs.less
View File

@ -13,11 +13,7 @@
// Animation
height: 0;
-moz-transition: -moz-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-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;
-moz-transform: translateY(200%);
-webkit-transform: translateY(200%);
transform: translateY(200%);
}
@ -28,11 +24,7 @@
// Animation
height: auto;
-moz-transition: -moz-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s;
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, 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;
-moz-transform: none;
-webkit-transform: none;
transform: none;
}

372
less/prefixer.less
View File

@ -1,372 +0,0 @@
// main: material
//---------------------------------------------------
// LESS Prefixer
//---------------------------------------------------
//
// All of the CSS3 fun, none of the prefixes!
//
// As a rule, you can use the CSS properties you
// would expect just by adding a '.':
//
// box-shadow => .box-shadow(@args)
//
// Also, when shorthand is available, arguments are
// not parameterized. Learn CSS, not LESS Prefixer.
//
// -------------------------------------------------
// TABLE OF CONTENTS
// (*) denotes a syntax-sugar helper
// -------------------------------------------------
//
// .animation(@args)
// .animation-delay(@delay)
// .animation-direction(@direction)
// .animation-duration(@duration)
// .animation-fill-mode(@mode)
// .animation-iteration-count(@count)
// .animation-name(@name)
// .animation-play-state(@state)
// .animation-timing-function(@function)
// .background-size(@args)
// .border-radius(@args)
// .box-shadow(@args)
// .inner-shadow(@args) *
// .box-sizing(@args)
// .border-box() *
// .content-box() *
// .columns(@args)
// .column-count(@count)
// .column-gap(@gap)
// .column-rule(@args)
// .column-width(@width)
// .gradient(@default,@start,@stop) *
// .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
// .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
// .opacity(@factor)
// .transform(@args)
// .transform-origin(@args)
// .transform-style(@style)
// .rotate(@deg)
// .scale(@factor)
// .translate(@x,@y)
// .translate3d(@x,@y,@z)
// .translateHardware(@x,@y) *
// .text-shadow(@args)
// .transition(@args)
// .transition-delay(@delay)
// .transition-duration(@duration)
// .transition-property(@property)
// .transition-timing-function(@function)
//
//
//
// Credit to LESS Elements for the motivation and
// to CSS3Please.com for implementation.
//
// Copyright (c) 2012 Joel Sutherland
// MIT Licensed:
// http://www.opensource.org/licenses/mit-license.php
//
//---------------------------------------------------
// Animation
.animation(@args) {
-webkit-animation: @args;
-moz-animation: @args;
-ms-animation: @args;
-o-animation: @args;
animation: @args;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
-moz-animation-delay: @delay;
-ms-animation-delay: @delay;
-o-animation-delay: @delay;
animation-delay: @delay;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
-moz-animation-direction: @direction;
-ms-animation-direction: @direction;
-o-animation-direction: @direction;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
-moz-animation-duration: @duration;
-ms-animation-duration: @duration;
-o-animation-duration: @duration;
animation-duration: @duration;
}
.animation-fill-mode(@mode) {
-webkit-animation-fill-mode: @mode;
-moz-animation-fill-mode: @mode;
-ms-animation-fill-mode: @mode;
-o-animation-fill-mode: @mode;
animation-fill-mode: @mode;
}
.animation-iteration-count(@count) {
-webkit-animation-iteration-count: @count;
-moz-animation-iteration-count: @count;
-ms-animation-iteration-count: @count;
-o-animation-iteration-count: @count;
animation-iteration-count: @count;
}
.animation-name(@name) {
-webkit-animation-name: @name;
-moz-animation-name: @name;
-ms-animation-name: @name;
-o-animation-name: @name;
animation-name: @name;
}
.animation-play-state(@state) {
-webkit-animation-play-state: @state;
-moz-animation-play-state: @state;
-ms-animation-play-state: @state;
-o-animation-play-state: @state;
animation-play-state: @state;
}
.animation-timing-function(@function) {
-webkit-animation-timing-function: @function;
-moz-animation-timing-function: @function;
-ms-animation-timing-function: @function;
-o-animation-timing-function: @function;
animation-timing-function: @function;
}
// Background Size
.background-size(@args) {
-webkit-background-size: @args;
background-size: @args;
}
// Border Radius
.border-radius(@args) {
-webkit-border-radius: @args;
border-radius: @args;
background-clip: padding-box;
}
// Box Shadows
.box-shadow(@args) {
-webkit-box-shadow: @args;
box-shadow: @args;
}
.inner-shadow(@args) {
.box-shadow(inset @args);
}
// Box Sizing
.box-sizing(@args) {
-webkit-box-sizing: @args;
-moz-box-sizing: @args;
box-sizing: @args;
}
.border-box(){
.box-sizing(border-box);
}
.content-box(){
.box-sizing(content-box);
}
// Columns
.columns(@args) {
-webkit-columns: @args;
-moz-columns: @args;
columns: @args;
}
.column-count(@count) {
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
}
.column-gap(@gap) {
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}
.column-width(@width) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
}
.column-rule(@args) {
-webkit-column-rule: @args;
-moz-column-rule: @args;
column-rule: @args;
}
// Gradients
.gradient(@default: #F5F5F5, @start: #EEE, @stop: #FFF) {
.linear-gradient-top(@default,@start,0%,@stop,100%);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}
// Opacity
.opacity(@factor) {
@iefactor: @factor*100;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@{iefactor})";
filter: ~"alpha(opacity=(@{iefactor}))";
opacity: @factor;
}
// Text Shadow
.text-shadow(@args) {
text-shadow: @args;
}
// Transforms
.transform(@args) {
-webkit-transform: @args;
-moz-transform: @args;
-ms-transform: @args;
-o-transform: @args;
transform: @args;
}
.transform-origin(@args) {
-webkit-transform-origin: @args;
-moz-transform-origin: @args;
-ms-transform-origin: @args;
-o-transform-origin: @args;
transform-origin: @args;
}
.transform-style(@style) {
-webkit-transform-style: @style;
-moz-transform-style: @style;
-ms-transform-style: @style;
-o-transform-style: @style;
transform-style: @style;
}
.rotate(@deg:45deg){
.transform(rotate(@deg));
}
.scale(@factor:.5){
.transform(scale(@factor));
}
.translate(@x,@y){
.transform(translate(@x,@y));
}
.translate3d(@x,@y,@z) {
.transform(translate3d(@x,@y,@z));
}
.translateHardware(@x,@y) {
.translate(@x,@y);
-webkit-transform: translate3d(@x,@y,0);
-moz-transform: translate3d(@x,@y,0);
-o-transform: translate3d(@x,@y,0);
-ms-transform: translate3d(@x,@y,0);
transform: translate3d(@x,@y,0);
}
// Transitions
.transition(@args:200ms) {
-webkit-transition: @args;
-moz-transition: @args;
-o-transition: @args;
-ms-transition: @args;
transition: @args;
}
.transition-delay(@delay:0) {
-webkit-transition-delay: @delay;
-moz-transition-delay: @delay;
-o-transition-delay: @delay;
-ms-transition-delay: @delay;
transition-delay: @delay;
}
.transition-duration(@duration:200ms) {
-webkit-transition-duration: @duration;
-moz-transition-duration: @duration;
-o-transition-duration: @duration;
-ms-transition-duration: @duration;
transition-duration: @duration;
}
.transition-property(@property:all) {
-webkit-transition-property: @property;
-moz-transition-property: @property;
-o-transition-property: @property;
-ms-transition-property: @property;
transition-property: @property;
}
.transition-timing-function(@function:ease) {
-webkit-transition-timing-function: @function;
-moz-transition-timing-function: @function;
-o-transition-timing-function: @function;
-ms-transition-timing-function: @function;
transition-timing-function: @function;
}

28
less/radios.less
View File

@ -44,10 +44,10 @@
transform: scale(1.5);
}
input[type=radio]:not(:checked) ~ .check:after {
.animation(rippleOff 500ms);
animation: rippleOff 500ms;
}
input[type=radio]:checked ~ .check:after {
.animation(rippleOn 500ms);
animation: rippleOn 500ms;
}
}
@ -72,7 +72,7 @@
}
.ripple() {
@keyframes rippleOn {
0% {
opacity: 0;
}
@ -84,14 +84,14 @@
}
}
@-webkit-keyframes rippleOn {.ripple()}
@-moz-keyframes rippleOn {.ripple()}
@-ms-keyframes rippleOn {.ripple()}
@-o-keyframes rippleOn {.ripple()}
@keyframes rippleOn {.ripple()}
@-webkit-keyframes rippleOff {.ripple()}
@-moz-keyframes rippleOff {.ripple()}
@-ms-keyframes rippleOn {.ripple()}
@-o-keyframes rippleOff {.ripple()}
@keyframes rippleOff {.ripple()}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}

10
less/ripples.less
View File

@ -1,5 +1,3 @@
// out: ../css-compiled/ripples.css
.withripple {
position: relative;
}
@ -21,24 +19,16 @@
margin-top: -10px;
border-radius: 100%;
background-color: rgba(0,0,0,0.05);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
opacity: 0;
pointer-events: none;
}
.ripple.ripple-on {
-webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
-moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
opacity: 1;
}
.ripple.ripple-out {
-webkit-transition: opacity 0.1s linear 0s !important;
transition: opacity 0.1s linear 0s !important;
opacity: 0;
}

7
scripts/ripples.js
View File

@ -71,7 +71,6 @@ var ripples = {
};
var rippleOut = function($ripple) {
console.log($ripple);
// Clear previous animation
$ripple.className = "ripple ripple-on ripple-out";
@ -109,12 +108,14 @@ var ripples = {
// init RippleJS and start ripple effect on mousedown
bind("mouseover", withRipple, rippleInit);
console.log(withRipple);
// start ripple effect on mousedown
bind("mousedown", ".ripple-wrapper", rippleStart);
// if animation ends and user is not holding mouse then destroy the ripple
bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) {
if (!mouseDown) {
var $ripples = $ripple.parentNode.getElementsByClassName("ripple");
if (!mouseDown || ( $ripples[0] == $ripple && $ripples.length > 1)) {
rippleOut($ripple);
}
});

48
template/index.html
View File

@ -2,46 +2,40 @@
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="material/ripples.css" rel="stylesheet">
<link href="material/material.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="material/css-compiled/ripples.min.css" rel="stylesheet">
<link href="material/css-compiled/material-wfont.min.css" rel="stylesheet">
</head>
<body>
<!-- Your site -->
<!-- Your site -->
<h1>
You can add your site here.
</h1>
<h1>You can add your site here.</h1>
<h2>
To ensure that material-design theme is working, check out the buttons below.
</h2>
<h2>To ensure that material-design theme is working, check out the buttons below.</h2>
<h3 class="text-muted">
If you can see the ripple effect on clicking them, then you are good to go!
</h3>
<h3 class="text-muted">If you can see the ripple effect on clicking them, then you are good to go!</h3>
<p class="bs-component">
<a href="javascript:void(0)" class="btn btn-default">Default</a>
<a href="javascript:void(0)" class="btn btn-primary">Primary</a>
<a href="javascript:void(0)" class="btn btn-success">Success</a>
<a href="javascript:void(0)" class="btn btn-info">Info</a>
<a href="javascript:void(0)" class="btn btn-warning">Warning</a>
<a href="javascript:void(0)" class="btn btn-danger">Danger</a>
<a href="javascript:void(0)" class="btn btn-link">Link</a>
</p>
<p class="bs-component">
<a href="javascript:void(0)" class="btn btn-default">Default</a>
<a href="javascript:void(0)" class="btn btn-primary">Primary</a>
<a href="javascript:void(0)" class="btn btn-success">Success</a>
<a href="javascript:void(0)" class="btn btn-info">Info</a>
<a href="javascript:void(0)" class="btn btn-warning">Warning</a>
<a href="javascript:void(0)" class="btn btn-danger">Danger</a>
<a href="javascript:void(0)" class="btn btn-link">Link</a>
</p>
<!-- Your site ends -->
<!-- Your site ends -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="material/ripples.js"></script>
<script src="material/material.js"></script>
<script src="material/scripts/ripples.js"></script>
<script src="material/scripts/material.js"></script>
</body>

1
template/material/css-compiled/material-wfont.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
template/material/css-compiled/material.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
template/material/css-compiled/ripples.min.css vendored Normal file
View File

@ -0,0 +1 @@
.withripple{position:relative}.ripple-wrapper{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;overflow:hidden;border-radius:2px}.ripple{position:absolute;width:20px;height:20px;margin-left:-10px;margin-top:-10px;border-radius:100%;background-color:rgba(0,0,0,.05);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transform-origin:50%;-ms-transform-origin:50%;transform-origin:50%;opacity:0;pointer-events:none}.ripple.ripple-on{-webkit-transition:opacity .15s ease-in 0s,-webkit-transform .5s cubic-bezier(0.4,0,.2,1) .1s;transition:opacity .15s ease-in 0s,transform .5s cubic-bezier(0.4,0,.2,1) .1s;opacity:1}.ripple.ripple-out{-webkit-transition:opacity .1s linear 0s!important;transition:opacity .1s linear 0s!important;opacity:0}

41
template/material/ripples.css
View File

@ -1,41 +0,0 @@
/* Generated by less 1.7.5 */
.withripple {
position: relative;
}
.ripple-wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 2px;
}
.ripple {
position: absolute;
width: 20px;
height: 20px;
margin-left: -10px;
margin-top: -10px;
border-radius: 100%;
background-color: rgba(0, 0, 0, 0.05);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%;
opacity: 0;
pointer-events: none;
}
.ripple.ripple-on {
-webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
opacity: 1;
}
.ripple.ripple-out {
-webkit-transition: opacity 0.1s linear 0s !important;
transition: opacity 0.1s linear 0s !important;
opacity: 0;
}

2
template/material/material.js → template/material/scripts/material.js
View File

@ -81,4 +81,4 @@ $(function (){
}
$(this).prev().val(value);
});
});
});

9
template/material/ripples.js → template/material/scripts/ripples.js
View File

@ -71,7 +71,6 @@ var ripples = {
};
var rippleOut = function($ripple) {
console.log($ripple);
// Clear previous animation
$ripple.className = "ripple ripple-on ripple-out";
@ -109,12 +108,14 @@ var ripples = {
// init RippleJS and start ripple effect on mousedown
bind("mouseover", withRipple, rippleInit);
console.log(withRipple);
// start ripple effect on mousedown
bind("mousedown", ".ripple-wrapper", rippleStart);
// if animation ends and user is not holding mouse then destroy the ripple
bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) {
if (!mouseDown) {
var $ripples = $ripple.parentNode.getElementsByClassName("ripple");
if (!mouseDown || ( $ripples[0] == $ripple && $ripples.length > 1)) {
rippleOut($ripple);
}
});
@ -127,4 +128,4 @@ var ripples = {
});
}
};
};