mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-12-03 06:53:45 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #212 from FezVrasta/develop

Browse Source 
Develop
This commit is contained in:
Fez Vrasta 2014-11-17 14:37:31 +01:00
commit adf17e9f94
24 changed files with 973 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

12
Gruntfile.js
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: { uglify: {
minifyjs: { minifyjs: {
files: { 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) { grunt.registerTask("build", function(target) {
var buildType = "default"; var buildType = "default";

18
README.md
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. 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. 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 ## 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. 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. 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. 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 # Contribute
Please see the [contrib](CONTRIBUTING.md) file. Please see the [CONTRIBUTING.md](CONTRIBUTING.md) file.
# Documentation # 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 `.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*): 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"> <div class="radio/checkbox radio-primary">
@ -116,7 +117,7 @@ The syntax to add a Material icon is:
# Material.js # 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: ### Functions:
@ -145,8 +146,7 @@ You can even override the default values using the `$.material.options` function
### Arrive.js support ### 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 # 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. 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/) Read more about [selectize.js](http://brianreavis.github.io/selectize.js/)
# Compatibility # 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.

5
bower.json
View File

@ -37,5 +37,8 @@
"google", "google",
"android" "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"
}
} }

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

@ -2249,22 +2249,22 @@
content: "\e8e4"; content: "\e8e4";
} }
.shadow-z-1 { .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 { .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 { .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 { .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 { .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 { .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 { body {
background-color: #EEEEEE; background-color: #EEEEEE;
@ -2413,7 +2413,7 @@ body .jumbotron,
background-color: #fff; background-color: #fff;
padding: 19px; padding: 19px;
margin-bottom: 20px; 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-radius: 2px;
border: 0; border: 0;
} }
@ -2625,14 +2625,15 @@ body .jumbotron-material-lightgrey,
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
outline: none !important; outline: none !important;
} }
.btn:hover:not(.btn-link):not(.btn-flat) { .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) { .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:not(.btn-link):not(.btn-flat),
.btn-default: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; color: #a8a8a8 !important;
} }
.btn.btn-raised { .btn.btn-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 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); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
} }
.btn.btn-raised:active:not(.btn-link) { .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 { .btn.btn-fab {
margin: 0; margin: 0;
@ -2798,7 +2800,7 @@ body .jumbotron-material-lightgrey,
} }
.btn.btn-fab, .btn.btn-fab,
.btn.btn-fab:hover { .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,
.btn.btn-fab:hover, .btn.btn-fab:hover,
@ -3001,12 +3003,13 @@ body .jumbotron-material-lightgrey,
position: relative; position: relative;
border-radius: 2px; border-radius: 2px;
margin: 10px 1px; margin: 10px 1px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 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); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
} }
.btn-group:active:not(.btn-link), .btn-group:active:not(.btn-link),
.btn-group-vertical:active:not(.btn-link) { .btn-group-vertical:active:not(.btn-link) {
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.open .dropdown-toggle,
.btn-group-vertical.open .dropdown-toggle { .btn-group-vertical.open .dropdown-toggle {
@ -3014,12 +3017,13 @@ body .jumbotron-material-lightgrey,
} }
.btn-group.btn-group-raised, .btn-group.btn-group-raised,
.btn-group-vertical.btn-group-raised { .btn-group-vertical.btn-group-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 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); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
} }
.btn-group.btn-group-raised:active:not(.btn-link), .btn-group.btn-group-raised:active:not(.btn-link),
.btn-group-vertical.btn-group-raised:active:not(.btn-link) { .btn-group-vertical.btn-group-raised:active:not(.btn-link) {
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 .btn,
.btn-group-vertical .btn, .btn-group-vertical .btn,
@ -3049,6 +3053,7 @@ body .jumbotron-material-lightgrey,
display: block; display: block;
position: absolute; position: absolute;
left: 0px; left: 0px;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.checkbox label .ripple { .checkbox label .ripple {
@ -3066,9 +3071,11 @@ body .jumbotron-material-lightgrey,
margin: 0; margin: 0;
} }
.checkbox label input[type=checkbox]:not(:checked) ~ .ripple { .checkbox label input[type=checkbox]:not(:checked) ~ .ripple {
-webkit-animation: rippleOff 500ms;
animation: rippleOff 500ms; animation: rippleOff 500ms;
} }
.checkbox label input[type=checkbox]:checked ~ .ripple { .checkbox label input[type=checkbox]:checked ~ .ripple {
-webkit-animation: rippleOn 500ms;
animation: rippleOn 500ms; animation: rippleOn 500ms;
} }
.checkbox label .check { .checkbox label .check {
@ -3100,6 +3107,8 @@ body .jumbotron-material-lightgrey,
.checkbox label .check:before { .checkbox label .check:before {
position: absolute; position: absolute;
content: ""; content: "";
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
display: block; display: block;
margin-top: -4px; margin-top: -4px;
@ -3113,6 +3122,7 @@ body .jumbotron-material-lightgrey,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0px 0px 0 0px inset; 0px 0px 0 0px inset;
-webkit-animation: checkbox-off 0.3s linear forwards;
animation: checkbox-off 0.3s linear forwards; animation: checkbox-off 0.3s linear forwards;
} }
.checkbox input[type=checkbox] { .checkbox input[type=checkbox] {
@ -3123,16 +3133,20 @@ body .jumbotron-material-lightgrey,
} }
.checkbox input[type=checkbox]:checked ~ .check:before { .checkbox input[type=checkbox]:checked ~ .check:before {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-webkit-animation: checkbox-on 0.3s linear forwards;
animation: checkbox-on 0.3s linear forwards; animation: checkbox-on 0.3s linear forwards;
} }
.checkbox input[type=checkbox]:not(:checked) ~ .check:after { .checkbox input[type=checkbox]:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms linear forwards;
animation: rippleOff 500ms linear forwards; animation: rippleOff 500ms linear forwards;
} }
.checkbox input[type=checkbox]:checked ~ .check:after { .checkbox input[type=checkbox]:checked ~ .check:after {
-webkit-animation: rippleOn 500ms linear forwards;
animation: rippleOn 500ms linear forwards; animation: rippleOn 500ms linear forwards;
} }
.checkbox:not(:hover) input[type=checkbox] ~ .check:before, .checkbox:not(:hover) input[type=checkbox] ~ .check:before,
.checkbox:not(:hover) input[type=checkbox] ~ .check:after { .checkbox:not(:hover) input[type=checkbox] ~ .check:after {
-webkit-animation-duration: 1ms;
animation-duration: 1ms; animation-duration: 1ms;
} }
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before, .checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before,
@ -3141,6 +3155,8 @@ body .jumbotron-material-lightgrey,
} }
.checkbox input[type=checkbox][disabled] ~ .check:after { .checkbox input[type=checkbox][disabled] ~ .check:after {
background-color: rgba(0, 0, 0, 0.84); background-color: rgba(0, 0, 0, 0.84);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.checkbox input[type=checkbox]:checked ~ .check:after, .checkbox input[type=checkbox]:checked ~ .check:after,
@ -3353,6 +3369,17 @@ body .jumbotron-material-lightgrey,
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check { .checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
color: #ececec; color: #ececec;
} }
@-webkit-keyframes checkbox-on {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
}
}
@keyframes checkbox-on { @keyframes checkbox-on {
0% { 0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
@ -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; 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% { 0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
} }
@ -3372,6 +3399,7 @@ body .jumbotron-material-lightgrey,
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
} }
50% { 50% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
margin-top: -4px; margin-top: -4px;
margin-left: 6px; margin-left: 6px;
@ -3380,6 +3408,7 @@ body .jumbotron-material-lightgrey,
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
} }
51% { 51% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
margin-top: -2px; margin-top: -2px;
margin-left: -2px; margin-left: -2px;
@ -3394,6 +3423,7 @@ body .jumbotron-material-lightgrey,
0px 0px 0 10px inset; 0px 0px 0 10px inset;
} }
100% { 100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
margin-top: -2px; margin-top: -2px;
margin-left: -2px; margin-left: -2px;
@ -3408,6 +3438,64 @@ body .jumbotron-material-lightgrey,
0px 0px 0 0px inset; 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 { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;
@ -3419,6 +3507,17 @@ body .jumbotron-material-lightgrey,
opacity: 0; opacity: 0;
} }
} }
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff { @keyframes rippleOff {
0% { 0% {
opacity: 0; opacity: 0;
@ -3443,6 +3542,7 @@ body .jumbotron-material-lightgrey,
position: absolute; position: absolute;
left: 10px; left: 10px;
top: 2px; top: 2px;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.radio label .circle { .radio label .circle {
@ -3456,6 +3556,8 @@ body .jumbotron-material-lightgrey,
width: 15px; width: 15px;
border-radius: 100%; border-radius: 100%;
background-color: rgba(0, 0, 0, 0.84); background-color: rgba(0, 0, 0, 0.84);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0); transform: scale(0);
} }
.radio label .check:after { .radio label .check:after {
@ -3471,12 +3573,16 @@ body .jumbotron-material-lightgrey,
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
margin: 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 { .radio label input[type=radio]:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms;
animation: rippleOff 500ms; animation: rippleOff 500ms;
} }
.radio label input[type=radio]:checked ~ .check:after { .radio label input[type=radio]:checked ~ .check:after {
-webkit-animation: rippleOn 500ms;
animation: rippleOn 500ms; animation: rippleOn 500ms;
} }
.radio input[type=radio]:checked ~ .check, .radio input[type=radio]:checked ~ .check,
@ -3627,6 +3733,8 @@ body .jumbotron-material-lightgrey,
display: none; display: none;
} }
.radio input[type=radio]:checked ~ .check { .radio input[type=radio]:checked ~ .check {
-webkit-transform: scale(0.55);
-ms-transform: scale(0.55);
transform: scale(0.55); transform: scale(0.55);
} }
.radio input[type=radio][disabled] ~ .circle { .radio input[type=radio][disabled] ~ .circle {
@ -3706,7 +3814,6 @@ select[multiple].form-control.focus {
} }
.form-control-wrapper { .form-control-wrapper {
position: relative; position: relative;
/* active state */
} }
.form-control-wrapper .form-control:focus, .form-control-wrapper .form-control:focus,
.form-control-wrapper .form-control.focus { .form-control-wrapper .form-control.focus {
@ -3719,6 +3826,7 @@ select[multiple].form-control.focus {
pointer-events: none; pointer-events: none;
left: 0px; left: 0px;
top: 5px; top: 5px;
-webkit-transition: 0.2s ease all;
transition: 0.2s ease all; transition: 0.2s ease all;
opacity: 0; opacity: 0;
} }
@ -3752,12 +3860,18 @@ select[multiple].form-control.focus {
height: 2px; height: 2px;
background-color: #4285f4; background-color: #4285f4;
bottom: -1px; bottom: -1px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0); transform: scaleX(0);
-webkit-transition: -webkit-transform 0s;
transition: transform 0s; transition: transform 0s;
} }
.form-control-wrapper .form-control:focus ~ .material-input:before, .form-control-wrapper .form-control:focus ~ .material-input:before,
.form-control-wrapper .form-control.focus ~ .material-input:before { .form-control-wrapper .form-control.focus ~ .material-input:before {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1); transform: scaleX(1);
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out; transition: transform 0.2s ease-out;
} }
.form-control-wrapper .material-input:after { .form-control-wrapper .material-input:after {
@ -3770,6 +3884,8 @@ select[multiple].form-control.focus {
left: 0; left: 0;
pointer-events: none; pointer-events: none;
opacity: 0.9; opacity: 0.9;
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left; transform-origin: left;
} }
.form-control-wrapper .input-lg ~ .material-input:after { .form-control-wrapper .input-lg ~ .material-input:after {
@ -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,
.form-control-wrapper .form-control.focus ~ .material-input:after { .form-control-wrapper .form-control.focus ~ .material-input:after {
-webkit-animation: input-highlight 0.3s ease;
animation: input-highlight 0.3s ease; animation: input-highlight 0.3s ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
opacity: 0; 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 { .form-control-wrapper select ~ .material-input:after {
display: none; display: none;
} }
@ -4202,12 +4329,30 @@ select.form-control.focus {
box-shadow: none; box-shadow: none;
border-color: #757575; border-color: #757575;
} }
@keyframes input-highlight { @-webkit-keyframes input-highlight {
0% { 0% {
left: 20%; left: 20%;
-webkit-transform: scaleX(20%);
transform: scaleX(20%); transform: scaleX(20%);
} }
99% { 99% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes input-highlight {
0% {
left: 20%;
-webkit-transform: scaleX(20%);
transform: scaleX(20%);
}
99% {
-webkit-transform: scaleX(0);
transform: scaleX(0); transform: scaleX(0);
left: 0; left: 0;
opacity: 1; opacity: 1;
@ -4542,7 +4687,7 @@ fieldset[disabled] .navbar .btn-link:focus {
background-color: #ececec; background-color: #ececec;
} }
.navbar-inverse { .navbar-inverse {
background-color: #3f51b5; background-color: #5264ae;
} }
.navbar-material-white { .navbar-material-white {
background-color: #FFF; background-color: #FFF;
@ -5024,7 +5169,7 @@ icon-material-lightgrey {
border-radius: 2px; border-radius: 2px;
color: rgba(0, 0, 0, 0.84); color: rgba(0, 0, 0, 0.84);
background: #ffffff; 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 { .card .card-height-indicator {
margin-top: 100%; margin-top: 100%;
@ -5073,7 +5218,7 @@ icon-material-lightgrey {
left: -15px; left: -15px;
} }
.modal-content { .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-radius: 2px;
border: none; border: none;
} }
@ -5110,21 +5255,185 @@ icon-material-lightgrey {
.modal-backdrop { .modal-backdrop {
display: none; 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 { .snackbar {
background-color: #323232; background-color: #323232;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);
font-size: 14px; font-size: 14px;
border-radius: 2px; border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
height: 0; height: 0;
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
-webkit-transform: translateY(200%);
-ms-transform: translateY(200%);
transform: translateY(200%); transform: translateY(200%);
} }
.snackbar.snackbar-opened { .snackbar.snackbar-opened {
padding: 14px 15px; padding: 14px 15px;
margin-bottom: 20px; margin-bottom: 20px;
height: auto; height: auto;
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
-webkit-transform: none;
-ms-transform: none;
transform: none; transform: none;
} }
.snackbar.toast { .snackbar.toast {
@ -5134,6 +5443,9 @@ icon-material-lightgrey {
.noUi-target * { .noUi-target * {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-ms-touch-action: none; -ms-touch-action: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; user-select: none;
box-sizing: border-box; box-sizing: border-box;
} }
@ -5161,6 +5473,7 @@ icon-material-lightgrey {
*z-index: -1; *z-index: -1;
} }
.noUi-state-tap .noUi-origin { .noUi-state-tap .noUi-origin {
-webkit-transition: left 0.3s, top 0.3s;
transition: left 0.3s, top 0.3s; transition: left 0.3s, top 0.3s;
} }
.noUi-state-drag * { .noUi-state-drag * {
@ -5169,12 +5482,21 @@ icon-material-lightgrey {
.noUi-horizontal { .noUi-horizontal {
height: 10px; height: 10px;
} }
.noUi-horizontal .noUi-handle { .noUi-handle {
box-sizing: border-box; box-sizing: border-box;
width: 12px; width: 12px;
height: 12px; height: 12px;
left: -10px; left: -10px;
top: -5px; 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 { .noUi-horizontal.noUi-extended {
padding: 0 15px; padding: 0 15px;
@ -5202,17 +5524,19 @@ icon-material-lightgrey {
.noUi-target { .noUi-target {
border-radius: 2px; border-radius: 2px;
} }
.noUi-handle {
border-radius: 100%;
cursor: default;
transition: all 0.2s ease-out;
border: 1px solid;
}
.noUi-horizontal { .noUi-horizontal {
height: 2px; height: 2px;
margin: 15px 0; 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 {
-webkit-transform: scale(2.5);
-ms-transform: scale(2.5);
transform: scale(2.5); transform: scale(2.5);
} }
[disabled].noUi-slider { [disabled].noUi-slider {

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

File diff suppressed because one or more lines are too long

386
dist/css/material.css vendored
View File

@ -2242,22 +2242,22 @@
content: "\e8e4"; content: "\e8e4";
} }
.shadow-z-1 { .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 { .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 { .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 { .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 { .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 { .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 { body {
background-color: #EEEEEE; background-color: #EEEEEE;
@ -2406,7 +2406,7 @@ body .jumbotron,
background-color: #fff; background-color: #fff;
padding: 19px; padding: 19px;
margin-bottom: 20px; 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-radius: 2px;
border: 0; border: 0;
} }
@ -2618,14 +2618,15 @@ body .jumbotron-material-lightgrey,
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);
-webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
outline: none !important; outline: none !important;
} }
.btn:hover:not(.btn-link):not(.btn-flat) { .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) { .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:not(.btn-link):not(.btn-flat),
.btn-default: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; color: #a8a8a8 !important;
} }
.btn.btn-raised { .btn.btn-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 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); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
} }
.btn.btn-raised:active:not(.btn-link) { .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 { .btn.btn-fab {
margin: 0; margin: 0;
@ -2791,7 +2793,7 @@ body .jumbotron-material-lightgrey,
} }
.btn.btn-fab, .btn.btn-fab,
.btn.btn-fab:hover { .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,
.btn.btn-fab:hover, .btn.btn-fab:hover,
@ -2994,12 +2996,13 @@ body .jumbotron-material-lightgrey,
position: relative; position: relative;
border-radius: 2px; border-radius: 2px;
margin: 10px 1px; margin: 10px 1px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 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); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
} }
.btn-group:active:not(.btn-link), .btn-group:active:not(.btn-link),
.btn-group-vertical:active:not(.btn-link) { .btn-group-vertical:active:not(.btn-link) {
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.open .dropdown-toggle,
.btn-group-vertical.open .dropdown-toggle { .btn-group-vertical.open .dropdown-toggle {
@ -3007,12 +3010,13 @@ body .jumbotron-material-lightgrey,
} }
.btn-group.btn-group-raised, .btn-group.btn-group-raised,
.btn-group-vertical.btn-group-raised { .btn-group-vertical.btn-group-raised {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 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); transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
} }
.btn-group.btn-group-raised:active:not(.btn-link), .btn-group.btn-group-raised:active:not(.btn-link),
.btn-group-vertical.btn-group-raised:active:not(.btn-link) { .btn-group-vertical.btn-group-raised:active:not(.btn-link) {
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 .btn,
.btn-group-vertical .btn, .btn-group-vertical .btn,
@ -3042,6 +3046,7 @@ body .jumbotron-material-lightgrey,
display: block; display: block;
position: absolute; position: absolute;
left: 0px; left: 0px;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.checkbox label .ripple { .checkbox label .ripple {
@ -3059,9 +3064,11 @@ body .jumbotron-material-lightgrey,
margin: 0; margin: 0;
} }
.checkbox label input[type=checkbox]:not(:checked) ~ .ripple { .checkbox label input[type=checkbox]:not(:checked) ~ .ripple {
-webkit-animation: rippleOff 500ms;
animation: rippleOff 500ms; animation: rippleOff 500ms;
} }
.checkbox label input[type=checkbox]:checked ~ .ripple { .checkbox label input[type=checkbox]:checked ~ .ripple {
-webkit-animation: rippleOn 500ms;
animation: rippleOn 500ms; animation: rippleOn 500ms;
} }
.checkbox label .check { .checkbox label .check {
@ -3093,6 +3100,8 @@ body .jumbotron-material-lightgrey,
.checkbox label .check:before { .checkbox label .check:before {
position: absolute; position: absolute;
content: ""; content: "";
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
display: block; display: block;
margin-top: -4px; margin-top: -4px;
@ -3106,6 +3115,7 @@ body .jumbotron-material-lightgrey,
0 0 0 0, 0 0 0 0,
0 0 0 0, 0 0 0 0,
0px 0px 0 0px inset; 0px 0px 0 0px inset;
-webkit-animation: checkbox-off 0.3s linear forwards;
animation: checkbox-off 0.3s linear forwards; animation: checkbox-off 0.3s linear forwards;
} }
.checkbox input[type=checkbox] { .checkbox input[type=checkbox] {
@ -3116,16 +3126,20 @@ body .jumbotron-material-lightgrey,
} }
.checkbox input[type=checkbox]:checked ~ .check:before { .checkbox input[type=checkbox]:checked ~ .check:before {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-webkit-animation: checkbox-on 0.3s linear forwards;
animation: checkbox-on 0.3s linear forwards; animation: checkbox-on 0.3s linear forwards;
} }
.checkbox input[type=checkbox]:not(:checked) ~ .check:after { .checkbox input[type=checkbox]:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms linear forwards;
animation: rippleOff 500ms linear forwards; animation: rippleOff 500ms linear forwards;
} }
.checkbox input[type=checkbox]:checked ~ .check:after { .checkbox input[type=checkbox]:checked ~ .check:after {
-webkit-animation: rippleOn 500ms linear forwards;
animation: rippleOn 500ms linear forwards; animation: rippleOn 500ms linear forwards;
} }
.checkbox:not(:hover) input[type=checkbox] ~ .check:before, .checkbox:not(:hover) input[type=checkbox] ~ .check:before,
.checkbox:not(:hover) input[type=checkbox] ~ .check:after { .checkbox:not(:hover) input[type=checkbox] ~ .check:after {
-webkit-animation-duration: 1ms;
animation-duration: 1ms; animation-duration: 1ms;
} }
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before, .checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before,
@ -3134,6 +3148,8 @@ body .jumbotron-material-lightgrey,
} }
.checkbox input[type=checkbox][disabled] ~ .check:after { .checkbox input[type=checkbox][disabled] ~ .check:after {
background-color: rgba(0, 0, 0, 0.84); background-color: rgba(0, 0, 0, 0.84);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg); transform: rotate(-45deg);
} }
.checkbox input[type=checkbox]:checked ~ .check:after, .checkbox input[type=checkbox]:checked ~ .check:after,
@ -3346,6 +3362,17 @@ body .jumbotron-material-lightgrey,
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check { .checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
color: #ececec; color: #ececec;
} }
@-webkit-keyframes checkbox-on {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
}
}
@keyframes checkbox-on { @keyframes checkbox-on {
0% { 0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
@ -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; 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% { 0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
} }
@ -3365,6 +3392,7 @@ body .jumbotron-material-lightgrey,
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
} }
50% { 50% {
-webkit-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
margin-top: -4px; margin-top: -4px;
margin-left: 6px; margin-left: 6px;
@ -3373,6 +3401,7 @@ body .jumbotron-material-lightgrey,
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset; box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
} }
51% { 51% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
margin-top: -2px; margin-top: -2px;
margin-left: -2px; margin-left: -2px;
@ -3387,6 +3416,7 @@ body .jumbotron-material-lightgrey,
0px 0px 0 10px inset; 0px 0px 0 10px inset;
} }
100% { 100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
margin-top: -2px; margin-top: -2px;
margin-left: -2px; margin-left: -2px;
@ -3401,6 +3431,64 @@ body .jumbotron-material-lightgrey,
0px 0px 0 0px inset; 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 { @keyframes rippleOn {
0% { 0% {
opacity: 0; opacity: 0;
@ -3412,6 +3500,17 @@ body .jumbotron-material-lightgrey,
opacity: 0; opacity: 0;
} }
} }
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff { @keyframes rippleOff {
0% { 0% {
opacity: 0; opacity: 0;
@ -3436,6 +3535,7 @@ body .jumbotron-material-lightgrey,
position: absolute; position: absolute;
left: 10px; left: 10px;
top: 2px; top: 2px;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
.radio label .circle { .radio label .circle {
@ -3449,6 +3549,8 @@ body .jumbotron-material-lightgrey,
width: 15px; width: 15px;
border-radius: 100%; border-radius: 100%;
background-color: rgba(0, 0, 0, 0.84); background-color: rgba(0, 0, 0, 0.84);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0); transform: scale(0);
} }
.radio label .check:after { .radio label .check:after {
@ -3464,12 +3566,16 @@ body .jumbotron-material-lightgrey,
z-index: 1; z-index: 1;
opacity: 0; opacity: 0;
margin: 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 { .radio label input[type=radio]:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms;
animation: rippleOff 500ms; animation: rippleOff 500ms;
} }
.radio label input[type=radio]:checked ~ .check:after { .radio label input[type=radio]:checked ~ .check:after {
-webkit-animation: rippleOn 500ms;
animation: rippleOn 500ms; animation: rippleOn 500ms;
} }
.radio input[type=radio]:checked ~ .check, .radio input[type=radio]:checked ~ .check,
@ -3620,6 +3726,8 @@ body .jumbotron-material-lightgrey,
display: none; display: none;
} }
.radio input[type=radio]:checked ~ .check { .radio input[type=radio]:checked ~ .check {
-webkit-transform: scale(0.55);
-ms-transform: scale(0.55);
transform: scale(0.55); transform: scale(0.55);
} }
.radio input[type=radio][disabled] ~ .circle { .radio input[type=radio][disabled] ~ .circle {
@ -3699,7 +3807,6 @@ select[multiple].form-control.focus {
} }
.form-control-wrapper { .form-control-wrapper {
position: relative; position: relative;
/* active state */
} }
.form-control-wrapper .form-control:focus, .form-control-wrapper .form-control:focus,
.form-control-wrapper .form-control.focus { .form-control-wrapper .form-control.focus {
@ -3712,6 +3819,7 @@ select[multiple].form-control.focus {
pointer-events: none; pointer-events: none;
left: 0px; left: 0px;
top: 5px; top: 5px;
-webkit-transition: 0.2s ease all;
transition: 0.2s ease all; transition: 0.2s ease all;
opacity: 0; opacity: 0;
} }
@ -3745,12 +3853,18 @@ select[multiple].form-control.focus {
height: 2px; height: 2px;
background-color: #4285f4; background-color: #4285f4;
bottom: -1px; bottom: -1px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0); transform: scaleX(0);
-webkit-transition: -webkit-transform 0s;
transition: transform 0s; transition: transform 0s;
} }
.form-control-wrapper .form-control:focus ~ .material-input:before, .form-control-wrapper .form-control:focus ~ .material-input:before,
.form-control-wrapper .form-control.focus ~ .material-input:before { .form-control-wrapper .form-control.focus ~ .material-input:before {
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1); transform: scaleX(1);
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out; transition: transform 0.2s ease-out;
} }
.form-control-wrapper .material-input:after { .form-control-wrapper .material-input:after {
@ -3763,6 +3877,8 @@ select[multiple].form-control.focus {
left: 0; left: 0;
pointer-events: none; pointer-events: none;
opacity: 0.9; opacity: 0.9;
-webkit-transform-origin: left;
-ms-transform-origin: left;
transform-origin: left; transform-origin: left;
} }
.form-control-wrapper .input-lg ~ .material-input:after { .form-control-wrapper .input-lg ~ .material-input:after {
@ -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,
.form-control-wrapper .form-control.focus ~ .material-input:after { .form-control-wrapper .form-control.focus ~ .material-input:after {
-webkit-animation: input-highlight 0.3s ease;
animation: input-highlight 0.3s ease; animation: input-highlight 0.3s ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards; animation-fill-mode: forwards;
opacity: 0; 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 { .form-control-wrapper select ~ .material-input:after {
display: none; display: none;
} }
@ -4195,12 +4322,30 @@ select.form-control.focus {
box-shadow: none; box-shadow: none;
border-color: #757575; border-color: #757575;
} }
@keyframes input-highlight { @-webkit-keyframes input-highlight {
0% { 0% {
left: 20%; left: 20%;
-webkit-transform: scaleX(20%);
transform: scaleX(20%); transform: scaleX(20%);
} }
99% { 99% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
left: 0;
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes input-highlight {
0% {
left: 20%;
-webkit-transform: scaleX(20%);
transform: scaleX(20%);
}
99% {
-webkit-transform: scaleX(0);
transform: scaleX(0); transform: scaleX(0);
left: 0; left: 0;
opacity: 1; opacity: 1;
@ -4535,7 +4680,7 @@ fieldset[disabled] .navbar .btn-link:focus {
background-color: #ececec; background-color: #ececec;
} }
.navbar-inverse { .navbar-inverse {
background-color: #3f51b5; background-color: #5264ae;
} }
.navbar-material-white { .navbar-material-white {
background-color: #FFF; background-color: #FFF;
@ -5017,7 +5162,7 @@ icon-material-lightgrey {
border-radius: 2px; border-radius: 2px;
color: rgba(0, 0, 0, 0.84); color: rgba(0, 0, 0, 0.84);
background: #ffffff; 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 { .card .card-height-indicator {
margin-top: 100%; margin-top: 100%;
@ -5066,7 +5211,7 @@ icon-material-lightgrey {
left: -15px; left: -15px;
} }
.modal-content { .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-radius: 2px;
border: none; border: none;
} }
@ -5103,21 +5248,185 @@ icon-material-lightgrey {
.modal-backdrop { .modal-backdrop {
display: none; 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 { .snackbar {
background-color: #323232; background-color: #323232;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);
font-size: 14px; font-size: 14px;
border-radius: 2px; border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
height: 0; height: 0;
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s;
-webkit-transform: translateY(200%);
-ms-transform: translateY(200%);
transform: translateY(200%); transform: translateY(200%);
} }
.snackbar.snackbar-opened { .snackbar.snackbar-opened {
padding: 14px 15px; padding: 14px 15px;
margin-bottom: 20px; margin-bottom: 20px;
height: auto; height: auto;
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s;
-webkit-transform: none;
-ms-transform: none;
transform: none; transform: none;
} }
.snackbar.toast { .snackbar.toast {
@ -5127,6 +5436,9 @@ icon-material-lightgrey {
.noUi-target * { .noUi-target * {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-ms-touch-action: none; -ms-touch-action: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; user-select: none;
box-sizing: border-box; box-sizing: border-box;
} }
@ -5154,6 +5466,7 @@ icon-material-lightgrey {
*z-index: -1; *z-index: -1;
} }
.noUi-state-tap .noUi-origin { .noUi-state-tap .noUi-origin {
-webkit-transition: left 0.3s, top 0.3s;
transition: left 0.3s, top 0.3s; transition: left 0.3s, top 0.3s;
} }
.noUi-state-drag * { .noUi-state-drag * {
@ -5162,12 +5475,21 @@ icon-material-lightgrey {
.noUi-horizontal { .noUi-horizontal {
height: 10px; height: 10px;
} }
.noUi-horizontal .noUi-handle { .noUi-handle {
box-sizing: border-box; box-sizing: border-box;
width: 12px; width: 12px;
height: 12px; height: 12px;
left: -10px; left: -10px;
top: -5px; 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 { .noUi-horizontal.noUi-extended {
padding: 0 15px; padding: 0 15px;
@ -5195,17 +5517,19 @@ icon-material-lightgrey {
.noUi-target { .noUi-target {
border-radius: 2px; border-radius: 2px;
} }
.noUi-handle {
border-radius: 100%;
cursor: default;
transition: all 0.2s ease-out;
border: 1px solid;
}
.noUi-horizontal { .noUi-horizontal {
height: 2px; height: 2px;
margin: 15px 0; 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 {
-webkit-transform: scale(2.5);
-ms-transform: scale(2.5);
transform: scale(2.5); transform: scale(2.5);
} }
[disabled].noUi-slider { [disabled].noUi-slider {

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

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;
}

2
dist/js/material.min.js vendored
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);

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

@ -1 +1 @@
window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){"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)})}};

29
index.html
View File

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

12
less/_inputs.less
View File

@ -95,13 +95,23 @@ select[multiple].form-control {
margin-top: -11px; margin-top: -11px;
} }
/* active state */ // active state
.form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after { .form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
animation: input-highlight 0.3s ease; animation: input-highlight 0.3s ease;
animation-fill-mode: forwards; animation-fill-mode: forwards;
opacity: 0; 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 { select ~ .material-input:after {
display: none; display: none;
} }

4
less/_labels.less Normal file
View File

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

2
less/_navbar.less
View File

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

24
less/_plugin-nouislider.less
View File

@ -37,12 +37,20 @@
.noUi-horizontal { .noUi-horizontal {
height: 10px; height: 10px;
} }
.noUi-horizontal .noUi-handle { .noUi-handle {
box-sizing: border-box; box-sizing: border-box;
width: 12px; width: 12px;
height: 12px; height: 12px;
left: -10px; left: -10px;
top: -5px; 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 { .noUi-horizontal.noUi-extended {
padding: 0 15px; padding: 0 15px;
@ -70,17 +78,17 @@
.noUi-target { .noUi-target {
border-radius: 2px; border-radius: 2px;
} }
.noUi-handle {
border-radius: 100%;
cursor: default;
transition: all 0.2s ease-out;
border: 1px solid;
}
.noUi-horizontal { .noUi-horizontal {
height: 2px; height: 2px;
margin: 15px 0; 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); transform: scale(2.5);
} }
[disabled].noUi-slider{ [disabled].noUi-slider{

18
less/_shadows.less
View File

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

4
less/material.less
View File

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

10
sass/_icons-material-design.scss
View File

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

2
sass/_navbar.scss
View File

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

2
sass/_variables.scss
View File

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

15
scripts/material.js
View File

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

24
scripts/ripples.js
View File

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