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