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

Merge pull request #251 from FezVrasta/develop

Browse Source 
Develop
This commit is contained in:
Fez Vrasta 2014-12-01 15:47:06 +01:00
commit b889eb6549
30 changed files with 4651 additions and 3308 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
Gruntfile.js
View File

@ -6,14 +6,40 @@ module.exports = function(grunt) {
grunt.initConfig({
less: {
compileless: {
material: {
options: {
paths: ["less"]
paths: ["less"],
sourceMap: true,
sourceMapRootpath: "/",
sourceMapFilename: "dist/css/material.css.map",
sourceMapURL: "material.css.map"
},
files: {
"dist/css/material.css": "less/material.less",
}
},
materialWfont: {
options: {
paths: ["less"],
sourceMap: true,
sourceMapRootpath: "/",
sourceMapFilename: "dist/css/material-wfont.css.map",
sourceMapURL: "material-wfont.css.map"
},
files: {
"dist/css/material-wfont.css": "less/material-wfont.less",
"dist/css/ripples.css": "less/ripples.less"
}
},
ripples: {
options: {
paths: ["less"],
sourceMap: true,
sourceMapRootpath: "/",
sourceMapFilename: "dist/css/ripples.css.map",
sourceMapURL: "ripples.css.map"
},
files: {
"dist/css/ripples.css": "less/ripples.less",
}
}
},
@ -52,10 +78,13 @@ module.exports = function(grunt) {
},
uglify: {
options: {
sourceMap: true
},
minifyjs: {
files: {
"dist/js/material.min.js": "scripts/material.js",
"dist/js/ripples.min.js": "scripts/ripples.js"
"dist/js/material.min.js": "dist/js/material.js",
"dist/js/ripples.min.js": "dist/js/ripples.js"
}
}
},
@ -64,7 +93,7 @@ module.exports = function(grunt) {
distjs: {
expand: true,
cwd: "scripts/",
src: "**.min.js",
src: "**.js",
dest: "dist/js/",
flatten: true,
filter: "isFile"
@ -164,9 +193,9 @@ module.exports = function(grunt) {
});
grunt.registerTask("default", ["less", "autoprefixer", "cssmin", "uglify", "copy"]);
grunt.registerTask("default", ["less", "autoprefixer", "cssmin", "copy", "uglify"]);
grunt.registerTask("scss", ["sass", "autoprefixer", "cssmin", "uglify", "copy"]);
grunt.registerTask("scss", ["sass", "autoprefixer", "cssmin", "copy", "uglify"]);
grunt.registerTask("build", function(target) {
var buildType = "default";

3
README.md
View File

@ -1,5 +1,5 @@
[![build status](https://travis-ci.org/FezVrasta/bootstrap-material-design.svg?branch=master)](https://travis-ci.org/FezVrasta/bootstrap-material-design)
[![ghat status](http://mywebexpression.com:3001/status/initial/badge.png)](http://mywebexpression.com:3001/) (click to chat)
[![gratipay](https://img.shields.io/gratipay/FezVrasta.svg)](https://gratipay.com/FezVrasta)
[![banner](demo/imgs/banner.jpg)](#)
@ -13,7 +13,6 @@ Check out [the demo at this link](http://fezvrasta.github.io/bootstrap-material-
## How to install
BOWER: bower install bootstrap-material-design --save
GEMS: gem install bootstrap-material-design
## Use our CDN

2351
bootstrap-elements.html Normal file
View File

File diff suppressed because it is too large Load Diff

10
bower.json
View File

@ -1,16 +1,16 @@
{
"name": "Material Design for Bootstrap",
"version": "0.1.5",
"version": "0.2.0",
"homepage": "http://fezvrasta.github.io/bootstrap-material-design",
"authors": [
"Federico Zivolo <info@mywebexpression.com>"
],
"description": "Material Design theme for Bootstrap 3",
"main": [
"dist/css/material.min.css",
"dist/js/material.min.js",
"dist/css/ripples.min.css",
"dist/js/ripples.min.js"
"dist/css/material.css",
"dist/js/material.js",
"dist/css/ripples.css",
"dist/js/ripples.js"
],
"ignore": [
"test",

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

@ -2445,7 +2445,7 @@ body .well-primary,
body .jumbotron-primary,
.container .jumbotron-primary,
.container-fluid .jumbotron-primary {
background-color: #4285f4;
background-color: #009587;
}
body .well-success,
.container .well-success,
@ -2519,6 +2519,14 @@ body .jumbotron-material-indigo,
.container-fluid .jumbotron-material-indigo {
background-color: #3f51b5;
}
body .well-material-blue,
.container .well-material-blue,
.container-fluid .well-material-blue,
body .jumbotron-material-blue,
.container .jumbotron-material-blue,
.container-fluid .jumbotron-material-blue {
background-color: #4285f4;
}
body .well-material-lightblue,
.container .well-material-lightblue,
.container-fluid .well-material-lightblue,
@ -2640,7 +2648,7 @@ body .jumbotron-material-lightgrey,
background-color: transparent;
}
.btn-primary:not(.btn-link):not(.btn-flat) {
background-color: #4285f4;
background-color: #009587;
}
.btn-success:not(.btn-link):not(.btn-flat) {
background-color: #0f9d58;
@ -2669,6 +2677,9 @@ body .jumbotron-material-lightgrey,
.btn-material-indigo:not(.btn-link):not(.btn-flat) {
background-color: #3f51b5;
}
.btn-material-blue:not(.btn-link):not(.btn-flat) {
background-color: #4285f4;
}
.btn-material-lightblue:not(.btn-link):not(.btn-flat) {
background-color: #03a9f4;
}
@ -2710,7 +2721,7 @@ body .jumbotron-material-lightgrey,
color: rgba(0, 0, 0, 0.84);
}
.btn-primary.btn-flat:not(.btn-link) {
color: #4285f4;
color: #009587;
}
.btn-success.btn-flat:not(.btn-link) {
color: #0f9d58;
@ -2739,6 +2750,9 @@ body .jumbotron-material-lightgrey,
.btn-material-indigo.btn-flat:not(.btn-link) {
color: #3f51b5;
}
.btn-material-blue.btn-flat:not(.btn-link) {
color: #4285f4;
}
.btn-material-lightblue.btn-flat:not(.btn-link) {
color: #03a9f4;
}
@ -2810,7 +2824,7 @@ body .jumbotron-material-lightgrey,
}
.btn.btn-fab-primary,
.btn.btn-fab:hover-primary {
background-color: #4285f4;
background-color: #009587;
}
.btn.btn-fab-success,
.btn.btn-fab:hover-success {
@ -2848,6 +2862,10 @@ body .jumbotron-material-lightgrey,
.btn.btn-fab:hover-material-indigo {
background-color: #3f51b5;
}
.btn.btn-fab-material-blue,
.btn.btn-fab:hover-material-blue {
background-color: #4285f4;
}
.btn.btn-fab-material-lightblue,
.btn.btn-fab:hover-material-lightblue {
background-color: #03a9f4;
@ -2933,7 +2951,7 @@ body .jumbotron-material-lightgrey,
background-color: transparent;
}
.open > .dropdown-toggle.btn-primary {
background-color: #4285f4;
background-color: #009587;
}
.open > .dropdown-toggle.btn-success {
background-color: #0f9d58;
@ -2962,6 +2980,9 @@ body .jumbotron-material-lightgrey,
.open > .dropdown-toggle.btn-material-indigo {
background-color: #3f51b5;
}
.open > .dropdown-toggle.btn-material-blue {
background-color: #4285f4;
}
.open > .dropdown-toggle.btn-material-lightblue {
background-color: #03a9f4;
}
@ -2998,6 +3019,12 @@ body .jumbotron-material-lightgrey,
.open > .dropdown-toggle.btn-material-lightgrey {
background-color: #ececec;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
margin-left: 0;
}
.btn-group,
.btn-group-vertical {
position: relative;
@ -3034,10 +3061,6 @@ body .jumbotron-material-lightgrey,
box-shadow: none !important;
margin: 0;
}
.btn-group .btn:active .caret,
.btn-group-vertical .btn:active .caret {
margin-left: -1px;
}
.btn-group-flat {
box-shadow: none !important;
}
@ -3164,7 +3187,7 @@ body .jumbotron-material-lightgrey,
background-color: #0f9d58;
}
.checkbox-primary input[type=checkbox]:checked ~ .check:after {
background-color: #4285f4;
background-color: #009587;
}
.checkbox-success input[type=checkbox]:checked ~ .check:after {
background-color: #0f9d58;
@ -3193,6 +3216,9 @@ body .jumbotron-material-lightgrey,
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:after {
background-color: #3f51b5;
}
.checkbox-material-blue input[type=checkbox]:checked ~ .check:after {
background-color: #4285f4;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:after {
background-color: #03a9f4;
}
@ -3234,7 +3260,7 @@ body .jumbotron-material-lightgrey,
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check:before {
color: #4285f4;
color: #009587;
}
.checkbox-success input[type=checkbox]:checked ~ .check:before {
color: #0f9d58;
@ -3263,6 +3289,9 @@ body .jumbotron-material-lightgrey,
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
color: #3f51b5;
}
.checkbox-material-blue input[type=checkbox]:checked ~ .check:before {
color: #4285f4;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
@ -3304,7 +3333,7 @@ body .jumbotron-material-lightgrey,
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check {
color: #4285f4;
color: #009587;
}
.checkbox-success input[type=checkbox]:checked ~ .check {
color: #0f9d58;
@ -3333,6 +3362,9 @@ body .jumbotron-material-lightgrey,
.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
color: #3f51b5;
}
.checkbox-material-blue input[type=checkbox]:checked ~ .check {
color: #4285f4;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
@ -3529,6 +3561,72 @@ body .jumbotron-material-lightgrey,
opacity: 0;
}
}
.togglebutton {
vertical-align: middle;
}
.togglebutton,
.togglebutton * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.togglebutton label {
font-weight: 400;
cursor: pointer;
}
.togglebutton label input[type=checkbox]:first-child {
opacity: 0;
width: 0;
height: 0;
}
.togglebutton label input[type=checkbox]:first-child:checked + .toggle {
background-color: rgba(0, 149, 135, 0.5);
}
.togglebutton label input[type=checkbox]:first-child:checked + .toggle:after {
background-color: #009587;
}
.togglebutton label .toggle,
.togglebutton label input[type=checkbox][disabled]:first-child + .toggle {
content: "";
display: inline-block;
width: 30px;
height: 15px;
background-color: rgba(80, 80, 80, 0.7);
border-radius: 15px;
margin-right: 10px;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
vertical-align: middle;
}
.togglebutton label .toggle:after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: #F1F1F1;
border-radius: 20px;
position: relative;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
left: -5px;
top: -2px;
-webkit-transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
}
.togglebutton label input[type=checkbox][disabled]:first-child + .toggle:after,
.togglebutton label input[type=checkbox][disabled]:checked:first-child + .toggle:after {
background-color: #BDBDBD;
}
.togglebutton label input[type=checkbox]:first-child:checked ~ .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
}
.togglebutton label input[type=checkbox]:first-child ~ .toggle:active:after,
.togglebutton label input[type=checkbox][disabled]:first-child ~ .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
}
.togglebutton label input[type=checkbox]:first-child:checked + .toggle:after {
left: 15px;
}
.form-horizontal .radio {
margin-bottom: 10px;
}
@ -3590,7 +3688,7 @@ body .jumbotron-material-lightgrey,
background-color: rgba(0, 0, 0, 0.84);
}
.radio-primary input[type=radio]:checked ~ .check {
background-color: #4285f4;
background-color: #009587;
}
.radio-success input[type=radio]:checked ~ .check {
background-color: #0f9d58;
@ -3619,6 +3717,9 @@ body .jumbotron-material-lightgrey,
.radio-material-indigo input[type=radio]:checked ~ .check {
background-color: #3f51b5;
}
.radio-material-blue input[type=radio]:checked ~ .check {
background-color: #4285f4;
}
.radio-material-lightblue input[type=radio]:checked ~ .check {
background-color: #03a9f4;
}
@ -3660,7 +3761,7 @@ body .jumbotron-material-lightgrey,
border-color: rgba(0, 0, 0, 0.84);
}
.radio-primary input[type=radio]:checked ~ .circle {
border-color: #4285f4;
border-color: #009587;
}
.radio-success input[type=radio]:checked ~ .circle {
border-color: #0f9d58;
@ -3689,6 +3790,9 @@ body .jumbotron-material-lightgrey,
.radio-material-indigo input[type=radio]:checked ~ .circle {
border-color: #3f51b5;
}
.radio-material-blue input[type=radio]:checked ~ .circle {
border-color: #4285f4;
}
.radio-material-lightblue input[type=radio]:checked ~ .circle {
border-color: #03a9f4;
}
@ -3841,7 +3945,7 @@ select[multiple].form-control.focus {
}
.form-control-wrapper .form-control:focus ~ .material-input:after,
.form-control-wrapper .form-control.focus ~ .material-input:after {
background-color: #4285f4;
background-color: #009587;
}
.form-control-wrapper .form-control:focus:invalid ~ .material-input:before,
.form-control-wrapper .form-control.focus:invalid ~ .material-input:before,
@ -3858,7 +3962,7 @@ select[multiple].form-control.focus {
width: 100%;
left: 0;
height: 2px;
background-color: #4285f4;
background-color: #009587;
bottom: -1px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
@ -3955,10 +4059,10 @@ select[multiple].form-control.focus {
}
.form-group .material-input:before,
.form-group-default .material-input:before {
background-color: #4285f4;
background-color: #009587;
}
.form-group-primary .material-input:before {
background-color: #4285f4;
background-color: #009587;
}
.form-group-success .material-input:before {
background-color: #0f9d58;
@ -3987,6 +4091,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo .material-input:before {
background-color: #3f51b5;
}
.form-group-material-blue .material-input:before {
background-color: #4285f4;
}
.form-group-material-lightblue .material-input:before {
background-color: #03a9f4;
}
@ -4025,10 +4132,10 @@ select[multiple].form-control.focus {
}
.form-group input.form-control:focus ~ .material-input:after,
.form-group-default input.form-control:focus ~ .material-input:after {
background-color: #4285f4;
background-color: #009587;
}
.form-group-primary input.form-control:focus ~ .material-input:after {
background-color: #4285f4;
background-color: #009587;
}
.form-group-success input.form-control:focus ~ .material-input:after {
background-color: #0f9d58;
@ -4057,6 +4164,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo input.form-control:focus ~ .material-input:after {
background-color: #3f51b5;
}
.form-group-material-blue input.form-control:focus ~ .material-input:after {
background-color: #4285f4;
}
.form-group-material-lightblue input.form-control:focus ~ .material-input:after {
background-color: #03a9f4;
}
@ -4095,10 +4205,10 @@ select[multiple].form-control.focus {
}
.form-group input.form-control.focus ~ .material-input:after,
.form-group-default input.form-control.focus ~ .material-input:after {
background-color: #4285f4;
background-color: #009587;
}
.form-group-primary input.form-control.focus ~ .material-input:after {
background-color: #4285f4;
background-color: #009587;
}
.form-group-success input.form-control.focus ~ .material-input:after {
background-color: #0f9d58;
@ -4127,6 +4237,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo input.form-control.focus ~ .material-input:after {
background-color: #3f51b5;
}
.form-group-material-blue input.form-control.focus ~ .material-input:after {
background-color: #4285f4;
}
.form-group-material-lightblue input.form-control.focus ~ .material-input:after {
background-color: #03a9f4;
}
@ -4168,7 +4281,7 @@ select[multiple].form-control.focus {
color: rgba(0, 0, 0, 0.84);
}
.form-group-primary .control-label {
color: #4285f4;
color: #009587;
}
.form-group-success .control-label {
color: #0f9d58;
@ -4197,6 +4310,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo .control-label {
color: #3f51b5;
}
.form-group-material-blue .control-label {
color: #4285f4;
}
.form-group-material-lightblue .control-label {
color: #03a9f4;
}
@ -4235,10 +4351,10 @@ select[multiple].form-control.focus {
}
.form-group input.form-control:not(.empty) ~ .floating-label,
.form-group-default input.form-control:not(.empty) ~ .floating-label {
color: #4285f4;
color: #009587;
}
.form-group-primary input.form-control:not(.empty) ~ .floating-label {
color: #4285f4;
color: #009587;
}
.form-group-success input.form-control:not(.empty) ~ .floating-label {
color: #0f9d58;
@ -4267,6 +4383,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo input.form-control:not(.empty) ~ .floating-label {
color: #3f51b5;
}
.form-group-material-blue input.form-control:not(.empty) ~ .floating-label {
color: #4285f4;
}
.form-group-material-lightblue input.form-control:not(.empty) ~ .floating-label {
color: #03a9f4;
}
@ -4478,7 +4597,7 @@ legend {
float: right;
}
.navbar {
background-color: #4285f4;
background-color: #009587;
border: 0;
border-radius: 0;
}
@ -4618,10 +4737,10 @@ fieldset[disabled] .navbar .btn-link:focus {
}
.navbar,
.navbar-default {
background-color: #4285f4;
background-color: #009587;
}
.navbar-primary {
background-color: #4285f4;
background-color: #009587;
}
.navbar-success {
background-color: #0f9d58;
@ -4650,6 +4769,9 @@ fieldset[disabled] .navbar .btn-link:focus {
.navbar-material-indigo {
background-color: #3f51b5;
}
.navbar-material-blue {
background-color: #4285f4;
}
.navbar-material-lightblue {
background-color: #03a9f4;
}
@ -4749,14 +4871,14 @@ fieldset[disabled] .navbar .btn-link:focus {
}
.dropdown-menu li a:hover {
background-color: transparent;
color: #4285f4;
color: #009587;
}
.dropdown-menu li a:hover,
.dropdown-menu-default li a:hover {
color: #4285f4;
color: #009587;
}
.dropdown-menu-primary li a:hover {
color: #4285f4;
color: #009587;
}
.dropdown-menu-success li a:hover {
color: #0f9d58;
@ -4785,6 +4907,9 @@ fieldset[disabled] .navbar .btn-link:focus {
.dropdown-menu-material-indigo li a:hover {
color: #3f51b5;
}
.dropdown-menu-material-blue li a:hover {
color: #4285f4;
}
.dropdown-menu-material-lightblue li a:hover {
color: #03a9f4;
}
@ -4834,7 +4959,7 @@ fieldset[disabled] .navbar .btn-link:focus {
background-color: #ffffff;
}
.alert-primary {
background-color: #4285f4;
background-color: #009587;
}
.alert-success {
background-color: #0f9d58;
@ -4863,6 +4988,9 @@ fieldset[disabled] .navbar .btn-link:focus {
.alert-material-indigo {
background-color: #3f51b5;
}
.alert-material-blue {
background-color: #4285f4;
}
.alert-material-lightblue {
background-color: #03a9f4;
}
@ -4920,10 +5048,10 @@ fieldset[disabled] .navbar .btn-link:focus {
}
.progress .progress-bar,
.progress .progress-bar-default {
background-color: #4285f4;
background-color: #009587;
}
.progress .progress-bar-primary {
background-color: #4285f4;
background-color: #009587;
}
.progress .progress-bar-success {
background-color: #0f9d58;
@ -4952,6 +5080,9 @@ fieldset[disabled] .navbar .btn-link:focus {
.progress .progress-bar-material-indigo {
background-color: #3f51b5;
}
.progress .progress-bar-material-blue {
background-color: #4285f4;
}
.progress .progress-bar-material-lightblue {
background-color: #03a9f4;
}
@ -4992,7 +5123,7 @@ fieldset[disabled] .navbar .btn-link:focus {
color: #ff5722;
}
.text-primary {
color: #4285f4;
color: #009587;
}
.text-danger {
color: #f44336;
@ -5004,7 +5135,7 @@ fieldset[disabled] .navbar .btn-link:focus {
color: #03a9f4;
}
.nav-tabs {
background: #4285f4;
background: #009587;
}
.nav-tabs > li > a {
color: #FFFFFF;
@ -5074,7 +5205,7 @@ icon-default {
}
.mdi-primary,
icon-primary {
color: #4285f4;
color: #009587;
}
.mdi-success,
icon-success {
@ -5112,6 +5243,10 @@ icon-material-deeppurple {
icon-material-indigo {
color: #3f51b5;
}
.mdi-material-blue,
icon-material-blue {
color: #4285f4;
}
.mdi-material-lightblue,
icon-material-lightblue {
color: #03a9f4;
@ -5263,7 +5398,7 @@ icon-material-lightgrey {
background-color: #9e9e9e;
}
.label-primary {
background-color: #4285f4;
background-color: #009587;
}
.label-success {
background-color: #0f9d58;
@ -5292,6 +5427,9 @@ icon-material-lightgrey {
.label-material-indigo {
background-color: #3f51b5;
}
.label-material-blue {
background-color: #4285f4;
}
.label-material-lightblue {
background-color: #03a9f4;
}
@ -5338,7 +5476,7 @@ icon-material-lightgrey {
background-color: #ececec;
}
.panel-primary > .panel-heading {
background-color: #4285f4;
background-color: #009587;
}
.panel-success > .panel-heading {
background-color: #0f9d58;
@ -5367,6 +5505,9 @@ icon-material-lightgrey {
.panel-material-indigo > .panel-heading {
background-color: #3f51b5;
}
.panel-material-blue > .panel-heading {
background-color: #4285f4;
}
.panel-material-lightblue > .panel-heading {
background-color: #03a9f4;
}
@ -5413,6 +5554,18 @@ icon-material-lightgrey {
.panel-footer {
background-color: #ececec;
}
.modal {
background: rgba(0, 0, 0, 0.3);
}
* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
}
*:focus {
outline: 0;
border: none;
color: rgba(0, 0, 0, 0);
}
.snackbar {
background-color: #323232;
color: rgba(255, 255, 255, 0.84);
@ -5550,10 +5703,10 @@ icon-material-lightgrey {
}
.slider.noUi-connect,
.slider-default.noUi-connect {
background-color: #4285f4;
background-color: #009587;
}
.slider-primary.noUi-connect {
background-color: #4285f4;
background-color: #009587;
}
.slider-success.noUi-connect {
background-color: #0f9d58;
@ -5582,6 +5735,9 @@ icon-material-lightgrey {
.slider-material-indigo.noUi-connect {
background-color: #3f51b5;
}
.slider-material-blue.noUi-connect {
background-color: #4285f4;
}
.slider-material-lightblue.noUi-connect {
background-color: #03a9f4;
}
@ -5620,10 +5776,10 @@ icon-material-lightgrey {
}
.slider .noUi-connect,
.slider-default .noUi-connect {
background-color: #4285f4;
background-color: #009587;
}
.slider-primary .noUi-connect {
background-color: #4285f4;
background-color: #009587;
}
.slider-success .noUi-connect {
background-color: #0f9d58;
@ -5652,6 +5808,9 @@ icon-material-lightgrey {
.slider-material-indigo .noUi-connect {
background-color: #3f51b5;
}
.slider-material-blue .noUi-connect {
background-color: #4285f4;
}
.slider-material-lightblue .noUi-connect {
background-color: #03a9f4;
}
@ -5690,10 +5849,10 @@ icon-material-lightgrey {
}
.slider .noUi-handle,
.slider-default .noUi-handle {
background-color: #4285f4;
background-color: #009587;
}
.slider-primary .noUi-handle {
background-color: #4285f4;
background-color: #009587;
}
.slider-success .noUi-handle {
background-color: #0f9d58;
@ -5722,6 +5881,9 @@ icon-material-lightgrey {
.slider-material-indigo .noUi-handle {
background-color: #3f51b5;
}
.slider-material-blue .noUi-handle {
background-color: #4285f4;
}
.slider-material-lightblue .noUi-handle {
background-color: #03a9f4;
}
@ -5760,10 +5922,10 @@ icon-material-lightgrey {
}
.slider .noUi-handle,
.slider-default .noUi-handle {
border-color: #4285f4;
border-color: #009587;
}
.slider-primary .noUi-handle {
border-color: #4285f4;
border-color: #009587;
}
.slider-success .noUi-handle {
border-color: #0f9d58;
@ -5792,6 +5954,9 @@ icon-material-lightgrey {
.slider-material-indigo .noUi-handle {
border-color: #3f51b5;
}
.slider-material-blue .noUi-handle {
border-color: #4285f4;
}
.slider-material-lightblue .noUi-handle {
border-color: #03a9f4;
}
@ -5969,3 +6134,21 @@ icon-material-lightgrey {
.selectize-control.multi .dropdown-active ~ .selectize-dropdown {
display: block;
}
.dropdownjs:after {
right: 5px;
top: 3px;
font-size: 25px;
position: absolute;
content: "\e894";
font-family: "Material-Design-Icons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
pointer-events: none;
color: #757575;
}

1
dist/css/material-wfont.css.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

277
dist/css/material.css vendored
View File

@ -2438,7 +2438,7 @@ body .well-primary,
body .jumbotron-primary,
.container .jumbotron-primary,
.container-fluid .jumbotron-primary {
background-color: #4285f4;
background-color: #009587;
}
body .well-success,
.container .well-success,
@ -2512,6 +2512,14 @@ body .jumbotron-material-indigo,
.container-fluid .jumbotron-material-indigo {
background-color: #3f51b5;
}
body .well-material-blue,
.container .well-material-blue,
.container-fluid .well-material-blue,
body .jumbotron-material-blue,
.container .jumbotron-material-blue,
.container-fluid .jumbotron-material-blue {
background-color: #4285f4;
}
body .well-material-lightblue,
.container .well-material-lightblue,
.container-fluid .well-material-lightblue,
@ -2633,7 +2641,7 @@ body .jumbotron-material-lightgrey,
background-color: transparent;
}
.btn-primary:not(.btn-link):not(.btn-flat) {
background-color: #4285f4;
background-color: #009587;
}
.btn-success:not(.btn-link):not(.btn-flat) {
background-color: #0f9d58;
@ -2662,6 +2670,9 @@ body .jumbotron-material-lightgrey,
.btn-material-indigo:not(.btn-link):not(.btn-flat) {
background-color: #3f51b5;
}
.btn-material-blue:not(.btn-link):not(.btn-flat) {
background-color: #4285f4;
}
.btn-material-lightblue:not(.btn-link):not(.btn-flat) {
background-color: #03a9f4;
}
@ -2703,7 +2714,7 @@ body .jumbotron-material-lightgrey,
color: rgba(0, 0, 0, 0.84);
}
.btn-primary.btn-flat:not(.btn-link) {
color: #4285f4;
color: #009587;
}
.btn-success.btn-flat:not(.btn-link) {
color: #0f9d58;
@ -2732,6 +2743,9 @@ body .jumbotron-material-lightgrey,
.btn-material-indigo.btn-flat:not(.btn-link) {
color: #3f51b5;
}
.btn-material-blue.btn-flat:not(.btn-link) {
color: #4285f4;
}
.btn-material-lightblue.btn-flat:not(.btn-link) {
color: #03a9f4;
}
@ -2803,7 +2817,7 @@ body .jumbotron-material-lightgrey,
}
.btn.btn-fab-primary,
.btn.btn-fab:hover-primary {
background-color: #4285f4;
background-color: #009587;
}
.btn.btn-fab-success,
.btn.btn-fab:hover-success {
@ -2841,6 +2855,10 @@ body .jumbotron-material-lightgrey,
.btn.btn-fab:hover-material-indigo {
background-color: #3f51b5;
}
.btn.btn-fab-material-blue,
.btn.btn-fab:hover-material-blue {
background-color: #4285f4;
}
.btn.btn-fab-material-lightblue,
.btn.btn-fab:hover-material-lightblue {
background-color: #03a9f4;
@ -2926,7 +2944,7 @@ body .jumbotron-material-lightgrey,
background-color: transparent;
}
.open > .dropdown-toggle.btn-primary {
background-color: #4285f4;
background-color: #009587;
}
.open > .dropdown-toggle.btn-success {
background-color: #0f9d58;
@ -2955,6 +2973,9 @@ body .jumbotron-material-lightgrey,
.open > .dropdown-toggle.btn-material-indigo {
background-color: #3f51b5;
}
.open > .dropdown-toggle.btn-material-blue {
background-color: #4285f4;
}
.open > .dropdown-toggle.btn-material-lightblue {
background-color: #03a9f4;
}
@ -2991,6 +3012,12 @@ body .jumbotron-material-lightgrey,
.open > .dropdown-toggle.btn-material-lightgrey {
background-color: #ececec;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
margin-left: 0;
}
.btn-group,
.btn-group-vertical {
position: relative;
@ -3027,10 +3054,6 @@ body .jumbotron-material-lightgrey,
box-shadow: none !important;
margin: 0;
}
.btn-group .btn:active .caret,
.btn-group-vertical .btn:active .caret {
margin-left: -1px;
}
.btn-group-flat {
box-shadow: none !important;
}
@ -3157,7 +3180,7 @@ body .jumbotron-material-lightgrey,
background-color: #0f9d58;
}
.checkbox-primary input[type=checkbox]:checked ~ .check:after {
background-color: #4285f4;
background-color: #009587;
}
.checkbox-success input[type=checkbox]:checked ~ .check:after {
background-color: #0f9d58;
@ -3186,6 +3209,9 @@ body .jumbotron-material-lightgrey,
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:after {
background-color: #3f51b5;
}
.checkbox-material-blue input[type=checkbox]:checked ~ .check:after {
background-color: #4285f4;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:after {
background-color: #03a9f4;
}
@ -3227,7 +3253,7 @@ body .jumbotron-material-lightgrey,
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check:before {
color: #4285f4;
color: #009587;
}
.checkbox-success input[type=checkbox]:checked ~ .check:before {
color: #0f9d58;
@ -3256,6 +3282,9 @@ body .jumbotron-material-lightgrey,
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
color: #3f51b5;
}
.checkbox-material-blue input[type=checkbox]:checked ~ .check:before {
color: #4285f4;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
@ -3297,7 +3326,7 @@ body .jumbotron-material-lightgrey,
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check {
color: #4285f4;
color: #009587;
}
.checkbox-success input[type=checkbox]:checked ~ .check {
color: #0f9d58;
@ -3326,6 +3355,9 @@ body .jumbotron-material-lightgrey,
.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
color: #3f51b5;
}
.checkbox-material-blue input[type=checkbox]:checked ~ .check {
color: #4285f4;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
@ -3522,6 +3554,72 @@ body .jumbotron-material-lightgrey,
opacity: 0;
}
}
.togglebutton {
vertical-align: middle;
}
.togglebutton,
.togglebutton * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.togglebutton label {
font-weight: 400;
cursor: pointer;
}
.togglebutton label input[type=checkbox]:first-child {
opacity: 0;
width: 0;
height: 0;
}
.togglebutton label input[type=checkbox]:first-child:checked + .toggle {
background-color: rgba(0, 149, 135, 0.5);
}
.togglebutton label input[type=checkbox]:first-child:checked + .toggle:after {
background-color: #009587;
}
.togglebutton label .toggle,
.togglebutton label input[type=checkbox][disabled]:first-child + .toggle {
content: "";
display: inline-block;
width: 30px;
height: 15px;
background-color: rgba(80, 80, 80, 0.7);
border-radius: 15px;
margin-right: 10px;
-webkit-transition: background 0.3s ease;
transition: background 0.3s ease;
vertical-align: middle;
}
.togglebutton label .toggle:after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: #F1F1F1;
border-radius: 20px;
position: relative;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4);
left: -5px;
top: -2px;
-webkit-transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
}
.togglebutton label input[type=checkbox][disabled]:first-child + .toggle:after,
.togglebutton label input[type=checkbox][disabled]:checked:first-child + .toggle:after {
background-color: #BDBDBD;
}
.togglebutton label input[type=checkbox]:first-child:checked ~ .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
}
.togglebutton label input[type=checkbox]:first-child ~ .toggle:active:after,
.togglebutton label input[type=checkbox][disabled]:first-child ~ .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
}
.togglebutton label input[type=checkbox]:first-child:checked + .toggle:after {
left: 15px;
}
.form-horizontal .radio {
margin-bottom: 10px;
}
@ -3583,7 +3681,7 @@ body .jumbotron-material-lightgrey,
background-color: rgba(0, 0, 0, 0.84);
}
.radio-primary input[type=radio]:checked ~ .check {
background-color: #4285f4;
background-color: #009587;
}
.radio-success input[type=radio]:checked ~ .check {
background-color: #0f9d58;
@ -3612,6 +3710,9 @@ body .jumbotron-material-lightgrey,
.radio-material-indigo input[type=radio]:checked ~ .check {
background-color: #3f51b5;
}
.radio-material-blue input[type=radio]:checked ~ .check {
background-color: #4285f4;
}
.radio-material-lightblue input[type=radio]:checked ~ .check {
background-color: #03a9f4;
}
@ -3653,7 +3754,7 @@ body .jumbotron-material-lightgrey,
border-color: rgba(0, 0, 0, 0.84);
}
.radio-primary input[type=radio]:checked ~ .circle {
border-color: #4285f4;
border-color: #009587;
}
.radio-success input[type=radio]:checked ~ .circle {
border-color: #0f9d58;
@ -3682,6 +3783,9 @@ body .jumbotron-material-lightgrey,
.radio-material-indigo input[type=radio]:checked ~ .circle {
border-color: #3f51b5;
}
.radio-material-blue input[type=radio]:checked ~ .circle {
border-color: #4285f4;
}
.radio-material-lightblue input[type=radio]:checked ~ .circle {
border-color: #03a9f4;
}
@ -3834,7 +3938,7 @@ select[multiple].form-control.focus {
}
.form-control-wrapper .form-control:focus ~ .material-input:after,
.form-control-wrapper .form-control.focus ~ .material-input:after {
background-color: #4285f4;
background-color: #009587;
}
.form-control-wrapper .form-control:focus:invalid ~ .material-input:before,
.form-control-wrapper .form-control.focus:invalid ~ .material-input:before,
@ -3851,7 +3955,7 @@ select[multiple].form-control.focus {
width: 100%;
left: 0;
height: 2px;
background-color: #4285f4;
background-color: #009587;
bottom: -1px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
@ -3948,10 +4052,10 @@ select[multiple].form-control.focus {
}
.form-group .material-input:before,
.form-group-default .material-input:before {
background-color: #4285f4;
background-color: #009587;
}
.form-group-primary .material-input:before {
background-color: #4285f4;
background-color: #009587;
}
.form-group-success .material-input:before {
background-color: #0f9d58;
@ -3980,6 +4084,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo .material-input:before {
background-color: #3f51b5;
}
.form-group-material-blue .material-input:before {
background-color: #4285f4;
}
.form-group-material-lightblue .material-input:before {
background-color: #03a9f4;
}
@ -4018,10 +4125,10 @@ select[multiple].form-control.focus {
}
.form-group input.form-control:focus ~ .material-input:after,
.form-group-default input.form-control:focus ~ .material-input:after {
background-color: #4285f4;
background-color: #009587;
}
.form-group-primary input.form-control:focus ~ .material-input:after {
background-color: #4285f4;
background-color: #009587;
}
.form-group-success input.form-control:focus ~ .material-input:after {
background-color: #0f9d58;
@ -4050,6 +4157,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo input.form-control:focus ~ .material-input:after {
background-color: #3f51b5;
}
.form-group-material-blue input.form-control:focus ~ .material-input:after {
background-color: #4285f4;
}
.form-group-material-lightblue input.form-control:focus ~ .material-input:after {
background-color: #03a9f4;
}
@ -4088,10 +4198,10 @@ select[multiple].form-control.focus {
}
.form-group input.form-control.focus ~ .material-input:after,
.form-group-default input.form-control.focus ~ .material-input:after {
background-color: #4285f4;
background-color: #009587;
}
.form-group-primary input.form-control.focus ~ .material-input:after {
background-color: #4285f4;
background-color: #009587;
}
.form-group-success input.form-control.focus ~ .material-input:after {
background-color: #0f9d58;
@ -4120,6 +4230,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo input.form-control.focus ~ .material-input:after {
background-color: #3f51b5;
}
.form-group-material-blue input.form-control.focus ~ .material-input:after {
background-color: #4285f4;
}
.form-group-material-lightblue input.form-control.focus ~ .material-input:after {
background-color: #03a9f4;
}
@ -4161,7 +4274,7 @@ select[multiple].form-control.focus {
color: rgba(0, 0, 0, 0.84);
}
.form-group-primary .control-label {
color: #4285f4;
color: #009587;
}
.form-group-success .control-label {
color: #0f9d58;
@ -4190,6 +4303,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo .control-label {
color: #3f51b5;
}
.form-group-material-blue .control-label {
color: #4285f4;
}
.form-group-material-lightblue .control-label {
color: #03a9f4;
}
@ -4228,10 +4344,10 @@ select[multiple].form-control.focus {
}
.form-group input.form-control:not(.empty) ~ .floating-label,
.form-group-default input.form-control:not(.empty) ~ .floating-label {
color: #4285f4;
color: #009587;
}
.form-group-primary input.form-control:not(.empty) ~ .floating-label {
color: #4285f4;
color: #009587;
}
.form-group-success input.form-control:not(.empty) ~ .floating-label {
color: #0f9d58;
@ -4260,6 +4376,9 @@ select[multiple].form-control.focus {
.form-group-material-indigo input.form-control:not(.empty) ~ .floating-label {
color: #3f51b5;
}
.form-group-material-blue input.form-control:not(.empty) ~ .floating-label {
color: #4285f4;
}
.form-group-material-lightblue input.form-control:not(.empty) ~ .floating-label {
color: #03a9f4;
}
@ -4471,7 +4590,7 @@ legend {
float: right;
}
.navbar {
background-color: #4285f4;
background-color: #009587;
border: 0;
border-radius: 0;
}
@ -4611,10 +4730,10 @@ fieldset[disabled] .navbar .btn-link:focus {
}
.navbar,
.navbar-default {
background-color: #4285f4;
background-color: #009587;
}
.navbar-primary {
background-color: #4285f4;
background-color: #009587;
}
.navbar-success {
background-color: #0f9d58;
@ -4643,6 +4762,9 @@ fieldset[disabled] .navbar .btn-link:focus {
.navbar-material-indigo {
background-color: #3f51b5;
}
.navbar-material-blue {
background-color: #4285f4;
}
.navbar-material-lightblue {
background-color: #03a9f4;
}
@ -4742,14 +4864,14 @@ fieldset[disabled] .navbar .btn-link:focus {
}
.dropdown-menu li a:hover {
background-color: transparent;
color: #4285f4;
color: #009587;
}
.dropdown-menu li a:hover,
.dropdown-menu-default li a:hover {
color: #4285f4;
color: #009587;
}
.dropdown-menu-primary li a:hover {
color: #4285f4;
color: #009587;
}
.dropdown-menu-success li a:hover {
color: #0f9d58;
@ -4778,6 +4900,9 @@ fieldset[disabled] .navbar .btn-link:focus {
.dropdown-menu-material-indigo li a:hover {
color: #3f51b5;
}
.dropdown-menu-material-blue li a:hover {
color: #4285f4;
}
.dropdown-menu-material-lightblue li a:hover {
color: #03a9f4;
}
@ -4827,7 +4952,7 @@ fieldset[disabled] .navbar .btn-link:focus {
background-color: #ffffff;
}
.alert-primary {
background-color: #4285f4;
background-color: #009587;
}
.alert-success {
background-color: #0f9d58;
@ -4856,6 +4981,9 @@ fieldset[disabled] .navbar .btn-link:focus {
.alert-material-indigo {
background-color: #3f51b5;
}
.alert-material-blue {
background-color: #4285f4;
}
.alert-material-lightblue {
background-color: #03a9f4;
}
@ -4913,10 +5041,10 @@ fieldset[disabled] .navbar .btn-link:focus {
}
.progress .progress-bar,
.progress .progress-bar-default {
background-color: #4285f4;
background-color: #009587;
}
.progress .progress-bar-primary {
background-color: #4285f4;
background-color: #009587;
}
.progress .progress-bar-success {
background-color: #0f9d58;
@ -4945,6 +5073,9 @@ fieldset[disabled] .navbar .btn-link:focus {
.progress .progress-bar-material-indigo {
background-color: #3f51b5;
}
.progress .progress-bar-material-blue {
background-color: #4285f4;
}
.progress .progress-bar-material-lightblue {
background-color: #03a9f4;
}
@ -4985,7 +5116,7 @@ fieldset[disabled] .navbar .btn-link:focus {
color: #ff5722;
}
.text-primary {
color: #4285f4;
color: #009587;
}
.text-danger {
color: #f44336;
@ -4997,7 +5128,7 @@ fieldset[disabled] .navbar .btn-link:focus {
color: #03a9f4;
}
.nav-tabs {
background: #4285f4;
background: #009587;
}
.nav-tabs > li > a {
color: #FFFFFF;
@ -5067,7 +5198,7 @@ icon-default {
}
.mdi-primary,
icon-primary {
color: #4285f4;
color: #009587;
}
.mdi-success,
icon-success {
@ -5105,6 +5236,10 @@ icon-material-deeppurple {
icon-material-indigo {
color: #3f51b5;
}
.mdi-material-blue,
icon-material-blue {
color: #4285f4;
}
.mdi-material-lightblue,
icon-material-lightblue {
color: #03a9f4;
@ -5256,7 +5391,7 @@ icon-material-lightgrey {
background-color: #9e9e9e;
}
.label-primary {
background-color: #4285f4;
background-color: #009587;
}
.label-success {
background-color: #0f9d58;
@ -5285,6 +5420,9 @@ icon-material-lightgrey {
.label-material-indigo {
background-color: #3f51b5;
}
.label-material-blue {
background-color: #4285f4;
}
.label-material-lightblue {
background-color: #03a9f4;
}
@ -5331,7 +5469,7 @@ icon-material-lightgrey {
background-color: #ececec;
}
.panel-primary > .panel-heading {
background-color: #4285f4;
background-color: #009587;
}
.panel-success > .panel-heading {
background-color: #0f9d58;
@ -5360,6 +5498,9 @@ icon-material-lightgrey {
.panel-material-indigo > .panel-heading {
background-color: #3f51b5;
}
.panel-material-blue > .panel-heading {
background-color: #4285f4;
}
.panel-material-lightblue > .panel-heading {
background-color: #03a9f4;
}
@ -5406,6 +5547,18 @@ icon-material-lightgrey {
.panel-footer {
background-color: #ececec;
}
.modal {
background: rgba(0, 0, 0, 0.3);
}
* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
}
*:focus {
outline: 0;
border: none;
color: rgba(0, 0, 0, 0);
}
.snackbar {
background-color: #323232;
color: rgba(255, 255, 255, 0.84);
@ -5543,10 +5696,10 @@ icon-material-lightgrey {
}
.slider.noUi-connect,
.slider-default.noUi-connect {
background-color: #4285f4;
background-color: #009587;
}
.slider-primary.noUi-connect {
background-color: #4285f4;
background-color: #009587;
}
.slider-success.noUi-connect {
background-color: #0f9d58;
@ -5575,6 +5728,9 @@ icon-material-lightgrey {
.slider-material-indigo.noUi-connect {
background-color: #3f51b5;
}
.slider-material-blue.noUi-connect {
background-color: #4285f4;
}
.slider-material-lightblue.noUi-connect {
background-color: #03a9f4;
}
@ -5613,10 +5769,10 @@ icon-material-lightgrey {
}
.slider .noUi-connect,
.slider-default .noUi-connect {
background-color: #4285f4;
background-color: #009587;
}
.slider-primary .noUi-connect {
background-color: #4285f4;
background-color: #009587;
}
.slider-success .noUi-connect {
background-color: #0f9d58;
@ -5645,6 +5801,9 @@ icon-material-lightgrey {
.slider-material-indigo .noUi-connect {
background-color: #3f51b5;
}
.slider-material-blue .noUi-connect {
background-color: #4285f4;
}
.slider-material-lightblue .noUi-connect {
background-color: #03a9f4;
}
@ -5683,10 +5842,10 @@ icon-material-lightgrey {
}
.slider .noUi-handle,
.slider-default .noUi-handle {
background-color: #4285f4;
background-color: #009587;
}
.slider-primary .noUi-handle {
background-color: #4285f4;
background-color: #009587;
}
.slider-success .noUi-handle {
background-color: #0f9d58;
@ -5715,6 +5874,9 @@ icon-material-lightgrey {
.slider-material-indigo .noUi-handle {
background-color: #3f51b5;
}
.slider-material-blue .noUi-handle {
background-color: #4285f4;
}
.slider-material-lightblue .noUi-handle {
background-color: #03a9f4;
}
@ -5753,10 +5915,10 @@ icon-material-lightgrey {
}
.slider .noUi-handle,
.slider-default .noUi-handle {
border-color: #4285f4;
border-color: #009587;
}
.slider-primary .noUi-handle {
border-color: #4285f4;
border-color: #009587;
}
.slider-success .noUi-handle {
border-color: #0f9d58;
@ -5785,6 +5947,9 @@ icon-material-lightgrey {
.slider-material-indigo .noUi-handle {
border-color: #3f51b5;
}
.slider-material-blue .noUi-handle {
border-color: #4285f4;
}
.slider-material-lightblue .noUi-handle {
border-color: #03a9f4;
}
@ -5962,3 +6127,21 @@ icon-material-lightgrey {
.selectize-control.multi .dropdown-active ~ .selectize-dropdown {
display: block;
}
.dropdownjs:after {
right: 5px;
top: 3px;
font-size: 25px;
position: absolute;
content: "\e894";
font-family: "Material-Design-Icons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
pointer-events: none;
color: #757575;
}

1
dist/css/material.css.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

5
dist/css/ripples.css vendored
View File

@ -9,7 +9,8 @@
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 2px;
border-radius: inherit;
pointer-events: none;
}
.ripple {
position: absolute;
@ -31,7 +32,7 @@
.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;
opacity: 0.15;
}
.ripple.ripple-out {
-webkit-transition: opacity 0.1s linear 0s !important;

1
dist/css/ripples.css.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA;EACI,kBAAA;;AAEJ;EACI,kBAAA;EACA,MAAA;EACA,OAAA;EACA,UAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,sBAAA;EACA,oBAAA;;AAEJ;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,iBAAA;EACA,mBAAA;EACA,qCAAA;EACA,WAAW,QAAX;EACA,qBAAA;EACA,UAAA;EACA,oBAAA;;AAEJ,OAAO;EACH,qDAAqD,iCAArD;EACA,aAAA;;AAEJ,OAAO;EACH,6CAAA;EACA,UAAA"}

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

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

30
dist/js/material.js vendored
View File

@ -1,4 +1,4 @@
/* globals jQuery, ripples */
/* globals jQuery */
(function($) {
// Selector to select only not already processed elements
@ -31,6 +31,7 @@
].join(","),
"inputElements": "input.form-control, textarea.form-control, select.form-control",
"checkboxElements": ".checkbox > label > input[type=checkbox]",
"togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
"radioElements": ".radio > label > input[type=radio]"
},
"checkbox": function(selector) {
@ -40,6 +41,13 @@
.data("mdproc", true)
.after("<span class=ripple></span><span class=check></span>");
},
"togglebutton": function(selector) {
// Add fake-checkbox to material checkboxes
$((selector) ? selector : this.options.togglebuttonElements)
.filter(":notmdproc")
.data("mdproc", true)
.after("<span class=toggle></span>");
},
"radio": function(selector) {
// Add fake-radio to material radios
$((selector) ? selector : this.options.radioElements)
@ -55,14 +63,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();
@ -71,7 +90,7 @@
});
$(document)
.on("change", ".checkbox input", function() { $(this).blur(); })
.on("change", ".checkbox input[type=checkbox]", function() { $(this).blur(); })
.on("keydown paste", ".form-control", function(e) {
if(_isChar(e)) {
$(this).removeClass("empty");
@ -107,12 +126,13 @@
});
},
"ripples": function(selector) {
ripples.init((selector) ? selector : this.options.withRipples);
$.ripples({"target": (selector) ? selector : this.options.withRipples});
},
"init": function() {
this.ripples();
this.input();
this.checkbox();
this.togglebutton();
this.radio();
if (document.arrive) {
@ -125,8 +145,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");
}
});

3
dist/js/material.min.js vendored
View File

@ -1 +1,2 @@
!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);
!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]",togglebuttonElements:".togglebutton > 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>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></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(b){a.ripples({target:b?b:this.options.withRipples})},init:function(){this.ripples(),this.input(),this.checkbox(),this.togglebutton(),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);
//# sourceMappingURL=material.min.js.map

1
dist/js/material.min.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"material.min.js","sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","checkbox","selector","this","filter","after","togglebutton","radio","input","each","$this","wrap","hasClass","placeholder","attr","removeClass","val","addClass","parent","next","is","$input","detach","document","on","blur","e","find","value","files","i","file","console","log","name","substring","length","prev","ripples","target","init","arrive","loading","setInterval","trigger","setTimeout","clearInterval","focused","$inputs","parents","jQuery"],"mappings":"CAEA,SAAUA,GAUR,QAASC,GAAQC,GACf,MAAwB,mBAAbA,GAAIC,OACN,EACsB,gBAAbD,GAAIC,OAAqBD,EAAIC,MAAQ,GAC7CD,EAAIE,UAAYF,EAAIG,UAAYH,EAAII,QAAuB,GAAbJ,EAAIC,OAErD,EAdTH,EAAEO,KAAK,KAAKC,UAAY,SAASC,GAC/B,MAAIT,GAAES,GAAKC,KAAK,WACP,GAEA,GAaXV,EAAEW,UACAC,SACEC,aACE,sBACA,cACA,gCACA,mBACA,kCACA,eACAC,KAAK,KACPC,cAAiB,iEACjBC,iBAAoB,2CACpBC,qBAAwB,+CACxBC,cAAiB,sCAEnBC,SAAY,SAASC,GAEnBpB,EAAE,EAAaoB,EAAWC,KAAKT,QAAQI,kBACtCM,OAAO,cACPZ,KAAK,UAAU,GACfa,MAAM,wDAETC,aAAgB,SAASJ,GAEvBpB,EAAE,EAAaoB,EAAWC,KAAKT,QAAQK,sBACtCK,OAAO,cACPZ,KAAK,UAAU,GACfa,MAAM,+BAETE,MAAS,SAASL,GAEhBpB,EAAE,EAAaoB,EAAWC,KAAKT,QAAQM,eACtCI,OAAO,cACPZ,KAAK,UAAU,GACfa,MAAM,wDAETG,MAAS,SAASN,GAChBpB,EAAE,EAAaoB,EAAWC,KAAKT,QAAQG,eACtCO,OAAO,cACPZ,KAAK,UAAU,GACfiB,KAAM,WACL,GAAIC,GAAQ5B,EAAEqB,KAKd,IAJAO,EAAMC,KAAK,0CACXD,EAAML,MAAM,sCAGRK,EAAME,SAAS,kBAAmB,CACpC,GAAIC,GAAcH,EAAMI,KAAK,cAC7BJ,GAAMI,KAAK,cAAe,MAAMC,YAAY,kBAC5CL,EAAML,MAAM,6BAA+BQ,EAAc,UAc3D,GAVIH,EAAMI,KAAK,cACbJ,EAAML,MAAM,mBAAqBK,EAAMI,KAAK,aAAe,WAIzC,OAAhBJ,EAAMM,OAAiC,aAAfN,EAAMM,OAAwC,KAAhBN,EAAMM,QAC9DN,EAAMO,SAAS,SAIbP,EAAMQ,SAASC,OAAOC,GAAG,eAAgB,CAC3CV,EAAMQ,SAASD,SAAS,YACxB,IAAII,GAASX,EAAMQ,SAASC,OAAOG,QACnCZ,GAAML,MAAMgB,MAIhBvC,EAAEyC,UACDC,GAAG,SAAU,iCAAkC,WAAa1C,EAAEqB,MAAMsB,SACpED,GAAG,gBAAiB,gBAAiB,SAASE,GAC1C3C,EAAQ2C,IACT5C,EAAEqB,MAAMY,YAAY,WAGvBS,GAAG,eAAgB,gBAAiB,WACnC,GAAId,GAAQ5B,EAAEqB,KACK,MAAhBO,EAAMM,MACPN,EAAMO,SAAS,SAEfP,EAAMK,YAAY,WAGrBS,GAAG,QAAS,kCAAmC,WAC9C1C,EAAEqB,MAAMwB,KAAK,SAASV,SAAS,WAEhCO,GAAG,OAAQ,kCAAmC,WAC7C1C,EAAEqB,MAAMwB,KAAK,SAASZ,YAAY,WAEnCS,GAAG,SAAU,8CAA+C,WAC3D,GAAII,GAAQ,EACZ9C,GAAE2B,KAAK3B,EAAEqB,MAAM,GAAG0B,MAAO,SAASC,EAAGC,GACnCC,QAAQC,IAAIF,GACZH,GAASG,EAAKG,KAAO,OAEvBN,EAAQA,EAAMO,UAAU,EAAGP,EAAMQ,OAAS,GACtCR,EACF9C,EAAEqB,MAAMkC,OAAOtB,YAAY,SAE3BjC,EAAEqB,MAAMkC,OAAOpB,SAAS,SAE1BnC,EAAEqB,MAAMkC,OAAOrB,IAAIY,MAGvBU,QAAW,SAASpC,GAClBpB,EAAEwD,SAASC,OAAU,EAAarC,EAAWC,KAAKT,QAAQC,eAE5D6C,KAAQ,WACNrC,KAAKmC,UACLnC,KAAKK,QACLL,KAAKF,WACLE,KAAKG,eACLH,KAAKI,QAEDgB,SAASkB,QACXlB,SAASkB,OAAO,0BAA2B,WACzC3D,EAAEW,SAAS+C,SAKf,WAEE,GAAIE,GAAUC,YAAY,WACxB7D,EAAE,yBAAyB2B,KAAK,WAC1B3B,EAAEqB,MAAMa,OAASlC,EAAEqB,MAAMa,QAAUlC,EAAEqB,MAAMW,KAAK,UAClDhC,EAAEqB,MAAMyC,QAAQ,aAGnB,IAEHC,YAAW,WACTC,cAAcJ,IACb,IAEH,IAAIK,EACJjE,GAAEyC,UACDC,GAAG,QAAS,QAAS,WACpB,GAAIwB,GAAUlE,EAAEqB,MAAM8C,QAAQ,QAAQtB,KAAK,QAC3CoB,GAAUJ,YAAY,WACpBK,EAAQvC,KAAK,WACP3B,EAAEqB,MAAMa,QAAUlC,EAAEqB,MAAMW,KAAK,UACjChC,EAAEqB,MAAMyC,QAAQ,aAGnB,OAEJpB,GAAG,OAAQ,QAAS,WACnBsB,cAAcC,WAOrBG"}

255
dist/js/ripples.js vendored
View File

@ -1,179 +1,130 @@
/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */
/* globals CustomEvent */
window.ripples = {
init : function(withRipple) {
"use strict";
/* globals jQuery, navigator */
// Cross browser matches function
function matchesSelector(domElement, selector) {
var matches = domElement.matches ||
domElement.matchesSelector ||
domElement.webkitMatchesSelector ||
domElement.mozMatchesSelector ||
domElement.msMatchesSelector ||
domElement.oMatchesSelector;
return matches.call(domElement, selector);
}
(function($) {
$.ripples = function(options) {
// animations time
var rippleOutTime = 100,
rippleStartTime = 500;
// Helper to bind events on dynamically created elements
var bind = function(events, selector, callback) {
if (typeof events === "string") {
events = [events];
}
events.forEach(function(event) {
document.addEventListener(event, function(e) {
var target = (typeof e.detail !== "number") ? e.detail : e.target;
if (matchesSelector(target, selector)) {
callback(e, target);
}
});
});
// Default options
var defaultOptions = {
"target": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"
};
var rippleStart = function(e, target, callback) {
// Init variables
var $rippleWrapper = target,
$el = $rippleWrapper.parentNode,
$ripple = document.createElement("div"),
elPos = $el.getBoundingClientRect(),
// Mouse pos in most cases
mousePos = {x: e.clientX - elPos.left, y: ((window.ontouchstart) ? e.clientY - window.scrollY: e.clientY) - elPos.top},
scale = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
_rippleOpacity = 0.3,
refreshElementStyle;
// If multitouch is detected or some other black magic suff is happening...
if (e.touches) {
mousePos = {x: e.touches[0].clientX - elPos.left, y: e.touches[0].clientY - elPos.top};
function isTouch() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
$ripplecache = $ripple;
// Set ripple class
$ripple.className = "ripple";
// Fade out the ripple and then destroy it
function rippleOut(ripple) {
// Move ripple to the mouse position
$ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
// Unbind events from ripple
ripple.off();
// Get the clicked target's text color, this will be applied to the ripple as background-color.
var targetColor = window.getComputedStyle($el).color;
// Start the out animation
ripple.addClass("ripple-out");
// Convert the rgb color to an rgba color with opacity set to __rippleOpacity__
targetColor = targetColor.replace("rgb", "rgba").replace(")", ", " + _rippleOpacity + ")");
// This function is called when the transition "out" ends
ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
ripple.remove();
});
// Insert new ripple into ripple wrapper
$rippleWrapper.appendChild($ripple);
}
// Make sure the ripple has the class applied (ugly hack but it works)
refreshElementStyle = window.getComputedStyle($ripple).opacity;
// Apply custom options
options = $.extend(defaultOptions, options);
// Let other funtions know that this element is animating
$ripple.dataset.animating = 1;
// Set scale value, background-color and opacity to ripple and animate it
$ripple.className = "ripple ripple-on";
$(document)
.on("mousedown touchstart", options.target, function(e) {
if (isTouch() && e.type == "mousedown") {
return false;
}
// Prepare the style of the ripple
var rippleStyle = [
$ripple.getAttribute("style"),
"background-color: " + targetColor,
"-ms-transform: " + scale,
"-moz-transform" + scale,
"-webkit-transform" + scale,
"transform: " + scale
];
var element = $(this);
// Apply the style
$ripple.setAttribute("style", rippleStyle.join(";"));
// If the ripple wrapper does not exists, create it
if (!$(this).find(".ripple-wrapper").length) {
$(this).append("<div class=ripple-wrapper></div>");
}
// This function is called when the animation is finished
var wrapper = $(this).find(".ripple-wrapper");
var wrapperOffset = wrapper.offset(),
relX,
relY;
if (!isTouch()) {
// Get the mouse position relative to the ripple wrapper
relX = e.pageX - wrapperOffset.left;
relY = e.pageY - wrapperOffset.top;
} else {
// Make sure the user is using only one finger and then get the touch position relative to the ripple wrapper
e = e.originalEvent;
if (e.touches.length === 1) {
relX = e.touches[0].pageX - wrapperOffset.left;
relY = e.touches[0].pageY - wrapperOffset.top;
} else {
return;
}
}
// Meet the new ripple
var ripple = $("<div></div>");
// Add to it the ripple class
ripple.addClass("ripple");
// Position it in the right place
ripple.css({"left": relX, "top": relY});
// Set the background color of the ripple
ripple.css({"background-color": window.getComputedStyle($(this)[0]).color});
// Spawn it
wrapper.append(ripple);
// Make sure the ripple has the styles applied (ugly hack but it works)
(function() { return window.getComputedStyle(ripple[0]).opacity; })();
// Set the new size
var size = (Math.max($(this).outerWidth(), $(this).outerHeight()) / ripple.outerWidth()) * 2.5;
ripple.css({
"-ms-transform": "scale(" + size + ")",
"-moz-transform": "scale(" + size + ")",
"-webkit-transform": "scale(" + size + ")",
"transform": "scale(" + size + ")"
});
// Start the transition
ripple.addClass("ripple-on");
ripple.data("animating", "on");
ripple.data("mousedown", "on");
// This function is called when the transition "on" ends
setTimeout(function() {
// Let know to other functions that this element has finished the animation
$ripple.dataset.animating = 0;
document.dispatchEvent(rippleEnd);
if (callback) {
callback();
ripple.data("animating", "off");
if (ripple.data("mousedown") == "off") {
rippleOut(ripple);
}
}, 500);
}, rippleStartTime);
// On mouseup or on mouseleave, set the mousedown flag to "off" and try to destroy the ripple
element.on("mouseup mouseleave", function() {
ripple.data("mousedown", "off");
// If the transition "on" is finished then we can destroy the ripple with transition "out"
if (ripple.data("animating") == "off") {
rippleOut(ripple);
}
});
});
};
var rippleOut = function($ripple) {
// Clear previous animation
$ripple.className = "ripple ripple-on ripple-out";
// Let ripple fade out (with CSS)
setTimeout(function() {
$ripple.remove();
}, rippleOutTime);
$.fn.ripples = function() {
$.ripples({"target": $(this)});
};
// Helper, need to know if mouse is up or down
var mouseDown = false;
bind(["mousedown", "touchstart"], "*", function() {
mouseDown = true;
});
bind(["mouseup", "touchend", "mouseout"], "*", function() {
mouseDown = false;
});
// Append ripple wrapper if not exists already
var rippleInit = function(e, target) {
if (target.getElementsByClassName("ripple-wrapper").length === 0) {
target.className += " withripple";
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();
});
}
}
};
var $ripplecache;
// Events handler
// init RippleJS and start ripple effect on mousedown
bind(["mouseover", "touchstart"], withRipple, rippleInit);
// start ripple effect on mousedown
bind(["mousedown", "touchstart"], ".ripple-wrapper", function(e, $ripple) {
// Start ripple only on left or middle mouse click and touch click
if (e.which === 0 || e.which === 1 || e.which === 2) {
rippleStart(e, $ripple);
}
});
// if animation ends and user is not holding mouse then destroy the ripple
bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) {
var $ripples = $ripple.parentNode.getElementsByClassName("ripple");
if (!mouseDown || ( $ripples[0] == $ripple && $ripples.length > 1)) {
rippleOut($ripple);
}
});
// Destroy ripple when mouse is not holded anymore if the ripple still exists
bind(["mouseup", "touchend", "mouseout"], ".ripple-wrapper", function() {
var $ripple = $ripplecache;
if ($ripple && $ripple.dataset.animating != 1) {
rippleOut($ripple);
}
});
}
};
})(jQuery);

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

@ -1 +1,2 @@
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)})}};
!function(a){a.ripples=function(b){function c(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)}function d(a){a.off(),a.addClass("ripple-out"),a.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){a.remove()})}var e={target:".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"};b=a.extend(e,b),a(document).on("mousedown touchstart",b.target,function(b){if(c()&&"mousedown"==b.type)return!1;var e=a(this);a(this).find(".ripple-wrapper").length||a(this).append("<div class=ripple-wrapper></div>");var f,g,h=a(this).find(".ripple-wrapper"),i=h.offset();if(c()){if(b=b.originalEvent,1!==b.touches.length)return;f=b.touches[0].pageX-i.left,g=b.touches[0].pageY-i.top}else f=b.pageX-i.left,g=b.pageY-i.top;var j=a("<div></div>");j.addClass("ripple"),j.css({left:f,top:g}),j.css({"background-color":window.getComputedStyle(a(this)[0]).color}),h.append(j),function(){return window.getComputedStyle(j[0]).opacity}();var k=Math.max(a(this).outerWidth(),a(this).outerHeight())/j.outerWidth()*2.5;j.css({"-ms-transform":"scale("+k+")","-moz-transform":"scale("+k+")","-webkit-transform":"scale("+k+")",transform:"scale("+k+")"}),j.addClass("ripple-on"),j.data("animating","on"),j.data("mousedown","on"),setTimeout(function(){j.data("animating","off"),"off"==j.data("mousedown")&&d(j)},500),e.on("mouseup mouseleave",function(){j.data("mousedown","off"),"off"==j.data("animating")&&d(j)})})},a.fn.ripples=function(){a.ripples({target:a(this)})}}(jQuery);
//# sourceMappingURL=ripples.min.js.map

1
dist/js/ripples.min.js.map vendored Normal file
View File

@ -0,0 +1 @@
{"version":3,"file":"ripples.min.js","sources":["ripples.js"],"names":["$","ripples","options","isTouch","test","navigator","userAgent","rippleOut","ripple","off","addClass","on","remove","defaultOptions","target","extend","document","e","type","element","this","find","length","append","relX","relY","wrapper","wrapperOffset","offset","originalEvent","touches","pageX","left","pageY","top","css","background-color","window","getComputedStyle","color","opacity","size","Math","max","outerWidth","outerHeight","-ms-transform","-moz-transform","-webkit-transform","transform","data","setTimeout","fn","jQuery"],"mappings":"CAGA,SAAUA,GACRA,EAAEC,QAAU,SAASC,GAQnB,QAASC,KACP,MAAO,iEAAiEC,KAAKC,UAAUC,WAKzF,QAASC,GAAUC,GAGjBA,EAAOC,MAGPD,EAAOE,SAAS,cAGhBF,EAAOG,GAAG,mEAAoE,WAC5EH,EAAOI,WArBX,GAAIC,IACFC,OAAU,gHA0BZZ,GAAUF,EAAEe,OAAOF,EAAgBX,GAGnCF,EAAEgB,UACDL,GAAG,uBAAwBT,EAAQY,OAAQ,SAASG,GACnD,GAAId,KAAuB,aAAVc,EAAEC,KACjB,OAAO,CAGT,IAAIC,GAAUnB,EAAEoB,KAGXpB,GAAEoB,MAAMC,KAAK,mBAAmBC,QACnCtB,EAAEoB,MAAMG,OAAO,mCAGjB,IAIIC,GACAC,EALAC,EAAU1B,EAAEoB,MAAMC,KAAK,mBAGvBM,EAAgBD,EAAQE,QAG5B,IAAKzB,IAIE,CAGL,GADAc,EAAIA,EAAEY,cACmB,IAArBZ,EAAEa,QAAQR,OAIZ,MAHAE,GAAOP,EAAEa,QAAQ,GAAGC,MAAQJ,EAAcK,KAC1CP,EAAOR,EAAEa,QAAQ,GAAGG,MAAQN,EAAcO,QAP5CV,GAAOP,EAAEc,MAAQJ,EAAcK,KAC/BP,EAAOR,EAAEgB,MAAQN,EAAcO,GAajC,IAAI1B,GAASR,EAAE,cAGfQ,GAAOE,SAAS,UAGhBF,EAAO2B,KAAKH,KAAQR,EAAMU,IAAOT,IAGjCjB,EAAO2B,KAAKC,mBAAoBC,OAAOC,iBAAiBtC,EAAEoB,MAAM,IAAImB,QAGpEb,EAAQH,OAAOf,GAGf,WAAc,MAAO6B,QAAOC,iBAAiB9B,EAAO,IAAIgC,UAGxD,IAAIC,GAAQC,KAAKC,IAAI3C,EAAEoB,MAAMwB,aAAc5C,EAAEoB,MAAMyB,eAAiBrC,EAAOoC,aAAgB,GAE3FpC,GAAO2B,KACLW,gBAAiB,SAAWL,EAAO,IACnCM,iBAAkB,SAAWN,EAAO,IACpCO,oBAAqB,SAAWP,EAAO,IACvCQ,UAAa,SAAWR,EAAO,MAIjCjC,EAAOE,SAAS,aAChBF,EAAO0C,KAAK,YAAa,MACzB1C,EAAO0C,KAAK,YAAa,MAGzBC,WAAW,WACT3C,EAAO0C,KAAK,YAAa,OACO,OAA5B1C,EAAO0C,KAAK,cACd3C,EAAUC,IAEX,KAGHW,EAAQR,GAAG,qBAAsB,WAC/BH,EAAO0C,KAAK,YAAa,OAEO,OAA5B1C,EAAO0C,KAAK,cACd3C,EAAUC,QAQlBR,EAAEoD,GAAGnD,QAAU,WACbD,EAAEC,SAASa,OAAUd,EAAEoB,UAGxBiC"}

2659
index.html
View File

File diff suppressed because it is too large Load Diff

4
less/_buttons.less
View File

@ -76,6 +76,9 @@
.open > .dropdown-toggle.btn {
.variations(~"", background-color, @btn-default);
}
.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
margin-left: 0;
}
.btn-group, .btn-group-vertical {
position: relative;
border-radius: 2px;
@ -92,7 +95,6 @@
box-shadow: none !important;
margin: 0;
}
.btn:active .caret { margin-left: -1px; }
}
.btn-group-flat {
box-shadow: none !important;

3
less/_mixins.less
View File

@ -35,6 +35,9 @@
&-material-indigo@{extra} {
@{property}: @indigo;
}
&-material-blue@{extra} {
@{property}: @blue;
}
&-material-lightblue@{extra} {
@{property}: @lightblue;
}

19
less/_plugin-dropdownjs.less Normal file
View File

@ -0,0 +1,19 @@
.dropdownjs:after {
right: 5px;
top: 3px;
font-size: 25px;
position: absolute;
content: "\e894";
font-family: "Material-Design-Icons";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
pointer-events: none;
color: #757575;
}

68
less/_togglebutton.less Normal file
View File

@ -0,0 +1,68 @@
.togglebutton {
vertical-align: middle;
&, * {
user-select: none;
}
label {
font-weight: 400;
cursor: pointer;
// Hide original checkbox
input[type=checkbox]:first-child {
opacity: 0;
width: 0;
height:0;
}
// Switch bg on
input[type=checkbox]:first-child:checked + .toggle {
background-color: rgba(0, 149, 135, 0.5);
// Handle on
&:after {
background-color: #009587;
}
}
// Switch bg off and disabled
.toggle,
input[type=checkbox][disabled]:first-child + .toggle {
content: "";
display: inline-block;
width: 30px;
height: 15px;
background-color: rgba(80, 80, 80, 0.7);
border-radius: 15px;
margin-right: 10px;
transition: background 0.3s ease;
vertical-align: middle;
}
// Handle off
.toggle:after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: #F1F1F1;
border-radius: 20px;
position: relative;
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4);
left: -5px;
top: -2px;
transition: left 0.3s ease, background 0.3s ease, box-shadow 0.1s ease;
}
// Handle disabled
input[type=checkbox][disabled]:first-child + .toggle:after,
input[type=checkbox][disabled]:checked:first-child + .toggle:after{
background-color: #BDBDBD;
}
// Ripple on
input[type=checkbox]:first-child:checked ~ .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 149, 135, 0.1);
}
// Ripple off and disabled
input[type=checkbox]:first-child ~ .toggle:active:after,
input[type=checkbox][disabled]:first-child ~ .toggle:active:after {
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba(0, 0, 0, 0.1);
}
input[type=checkbox]:first-child:checked + .toggle:after {
left: 15px;
}
}
}

3
less/_variables.less
View File

@ -7,6 +7,7 @@
@purple: #9C27B0;
@deeppurple: #673AB7;
@indigo: #3F51B5;
@blue: #4285f4;
@lightblue: #03A9F4;
@cyan: #00BCD4;
@teal: #009688;
@ -21,7 +22,7 @@
@lightgrey: #ECECEC;
// Bootstrap shades
@primary: #4285F4;
@primary: #009587;
@success: #0F9D58;
@info: @lightblue;
@warning: @deeporange;

20
less/material.less
View File

@ -33,6 +33,9 @@ h5, h6{
// Checkboxes
@import "_checkboxes.less";
// Toggle buttons
@import "_togglebutton.less";
// Radios
@import "_radios.less";
@ -103,7 +106,24 @@ legend {
@import "_panels.less";
.modal {
background: rgba(0,0,0,0.3);
}
// Prevent highlight on mobile
* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
&:focus {
outline: 0;
border:none;
color: rgba(0, 0, 0, 0);
}
}
// External plugins
@import "_plugin-snackbarjs.less";
@import "_plugin-nouislider.less";
@import "_plugin-selectize.less";
@import "_plugin-dropdownjs.less";

5
less/ripples.less
View File

@ -9,7 +9,8 @@
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 2px;
border-radius: inherit;
pointer-events: none;
}
.ripple {
position: absolute;
@ -26,7 +27,7 @@
}
.ripple.ripple-on {
transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
opacity: 1;
opacity: 0.15;
}
.ripple.ripple-out {
transition: opacity 0.1s linear 0s !important;

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bootstrap-material",
"version": "0.1.5",
"version": "0.2.0",
"description": "Material Design for Bootstrap 3",
"main": "index.js",
"scripts": {

13
scripts/material.js
View File

@ -1,4 +1,4 @@
/* globals jQuery, ripples */
/* globals jQuery */
(function($) {
// Selector to select only not already processed elements
@ -31,6 +31,7 @@
].join(","),
"inputElements": "input.form-control, textarea.form-control, select.form-control",
"checkboxElements": ".checkbox > label > input[type=checkbox]",
"togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
"radioElements": ".radio > label > input[type=radio]"
},
"checkbox": function(selector) {
@ -40,6 +41,13 @@
.data("mdproc", true)
.after("<span class=ripple></span><span class=check></span>");
},
"togglebutton": function(selector) {
// Add fake-checkbox to material checkboxes
$((selector) ? selector : this.options.togglebuttonElements)
.filter(":notmdproc")
.data("mdproc", true)
.after("<span class=toggle></span>");
},
"radio": function(selector) {
// Add fake-radio to material radios
$((selector) ? selector : this.options.radioElements)
@ -118,12 +126,13 @@
});
},
"ripples": function(selector) {
ripples.init((selector) ? selector : this.options.withRipples);
$.ripples({"target": (selector) ? selector : this.options.withRipples});
},
"init": function() {
this.ripples();
this.input();
this.checkbox();
this.togglebutton();
this.radio();
if (document.arrive) {

261
scripts/ripples.js
View File

@ -1,189 +1,130 @@
/* 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";
/* globals jQuery, navigator */
if (this.done) {
return console.log("Ripples.js was already initialzied.");
}
(function($) {
$.ripples = function(options) {
this.done = true;
// Cross browser matches function
function matchesSelector(domElement, selector) {
var matches = domElement.matches ||
domElement.matchesSelector ||
domElement.webkitMatchesSelector ||
domElement.mozMatchesSelector ||
domElement.msMatchesSelector ||
domElement.oMatchesSelector;
return matches.call(domElement, selector);
}
// animations time
var rippleOutTime = 100,
rippleStartTime = 500;
// Helper to bind events on dynamically created elements
var bind = function(events, selector, callback) {
if (typeof events === "string") {
events = [events];
}
events.forEach(function(event) {
document.addEventListener(event, function(e) {
var target = (typeof e.detail !== "number") ? e.detail : e.target;
if (matchesSelector(target, selector)) {
callback(e, target);
}
});
});
// Default options
var defaultOptions = {
"target": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"
};
var rippleStart = function(e, target, callback) {
// Init variables
var $rippleWrapper = target,
$el = $rippleWrapper.parentNode,
$ripple = document.createElement("div"),
elPos = $el.getBoundingClientRect(),
// Mouse pos in most cases
mousePos = {x: e.clientX - elPos.left, y: ((window.ontouchstart) ? e.clientY - window.scrollY: e.clientY) - elPos.top},
scale = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
_rippleOpacity = 0.3,
refreshElementStyle;
// If multitouch is detected or some other black magic suff is happening...
if (e.touches) {
mousePos = {x: e.touches[0].clientX - elPos.left, y: e.touches[0].clientY - elPos.top};
function isTouch() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
$ripplecache = $ripple;
// Set ripple class
$ripple.className = "ripple";
// Fade out the ripple and then destroy it
function rippleOut(ripple) {
// Move ripple to the mouse position
$ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;");
// Unbind events from ripple
ripple.off();
// Get the clicked target's text color, this will be applied to the ripple as background-color.
var targetColor = window.getComputedStyle($el).color;
// Start the out animation
ripple.addClass("ripple-out");
// 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 + ")";
// This function is called when the transition "out" ends
ripple.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
ripple.remove();
});
}
// Apply custom options
options = $.extend(defaultOptions, options);
$(document)
.on("mousedown touchstart", options.target, function(e) {
if (isTouch() && e.type == "mousedown") {
return false;
}
var element = $(this);
// If the ripple wrapper does not exists, create it
if (!$(this).find(".ripple-wrapper").length) {
$(this).append("<div class=ripple-wrapper></div>");
}
var wrapper = $(this).find(".ripple-wrapper");
var wrapperOffset = wrapper.offset(),
relX,
relY;
if (!isTouch()) {
// Get the mouse position relative to the ripple wrapper
relX = e.pageX - wrapperOffset.left;
relY = e.pageY - wrapperOffset.top;
} else {
targetColor = targetColor.replace("rgb", "rgba").replace(")", ", " + _rippleOpacity + ")");
// Make sure the user is using only one finger and then get the touch position relative to the ripple wrapper
e = e.originalEvent;
if (e.touches.length === 1) {
relX = e.touches[0].pageX - wrapperOffset.left;
relY = e.touches[0].pageY - wrapperOffset.top;
} else {
return;
}
}
// Insert new ripple into ripple wrapper
$rippleWrapper.appendChild($ripple);
// Meet the new ripple
var ripple = $("<div></div>");
// Make sure the ripple has the class applied (ugly hack but it works)
refreshElementStyle = window.getComputedStyle($ripple).opacity;
// Add to it the ripple class
ripple.addClass("ripple");
// Let other funtions know that this element is animating
$ripple.dataset.animating = 1;
// Position it in the right place
ripple.css({"left": relX, "top": relY});
// Set scale value, background-color and opacity to ripple and animate it
$ripple.className = "ripple ripple-on";
// Set the background color of the ripple
ripple.css({"background-color": window.getComputedStyle($(this)[0]).color});
// Prepare the style of the ripple
var rippleStyle = [
$ripple.getAttribute("style"),
"background-color: " + targetColor,
"-ms-transform: " + scale,
"-moz-transform" + scale,
"-webkit-transform" + scale,
"transform: " + scale
];
// Spawn it
wrapper.append(ripple);
// Apply the style
$ripple.setAttribute("style", rippleStyle.join(";"));
// Make sure the ripple has the styles applied (ugly hack but it works)
(function() { return window.getComputedStyle(ripple[0]).opacity; })();
// This function is called when the animation is finished
// Set the new size
var size = (Math.max($(this).outerWidth(), $(this).outerHeight()) / ripple.outerWidth()) * 2.5;
ripple.css({
"-ms-transform": "scale(" + size + ")",
"-moz-transform": "scale(" + size + ")",
"-webkit-transform": "scale(" + size + ")",
"transform": "scale(" + size + ")"
});
// Start the transition
ripple.addClass("ripple-on");
ripple.data("animating", "on");
ripple.data("mousedown", "on");
// This function is called when the transition "on" ends
setTimeout(function() {
// Let know to other functions that this element has finished the animation
$ripple.dataset.animating = 0;
document.dispatchEvent(rippleEnd);
if (callback) {
callback();
ripple.data("animating", "off");
if (ripple.data("mousedown") == "off") {
rippleOut(ripple);
}
}, 500);
}, rippleStartTime);
// On mouseup or on mouseleave, set the mousedown flag to "off" and try to destroy the ripple
element.on("mouseup mouseleave", function() {
ripple.data("mousedown", "off");
// If the transition "on" is finished then we can destroy the ripple with transition "out"
if (ripple.data("animating") == "off") {
rippleOut(ripple);
}
});
});
};
var rippleOut = function($ripple) {
// Clear previous animation
$ripple.className = "ripple ripple-on ripple-out";
// Let ripple fade out (with CSS)
setTimeout(function() {
$ripple.remove();
}, rippleOutTime);
$.fn.ripples = function() {
$.ripples({"target": $(this)});
};
// Helper, need to know if mouse is up or down
var mouseDown = false;
bind(["mousedown", "touchstart"], "*", function() {
mouseDown = true;
});
bind(["mouseup", "touchend", "mouseout"], "*", function() {
mouseDown = false;
});
// Append ripple wrapper if not exists already
var rippleInit = function(e, target) {
if (target.getElementsByClassName("ripple-wrapper").length === 0) {
target.className += " withripple";
var $rippleWrapper = document.createElement("div");
$rippleWrapper.className = "ripple-wrapper";
target.appendChild($rippleWrapper);
}
};
var $ripplecache;
// Events handler
// init RippleJS and start ripple effect on mousedown
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) {
// Start ripple only on left or middle mouse click and touch click
if (e.which === 0 || e.which === 1 || e.which === 2) {
rippleStart(e, $ripple);
}
});
// if animation ends and user is not holding mouse then destroy the ripple
bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) {
var $ripples = $ripple.parentNode.getElementsByClassName("ripple");
if (!mouseDown || ( $ripples[0] == $ripple && $ripples.length > 1)) {
rippleOut($ripple);
}
});
// Destroy ripple when mouse is not holded anymore if the ripple still exists
bind(["mouseup", "touchend", "mouseout"], ".ripple-wrapper", function() {
var $ripple = $ripplecache;
if ($ripple && $ripple.dataset.animating != 1) {
rippleOut($ripple);
}
});
}
};
})(jQuery);