Merge pull request #212 from FezVrasta/develop

Develop
This commit is contained in:
Fez Vrasta 2014-11-17 14:37:31 +01:00
commit aaf8899db0
24 changed files with 973 additions and 209 deletions

1
.gitignore vendored
View File

@ -8,3 +8,4 @@ Thumbs.db
.DS_Store
/node_modules/
.grunt/
/bower_components/

View File

@ -51,14 +51,6 @@ module.exports = function(grunt) {
}
},
clean: {
css: [
"dist/css/material.css",
"dist/css/material-wfont.css",
"dist/css/ripples.css"
]
},
uglify: {
minifyjs: {
files: {
@ -172,9 +164,9 @@ module.exports = function(grunt) {
});
grunt.registerTask("default", ["less", "autoprefixer", "cssmin", "uglify", "clean", "copy"]);
grunt.registerTask("default", ["less", "autoprefixer", "cssmin", "uglify", "copy"]);
grunt.registerTask("scss", ["sass", "autoprefixer", "cssmin", "uglify", "clean", "copy"]);
grunt.registerTask("scss", ["sass", "autoprefixer", "cssmin", "uglify", "copy"]);
grunt.registerTask("build", function(target) {
var buildType = "default";

View File

@ -6,9 +6,9 @@
This Bootstrap theme is an easy way to use the new [Material Design guidelines by Google](http://www.google.com/design/spec/material-design/introduction.html) in your Bootstrap 3 based application.
Just include the theme, after the Bootstrap CSS and include the javascript at the end of your document (Just before the end of the `<body>` tag), and everything will be converted to Material Design (paper) style.
**Note:**This theme is in early development and is not ready for production.
**NOTE**: This theme is in early development and is not ready for production.
Check out [the demo at this link](http://fezvrasta.github.io/bootstrap-material-design/) (This demo may not be even with the master branch.)
Check out [the demo at this link](http://fezvrasta.github.io/bootstrap-material-design/) (this demo may not be even with the `master` branch).
## How to install
@ -37,7 +37,7 @@ You need to copy the `dist/` folder to the root of your project, ensuring that a
We are using grunt to automate the workflow and build process. Ensure you have nodejs installed and grunt-cli installed globally.
After cloning the repo, run `npm install` to ensure you have all dev dependencies.
Run the `grunt build` command to run the tests and compile the less/sass. See Gruntfile.js for details on targets.
Run the `grunt build` command to run the tests and compile the less/sass. See [Gruntfile.js](Gruntfile.js) for details on targets.
Run the `grunt test` command for browser based jasmine unit tests.
@ -64,8 +64,7 @@ If you like this project you may support me by donating something on Gittip, sta
# Contribute
Please see the [contrib](CONTRIBUTING.md) file.
Please see the [CONTRIBUTING.md](CONTRIBUTING.md) file.
# Documentation
@ -93,6 +92,8 @@ Add `.btn-raised` to a button to add a permanent shadow to it.
Add `.floating-label` to an input field with a `placeholder` to transform the placeholder in a floating label.
Add `data-hint="some hint"` to show an hint under the input when the user focus it.
Remember to use the proper HTML markup to get radio and checkboxes styled correctly (choose between *radio* or *checkbox*):
<div class="radio/checkbox radio-primary">
@ -116,7 +117,7 @@ The syntax to add a Material icon is:
# Material.js
Material.js is a jQuery plugin that add some magic to your markup and allows Material Design for Bootstrap to style some elements like inputs, checkboxes, radios etc.
`Material.js` is a jQuery plugin that add some magic to your markup and allows Material Design for Bootstrap to style some elements like inputs, checkboxes, radios etc.
### Functions:
@ -145,8 +146,7 @@ You can even override the default values using the `$.material.options` function
### Arrive.js support
If you need to dynamically add elements to your DOM then you may need to include Arrive.js before Material.js, this will automatically apply Material.js to every new element added by you using JS.
If you need to dynamically add elements to your DOM then you may need to include `Arrive.js` before `Material.js`, this will automatically apply `Material.js` to every new element added by you using JS.
# Plugins
@ -171,8 +171,6 @@ Read more about [noUiSlider here](http://refreshless.com/nouislider/)
Transform select and multi select inputs in advanced text inputs. Material Design for BS provides a full replacement of the plugin's CSS, so don't include it.
Read more about [selectize.js](http://brianreavis.github.io/selectize.js/)
# Compatibility
Currently Material Design for Bootstrap supports Google Chrome (tested v37+), Mozilla Firefox (tested 30+), and Internet Explorer (tested 11+). Mobile browsers are not currently tested but it may work.
Currently Material Design for Bootstrap supports Google Chrome (tested v37+), Mozilla Firefox (tested 30+), and Internet Explorer (tested 11+). Mobile browsers are not currently tested but it may work.

View File

@ -37,5 +37,8 @@
"google",
"android"
],
"license": "https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md"
"license": "https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md",
"dependencies": {
"jquery": "~2.1.1"
}
}

View File

@ -2249,22 +2249,22 @@
content: "\e8e4";
}
.shadow-z-1 {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
}
.shadow-z-2 {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
}
.shadow-z-2-hover {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}
.shadow-z-3 {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}
.shadow-z-4 {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22), 0 14px 45px rgba(0, 0, 0, 0.25);
}
.shadow-z-5 {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22), 0 19px 60px rgba(0, 0, 0, 0.3);
}
body {
background-color: #EEEEEE;
@ -2413,7 +2413,7 @@ body .jumbotron,
background-color: #fff;
padding: 19px;
margin-bottom: 20px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
border-radius: 2px;
border: 0;
}
@ -2625,14 +2625,15 @@ 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:not(.btn-link):not(.btn-flat) {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}
.btn:active:not(.btn-link):not(.btn-flat) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}
.btn:not(.btn-link):not(.btn-flat),
.btn-default:not(.btn-link):not(.btn-flat) {
@ -2783,11 +2784,12 @@ body .jumbotron-material-lightgrey,
color: #a8a8a8 !important;
}
.btn.btn-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn.btn-raised:active:not(.btn-link) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}
.btn.btn-fab {
margin: 0;
@ -2798,7 +2800,7 @@ body .jumbotron-material-lightgrey,
}
.btn.btn-fab,
.btn.btn-fab:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
}
.btn.btn-fab,
.btn.btn-fab:hover,
@ -3001,12 +3003,13 @@ body .jumbotron-material-lightgrey,
position: relative;
border-radius: 2px;
margin: 10px 1px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
-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) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}
.btn-group.open .dropdown-toggle,
.btn-group-vertical.open .dropdown-toggle {
@ -3014,12 +3017,13 @@ 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);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
-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) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}
.btn-group .btn,
.btn-group-vertical .btn,
@ -3049,7 +3053,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 .ripple {
display: block;
@ -3066,10 +3071,12 @@ body .jumbotron-material-lightgrey,
margin: 0;
}
.checkbox label input[type=checkbox]:not(:checked) ~ .ripple {
animation: rippleOff 500ms;
-webkit-animation: rippleOff 500ms;
animation: rippleOff 500ms;
}
.checkbox label input[type=checkbox]:checked ~ .ripple {
animation: rippleOn 500ms;
-webkit-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
.checkbox label .check {
display: inline-block;
@ -3100,7 +3107,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;
@ -3113,7 +3122,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;
@ -3123,17 +3133,21 @@ 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,
.checkbox input[type=checkbox][disabled] ~ .circle {
@ -3141,7 +3155,9 @@ body .jumbotron-material-lightgrey,
}
.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 {
@ -3353,6 +3369,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;
@ -3364,7 +3391,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;
}
@ -3372,7 +3399,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;
@ -3380,7 +3408,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;
@ -3394,7 +3423,8 @@ 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;
@ -3408,6 +3438,64 @@ body .jumbotron-material-lightgrey,
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;
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;
}
}
@-webkit-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
@ -3419,6 +3507,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;
@ -3443,7 +3542,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);
@ -3456,7 +3556,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;
@ -3471,13 +3573,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 {
@ -3627,7 +3733,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);
@ -3706,7 +3814,6 @@ select[multiple].form-control.focus {
}
.form-control-wrapper {
position: relative;
/* active state */
}
.form-control-wrapper .form-control:focus,
.form-control-wrapper .form-control.focus {
@ -3719,7 +3826,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 {
@ -3752,13 +3860,19 @@ select[multiple].form-control.focus {
height: 2px;
background-color: #4285f4;
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: "";
@ -3770,7 +3884,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;
@ -3783,10 +3899,21 @@ 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 .hint {
position: absolute;
font-size: 80%;
display: none;
}
.form-control-wrapper .form-control:focus ~ .hint,
.form-control-wrapper .form-control.focus ~ .hint {
display: block;
}
.form-control-wrapper select ~ .material-input:after {
display: none;
}
@ -4202,13 +4329,31 @@ select.form-control.focus {
box-shadow: none;
border-color: #757575;
}
@-webkit-keyframes input-highlight {
0% {
left: 20%;
-webkit-transform: scaleX(20%);
transform: scaleX(20%);
}
99% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}
@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;
}
@ -4542,7 +4687,7 @@ fieldset[disabled] .navbar .btn-link:focus {
background-color: #ececec;
}
.navbar-inverse {
background-color: #3f51b5;
background-color: #5264ae;
}
.navbar-material-white {
background-color: #FFF;
@ -5024,7 +5169,7 @@ icon-material-lightgrey {
border-radius: 2px;
color: rgba(0, 0, 0, 0.84);
background: #ffffff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
}
.card .card-height-indicator {
margin-top: 100%;
@ -5073,7 +5218,7 @@ icon-material-lightgrey {
left: -15px;
}
.modal-content {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22), 0 19px 60px rgba(0, 0, 0, 0.3);
border-radius: 2px;
border: none;
}
@ -5110,22 +5255,186 @@ icon-material-lightgrey {
.modal-backdrop {
display: none;
}
.label {
border-radius: 1px;
}
.label,
.label-default {
background-color: #9e9e9e;
}
.label-primary {
background-color: #4285f4;
}
.label-success {
background-color: #0f9d58;
}
.label-info {
background-color: #03a9f4;
}
.label-warning {
background-color: #ff5722;
}
.label-danger {
background-color: #f44336;
}
.label-material-red {
background-color: #f44336;
}
.label-material-pink {
background-color: #e91e63;
}
.label-material-purple {
background-color: #9c27b0;
}
.label-material-deeppurple {
background-color: #673ab7;
}
.label-material-indigo {
background-color: #3f51b5;
}
.label-material-lightblue {
background-color: #03a9f4;
}
.label-material-cyan {
background-color: #00bcd4;
}
.label-material-teal {
background-color: #009688;
}
.label-material-lightgreen {
background-color: #8bc34a;
}
.label-material-lime {
background-color: #cddc39;
}
.label-material-lightyellow {
background-color: #ffeb3b;
}
.label-material-orange {
background-color: #ff9800;
}
.label-material-deeporange {
background-color: #ff5722;
}
.label-material-grey {
background-color: #9e9e9e;
}
.label-material-bluegrey {
background-color: #607d8b;
}
.label-material-brown {
background-color: #795548;
}
.label-material-lightgrey {
background-color: #ececec;
}
.panel {
border-radius: 2px;
border: 0;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
}
.panel > .panel-heading,
.panel-default > .panel-heading {
background-color: #ececec;
}
.panel-primary > .panel-heading {
background-color: #4285f4;
}
.panel-success > .panel-heading {
background-color: #0f9d58;
}
.panel-info > .panel-heading {
background-color: #03a9f4;
}
.panel-warning > .panel-heading {
background-color: #ff5722;
}
.panel-danger > .panel-heading {
background-color: #f44336;
}
.panel-material-red > .panel-heading {
background-color: #f44336;
}
.panel-material-pink > .panel-heading {
background-color: #e91e63;
}
.panel-material-purple > .panel-heading {
background-color: #9c27b0;
}
.panel-material-deeppurple > .panel-heading {
background-color: #673ab7;
}
.panel-material-indigo > .panel-heading {
background-color: #3f51b5;
}
.panel-material-lightblue > .panel-heading {
background-color: #03a9f4;
}
.panel-material-cyan > .panel-heading {
background-color: #00bcd4;
}
.panel-material-teal > .panel-heading {
background-color: #009688;
}
.panel-material-lightgreen > .panel-heading {
background-color: #8bc34a;
}
.panel-material-lime > .panel-heading {
background-color: #cddc39;
}
.panel-material-lightyellow > .panel-heading {
background-color: #ffeb3b;
}
.panel-material-orange > .panel-heading {
background-color: #ff9800;
}
.panel-material-deeporange > .panel-heading {
background-color: #ff5722;
}
.panel-material-grey > .panel-heading {
background-color: #9e9e9e;
}
.panel-material-bluegrey > .panel-heading {
background-color: #607d8b;
}
.panel-material-brown > .panel-heading {
background-color: #795548;
}
.panel-material-lightgrey > .panel-heading {
background-color: #ececec;
}
[class*="panel-"] > .panel-heading {
color: rgba(255, 255, 255, 0.84);
}
.panel-default > .panel-heading,
.panel:not([class*="panel-"]) > .panel-heading {
color: rgba(0, 0, 0, 0.84);
}
.panel-footer {
background-color: #ececec;
}
.snackbar {
background-color: #323232;
color: rgba(255, 255, 255, 0.84);
font-size: 14px;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
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;
@ -5134,7 +5443,10 @@ icon-material-lightgrey {
.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 {
@ -5161,7 +5473,8 @@ icon-material-lightgrey {
*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;
@ -5169,12 +5482,21 @@ icon-material-lightgrey {
.noUi-horizontal {
height: 10px;
}
.noUi-horizontal .noUi-handle {
.noUi-handle {
box-sizing: border-box;
width: 12px;
height: 12px;
left: -10px;
top: -5px;
cursor: ew-resize;
border-radius: 100%;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
border: 1px solid;
}
.noUi-vertical .noUi-handle {
margin-left: 5px;
cursor: ns-resize;
}
.noUi-horizontal.noUi-extended {
padding: 0 15px;
@ -5202,18 +5524,20 @@ icon-material-lightgrey {
.noUi-target {
border-radius: 2px;
}
.noUi-handle {
border-radius: 100%;
cursor: default;
transition: all 0.2s ease-out;
border: 1px solid;
}
.noUi-horizontal {
height: 2px;
margin: 15px 0;
}
.noUi-horizontal .noUi-handle.noUi-active {
transform: scale(2.5);
.noUi-vertical {
height: 100%;
width: 2px;
margin: 0 15px;
display: inline-block;
}
.noUi-handle.noUi-active {
-webkit-transform: scale(2.5);
-ms-transform: scale(2.5);
transform: scale(2.5);
}
[disabled].noUi-slider {
opacity: 0.5;

File diff suppressed because one or more lines are too long

464
dist/css/material.css vendored
View File

@ -2242,22 +2242,22 @@
content: "\e8e4";
}
.shadow-z-1 {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
}
.shadow-z-2 {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
}
.shadow-z-2-hover {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}
.shadow-z-3 {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}
.shadow-z-4 {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22), 0 14px 45px rgba(0, 0, 0, 0.25);
}
.shadow-z-5 {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22), 0 19px 60px rgba(0, 0, 0, 0.3);
}
body {
background-color: #EEEEEE;
@ -2406,7 +2406,7 @@ body .jumbotron,
background-color: #fff;
padding: 19px;
margin-bottom: 20px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
border-radius: 2px;
border: 0;
}
@ -2618,14 +2618,15 @@ 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:not(.btn-link):not(.btn-flat) {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}
.btn:active:not(.btn-link):not(.btn-flat) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}
.btn:not(.btn-link):not(.btn-flat),
.btn-default:not(.btn-link):not(.btn-flat) {
@ -2776,11 +2777,12 @@ body .jumbotron-material-lightgrey,
color: #a8a8a8 !important;
}
.btn.btn-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn.btn-raised:active:not(.btn-link) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}
.btn.btn-fab {
margin: 0;
@ -2791,7 +2793,7 @@ body .jumbotron-material-lightgrey,
}
.btn.btn-fab,
.btn.btn-fab:hover {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
}
.btn.btn-fab,
.btn.btn-fab:hover,
@ -2994,12 +2996,13 @@ body .jumbotron-material-lightgrey,
position: relative;
border-radius: 2px;
margin: 10px 1px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
-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) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}
.btn-group.open .dropdown-toggle,
.btn-group-vertical.open .dropdown-toggle {
@ -3007,12 +3010,13 @@ 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);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
-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) {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}
.btn-group .btn,
.btn-group-vertical .btn,
@ -3042,7 +3046,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 .ripple {
display: block;
@ -3059,10 +3064,12 @@ body .jumbotron-material-lightgrey,
margin: 0;
}
.checkbox label input[type=checkbox]:not(:checked) ~ .ripple {
animation: rippleOff 500ms;
-webkit-animation: rippleOff 500ms;
animation: rippleOff 500ms;
}
.checkbox label input[type=checkbox]:checked ~ .ripple {
animation: rippleOn 500ms;
-webkit-animation: rippleOn 500ms;
animation: rippleOn 500ms;
}
.checkbox label .check {
display: inline-block;
@ -3093,7 +3100,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;
@ -3106,7 +3115,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;
@ -3116,17 +3126,21 @@ 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,
.checkbox input[type=checkbox][disabled] ~ .circle {
@ -3134,7 +3148,9 @@ body .jumbotron-material-lightgrey,
}
.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 {
@ -3346,6 +3362,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;
@ -3357,7 +3384,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;
}
@ -3365,7 +3392,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;
@ -3373,7 +3401,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;
@ -3387,7 +3416,8 @@ 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;
@ -3401,6 +3431,64 @@ body .jumbotron-material-lightgrey,
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;
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;
}
}
@-webkit-keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
@ -3412,6 +3500,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;
@ -3436,7 +3535,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);
@ -3449,7 +3549,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;
@ -3464,13 +3566,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 {
@ -3620,7 +3726,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);
@ -3699,7 +3807,6 @@ select[multiple].form-control.focus {
}
.form-control-wrapper {
position: relative;
/* active state */
}
.form-control-wrapper .form-control:focus,
.form-control-wrapper .form-control.focus {
@ -3712,7 +3819,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 {
@ -3745,13 +3853,19 @@ select[multiple].form-control.focus {
height: 2px;
background-color: #4285f4;
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: "";
@ -3763,7 +3877,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;
@ -3776,10 +3892,21 @@ 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 .hint {
position: absolute;
font-size: 80%;
display: none;
}
.form-control-wrapper .form-control:focus ~ .hint,
.form-control-wrapper .form-control.focus ~ .hint {
display: block;
}
.form-control-wrapper select ~ .material-input:after {
display: none;
}
@ -4195,13 +4322,31 @@ select.form-control.focus {
box-shadow: none;
border-color: #757575;
}
@-webkit-keyframes input-highlight {
0% {
left: 20%;
-webkit-transform: scaleX(20%);
transform: scaleX(20%);
}
99% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}
@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;
}
@ -4535,7 +4680,7 @@ fieldset[disabled] .navbar .btn-link:focus {
background-color: #ececec;
}
.navbar-inverse {
background-color: #3f51b5;
background-color: #5264ae;
}
.navbar-material-white {
background-color: #FFF;
@ -5017,7 +5162,7 @@ icon-material-lightgrey {
border-radius: 2px;
color: rgba(0, 0, 0, 0.84);
background: #ffffff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
}
.card .card-height-indicator {
margin-top: 100%;
@ -5066,7 +5211,7 @@ icon-material-lightgrey {
left: -15px;
}
.modal-content {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22), 0 19px 60px rgba(0, 0, 0, 0.3);
border-radius: 2px;
border: none;
}
@ -5103,22 +5248,186 @@ icon-material-lightgrey {
.modal-backdrop {
display: none;
}
.label {
border-radius: 1px;
}
.label,
.label-default {
background-color: #9e9e9e;
}
.label-primary {
background-color: #4285f4;
}
.label-success {
background-color: #0f9d58;
}
.label-info {
background-color: #03a9f4;
}
.label-warning {
background-color: #ff5722;
}
.label-danger {
background-color: #f44336;
}
.label-material-red {
background-color: #f44336;
}
.label-material-pink {
background-color: #e91e63;
}
.label-material-purple {
background-color: #9c27b0;
}
.label-material-deeppurple {
background-color: #673ab7;
}
.label-material-indigo {
background-color: #3f51b5;
}
.label-material-lightblue {
background-color: #03a9f4;
}
.label-material-cyan {
background-color: #00bcd4;
}
.label-material-teal {
background-color: #009688;
}
.label-material-lightgreen {
background-color: #8bc34a;
}
.label-material-lime {
background-color: #cddc39;
}
.label-material-lightyellow {
background-color: #ffeb3b;
}
.label-material-orange {
background-color: #ff9800;
}
.label-material-deeporange {
background-color: #ff5722;
}
.label-material-grey {
background-color: #9e9e9e;
}
.label-material-bluegrey {
background-color: #607d8b;
}
.label-material-brown {
background-color: #795548;
}
.label-material-lightgrey {
background-color: #ececec;
}
.panel {
border-radius: 2px;
border: 0;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
}
.panel > .panel-heading,
.panel-default > .panel-heading {
background-color: #ececec;
}
.panel-primary > .panel-heading {
background-color: #4285f4;
}
.panel-success > .panel-heading {
background-color: #0f9d58;
}
.panel-info > .panel-heading {
background-color: #03a9f4;
}
.panel-warning > .panel-heading {
background-color: #ff5722;
}
.panel-danger > .panel-heading {
background-color: #f44336;
}
.panel-material-red > .panel-heading {
background-color: #f44336;
}
.panel-material-pink > .panel-heading {
background-color: #e91e63;
}
.panel-material-purple > .panel-heading {
background-color: #9c27b0;
}
.panel-material-deeppurple > .panel-heading {
background-color: #673ab7;
}
.panel-material-indigo > .panel-heading {
background-color: #3f51b5;
}
.panel-material-lightblue > .panel-heading {
background-color: #03a9f4;
}
.panel-material-cyan > .panel-heading {
background-color: #00bcd4;
}
.panel-material-teal > .panel-heading {
background-color: #009688;
}
.panel-material-lightgreen > .panel-heading {
background-color: #8bc34a;
}
.panel-material-lime > .panel-heading {
background-color: #cddc39;
}
.panel-material-lightyellow > .panel-heading {
background-color: #ffeb3b;
}
.panel-material-orange > .panel-heading {
background-color: #ff9800;
}
.panel-material-deeporange > .panel-heading {
background-color: #ff5722;
}
.panel-material-grey > .panel-heading {
background-color: #9e9e9e;
}
.panel-material-bluegrey > .panel-heading {
background-color: #607d8b;
}
.panel-material-brown > .panel-heading {
background-color: #795548;
}
.panel-material-lightgrey > .panel-heading {
background-color: #ececec;
}
[class*="panel-"] > .panel-heading {
color: rgba(255, 255, 255, 0.84);
}
.panel-default > .panel-heading,
.panel:not([class*="panel-"]) > .panel-heading {
color: rgba(0, 0, 0, 0.84);
}
.panel-footer {
background-color: #ececec;
}
.snackbar {
background-color: #323232;
color: rgba(255, 255, 255, 0.84);
font-size: 14px;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
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;
@ -5127,7 +5436,10 @@ icon-material-lightgrey {
.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 {
@ -5154,7 +5466,8 @@ icon-material-lightgrey {
*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;
@ -5162,12 +5475,21 @@ icon-material-lightgrey {
.noUi-horizontal {
height: 10px;
}
.noUi-horizontal .noUi-handle {
.noUi-handle {
box-sizing: border-box;
width: 12px;
height: 12px;
left: -10px;
top: -5px;
cursor: ew-resize;
border-radius: 100%;
-webkit-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
border: 1px solid;
}
.noUi-vertical .noUi-handle {
margin-left: 5px;
cursor: ns-resize;
}
.noUi-horizontal.noUi-extended {
padding: 0 15px;
@ -5195,18 +5517,20 @@ icon-material-lightgrey {
.noUi-target {
border-radius: 2px;
}
.noUi-handle {
border-radius: 100%;
cursor: default;
transition: all 0.2s ease-out;
border: 1px solid;
}
.noUi-horizontal {
height: 2px;
margin: 15px 0;
}
.noUi-horizontal .noUi-handle.noUi-active {
transform: scale(2.5);
.noUi-vertical {
height: 100%;
width: 2px;
margin: 0 15px;
display: inline-block;
}
.noUi-handle.noUi-active {
-webkit-transform: scale(2.5);
-ms-transform: scale(2.5);
transform: scale(2.5);
}
[disabled].noUi-slider {
opacity: 0.5;

File diff suppressed because one or more lines are too long

40
dist/css/ripples.css vendored Normal file
View File

@ -0,0 +1,40 @@
.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;
}

View File

@ -1 +1 @@
!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=ripple></span><span class=check></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if((null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}),a(document).on("change",".checkbox input",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()?b.addClass("empty"):b.removeClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){console.log(c),b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(a){ripples.init(a?a:this.options.withRipples)},init:function(){this.ripples(),this.input(),this.checkbox(),this.radio(),document.arrive&&document.arrive("input, textarea, select",function(){a.material.init()}),function(){var b=setInterval(function(){a("input").each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4);var c;a(document).on("focus","input",function(){var b=a(this).parents("form").find("input");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})}()}}}(jQuery);
!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=ripple></span><span class=check></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(c){a(c?c:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this);if(b.wrap("<div class=form-control-wrapper></div>"),b.after("<span class=material-input></span>"),b.hasClass("floating-label")){var c=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label"),b.after("<div class=floating-label>"+c+"</div>")}if(b.attr("data-hint")&&b.after("<div class=hint>"+b.attr("data-hint")+"</div>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),b.parent().next().is("[type=file]")){b.parent().addClass("fileinput");var d=b.parent().next().detach();b.after(d)}}),a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""===b.val()?b.addClass("empty"):b.removeClass("empty")}).on("focus",".form-control-wrapper.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-control-wrapper.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-control-wrapper.fileinput [type=file]",function(){var b="";a.each(a(this)[0].files,function(a,c){console.log(c),b+=c.name+", "}),b=b.substring(0,b.length-2),b?a(this).prev().removeClass("empty"):a(this).prev().addClass("empty"),a(this).prev().val(b)})},ripples:function(a){ripples.init(a?a:this.options.withRipples)},init:function(){this.ripples(),this.input(),this.checkbox(),this.radio(),document.arrive&&document.arrive("input, textarea, select",function(){a.material.init()}),function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){a(this).val()&&a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4);var c;a(document).on("focus","input",function(){var b=a(this).parents("form").find("input");c=setInterval(function(){b.each(function(){a(this).val()!==a(this).attr("value")&&a(this).trigger("change")})},100)}).on("blur","input",function(){clearInterval(c)})}()}}}(jQuery);

View File

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

View File

@ -1520,6 +1520,10 @@
<input class="form-control floating-label" id="focusedInput" type="text" placeholder="Write something to make the label float">
</div>
<div class="form-group">
<input class="form-control floating-label" id="focusedInput" type="text" placeholder="Focus to show the hint" data-hint="You should really write something here">
</div>
<div class="form-group">
<label class="control-label" for="disabledInput">Disabled input</label>
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled="">
@ -1895,9 +1899,16 @@
<h1 id="slider">Sliders <span style="font-size: 50%">(with noUiSlider)</span></h1>
</div>
<div class="bs-component">
<div class="slider"></div>
<div class="slider slider-success"></div>
<div class="slider slider-material-pink"></div>
<div class="col-sm-6">
<div class="slider shor"></div>
<div class="slider shor slider-success"></div>
<div class="slider shor slider-material-pink"></div>
</div>
<div class="col-sm-6" style="height: 150px">
<div class="slider svert"></div>
<div class="slider svert slider-success"></div>
<div class="slider svert slider-material-pink"></div>
</div>
</div>
<p>Read more about <a href="http://refreshless.com/nouislider/">noUiSlider here</a>.</p>
</div>
@ -2310,7 +2321,17 @@
<script>
$(function() {
$.material.init();
$(".slider").noUiSlider({
$(".shor").noUiSlider({
start: 40,
connect: "lower",
range: {
min: 0,
max: 100
}
});
$(".svert").noUiSlider({
orientation: "vertical",
start: 40,
connect: "lower",
range: {

View File

@ -95,13 +95,23 @@ select[multiple].form-control {
margin-top: -11px;
}
/* active state */
// active state
.form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
animation: input-highlight 0.3s ease;
animation-fill-mode: forwards;
opacity: 0;
}
// Hints
.hint {
position: absolute;
font-size: 80%;
display: none;
}
.form-control:focus ~ .hint, .form-control.focus ~ .hint {
display: block;
}
select ~ .material-input:after {
display: none;
}

4
less/_labels.less Normal file
View File

@ -0,0 +1,4 @@
.label {
border-radius: 1px;
.variations(~"", background-color, @grey);
}

View File

@ -163,7 +163,7 @@
.variations(~"", background-color, @primary);
&-inverse {
background-color: @indigo;
background-color: @navbar-inverse-bg;
}
&-material-white {
background-color: #FFF;

20
less/_panels.less Normal file
View File

@ -0,0 +1,20 @@
.panel {
border-radius: 2px;
border: 0;
.variations(~" > .panel-heading", background-color, @lightgrey);
.shadow-z-1;
}
[class*="panel-"] > .panel-heading {
color: @darkbg-text;
}
.panel-default, .panel:not([class*="panel-"]) {
> .panel-heading {
color: @lightbg-text;
}
}
.panel-footer {
background-color: @lightgrey;
}

View File

@ -37,12 +37,20 @@
.noUi-horizontal {
height: 10px;
}
.noUi-horizontal .noUi-handle {
.noUi-handle {
box-sizing: border-box;
width: 12px;
height: 12px;
left: -10px;
top: -5px;
cursor: ew-resize;
border-radius: 100%;
transition: all 0.2s ease-out;
border: 1px solid;
}
.noUi-vertical .noUi-handle {
margin-left: 5px;
cursor: ns-resize;
}
.noUi-horizontal.noUi-extended {
padding: 0 15px;
@ -70,17 +78,17 @@
.noUi-target {
border-radius: 2px;
}
.noUi-handle {
border-radius: 100%;
cursor: default;
transition: all 0.2s ease-out;
border: 1px solid;
}
.noUi-horizontal {
height: 2px;
margin: 15px 0;
}
.noUi-horizontal .noUi-handle.noUi-active {
.noUi-vertical {
height: 100%;
width: 2px;
margin: 0 15px;
display: inline-block;
}
.noUi-handle.noUi-active {
transform: scale(2.5);
}
[disabled].noUi-slider{

View File

@ -1,28 +1,22 @@
.shadow-z-1 {
box-shadow: 0 1px 3px rgba(0,0,0, .12),
0 1px 2px rgba(0,0,0, .24) ;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
}
.shadow-z-2 {
box-shadow: 0 3px 6px rgba(0,0,0, .16),
0 3px 6px rgba(0,0,0, .23) ;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
}
.shadow-z-2-hover {
box-shadow: 0 3px 6px rgba(0,0,0, .20),
0 3px 6px rgba(0,0,0, .28) ;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}
.shadow-z-3 {
box-shadow: 0 10px 20px rgba(0,0,0, .19),
0 6px 6px rgba(0,0,0, .23) ;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}
.shadow-z-4 {
box-shadow: 0 14px 28px rgba(0,0,0, .25),
0 10px 10px rgba(0,0,0, .22) ;
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22), 0 14px 45px rgba(0, 0, 0, 0.25);
}
.shadow-z-5 {
box-shadow: 0 19px 38px rgba(0,0,0, .30),
0 15px 12px rgba(0,0,0, .22) ;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.22), 0 19px 60px rgba(0, 0, 0, 0.3);
}

View File

@ -99,6 +99,10 @@ legend {
@import "_dialogs.less";
@import "_labels.less";
@import "_panels.less";
// External plugins
@import "_plugin-snackbarjs.less";
@import "_plugin-nouislider.less";

View File

@ -1,10 +1,10 @@
@font-face {
font-family: "Material-Design-Icons";
src:url("$material-font-path/Material-Design-Icons.eot?-g7cqhn");
src:url("$material-font-path/Material-Design-Icons.eot?#iefix-g7cqhn") format("embedded-opentype"),
url("$material-font-path/Material-Design-Icons.woff?-g7cqhn") format("woff"),
url("$material-font-path/Material-Design-Icons.ttf?-g7cqhn") format("truetype"),
url("$material-font-path/Material-Design-Icons.svg?-g7cqhn#Material-Design-Icons") format("svg");
src:url("#{$material-font-path}/Material-Design-Icons.eot?-g7cqhn");
src:url("#{$material-font-path}/Material-Design-Icons.eot?#iefix-g7cqhn") format("embedded-opentype"),
url("#{$material-font-path}/Material-Design-Icons.woff?-g7cqhn") format("woff"),
url("#{$material-font-path}/Material-Design-Icons.ttf?-g7cqhn") format("truetype"),
url("#{$material-font-path}/Material-Design-Icons.svg?-g7cqhn#Material-Design-Icons") format("svg");
font-weight: normal;
font-style: normal;
}

View File

@ -158,7 +158,7 @@
}
.navbar-inverse {
background-color: $indigo;
background-color: $navbar-inverse-bg;
}
.navbar-white {

View File

@ -1,5 +1,5 @@
// material icons path
$material-font-path: "../fonts";
$material-font-path: "../fonts" !default;
// Material colors palette
$red: #F44336 !default;

View File

@ -55,14 +55,25 @@
var $this = $(this);
$this.wrap("<div class=form-control-wrapper></div>");
$this.after("<span class=material-input></span>");
// Add floating label if required
if ($this.hasClass("floating-label")) {
var placeholder = $this.attr("placeholder");
$this.attr("placeholder", null).removeClass("floating-label");
$this.after("<div class=floating-label>" + placeholder + "</div>");
}
// Add hint label if required
if ($this.attr("data-hint")) {
$this.after("<div class=hint>" + $this.attr("data-hint") + "</div>");
}
// Set as empty if is empty (damn I must improve this...)
if ($this.val() === null || $this.val() == "undefined" || $this.val() === "") {
$this.addClass("empty");
}
// Support for file input
if ($this.parent().next().is("[type=file]")) {
$this.parent().addClass("fileinput");
var $input = $this.parent().next().detach();
@ -125,8 +136,8 @@
(function() {
// This part of code will detect autofill when the page is loading (username and password inputs for example)
var loading = setInterval(function() {
$("input").each(function() {
if ($(this).val() !== $(this).attr("value")) {
$("input[type!=checkbox]").each(function() {
if ($(this).val() && $(this).val() !== $(this).attr("value")) {
$(this).trigger("change");
}
});

View File

@ -1,9 +1,17 @@
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
/* globals CustomEvent */
window.ripples = {
done: false,
init : function(withRipple) {
"use strict";
if (this.done) {
return console.log("Ripples.js was already initialzied.");
}
this.done = true;
// Cross browser matches function
function matchesSelector(domElement, selector) {
var matches = domElement.matches ||
@ -67,7 +75,12 @@ window.ripples = {
var targetColor = window.getComputedStyle($el).color;
// Convert the rgb color to an rgba color with opacity set to __rippleOpacity__
targetColor = targetColor.replace("rgb", "rgba").replace(")", ", " + _rippleOpacity + ")");
if ( targetColor.indexOf("rgba") >= 0 ) {
var alphaPosition = targetColor.lastIndexOf(",") + 1;
targetColor = targetColor.substring(0, alphaPosition) + _rippleOpacity + ")";
} else {
targetColor = targetColor.replace("rgb", "rgba").replace(")", ", " + _rippleOpacity + ")");
}
// Insert new ripple into ripple wrapper
$rippleWrapper.appendChild($ripple);
@ -134,12 +147,6 @@ window.ripples = {
var $rippleWrapper = document.createElement("div");
$rippleWrapper.className = "ripple-wrapper";
target.appendChild($rippleWrapper);
if (window.ontouchstart === null) {
rippleStart(e, $rippleWrapper, function() {
// FIXME: ugly fix for first touchstart event on mobile devices...
$rippleWrapper.getElementsByClassName("ripple")[0].remove();
});
}
}
};
@ -147,7 +154,10 @@ window.ripples = {
// Events handler
// init RippleJS and start ripple effect on mousedown
bind(["mouseover", "touchstart"], withRipple, rippleInit);
bind(["mouseover"], withRipple, rippleInit);
// Init if the device is touch screen
bind(["touchstart"], withRipple, rippleInit);
// start ripple effect on mousedown
bind(["mousedown", "touchstart"], ".ripple-wrapper", function(e, $ripple) {