From db3e1e9fcb6778e1a95d6a591ab866b2ca3ba8ce Mon Sep 17 00:00:00 2001 From: Federico Zivolo Date: Fri, 26 Sep 2014 13:29:07 +0200 Subject: [PATCH] updated demo --- index.html | 3 +- material/material.css | 976 +++++++++++++++++++++++------------------- material/material.js | 74 ++-- material/ripples.js | 2 +- 4 files changed, 578 insertions(+), 477 deletions(-) diff --git a/index.html b/index.html index 5364074d..25f07d06 100644 --- a/index.html +++ b/index.html @@ -509,7 +509,7 @@

Icons

Material Design for Bootstrap includes 490 original Material Design icons!
These icons are extracted from the original Google sources and are licensed under BSD license.
- Them are provided as an iconic font easy to use. + They are provided as an iconic font for easy use.

Variations are available for every icon, included for the original Bootstrap icons.

Example:

@@ -1879,6 +1879,7 @@ +

Panels

diff --git a/material/material.css b/material/material.css index d87a7a94..32567c97 100644 --- a/material/material.css +++ b/material/material.css @@ -71,6 +71,326 @@ h6, .h6 { font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; } +body .well, +.container .well, +.container-fluid .well, +body .well:not([class^="well well-material-"]), +.container .well:not([class^="well well-material-"]), +.container-fluid .well:not([class^="well well-material-"]), +body .well .form-control, +.container .well .form-control, +.container-fluid .well .form-control, +body .well:not([class^="well well-material-"]) .form-control, +.container .well:not([class^="well well-material-"]) .form-control, +.container-fluid .well:not([class^="well well-material-"]) .form-control { + color: rgba(0, 0, 0, 0.84); +} +body .well .floating-label, +.container .well .floating-label, +.container-fluid .well .floating-label, +body .well:not([class^="well well-material-"]) .floating-label, +.container .well:not([class^="well well-material-"]) .floating-label, +.container-fluid .well:not([class^="well well-material-"]) .floating-label { + color: #7e7e7e; +} +body .well .form-control, +.container .well .form-control, +.container-fluid .well .form-control, +body .well:not([class^="well well-material-"]) .form-control, +.container .well:not([class^="well well-material-"]) .form-control, +.container-fluid .well:not([class^="well well-material-"]) .form-control { + border-bottom-color: #7e7e7e; +} +body .well .form-control::-webkit-input-placeholder, +.container .well .form-control::-webkit-input-placeholder, +.container-fluid .well .form-control::-webkit-input-placeholder, +body .well:not([class^="well well-material-"]) .form-control::-webkit-input-placeholder, +.container .well:not([class^="well well-material-"]) .form-control::-webkit-input-placeholder, +.container-fluid .well:not([class^="well well-material-"]) .form-control::-webkit-input-placeholder { + color: #7e7e7e; +} +body .well .form-control::-moz-placeholder, +.container .well .form-control::-moz-placeholder, +.container-fluid .well .form-control::-moz-placeholder, +body .well:not([class^="well well-material-"]) .form-control::-moz-placeholder, +.container .well:not([class^="well well-material-"]) .form-control::-moz-placeholder, +.container-fluid .well:not([class^="well well-material-"]) .form-control::-moz-placeholder { + color: #7e7e7e; + opacity: 1; +} +body .well .form-control:-ms-input-placeholder, +.container .well .form-control:-ms-input-placeholder, +.container-fluid .well .form-control:-ms-input-placeholder, +body .well:not([class^="well well-material-"]) .form-control:-ms-input-placeholder, +.container .well:not([class^="well well-material-"]) .form-control:-ms-input-placeholder, +.container-fluid .well:not([class^="well well-material-"]) .form-control:-ms-input-placeholder { + color: #7e7e7e; +} +body .well .option, +.container .well .option, +.container-fluid .well .option, +body .well:not([class^="well well-material-"]) .option, +.container .well:not([class^="well well-material-"]) .option, +.container-fluid .well:not([class^="well well-material-"]) .option, +body .well .create, +.container .well .create, +.container-fluid .well .create, +body .well:not([class^="well well-material-"]) .create, +.container .well:not([class^="well well-material-"]) .create, +.container-fluid .well:not([class^="well well-material-"]) .create { + color: rgba(0, 0, 0, 0.84); +} +body [class^="well well-material-"], +.container [class^="well well-material-"], +.container-fluid [class^="well well-material-"], +body [class^="well well-material-"] .form-control, +.container [class^="well well-material-"] .form-control, +.container-fluid [class^="well well-material-"] .form-control, +body [class^="well well-material-"] .floating-label, +.container [class^="well well-material-"] .floating-label, +.container-fluid [class^="well well-material-"] .floating-label { + color: rgba(255, 255, 255, 0.84); +} +body [class^="well well-material-"] .form-control, +.container [class^="well well-material-"] .form-control, +.container-fluid [class^="well well-material-"] .form-control { + border-bottom-color: rgba(255, 255, 255, 0.84); +} +body [class^="well well-material-"] .form-control::-webkit-input-placeholder, +.container [class^="well well-material-"] .form-control::-webkit-input-placeholder, +.container-fluid [class^="well well-material-"] .form-control::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.84); +} +body [class^="well well-material-"] .form-control::-moz-placeholder, +.container [class^="well well-material-"] .form-control::-moz-placeholder, +.container-fluid [class^="well well-material-"] .form-control::-moz-placeholder { + color: rgba(255, 255, 255, 0.84); + opacity: 1; +} +body [class^="well well-material-"] .form-control:-ms-input-placeholder, +.container [class^="well well-material-"] .form-control:-ms-input-placeholder, +.container-fluid [class^="well well-material-"] .form-control:-ms-input-placeholder { + color: rgba(255, 255, 255, 0.84); +} +body [class^="well well-material-"] .option, +.container [class^="well well-material-"] .option, +.container-fluid [class^="well well-material-"] .option, +body [class^="well well-material-"] .create, +.container [class^="well well-material-"] .create, +.container-fluid [class^="well well-material-"] .create { + color: rgba(0, 0, 0, 0.84); +} +body .well, +.container .well, +.container-fluid .well, +body .jumbotron, +.container .jumbotron, +.container-fluid .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); + border-radius: 2px; + border: 0; +} +body .well p, +.container .well p, +.container-fluid .well p, +body .jumbotron p, +.container .jumbotron p, +.container-fluid .jumbotron p { + font-weight: 300; +} +body .well, +.container .well, +.container-fluid .well, +body .jumbotron, +.container .jumbotron, +.container-fluid .jumbotron, +body .well-default, +.container .well-default, +.container-fluid .well-default, +body .jumbotron-default, +.container .jumbotron-default, +.container-fluid .jumbotron-default { + background-color: #ffffff; +} +body .well-primary, +.container .well-primary, +.container-fluid .well-primary, +body .jumbotron-primary, +.container .jumbotron-primary, +.container-fluid .jumbotron-primary { + background-color: #4285f4; +} +body .well-success, +.container .well-success, +.container-fluid .well-success, +body .jumbotron-success, +.container .jumbotron-success, +.container-fluid .jumbotron-success { + background-color: #0f9d58; +} +body .well-info, +.container .well-info, +.container-fluid .well-info, +body .jumbotron-info, +.container .jumbotron-info, +.container-fluid .jumbotron-info { + background-color: #03a9f4; +} +body .well-warning, +.container .well-warning, +.container-fluid .well-warning, +body .jumbotron-warning, +.container .jumbotron-warning, +.container-fluid .jumbotron-warning { + background-color: #ff5722; +} +body .well-danger, +.container .well-danger, +.container-fluid .well-danger, +body .jumbotron-danger, +.container .jumbotron-danger, +.container-fluid .jumbotron-danger { + background-color: #f44336; +} +body .well-material-red, +.container .well-material-red, +.container-fluid .well-material-red, +body .jumbotron-material-red, +.container .jumbotron-material-red, +.container-fluid .jumbotron-material-red { + background-color: #f44336; +} +body .well-material-pink, +.container .well-material-pink, +.container-fluid .well-material-pink, +body .jumbotron-material-pink, +.container .jumbotron-material-pink, +.container-fluid .jumbotron-material-pink { + background-color: #e91e63; +} +body .well-material-purple, +.container .well-material-purple, +.container-fluid .well-material-purple, +body .jumbotron-material-purple, +.container .jumbotron-material-purple, +.container-fluid .jumbotron-material-purple { + background-color: #9c27b0; +} +body .well-material-deeppurple, +.container .well-material-deeppurple, +.container-fluid .well-material-deeppurple, +body .jumbotron-material-deeppurple, +.container .jumbotron-material-deeppurple, +.container-fluid .jumbotron-material-deeppurple { + background-color: #673ab7; +} +body .well-material-indigo, +.container .well-material-indigo, +.container-fluid .well-material-indigo, +body .jumbotron-material-indigo, +.container .jumbotron-material-indigo, +.container-fluid .jumbotron-material-indigo { + background-color: #3f51b5; +} +body .well-material-lightblue, +.container .well-material-lightblue, +.container-fluid .well-material-lightblue, +body .jumbotron-material-lightblue, +.container .jumbotron-material-lightblue, +.container-fluid .jumbotron-material-lightblue { + background-color: #03a9f4; +} +body .well-material-cyan, +.container .well-material-cyan, +.container-fluid .well-material-cyan, +body .jumbotron-material-cyan, +.container .jumbotron-material-cyan, +.container-fluid .jumbotron-material-cyan { + background-color: #00bcd4; +} +body .well-material-teal, +.container .well-material-teal, +.container-fluid .well-material-teal, +body .jumbotron-material-teal, +.container .jumbotron-material-teal, +.container-fluid .jumbotron-material-teal { + background-color: #009688; +} +body .well-material-lightgreen, +.container .well-material-lightgreen, +.container-fluid .well-material-lightgreen, +body .jumbotron-material-lightgreen, +.container .jumbotron-material-lightgreen, +.container-fluid .jumbotron-material-lightgreen { + background-color: #8bc34a; +} +body .well-material-lime, +.container .well-material-lime, +.container-fluid .well-material-lime, +body .jumbotron-material-lime, +.container .jumbotron-material-lime, +.container-fluid .jumbotron-material-lime { + background-color: #cddc39; +} +body .well-material-lightyellow, +.container .well-material-lightyellow, +.container-fluid .well-material-lightyellow, +body .jumbotron-material-lightyellow, +.container .jumbotron-material-lightyellow, +.container-fluid .jumbotron-material-lightyellow { + background-color: #ffeb3b; +} +body .well-material-orange, +.container .well-material-orange, +.container-fluid .well-material-orange, +body .jumbotron-material-orange, +.container .jumbotron-material-orange, +.container-fluid .jumbotron-material-orange { + background-color: #ff9800; +} +body .well-material-deeporange, +.container .well-material-deeporange, +.container-fluid .well-material-deeporange, +body .jumbotron-material-deeporange, +.container .jumbotron-material-deeporange, +.container-fluid .jumbotron-material-deeporange { + background-color: #ff5722; +} +body .well-material-grey, +.container .well-material-grey, +.container-fluid .well-material-grey, +body .jumbotron-material-grey, +.container .jumbotron-material-grey, +.container-fluid .jumbotron-material-grey { + background-color: #9e9e9e; +} +body .well-material-bluegrey, +.container .well-material-bluegrey, +.container-fluid .well-material-bluegrey, +body .jumbotron-material-bluegrey, +.container .jumbotron-material-bluegrey, +.container-fluid .jumbotron-material-bluegrey { + background-color: #607d8b; +} +body .well-material-brown, +.container .well-material-brown, +.container-fluid .well-material-brown, +body .jumbotron-material-brown, +.container .jumbotron-material-brown, +.container-fluid .jumbotron-material-brown { + background-color: #795548; +} +body .well-material-lightgrey, +.container .well-material-lightgrey, +.container-fluid .well-material-lightgrey, +body .jumbotron-material-lightgrey, +.container .jumbotron-material-lightgrey, +.container-fluid .jumbotron-material-lightgrey { + background-color: #ececec; +} .btn { position: relative; padding: 8px 30px; @@ -419,6 +739,10 @@ h6, .form-horizontal .checkbox { padding-top: 15px; } +.checkbox { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); +} .checkbox label { cursor: pointer; padding-left: 45px; @@ -560,7 +884,6 @@ h6, .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, @@ -718,8 +1041,7 @@ h6, left: 17px; width: 10px; height: 21px; - -ms-transform: rotate(45deg); - transform: rotate(45deg); + transform: rotate(45deg); border-color: #0f9d58; border-left-color: transparent; border-top-color: transparent; @@ -733,8 +1055,7 @@ h6, left: 17px; width: 4px; height: 4px; - -ms-transform: rotate(45deg); - transform: rotate(45deg); + transform: rotate(45deg); border-color: #5a5a5a; border-left-color: #5a5a5a; border-top-color: #5a5a5a; @@ -744,8 +1065,7 @@ h6, left: 12px; width: 18px; height: 18px; - -ms-transform: rotate(0deg); - transform: rotate(0deg); + transform: rotate(0deg); border-color: #5a5a5a; border-left-color: #5a5a5a; border-top-color: #5a5a5a; @@ -800,6 +1120,15 @@ h6, 100% { opacity: 0; } + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } } @-ms-keyframes rippleOn { 0% { @@ -811,6 +1140,15 @@ h6, 100% { opacity: 0; } + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } } @keyframes rippleOn { 0% { @@ -822,6 +1160,15 @@ h6, 100% { opacity: 0; } + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } } @-webkit-keyframes rippleOff { 0% { @@ -833,6 +1180,15 @@ h6, 100% { opacity: 0; } + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } } @-ms-keyframes rippleOn { 0% { @@ -844,6 +1200,15 @@ h6, 100% { opacity: 0; } + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } } @keyframes rippleOff { 0% { @@ -855,6 +1220,15 @@ h6, 100% { opacity: 0; } + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } } .form-horizontal .radio { margin-bottom: 10px; @@ -872,28 +1246,6 @@ h6, -webkit-transition-duration: 0.2s; transition-duration: 0.2s; } -.radio label .ripple { - background-color: rgba(0, 0, 0, 0.84); - left: 0; - top: -8px; - height: 34px; - width: 34px; - border-radius: 100%; - -webkit-transform: scale(0); - -ms-transform: scale(0); - transform: scale(0); - -webkit-transition: -webkit-transform .1s, opacity 0.2s 0.4s; - transition: transform .1s, opacity 0.2s 0.4s; - z-index: 1; - opacity: 0.2; - margin: 0; -} -.radio label .ripple.animate { - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - opacity: 0; -} .radio label .circle { border: 2px solid rgba(0, 0, 0, 0.84); height: 15px; @@ -906,9 +1258,34 @@ h6, 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 { + display: block; + position: absolute; + content: ""; + background-color: rgba(0, 0, 0, 0.84); + left: -18px; + top: -18px; + height: 50px; + width: 50px; + border-radius: 100%; + z-index: 1; + opacity: 0; + margin: 0; + -webkit-transform: scale(1.5); + transform: scale(1.5); +} +.radio label input[type=radio]:not(:checked) ~ .check:after { + -webkit-animation: rippleOff 500ms; + -ms-animation: rippleOff 500ms; + animation: rippleOff 500ms; +} +.radio label input[type=radio]:checked ~ .check:after { + -webkit-animation: rippleOn 500ms; + -ms-animation: rippleOn 500ms; + animation: rippleOn 500ms; +} .radio input[type=radio]:checked ~ .check, .radio-default input[type=radio]:checked ~ .check { background-color: rgba(0, 0, 0, 0.84); @@ -1058,7 +1435,6 @@ h6, } .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 { @@ -1067,6 +1443,126 @@ h6, .radio input[type=radio][disabled] ~ .check { background-color: rgba(0, 0, 0, 0.84); } +@-webkit-keyframes rippleOn { + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} +@-ms-keyframes rippleOn { + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} +@keyframes rippleOn { + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} +@-webkit-keyframes rippleOff { + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} +@-ms-keyframes rippleOn { + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} +@keyframes rippleOff { + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } + 0% { + opacity: 0; + } + 50% { + opacity: 0.2; + } + 100% { + opacity: 0; + } +} fieldset[disabled] .form-control, .form-control-wrapper .form-control, .form-control, @@ -1164,7 +1660,6 @@ select[multiple].form-control.focus { background-color: #5264ae; bottom: -1px; -webkit-transform: scaleX(0); - -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: -webkit-transform 0s; transition: transform 0s; @@ -1172,7 +1667,6 @@ select[multiple].form-control.focus { .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; @@ -1188,7 +1682,6 @@ select[multiple].form-control.focus { 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 { @@ -1208,9 +1701,6 @@ select[multiple].form-control.focus { animation-fill-mode: forwards; opacity: 0; } -.form-control-wrapper select ~ .material-input:before { - bottom: 1px; -} .form-control-wrapper select ~ .material-input:after { display: none; } @@ -1644,12 +2134,10 @@ select.form-control.focus { @-ms-keyframes input-highlight { 0% { left: 20%; - -ms-transform: scaleX(20%); - transform: scaleX(20%); + transform: scaleX(20%); } 99% { - -ms-transform: scaleX(0); - transform: scaleX(0); + transform: scaleX(0); left: 0; opacity: 1; } @@ -1687,405 +2175,6 @@ select.form-control.focus { legend { border-bottom: 0; } -body .well, -.container .well, -.container-fluid .well, -body .jumbotron, -.container .jumbotron, -.container-fluid .jumbotron { - background-color: #fff; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - border-radius: 2px; - border: 0; -} -body .well p, -.container .well p, -.container-fluid .well p, -body .jumbotron p, -.container .jumbotron p, -.container-fluid .jumbotron p { - font-weight: 300; -} -body .well, -.container .well, -.container-fluid .well, -body .jumbotron, -.container .jumbotron, -.container-fluid .jumbotron, -body .well-default, -.container .well-default, -.container-fluid .well-default, -body .jumbotron-default, -.container .jumbotron-default, -.container-fluid .jumbotron-default { - background-color: #ffffff; -} -body .well-primary, -.container .well-primary, -.container-fluid .well-primary, -body .jumbotron-primary, -.container .jumbotron-primary, -.container-fluid .jumbotron-primary { - background-color: #4285f4; -} -body .well-success, -.container .well-success, -.container-fluid .well-success, -body .jumbotron-success, -.container .jumbotron-success, -.container-fluid .jumbotron-success { - background-color: #0f9d58; -} -body .well-info, -.container .well-info, -.container-fluid .well-info, -body .jumbotron-info, -.container .jumbotron-info, -.container-fluid .jumbotron-info { - background-color: #03a9f4; -} -body .well-warning, -.container .well-warning, -.container-fluid .well-warning, -body .jumbotron-warning, -.container .jumbotron-warning, -.container-fluid .jumbotron-warning { - background-color: #ff5722; -} -body .well-danger, -.container .well-danger, -.container-fluid .well-danger, -body .jumbotron-danger, -.container .jumbotron-danger, -.container-fluid .jumbotron-danger { - background-color: #f44336; -} -body .well-material-red, -.container .well-material-red, -.container-fluid .well-material-red, -body .jumbotron-material-red, -.container .jumbotron-material-red, -.container-fluid .jumbotron-material-red { - background-color: #f44336; -} -body .well-material-pink, -.container .well-material-pink, -.container-fluid .well-material-pink, -body .jumbotron-material-pink, -.container .jumbotron-material-pink, -.container-fluid .jumbotron-material-pink { - background-color: #e91e63; -} -body .well-material-purple, -.container .well-material-purple, -.container-fluid .well-material-purple, -body .jumbotron-material-purple, -.container .jumbotron-material-purple, -.container-fluid .jumbotron-material-purple { - background-color: #9c27b0; -} -body .well-material-deeppurple, -.container .well-material-deeppurple, -.container-fluid .well-material-deeppurple, -body .jumbotron-material-deeppurple, -.container .jumbotron-material-deeppurple, -.container-fluid .jumbotron-material-deeppurple { - background-color: #673ab7; -} -body .well-material-indigo, -.container .well-material-indigo, -.container-fluid .well-material-indigo, -body .jumbotron-material-indigo, -.container .jumbotron-material-indigo, -.container-fluid .jumbotron-material-indigo { - background-color: #3f51b5; -} -body .well-material-lightblue, -.container .well-material-lightblue, -.container-fluid .well-material-lightblue, -body .jumbotron-material-lightblue, -.container .jumbotron-material-lightblue, -.container-fluid .jumbotron-material-lightblue { - background-color: #03a9f4; -} -body .well-material-cyan, -.container .well-material-cyan, -.container-fluid .well-material-cyan, -body .jumbotron-material-cyan, -.container .jumbotron-material-cyan, -.container-fluid .jumbotron-material-cyan { - background-color: #00bcd4; -} -body .well-material-teal, -.container .well-material-teal, -.container-fluid .well-material-teal, -body .jumbotron-material-teal, -.container .jumbotron-material-teal, -.container-fluid .jumbotron-material-teal { - background-color: #009688; -} -body .well-material-lightgreen, -.container .well-material-lightgreen, -.container-fluid .well-material-lightgreen, -body .jumbotron-material-lightgreen, -.container .jumbotron-material-lightgreen, -.container-fluid .jumbotron-material-lightgreen { - background-color: #8bc34a; -} -body .well-material-lime, -.container .well-material-lime, -.container-fluid .well-material-lime, -body .jumbotron-material-lime, -.container .jumbotron-material-lime, -.container-fluid .jumbotron-material-lime { - background-color: #cddc39; -} -body .well-material-lightyellow, -.container .well-material-lightyellow, -.container-fluid .well-material-lightyellow, -body .jumbotron-material-lightyellow, -.container .jumbotron-material-lightyellow, -.container-fluid .jumbotron-material-lightyellow { - background-color: #ffeb3b; -} -body .well-material-orange, -.container .well-material-orange, -.container-fluid .well-material-orange, -body .jumbotron-material-orange, -.container .jumbotron-material-orange, -.container-fluid .jumbotron-material-orange { - background-color: #ff9800; -} -body .well-material-deeporange, -.container .well-material-deeporange, -.container-fluid .well-material-deeporange, -body .jumbotron-material-deeporange, -.container .jumbotron-material-deeporange, -.container-fluid .jumbotron-material-deeporange { - background-color: #ff5722; -} -body .well-material-grey, -.container .well-material-grey, -.container-fluid .well-material-grey, -body .jumbotron-material-grey, -.container .jumbotron-material-grey, -.container-fluid .jumbotron-material-grey { - background-color: #9e9e9e; -} -body .well-material-bluegrey, -.container .well-material-bluegrey, -.container-fluid .well-material-bluegrey, -body .jumbotron-material-bluegrey, -.container .jumbotron-material-bluegrey, -.container-fluid .jumbotron-material-bluegrey { - background-color: #607d8b; -} -body .well-material-brown, -.container .well-material-brown, -.container-fluid .well-material-brown, -body .jumbotron-material-brown, -.container .jumbotron-material-brown, -.container-fluid .jumbotron-material-brown { - background-color: #795548; -} -body .well-material-lightgrey, -.container .well-material-lightgrey, -.container-fluid .well-material-lightgrey, -body .jumbotron-material-lightgrey, -.container .jumbotron-material-lightgrey, -.container-fluid .jumbotron-material-lightgrey { - background-color: #ececec; -} -body .well, -.container .well, -.container-fluid .well, -body .jumbotron, -.container .jumbotron, -.container-fluid .jumbotron, -body .well-default, -.container .well-default, -.container-fluid .well-default, -body .jumbotron-default, -.container .jumbotron-default, -.container-fluid .jumbotron-default { - color: rgba(0, 0, 0, 0.84); -} -body .well-primary, -.container .well-primary, -.container-fluid .well-primary, -body .jumbotron-primary, -.container .jumbotron-primary, -.container-fluid .jumbotron-primary { - color: #4285f4; -} -body .well-success, -.container .well-success, -.container-fluid .well-success, -body .jumbotron-success, -.container .jumbotron-success, -.container-fluid .jumbotron-success { - color: #0f9d58; -} -body .well-info, -.container .well-info, -.container-fluid .well-info, -body .jumbotron-info, -.container .jumbotron-info, -.container-fluid .jumbotron-info { - color: #03a9f4; -} -body .well-warning, -.container .well-warning, -.container-fluid .well-warning, -body .jumbotron-warning, -.container .jumbotron-warning, -.container-fluid .jumbotron-warning { - color: #ff5722; -} -body .well-danger, -.container .well-danger, -.container-fluid .well-danger, -body .jumbotron-danger, -.container .jumbotron-danger, -.container-fluid .jumbotron-danger { - color: #f44336; -} -body .well-material-red, -.container .well-material-red, -.container-fluid .well-material-red, -body .jumbotron-material-red, -.container .jumbotron-material-red, -.container-fluid .jumbotron-material-red { - color: #f44336; -} -body .well-material-pink, -.container .well-material-pink, -.container-fluid .well-material-pink, -body .jumbotron-material-pink, -.container .jumbotron-material-pink, -.container-fluid .jumbotron-material-pink { - color: #e91e63; -} -body .well-material-purple, -.container .well-material-purple, -.container-fluid .well-material-purple, -body .jumbotron-material-purple, -.container .jumbotron-material-purple, -.container-fluid .jumbotron-material-purple { - color: #9c27b0; -} -body .well-material-deeppurple, -.container .well-material-deeppurple, -.container-fluid .well-material-deeppurple, -body .jumbotron-material-deeppurple, -.container .jumbotron-material-deeppurple, -.container-fluid .jumbotron-material-deeppurple { - color: #673ab7; -} -body .well-material-indigo, -.container .well-material-indigo, -.container-fluid .well-material-indigo, -body .jumbotron-material-indigo, -.container .jumbotron-material-indigo, -.container-fluid .jumbotron-material-indigo { - color: #3f51b5; -} -body .well-material-lightblue, -.container .well-material-lightblue, -.container-fluid .well-material-lightblue, -body .jumbotron-material-lightblue, -.container .jumbotron-material-lightblue, -.container-fluid .jumbotron-material-lightblue { - color: #03a9f4; -} -body .well-material-cyan, -.container .well-material-cyan, -.container-fluid .well-material-cyan, -body .jumbotron-material-cyan, -.container .jumbotron-material-cyan, -.container-fluid .jumbotron-material-cyan { - color: #00bcd4; -} -body .well-material-teal, -.container .well-material-teal, -.container-fluid .well-material-teal, -body .jumbotron-material-teal, -.container .jumbotron-material-teal, -.container-fluid .jumbotron-material-teal { - color: #009688; -} -body .well-material-lightgreen, -.container .well-material-lightgreen, -.container-fluid .well-material-lightgreen, -body .jumbotron-material-lightgreen, -.container .jumbotron-material-lightgreen, -.container-fluid .jumbotron-material-lightgreen { - color: #8bc34a; -} -body .well-material-lime, -.container .well-material-lime, -.container-fluid .well-material-lime, -body .jumbotron-material-lime, -.container .jumbotron-material-lime, -.container-fluid .jumbotron-material-lime { - color: #cddc39; -} -body .well-material-lightyellow, -.container .well-material-lightyellow, -.container-fluid .well-material-lightyellow, -body .jumbotron-material-lightyellow, -.container .jumbotron-material-lightyellow, -.container-fluid .jumbotron-material-lightyellow { - color: #ffeb3b; -} -body .well-material-orange, -.container .well-material-orange, -.container-fluid .well-material-orange, -body .jumbotron-material-orange, -.container .jumbotron-material-orange, -.container-fluid .jumbotron-material-orange { - color: #ff9800; -} -body .well-material-deeporange, -.container .well-material-deeporange, -.container-fluid .well-material-deeporange, -body .jumbotron-material-deeporange, -.container .jumbotron-material-deeporange, -.container-fluid .jumbotron-material-deeporange { - color: #ff5722; -} -body .well-material-grey, -.container .well-material-grey, -.container-fluid .well-material-grey, -body .jumbotron-material-grey, -.container .jumbotron-material-grey, -.container-fluid .jumbotron-material-grey { - color: #9e9e9e; -} -body .well-material-bluegrey, -.container .well-material-bluegrey, -.container-fluid .well-material-bluegrey, -body .jumbotron-material-bluegrey, -.container .jumbotron-material-bluegrey, -.container-fluid .jumbotron-material-bluegrey { - color: #607d8b; -} -body .well-material-brown, -.container .well-material-brown, -.container-fluid .well-material-brown, -body .jumbotron-material-brown, -.container .jumbotron-material-brown, -.container-fluid .jumbotron-material-brown { - color: #795548; -} -body .well-material-lightgrey, -.container .well-material-lightgrey, -.container-fluid .well-material-lightgrey, -body .jumbotron-material-lightgrey, -.container .jumbotron-material-lightgrey, -.container-fluid .jumbotron-material-lightgrey { - color: #ececec; -} .modal-content { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); border-radius: 0; @@ -2765,8 +2854,7 @@ fieldset[disabled] .navbar .btn-link:focus { -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s; -webkit-transform: translateY(200%); - -ms-transform: translateY(200%); - transform: translateY(200%); + transform: translateY(200%); } .snackbar.snackbar-opened { padding: 14px 15px; @@ -2775,8 +2863,7 @@ fieldset[disabled] .navbar .btn-link:focus { -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s; -webkit-transform: none; - -ms-transform: none; - transform: none; + transform: none; } .snackbar.toast { border-radius: 200px; @@ -2868,7 +2955,6 @@ fieldset[disabled] .navbar .btn-link:focus { } .noUi-horizontal .noUi-handle:active { -webkit-transform: scale(2.5); - -ms-transform: scale(2.5); transform: scale(2.5); } [disabled].noUi-slider { diff --git a/material/material.js b/material/material.js index 5e38833a..85aeeeaa 100644 --- a/material/material.js +++ b/material/material.js @@ -4,41 +4,55 @@ $(function (){ ripples.init(".btn:not(.btn-link), .navbar a, .nav-tabs a, .withripple"); - // Add fake-checkbox to material checkboxes - $(".checkbox > label > input").after(""); + var initInputs = function() { + // Add fake-checkbox to material checkboxes + $(".checkbox > label > input").not(".bs-material").addClass("bs-material").after(""); - // Add fake-radio to material radios - $(".radio > label > input").after(""); + // Add fake-radio to material radios + $(".radio > label > input").not(".bs-material").addClass("bs-material").after(""); - // Add elements for material inputs - $("input.form-control, textarea.form-control, select.form-control").each( function() { - $(this).wrap("
"); - $(this).after(""); - if ($(this).hasClass("floating-label")) { - var placeholder = $(this).attr("placeholder"); - $(this).attr("placeholder", null).removeClass("floating-label"); - $(this).after("
" + placeholder + "
"); - } - if ($(this).val() === "") { - $(this).addClass("empty"); - } + // Add elements for material inputs + $("input.form-control, textarea.form-control, select.form-control").not(".bs-material").each( function() { + if ($(this).is(".bs-material")) { return; } + $(this).wrap("
"); + $(this).after(""); + if ($(this).hasClass("floating-label")) { + var placeholder = $(this).attr("placeholder"); + $(this).attr("placeholder", null).removeClass("floating-label"); + $(this).after("
" + placeholder + "
"); + } + if ($(this).is(":empty") || $(this).val() === null || $(this).val() == "undefined" || $(this).val() === "") { + $(this).addClass("empty"); + } - if ($(this).parent().next().is("[type=file]")) { - $(this).parent().addClass("fileinput"); - var $input = $(this).parent().next().detach(); - $(this).after($input); - } - }); + if ($(this).parent().next().is("[type=file]")) { + $(this).parent().addClass("fileinput"); + var $input = $(this).parent().next().detach(); + $(this).after($input); + } + }); + + }; + initInputs(); + + // Support for "arrive.js" to dynamically detect creation of elements + // include it before this script to take advantage of this feature + // https://github.com/uzairfarooq/arrive/ + if (document.arrive) { + document.arrive("input, textarea, select", function() { + initInputs(); + }); + } $(document).on("keyup change", ".form-control", function() { - if ($(this).val() !== "") { - $(this).removeClass("empty"); - } else { - $(this).addClass("empty"); - } - }); - $(document).on("keydown change", ".form-control", function() { - $(this).removeClass("empty"); + var self = $(this); + setTimeout(function() { + if (self.val() === "") { + self.addClass("empty"); + } else { + self.removeClass("empty"); + } + }, 1); }); $(document) .on("focus", ".form-control-wrapper.fileinput", function() { diff --git a/material/ripples.js b/material/ripples.js index e21b6839..7389d05b 100644 --- a/material/ripples.js +++ b/material/ripples.js @@ -57,7 +57,7 @@ var ripples = { $ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";")); // Dirty fix for Firefox... seems like absolute elements inside tags do not trigger the "click" event - if (/firefox/i.test(navigator.userAgent)) { + if (/firefox|crios|safari|ip(ad|hone|od)/i.test(navigator.userAgent)) { $el.click(); }