mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-12-01 14:03:45 +03:00
Fez Vrasta
commit
adf17e9f94
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -8,3 +8,4 @@ Thumbs.db
|
|||
.DS_Store
|
||||
/node_modules/
|
||||
.grunt/
|
||||
/bower_components/
|
||||
|
|
|
|||
12
Gruntfile.js
12
Gruntfile.js
|
|
@ -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";
|
||||
|
|
|
|||
18
README.md
18
README.md
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
386
dist/css/material-wfont.css
vendored
386
dist/css/material-wfont.css
vendored
|
|
@ -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);
|
||||
-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);
|
||||
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);
|
||||
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);
|
||||
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,6 +3053,7 @@ body .jumbotron-material-lightgrey,
|
|||
display: block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.checkbox label .ripple {
|
||||
|
|
@ -3066,9 +3071,11 @@ body .jumbotron-material-lightgrey,
|
|||
margin: 0;
|
||||
}
|
||||
.checkbox label input[type=checkbox]:not(:checked) ~ .ripple {
|
||||
-webkit-animation: rippleOff 500ms;
|
||||
animation: rippleOff 500ms;
|
||||
}
|
||||
.checkbox label input[type=checkbox]:checked ~ .ripple {
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
.checkbox label .check {
|
||||
|
|
@ -3100,6 +3107,8 @@ body .jumbotron-material-lightgrey,
|
|||
.checkbox label .check:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
display: block;
|
||||
margin-top: -4px;
|
||||
|
|
@ -3113,6 +3122,7 @@ body .jumbotron-material-lightgrey,
|
|||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0px 0px 0 0px inset;
|
||||
-webkit-animation: checkbox-off 0.3s linear forwards;
|
||||
animation: checkbox-off 0.3s linear forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox] {
|
||||
|
|
@ -3123,16 +3133,20 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check:before {
|
||||
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
|
||||
-webkit-animation: checkbox-on 0.3s linear forwards;
|
||||
animation: checkbox-on 0.3s linear forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox]:not(:checked) ~ .check:after {
|
||||
-webkit-animation: rippleOff 500ms linear forwards;
|
||||
animation: rippleOff 500ms linear forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check:after {
|
||||
-webkit-animation: rippleOn 500ms linear forwards;
|
||||
animation: rippleOn 500ms linear forwards;
|
||||
}
|
||||
.checkbox:not(:hover) input[type=checkbox] ~ .check:before,
|
||||
.checkbox:not(:hover) input[type=checkbox] ~ .check:after {
|
||||
-webkit-animation-duration: 1ms;
|
||||
animation-duration: 1ms;
|
||||
}
|
||||
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before,
|
||||
|
|
@ -3141,6 +3155,8 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.checkbox input[type=checkbox][disabled] ~ .check:after {
|
||||
background-color: rgba(0, 0, 0, 0.84);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.checkbox 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,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;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
margin-top: -4px;
|
||||
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;
|
||||
}
|
||||
51% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
|
|
@ -3394,6 +3423,7 @@ body .jumbotron-material-lightgrey,
|
|||
0px 0px 0 10px inset;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
|
|
@ -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,6 +3542,7 @@ body .jumbotron-material-lightgrey,
|
|||
position: absolute;
|
||||
left: 10px;
|
||||
top: 2px;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.radio label .circle {
|
||||
|
|
@ -3456,6 +3556,8 @@ body .jumbotron-material-lightgrey,
|
|||
width: 15px;
|
||||
border-radius: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.84);
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
.radio label .check:after {
|
||||
|
|
@ -3471,12 +3573,16 @@ body .jumbotron-material-lightgrey,
|
|||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
-webkit-transform: scale(1.5);
|
||||
-ms-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.radio label input[type=radio]:not(:checked) ~ .check:after {
|
||||
-webkit-animation: rippleOff 500ms;
|
||||
animation: rippleOff 500ms;
|
||||
}
|
||||
.radio label input[type=radio]:checked ~ .check:after {
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
.radio input[type=radio]:checked ~ .check,
|
||||
|
|
@ -3627,6 +3733,8 @@ body .jumbotron-material-lightgrey,
|
|||
display: none;
|
||||
}
|
||||
.radio input[type=radio]:checked ~ .check {
|
||||
-webkit-transform: scale(0.55);
|
||||
-ms-transform: scale(0.55);
|
||||
transform: scale(0.55);
|
||||
}
|
||||
.radio input[type=radio][disabled] ~ .circle {
|
||||
|
|
@ -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,6 +3826,7 @@ select[multiple].form-control.focus {
|
|||
pointer-events: none;
|
||||
left: 0px;
|
||||
top: 5px;
|
||||
-webkit-transition: 0.2s ease all;
|
||||
transition: 0.2s ease all;
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -3752,12 +3860,18 @@ select[multiple].form-control.focus {
|
|||
height: 2px;
|
||||
background-color: #4285f4;
|
||||
bottom: -1px;
|
||||
-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 {
|
||||
-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 {
|
||||
|
|
@ -3770,6 +3884,8 @@ select[multiple].form-control.focus {
|
|||
left: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.9;
|
||||
-webkit-transform-origin: left;
|
||||
-ms-transform-origin: left;
|
||||
transform-origin: left;
|
||||
}
|
||||
.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 {
|
||||
-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,12 +4329,30 @@ select.form-control.focus {
|
|||
box-shadow: none;
|
||||
border-color: #757575;
|
||||
}
|
||||
@keyframes input-highlight {
|
||||
@-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%;
|
||||
-webkit-transform: scaleX(20%);
|
||||
transform: scaleX(20%);
|
||||
}
|
||||
99% {
|
||||
-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,21 +5255,185 @@ 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;
|
||||
-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;
|
||||
-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 {
|
||||
|
|
@ -5134,6 +5443,9 @@ icon-material-lightgrey {
|
|||
.noUi-target * {
|
||||
-webkit-touch-callout: none;
|
||||
-ms-touch-action: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -5161,6 +5473,7 @@ icon-material-lightgrey {
|
|||
*z-index: -1;
|
||||
}
|
||||
.noUi-state-tap .noUi-origin {
|
||||
-webkit-transition: left 0.3s, top 0.3s;
|
||||
transition: left 0.3s, top 0.3s;
|
||||
}
|
||||
.noUi-state-drag * {
|
||||
|
|
@ -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,17 +5524,19 @@ 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 {
|
||||
.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 {
|
||||
|
|
|
|||
2
dist/css/material-wfont.min.css
vendored
2
dist/css/material-wfont.min.css
vendored
File diff suppressed because one or more lines are too long
386
dist/css/material.css
vendored
386
dist/css/material.css
vendored
|
|
@ -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);
|
||||
-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);
|
||||
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);
|
||||
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);
|
||||
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,6 +3046,7 @@ body .jumbotron-material-lightgrey,
|
|||
display: block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.checkbox label .ripple {
|
||||
|
|
@ -3059,9 +3064,11 @@ body .jumbotron-material-lightgrey,
|
|||
margin: 0;
|
||||
}
|
||||
.checkbox label input[type=checkbox]:not(:checked) ~ .ripple {
|
||||
-webkit-animation: rippleOff 500ms;
|
||||
animation: rippleOff 500ms;
|
||||
}
|
||||
.checkbox label input[type=checkbox]:checked ~ .ripple {
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
.checkbox label .check {
|
||||
|
|
@ -3093,6 +3100,8 @@ body .jumbotron-material-lightgrey,
|
|||
.checkbox label .check:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
display: block;
|
||||
margin-top: -4px;
|
||||
|
|
@ -3106,6 +3115,7 @@ body .jumbotron-material-lightgrey,
|
|||
0 0 0 0,
|
||||
0 0 0 0,
|
||||
0px 0px 0 0px inset;
|
||||
-webkit-animation: checkbox-off 0.3s linear forwards;
|
||||
animation: checkbox-off 0.3s linear forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox] {
|
||||
|
|
@ -3116,16 +3126,20 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check:before {
|
||||
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
|
||||
-webkit-animation: checkbox-on 0.3s linear forwards;
|
||||
animation: checkbox-on 0.3s linear forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox]:not(:checked) ~ .check:after {
|
||||
-webkit-animation: rippleOff 500ms linear forwards;
|
||||
animation: rippleOff 500ms linear forwards;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked ~ .check:after {
|
||||
-webkit-animation: rippleOn 500ms linear forwards;
|
||||
animation: rippleOn 500ms linear forwards;
|
||||
}
|
||||
.checkbox:not(:hover) input[type=checkbox] ~ .check:before,
|
||||
.checkbox:not(:hover) input[type=checkbox] ~ .check:after {
|
||||
-webkit-animation-duration: 1ms;
|
||||
animation-duration: 1ms;
|
||||
}
|
||||
.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before,
|
||||
|
|
@ -3134,6 +3148,8 @@ body .jumbotron-material-lightgrey,
|
|||
}
|
||||
.checkbox input[type=checkbox][disabled] ~ .check:after {
|
||||
background-color: rgba(0, 0, 0, 0.84);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.checkbox 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,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;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
margin-top: -4px;
|
||||
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;
|
||||
}
|
||||
51% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
|
|
@ -3387,6 +3416,7 @@ body .jumbotron-material-lightgrey,
|
|||
0px 0px 0 10px inset;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
margin-top: -2px;
|
||||
margin-left: -2px;
|
||||
|
|
@ -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,6 +3535,7 @@ body .jumbotron-material-lightgrey,
|
|||
position: absolute;
|
||||
left: 10px;
|
||||
top: 2px;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
}
|
||||
.radio label .circle {
|
||||
|
|
@ -3449,6 +3549,8 @@ body .jumbotron-material-lightgrey,
|
|||
width: 15px;
|
||||
border-radius: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.84);
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
.radio label .check:after {
|
||||
|
|
@ -3464,12 +3566,16 @@ body .jumbotron-material-lightgrey,
|
|||
z-index: 1;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
-webkit-transform: scale(1.5);
|
||||
-ms-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.radio label input[type=radio]:not(:checked) ~ .check:after {
|
||||
-webkit-animation: rippleOff 500ms;
|
||||
animation: rippleOff 500ms;
|
||||
}
|
||||
.radio label input[type=radio]:checked ~ .check:after {
|
||||
-webkit-animation: rippleOn 500ms;
|
||||
animation: rippleOn 500ms;
|
||||
}
|
||||
.radio input[type=radio]:checked ~ .check,
|
||||
|
|
@ -3620,6 +3726,8 @@ body .jumbotron-material-lightgrey,
|
|||
display: none;
|
||||
}
|
||||
.radio input[type=radio]:checked ~ .check {
|
||||
-webkit-transform: scale(0.55);
|
||||
-ms-transform: scale(0.55);
|
||||
transform: scale(0.55);
|
||||
}
|
||||
.radio input[type=radio][disabled] ~ .circle {
|
||||
|
|
@ -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,6 +3819,7 @@ select[multiple].form-control.focus {
|
|||
pointer-events: none;
|
||||
left: 0px;
|
||||
top: 5px;
|
||||
-webkit-transition: 0.2s ease all;
|
||||
transition: 0.2s ease all;
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -3745,12 +3853,18 @@ select[multiple].form-control.focus {
|
|||
height: 2px;
|
||||
background-color: #4285f4;
|
||||
bottom: -1px;
|
||||
-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 {
|
||||
-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 {
|
||||
|
|
@ -3763,6 +3877,8 @@ select[multiple].form-control.focus {
|
|||
left: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.9;
|
||||
-webkit-transform-origin: left;
|
||||
-ms-transform-origin: left;
|
||||
transform-origin: left;
|
||||
}
|
||||
.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 {
|
||||
-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,12 +4322,30 @@ select.form-control.focus {
|
|||
box-shadow: none;
|
||||
border-color: #757575;
|
||||
}
|
||||
@keyframes input-highlight {
|
||||
@-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%;
|
||||
-webkit-transform: scaleX(20%);
|
||||
transform: scaleX(20%);
|
||||
}
|
||||
99% {
|
||||
-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,21 +5248,185 @@ 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;
|
||||
-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;
|
||||
-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 {
|
||||
|
|
@ -5127,6 +5436,9 @@ icon-material-lightgrey {
|
|||
.noUi-target * {
|
||||
-webkit-touch-callout: none;
|
||||
-ms-touch-action: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -5154,6 +5466,7 @@ icon-material-lightgrey {
|
|||
*z-index: -1;
|
||||
}
|
||||
.noUi-state-tap .noUi-origin {
|
||||
-webkit-transition: left 0.3s, top 0.3s;
|
||||
transition: left 0.3s, top 0.3s;
|
||||
}
|
||||
.noUi-state-drag * {
|
||||
|
|
@ -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,17 +5517,19 @@ 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 {
|
||||
.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 {
|
||||
|
|
|
|||
2
dist/css/material.min.css
vendored
2
dist/css/material.min.css
vendored
File diff suppressed because one or more lines are too long
40
dist/css/ripples.css
vendored
Normal file
40
dist/css/ripples.css
vendored
Normal 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
2
dist/js/material.min.js
vendored
|
|
@ -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
2
dist/js/ripples.min.js
vendored
|
|
@ -1 +1 @@
|
|||
window.ripples={init:function(a){"use strict";function b(a,b){var c=a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector||a.oMatchesSelector;return c.call(a,b)}var c=100,d=500,e=function(a,c,d){"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
29
index.html
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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
4
less/_labels.less
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.label {
|
||||
border-radius: 1px;
|
||||
.variations(~"", background-color, @grey);
|
||||
}
|
||||
|
|
@ -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
20
less/_panels.less
Normal 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;
|
||||
}
|
||||
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,6 +99,10 @@ legend {
|
|||
|
||||
@import "_dialogs.less";
|
||||
|
||||
@import "_labels.less";
|
||||
|
||||
@import "_panels.less";
|
||||
|
||||
// External plugins
|
||||
@import "_plugin-snackbarjs.less";
|
||||
@import "_plugin-nouislider.less";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -158,7 +158,7 @@
|
|||
}
|
||||
|
||||
.navbar-inverse {
|
||||
background-color: $indigo;
|
||||
background-color: $navbar-inverse-bg;
|
||||
}
|
||||
|
||||
.navbar-white {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// material icons path
|
||||
$material-font-path: "../fonts";
|
||||
$material-font-path: "../fonts" !default;
|
||||
|
||||
// Material colors palette
|
||||
$red: #F44336 !default;
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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__
|
||||
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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user