diff --git a/css-compiled/material.css b/css-compiled/material.css index a58934b0..f55e43c8 100644 --- a/css-compiled/material.css +++ b/css-compiled/material.css @@ -1687,3 +1687,304 @@ fieldset[disabled] .navbar .btn-link:focus { .snackbar.toast { border-radius: 200px; } +.noUi-target, +.noUi-target * { + -webkit-touch-callout: none; + -webkit-user-select: none; + -ms-touch-action: none; + -ms-user-select: none; + -moz-user-select: none; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.noUi-base { + width: 100%; + height: 100%; + position: relative; +} +.noUi-origin { + position: absolute; + right: 0; + top: 0; + left: 0; + bottom: 0; +} +.noUi-handle { + position: relative; + z-index: 1; + box-sizing: border-box; + -webkit-box-sizing: border-box; +} +.noUi-stacking .noUi-handle { + z-index: 10; +} +.noUi-stacking + .noUi-origin { + *z-index: -1; +} +.noUi-state-tap .noUi-origin { + -webkit-transition: left 0.3s, top 0.3s; + transition: left 0.3s, top 0.3s; +} +.noUi-state-drag * { + cursor: inherit !important; +} +.noUi-horizontal { + height: 10px; +} +.noUi-horizontal .noUi-handle { + box-sizing: border-box; + width: 12px; + height: 12px; + left: -10px; + top: -5px; +} +.noUi-horizontal.noUi-extended { + padding: 0 15px; +} +.noUi-horizontal.noUi-extended .noUi-origin { + right: -15px; +} +.noUi-background { + height: 2px; + margin: 20px 0; +} +.noUi-origin { + border-radius: 0; + height: 2px; + background: #c8c8c8; +} +.noUi-origin[style^="left: 0"] .noUi-handle { + background-color: #fff; + border: 2px solid #c8c8c8; +} +.noUi-origin[style^="left: 0"] .noUi-handle:active { + border-width: 1px; +} +.noUi-target { + border-radius: 2px; +} +.noUi-handle { + border-radius: 100%; + cursor: default; + transition: all 0.2s ease-out; + border: 1px solid; +} +.noUi-horizontal .noUi-handle:active { + transform: scale(2.5); +} +[disabled].noUi-slider { + opacity: 0.5; +} +[disabled] .noUi-handle { + cursor: not-allowed; +} +.slider .noUi-handle, +.slider-default .noUi-handle { + background-color: #4285f4; +} +.slider-primary .noUi-handle { + background-color: #4285f4; +} +.slider-success .noUi-handle { + background-color: #0f9d58; +} +.slider-info .noUi-handle { + background-color: #03a9f4; +} +.slider-warning .noUi-handle { + background-color: #ff5722; +} +.slider-danger .noUi-handle { + background-color: #f44336; +} +.slider-material-red .noUi-handle { + background-color: #f44336; +} +.slider-material-pink .noUi-handle { + background-color: #e91e63; +} +.slider-material-purple .noUi-handle { + background-color: #9c27b0; +} +.slider-material-deeppurple .noUi-handle { + background-color: #673ab7; +} +.slider-material-indigo .noUi-handle { + background-color: #3f51b5; +} +.slider-material-lightblue .noUi-handle { + background-color: #03a9f4; +} +.slider-material-cyan .noUi-handle { + background-color: #00bcd4; +} +.slider-material-teal .noUi-handle { + background-color: #009688; +} +.slider-material-lightgreen .noUi-handle { + background-color: #8bc34a; +} +.slider-material-lime .noUi-handle { + background-color: #cddc39; +} +.slider-material-lightyellow .noUi-handle { + background-color: #ffeb3b; +} +.slider-material-orange .noUi-handle { + background-color: #ff9800; +} +.slider-material-deeporange .noUi-handle { + background-color: #ff5722; +} +.slider-material-grey .noUi-handle { + background-color: #9e9e9e; +} +.slider-material-bluegrey .noUi-handle { + background-color: #607d8b; +} +.slider-material-brown .noUi-handle { + background-color: #795548; +} +.slider-material-lightgrey .noUi-handle { + background-color: #ececec; +} +.slider .noUi-handle, +.slider-default .noUi-handle { + border-color: #4285f4; +} +.slider-primary .noUi-handle { + border-color: #4285f4; +} +.slider-success .noUi-handle { + border-color: #0f9d58; +} +.slider-info .noUi-handle { + border-color: #03a9f4; +} +.slider-warning .noUi-handle { + border-color: #ff5722; +} +.slider-danger .noUi-handle { + border-color: #f44336; +} +.slider-material-red .noUi-handle { + border-color: #f44336; +} +.slider-material-pink .noUi-handle { + border-color: #e91e63; +} +.slider-material-purple .noUi-handle { + border-color: #9c27b0; +} +.slider-material-deeppurple .noUi-handle { + border-color: #673ab7; +} +.slider-material-indigo .noUi-handle { + border-color: #3f51b5; +} +.slider-material-lightblue .noUi-handle { + border-color: #03a9f4; +} +.slider-material-cyan .noUi-handle { + border-color: #00bcd4; +} +.slider-material-teal .noUi-handle { + border-color: #009688; +} +.slider-material-lightgreen .noUi-handle { + border-color: #8bc34a; +} +.slider-material-lime .noUi-handle { + border-color: #cddc39; +} +.slider-material-lightyellow .noUi-handle { + border-color: #ffeb3b; +} +.slider-material-orange .noUi-handle { + border-color: #ff9800; +} +.slider-material-deeporange .noUi-handle { + border-color: #ff5722; +} +.slider-material-grey .noUi-handle { + border-color: #9e9e9e; +} +.slider-material-bluegrey .noUi-handle { + border-color: #607d8b; +} +.slider-material-brown .noUi-handle { + border-color: #795548; +} +.slider-material-lightgrey .noUi-handle { + border-color: #ececec; +} +.slider, +.slider-default { + background-color: #4285f4; +} +.slider-primary { + background-color: #4285f4; +} +.slider-success { + background-color: #0f9d58; +} +.slider-info { + background-color: #03a9f4; +} +.slider-warning { + background-color: #ff5722; +} +.slider-danger { + background-color: #f44336; +} +.slider-material-red { + background-color: #f44336; +} +.slider-material-pink { + background-color: #e91e63; +} +.slider-material-purple { + background-color: #9c27b0; +} +.slider-material-deeppurple { + background-color: #673ab7; +} +.slider-material-indigo { + background-color: #3f51b5; +} +.slider-material-lightblue { + background-color: #03a9f4; +} +.slider-material-cyan { + background-color: #00bcd4; +} +.slider-material-teal { + background-color: #009688; +} +.slider-material-lightgreen { + background-color: #8bc34a; +} +.slider-material-lime { + background-color: #cddc39; +} +.slider-material-lightyellow { + background-color: #ffeb3b; +} +.slider-material-orange { + background-color: #ff9800; +} +.slider-material-deeporange { + background-color: #ff5722; +} +.slider-material-grey { + background-color: #9e9e9e; +} +.slider-material-bluegrey { + background-color: #607d8b; +} +.slider-material-brown { + background-color: #795548; +} +.slider-material-lightgrey { + background-color: #ececec; +} diff --git a/demo/index.html b/demo/index.html index e41ad691..1ea35ccf 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1001,6 +1001,25 @@ + + +
+
+
+ +
+
+
+
+
+

Read more about noUiSlider here.

+
+
+
+
@@ -1324,5 +1343,19 @@ + + + + diff --git a/less/material.css b/less/material.css deleted file mode 100644 index 59685fbf..00000000 --- a/less/material.css +++ /dev/null @@ -1,1728 +0,0 @@ -/* Generated by less 1.7.0 */ -@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic); -@-webkit-keyframes input-highlight { - 0% { - left: 20%; - width: 20%; - } - 99% { - width: 0; - left: 0; - opacity: 1; - } - 100% { - opacity: 0; - } -} -@-moz-keyframes input-highlight { - 0% { - left: 20%; - width: 20%; - } - 99% { - width: 0; - left: 0; - opacity: 1; - } - 100% { - opacity: 0; - } -} -@keyframes input-highlight { - 0% { - left: 20%; - width: 20%; - } - 99% { - width: 0; - left: 0; - opacity: 1; - } - 100% { - opacity: 0; - } -} -.shadow-z-1 { - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); -} -.shadow-z-2 { - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); -} -.shadow-z-2-hover { - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28); -} -.shadow-z-3 { - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); -} -.shadow-z-4 { - box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); -} -.shadow-z-5 { - box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); -} -body { - background-color: #EEEEEE; -} -body.inverse { - background: #333333; -} -body.inverse, -body.inverse .form-control { - color: #ffffff; -} -body, -h1, -h2, -h3, -h4, -h5, -h6, -.h1, -.h2, -.h3, -.h4, -.h5, -.h6 { - font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; -} -.btn { - position: relative; - padding: 8px 30px; - border: 0; - margin: 10px 1px; - cursor: pointer; - border-radius: 4px; - text-transform: uppercase; - text-decoration: none; - color: #ffffff; - transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); - outline: none !important; -} -.btn:hover { - color: #ffffff; -} -.btn:hover:not(.btn-link) { - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.28); -} -.btn:active:not(.btn-link) { - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); -} -.btn:not(.btn-link), -.btn-default:not(.btn-link) { - background-color: transparent; -} -.btn-primary:not(.btn-link) { - background-color: #4285f4; -} -.btn-success:not(.btn-link) { - background-color: #0f9d58; -} -.btn-info:not(.btn-link) { - background-color: #03a9f4; -} -.btn-warning:not(.btn-link) { - background-color: #ff5722; -} -.btn-danger:not(.btn-link) { - background-color: #f44336; -} -.btn-material-red:not(.btn-link) { - background-color: #f44336; -} -.btn-material-pink:not(.btn-link) { - background-color: #e91e63; -} -.btn-material-purple:not(.btn-link) { - background-color: #9c27b0; -} -.btn-material-deeppurple:not(.btn-link) { - background-color: #673ab7; -} -.btn-material-indigo:not(.btn-link) { - background-color: #3f51b5; -} -.btn-material-lightblue:not(.btn-link) { - background-color: #03a9f4; -} -.btn-material-cyan:not(.btn-link) { - background-color: #00bcd4; -} -.btn-material-teal:not(.btn-link) { - background-color: #009688; -} -.btn-material-lightgreen:not(.btn-link) { - background-color: #8bc34a; -} -.btn-material-lime:not(.btn-link) { - background-color: #cddc39; -} -.btn-material-lightyellow:not(.btn-link) { - background-color: #ffeb3b; -} -.btn-material-orange:not(.btn-link) { - background-color: #ff9800; -} -.btn-material-deeporange:not(.btn-link) { - background-color: #ff5722; -} -.btn-material-grey:not(.btn-link) { - background-color: #9e9e9e; -} -.btn-material-bluegrey:not(.btn-link) { - background-color: #607d8b; -} -.btn-material-brown:not(.btn-link) { - background-color: #795548; -} -.btn-material-lightgrey:not(.btn-link) { - background-color: #ececec; -} -.btn-link, -.btn:not([class^="btn btn-"]), -.btn-default { - color: #4d4d4d; -} -.btn-link:hover, -.btn:not([class^="btn btn-"]):hover, -.btn-default:hover { - color: #4d4d4d; -} -.btn:not([class^="btn btn-"]):hover, -.btn-default:hover { - background-color: rgba(255, 255, 255, 0.5); -} -.btn-raised { - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); -} -.btn-raised:active:not(.btn-link) { - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); -} -.open > .dropdown-toggle.btn, -.open > .dropdown-toggle.btn-default { - background-color: transparent; -} -.open > .dropdown-toggle.btn-primary { - background-color: #4285f4; -} -.open > .dropdown-toggle.btn-success { - background-color: #0f9d58; -} -.open > .dropdown-toggle.btn-info { - background-color: #03a9f4; -} -.open > .dropdown-toggle.btn-warning { - background-color: #ff5722; -} -.open > .dropdown-toggle.btn-danger { - background-color: #f44336; -} -.open > .dropdown-toggle.btn-material-red { - background-color: #f44336; -} -.open > .dropdown-toggle.btn-material-pink { - background-color: #e91e63; -} -.open > .dropdown-toggle.btn-material-purple { - background-color: #9c27b0; -} -.open > .dropdown-toggle.btn-material-deeppurple { - background-color: #673ab7; -} -.open > .dropdown-toggle.btn-material-indigo { - background-color: #3f51b5; -} -.open > .dropdown-toggle.btn-material-lightblue { - background-color: #03a9f4; -} -.open > .dropdown-toggle.btn-material-cyan { - background-color: #00bcd4; -} -.open > .dropdown-toggle.btn-material-teal { - background-color: #009688; -} -.open > .dropdown-toggle.btn-material-lightgreen { - background-color: #8bc34a; -} -.open > .dropdown-toggle.btn-material-lime { - background-color: #cddc39; -} -.open > .dropdown-toggle.btn-material-lightyellow { - background-color: #ffeb3b; -} -.open > .dropdown-toggle.btn-material-orange { - background-color: #ff9800; -} -.open > .dropdown-toggle.btn-material-deeporange { - background-color: #ff5722; -} -.open > .dropdown-toggle.btn-material-grey { - background-color: #9e9e9e; -} -.open > .dropdown-toggle.btn-material-bluegrey { - background-color: #607d8b; -} -.open > .dropdown-toggle.btn-material-brown { - background-color: #795548; -} -.open > .dropdown-toggle.btn-material-lightgrey { - background-color: #ececec; -} -.btn-flat { - box-shadow: none !important; -} -.btn-flat.btn-default:hover { - background: none; -} -.btn-group, -.btn-group-vertical { - position: relative; - border-radius: 4px; - margin: 10px 1px; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); -} -.btn-group:active:not(.btn-link), -.btn-group-vertical:active:not(.btn-link) { - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); -} -.btn-group.open .dropdown-toggle, -.btn-group-vertical.open .dropdown-toggle { - box-shadow: none; -} -.btn-group.btn-group-raised, -.btn-group-vertical.btn-group-raised { - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); -} -.btn-group.btn-group-raised:active:not(.btn-link), -.btn-group-vertical.btn-group-raised:active:not(.btn-link) { - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); -} -.btn-group .btn, -.btn-group-vertical .btn, -.btn-group .btn:active, -.btn-group-vertical .btn:active, -.btn-group .btn-group, -.btn-group-vertical .btn-group { - 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; -} -.ripple-wrapper { - position: absolute; - top: 0; - left: 0; - z-index: 1; - width: 100%; - height: 100%; - overflow: hidden; - border-radius: 2px; -} -.ripple { - position: absolute; - width: 20px; - height: 20px; - margin-left: -10px; - margin-top: -10px; - border-radius: 100%; - background-color: rgba(0, 0, 0, 0.05); - -webkit-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); - -webkit-transform-origin: 50%; - -ms-transform-origin: 50%; - transform-origin: 50%; - opacity: 0; -} -.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; - -ms-transition: opacity 0.15s ease-in 0s, -ms-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; - -moz-transition: opacity 0.15s ease-in 0s, -moz-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; - transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; - opacity: 1; -} -.ripple.ripple-out { - -webkit-transition: opacity 1s linear 0s !important; - transition: opacity 0.8s linear 0s !important; - opacity: 0; -} -.form-horizontal .checkbox { - padding-top: 15px; -} -.checkbox label { - cursor: pointer; - padding-left: 45px; - position: relative; -} -.checkbox label span { - display: block; - position: absolute; - left: 10px; - transition-duration: 0.2s; -} -.checkbox label .ripple { - background-color: #4d4d4d; - left: 0; - top: -10px; - height: 40px; - width: 40px; - border-radius: 100%; - transform: scale(0); - transition: transform .1s, opacity 0.2s 0.4s; - z-index: 1; - opacity: 0.2; - margin: 0; -} -.checkbox label .ripple.animate { - transform: scale(1); - opacity: 0; -} -.checkbox label .box { - border: 2px solid #4d4d4d; - height: 20px; - width: 20px; - transition-delay: 0.2s; -} -.checkbox label .check { - top: -4px; - left: 16px; - width: 12px; - height: 24px; - border: 2px solid; - border-top: none; - border-left: none; - opacity: 0; - z-index: 888; - transform: rotate(45deg); - transition-delay: 0.2s; -} -.checkbox .check, -.checkbox-default .check { - color: #0f9d58; -} -.checkbox-primary .check { - color: #4285f4; -} -.checkbox-success .check { - color: #0f9d58; -} -.checkbox-info .check { - color: #03a9f4; -} -.checkbox-warning .check { - color: #ff5722; -} -.checkbox-danger .check { - color: #f44336; -} -.checkbox-material-red .check { - color: #f44336; -} -.checkbox-material-pink .check { - color: #e91e63; -} -.checkbox-material-purple .check { - color: #9c27b0; -} -.checkbox-material-deeppurple .check { - color: #673ab7; -} -.checkbox-material-indigo .check { - color: #3f51b5; -} -.checkbox-material-lightblue .check { - color: #03a9f4; -} -.checkbox-material-cyan .check { - color: #00bcd4; -} -.checkbox-material-teal .check { - color: #009688; -} -.checkbox-material-lightgreen .check { - color: #8bc34a; -} -.checkbox-material-lime .check { - color: #cddc39; -} -.checkbox-material-lightyellow .check { - color: #ffeb3b; -} -.checkbox-material-orange .check { - color: #ff9800; -} -.checkbox-material-deeporange .check { - color: #ff5722; -} -.checkbox-material-grey .check { - color: #9e9e9e; -} -.checkbox-material-bluegrey .check { - color: #607d8b; -} -.checkbox-material-brown .check { - color: #795548; -} -.checkbox-material-lightgrey .check { - color: #ececec; -} -.checkbox input[type=checkbox][disabled]:checked ~ .check, -.checkbox input[type=checkbox][disabled]:not(:checked) ~ .box { - opacity: 0.5; -} -.checkbox input[type=checkbox][disabled] ~ .ripple { - opacity: 0.1; -} -.checkbox input[type=checkbox] { - display: none; -} -.checkbox input[type=checkbox]:checked ~ .box { - opacity: 0; - transform: scale(0) rotate(-180deg); -} -.checkbox input[type=checkbox]:checked ~ .ripple, -.checkbox-default input[type=checkbox]:checked ~ .ripple { - background-color: #0f9d58; -} -.checkbox-primary input[type=checkbox]:checked ~ .ripple { - background-color: #4285f4; -} -.checkbox-success input[type=checkbox]:checked ~ .ripple { - background-color: #0f9d58; -} -.checkbox-info input[type=checkbox]:checked ~ .ripple { - background-color: #03a9f4; -} -.checkbox-warning input[type=checkbox]:checked ~ .ripple { - background-color: #ff5722; -} -.checkbox-danger input[type=checkbox]:checked ~ .ripple { - background-color: #f44336; -} -.checkbox-material-red input[type=checkbox]:checked ~ .ripple { - background-color: #f44336; -} -.checkbox-material-pink input[type=checkbox]:checked ~ .ripple { - background-color: #e91e63; -} -.checkbox-material-purple input[type=checkbox]:checked ~ .ripple { - background-color: #9c27b0; -} -.checkbox-material-deeppurple input[type=checkbox]:checked ~ .ripple { - background-color: #673ab7; -} -.checkbox-material-indigo input[type=checkbox]:checked ~ .ripple { - background-color: #3f51b5; -} -.checkbox-material-lightblue input[type=checkbox]:checked ~ .ripple { - background-color: #03a9f4; -} -.checkbox-material-cyan input[type=checkbox]:checked ~ .ripple { - background-color: #00bcd4; -} -.checkbox-material-teal input[type=checkbox]:checked ~ .ripple { - background-color: #009688; -} -.checkbox-material-lightgreen input[type=checkbox]:checked ~ .ripple { - background-color: #8bc34a; -} -.checkbox-material-lime input[type=checkbox]:checked ~ .ripple { - background-color: #cddc39; -} -.checkbox-material-lightyellow input[type=checkbox]:checked ~ .ripple { - background-color: #ffeb3b; -} -.checkbox-material-orange input[type=checkbox]:checked ~ .ripple { - background-color: #ff9800; -} -.checkbox-material-deeporange input[type=checkbox]:checked ~ .ripple { - background-color: #ff5722; -} -.checkbox-material-grey input[type=checkbox]:checked ~ .ripple { - background-color: #9e9e9e; -} -.checkbox-material-bluegrey input[type=checkbox]:checked ~ .ripple { - background-color: #607d8b; -} -.checkbox-material-brown input[type=checkbox]:checked ~ .ripple { - background-color: #795548; -} -.checkbox-material-lightgrey input[type=checkbox]:checked ~ .ripple { - background-color: #ececec; -} -.checkbox input[type=checkbox]:checked ~ .check { - opacity: 1; - transform: scale(1) rotate(45deg); -} -.checkbox input[type=checkbox][disabled] ~ .ripple { - background-color: #4d4d4d; -} -.form-horizontal .radio { - margin-bottom: 10px; -} -.radio label { - cursor: pointer; - padding-left: 45px; - position: relative; -} -.radio label span { - display: block; - position: absolute; - left: 10px; - top: 2px; - transition-duration: 0.2s; -} -.radio label .ripple { - background-color: #4d4d4d; - left: 0; - top: -8px; - height: 34px; - width: 34px; - border-radius: 100%; - transform: scale(0); - transition: transform .1s, opacity 0.2s 0.4s; - z-index: 1; - opacity: 0.2; - margin: 0; -} -.radio label .ripple.animate { - transform: scale(1); - opacity: 0; -} -.radio label .circle { - border: 2px solid #4d4d4d; - height: 15px; - width: 15px; - border-radius: 100%; -} -.radio label .check { - height: 15px; - width: 15px; - border-radius: 100%; - background-color: #4d4d4d; - transform: scale(0); -} -.radio input[type=radio]:checked ~ .check, -.radio-default input[type=radio]:checked ~ .check { - background-color: #4d4d4d; -} -.radio-primary input[type=radio]:checked ~ .check { - background-color: #4285f4; -} -.radio-success input[type=radio]:checked ~ .check { - background-color: #0f9d58; -} -.radio-info input[type=radio]:checked ~ .check { - background-color: #03a9f4; -} -.radio-warning input[type=radio]:checked ~ .check { - background-color: #ff5722; -} -.radio-danger input[type=radio]:checked ~ .check { - background-color: #f44336; -} -.radio-material-red input[type=radio]:checked ~ .check { - background-color: #f44336; -} -.radio-material-pink input[type=radio]:checked ~ .check { - background-color: #e91e63; -} -.radio-material-purple input[type=radio]:checked ~ .check { - background-color: #9c27b0; -} -.radio-material-deeppurple input[type=radio]:checked ~ .check { - background-color: #673ab7; -} -.radio-material-indigo input[type=radio]:checked ~ .check { - background-color: #3f51b5; -} -.radio-material-lightblue input[type=radio]:checked ~ .check { - background-color: #03a9f4; -} -.radio-material-cyan input[type=radio]:checked ~ .check { - background-color: #00bcd4; -} -.radio-material-teal input[type=radio]:checked ~ .check { - background-color: #009688; -} -.radio-material-lightgreen input[type=radio]:checked ~ .check { - background-color: #8bc34a; -} -.radio-material-lime input[type=radio]:checked ~ .check { - background-color: #cddc39; -} -.radio-material-lightyellow input[type=radio]:checked ~ .check { - background-color: #ffeb3b; -} -.radio-material-orange input[type=radio]:checked ~ .check { - background-color: #ff9800; -} -.radio-material-deeporange input[type=radio]:checked ~ .check { - background-color: #ff5722; -} -.radio-material-grey input[type=radio]:checked ~ .check { - background-color: #9e9e9e; -} -.radio-material-bluegrey input[type=radio]:checked ~ .check { - background-color: #607d8b; -} -.radio-material-brown input[type=radio]:checked ~ .check { - background-color: #795548; -} -.radio-material-lightgrey input[type=radio]:checked ~ .check { - background-color: #ececec; -} -.radio input[type=radio]:checked ~ .circle, -.radio-default input[type=radio]:checked ~ .circle { - border-color: #4d4d4d; -} -.radio-primary input[type=radio]:checked ~ .circle { - border-color: #4285f4; -} -.radio-success input[type=radio]:checked ~ .circle { - border-color: #0f9d58; -} -.radio-info input[type=radio]:checked ~ .circle { - border-color: #03a9f4; -} -.radio-warning input[type=radio]:checked ~ .circle { - border-color: #ff5722; -} -.radio-danger input[type=radio]:checked ~ .circle { - border-color: #f44336; -} -.radio-material-red input[type=radio]:checked ~ .circle { - border-color: #f44336; -} -.radio-material-pink input[type=radio]:checked ~ .circle { - border-color: #e91e63; -} -.radio-material-purple input[type=radio]:checked ~ .circle { - border-color: #9c27b0; -} -.radio-material-deeppurple input[type=radio]:checked ~ .circle { - border-color: #673ab7; -} -.radio-material-indigo input[type=radio]:checked ~ .circle { - border-color: #3f51b5; -} -.radio-material-lightblue input[type=radio]:checked ~ .circle { - border-color: #03a9f4; -} -.radio-material-cyan input[type=radio]:checked ~ .circle { - border-color: #00bcd4; -} -.radio-material-teal input[type=radio]:checked ~ .circle { - border-color: #009688; -} -.radio-material-lightgreen input[type=radio]:checked ~ .circle { - border-color: #8bc34a; -} -.radio-material-lime input[type=radio]:checked ~ .circle { - border-color: #cddc39; -} -.radio-material-lightyellow input[type=radio]:checked ~ .circle { - border-color: #ffeb3b; -} -.radio-material-orange input[type=radio]:checked ~ .circle { - border-color: #ff9800; -} -.radio-material-deeporange input[type=radio]:checked ~ .circle { - border-color: #ff5722; -} -.radio-material-grey input[type=radio]:checked ~ .circle { - border-color: #9e9e9e; -} -.radio-material-bluegrey input[type=radio]:checked ~ .circle { - border-color: #607d8b; -} -.radio-material-brown input[type=radio]:checked ~ .circle { - border-color: #795548; -} -.radio-material-lightgrey input[type=radio]:checked ~ .circle { - border-color: #ececec; -} -.radio input[type=radio][disabled] ~ .check, -.radio input[type=radio][disabled] ~ .circle { - opacity: 0.5; -} -.radio input[type=radio] { - display: none; -} -.radio input[type=radio]:checked ~ .check { - transform: scale(0.55); -} -.radio input[type=radio][disabled] ~ .circle { - border-color: #4d4d4d; -} -.radio input[type=radio][disabled] ~ .check { - background-color: #4d4d4d; -} -.form-control-wrapper { - position: relative; - /* active state */ -} -.form-control-wrapper .form-control, -.form-control-wrapper .form-control:focus { - float: none; - border: 0; - box-shadow: none; - border-radius: 0; - background: transparent; - border-bottom: 1px solid #757575; -} -.form-control-wrapper .form-control:focus { - outline: none; -} -.form-control-wrapper .floating-label { - color: #7E7E7E; - font-size: 14px; - position: absolute; - pointer-events: none; - left: 12px; - top: 7px; - transition: 0.2s ease all; - opacity: 0; -} -.form-control-wrapper .form-control:focus ~ .floating-label { - top: -10px; - font-size: 10px; - color: #5264ae; -} -.form-control-wrapper .form-control:not(.empty) ~ .floating-label { - top: -10px; - font-size: 10px; - opacity: 1; -} -.form-control-wrapper .form-control:focus:invalid ~ .floating-label { - color: #f44336; -} -.form-control-wrapper .form-control:focus ~ .material-input:after { - background-color: #5264ae; -} -.form-control-wrapper .form-control:focus:invalid ~ .material-input:before, -.form-control-wrapper .form-control:focus:invalid ~ .material-input:after { - background-color: #f44336; -} -.form-control-wrapper .form-control.empty ~ .floating-label { - opacity: 1; -} -.form-control-wrapper .material-input:before { - position: absolute; - content: ""; - width: 100%; - left: 0; - height: 2px; - background-color: #5264ae; - bottom: -1px; - transform: scaleX(0); - transition: transform 0s; -} -.form-control-wrapper .form-control:focus ~ .material-input:before { - transform: scaleX(1); - transition: transform 0.2s ease-out; -} -.form-control-wrapper .material-input:after { - content: ""; - position: absolute; - height: 18px; - width: 100px; - margin-top: -1px; - top: 25%; - left: 0; - pointer-events: none; - opacity: 0.9; -} -.form-control-wrapper .input-lg ~ .material-input:after { - height: 26px; -} -.form-control-wrapper textarea { - resize: none; -} -.form-control-wrapper textarea ~ .form-control-highlight { - margin-top: -11px; -} -.form-control-wrapper .form-control:focus ~ .material-input:after { - -webkit-animation: input-highlight 0.3s ease; - animation: input-highlight 0.3s ease; - -webkit-animation-fill-mode: forwards; - animation-fill-mode: forwards; -} -.form-control-wrapper select ~ .material-input:before { - bottom: 1px; -} -.form-control-wrapper select ~ .material-input:after { - display: none; -} -.form-group.has-warning .material-input:before, -.form-group.has-warning input.form-control:focus ~ .material-input:after { - background: #ff5722; -} -.form-group.has-warning .control-label, -.form-group.has-warning input.form-control:focus ~ .floating-label { - color: #ff5722; -} -.form-group.has-error .material-input:before, -.form-group.has-error input.form-control:focus ~ .material-input:after { - background: #f44336; -} -.form-group.has-error .control-label, -.form-group.has-error input.form-control:focus ~ .floating-label { - color: #f44336; -} -.form-group.has-success .material-input:before, -.form-group.has-success input.form-control:focus ~ .material-input:after { - background: #0f9d58; -} -.form-group.has-success .control-label, -.form-group.has-success input.form-control:focus ~ .floating-label { - color: #0f9d58; -} -.form-group.has-info .material-input:before, -.form-group.has-info input.form-control:focus ~ .material-input:after { - background: #03a9f4; -} -.form-group.has-info .control-label, -.form-group.has-info input.form-control:focus ~ .floating-label { - color: #03a9f4; -} -.form-group .material-input:before, -.form-group-default .material-input:before { - background-color: #3f51b5; -} -.form-group-primary .material-input:before { - background-color: #4285f4; -} -.form-group-success .material-input:before { - background-color: #0f9d58; -} -.form-group-info .material-input:before { - background-color: #03a9f4; -} -.form-group-warning .material-input:before { - background-color: #ff5722; -} -.form-group-danger .material-input:before { - background-color: #f44336; -} -.form-group-material-red .material-input:before { - background-color: #f44336; -} -.form-group-material-pink .material-input:before { - background-color: #e91e63; -} -.form-group-material-purple .material-input:before { - background-color: #9c27b0; -} -.form-group-material-deeppurple .material-input:before { - background-color: #673ab7; -} -.form-group-material-indigo .material-input:before { - background-color: #3f51b5; -} -.form-group-material-lightblue .material-input:before { - background-color: #03a9f4; -} -.form-group-material-cyan .material-input:before { - background-color: #00bcd4; -} -.form-group-material-teal .material-input:before { - background-color: #009688; -} -.form-group-material-lightgreen .material-input:before { - background-color: #8bc34a; -} -.form-group-material-lime .material-input:before { - background-color: #cddc39; -} -.form-group-material-lightyellow .material-input:before { - background-color: #ffeb3b; -} -.form-group-material-orange .material-input:before { - background-color: #ff9800; -} -.form-group-material-deeporange .material-input:before { - background-color: #ff5722; -} -.form-group-material-grey .material-input:before { - background-color: #9e9e9e; -} -.form-group-material-bluegrey .material-input:before { - background-color: #607d8b; -} -.form-group-material-brown .material-input:before { - background-color: #795548; -} -.form-group-material-lightgrey .material-input:before { - background-color: #ececec; -} -.form-group input.form-control:focus ~ .material-input:after, -.form-group-default input.form-control:focus ~ .material-input:after { - background-color: #3f51b5; -} -.form-group-primary input.form-control:focus ~ .material-input:after { - background-color: #4285f4; -} -.form-group-success input.form-control:focus ~ .material-input:after { - background-color: #0f9d58; -} -.form-group-info input.form-control:focus ~ .material-input:after { - background-color: #03a9f4; -} -.form-group-warning input.form-control:focus ~ .material-input:after { - background-color: #ff5722; -} -.form-group-danger input.form-control:focus ~ .material-input:after { - background-color: #f44336; -} -.form-group-material-red input.form-control:focus ~ .material-input:after { - background-color: #f44336; -} -.form-group-material-pink input.form-control:focus ~ .material-input:after { - background-color: #e91e63; -} -.form-group-material-purple input.form-control:focus ~ .material-input:after { - background-color: #9c27b0; -} -.form-group-material-deeppurple input.form-control:focus ~ .material-input:after { - background-color: #673ab7; -} -.form-group-material-indigo input.form-control:focus ~ .material-input:after { - background-color: #3f51b5; -} -.form-group-material-lightblue input.form-control:focus ~ .material-input:after { - background-color: #03a9f4; -} -.form-group-material-cyan input.form-control:focus ~ .material-input:after { - background-color: #00bcd4; -} -.form-group-material-teal input.form-control:focus ~ .material-input:after { - background-color: #009688; -} -.form-group-material-lightgreen input.form-control:focus ~ .material-input:after { - background-color: #8bc34a; -} -.form-group-material-lime input.form-control:focus ~ .material-input:after { - background-color: #cddc39; -} -.form-group-material-lightyellow input.form-control:focus ~ .material-input:after { - background-color: #ffeb3b; -} -.form-group-material-orange input.form-control:focus ~ .material-input:after { - background-color: #ff9800; -} -.form-group-material-deeporange input.form-control:focus ~ .material-input:after { - background-color: #ff5722; -} -.form-group-material-grey input.form-control:focus ~ .material-input:after { - background-color: #9e9e9e; -} -.form-group-material-bluegrey input.form-control:focus ~ .material-input:after { - background-color: #607d8b; -} -.form-group-material-brown input.form-control:focus ~ .material-input:after { - background-color: #795548; -} -.form-group-material-lightgrey input.form-control:focus ~ .material-input:after { - background-color: #ececec; -} -.form-group .control-label, -.form-group-default .control-label { - color: #4d4d4d; -} -.form-group-primary .control-label { - color: #4285f4; -} -.form-group-success .control-label { - color: #0f9d58; -} -.form-group-info .control-label { - color: #03a9f4; -} -.form-group-warning .control-label { - color: #ff5722; -} -.form-group-danger .control-label { - color: #f44336; -} -.form-group-material-red .control-label { - color: #f44336; -} -.form-group-material-pink .control-label { - color: #e91e63; -} -.form-group-material-purple .control-label { - color: #9c27b0; -} -.form-group-material-deeppurple .control-label { - color: #673ab7; -} -.form-group-material-indigo .control-label { - color: #3f51b5; -} -.form-group-material-lightblue .control-label { - color: #03a9f4; -} -.form-group-material-cyan .control-label { - color: #00bcd4; -} -.form-group-material-teal .control-label { - color: #009688; -} -.form-group-material-lightgreen .control-label { - color: #8bc34a; -} -.form-group-material-lime .control-label { - color: #cddc39; -} -.form-group-material-lightyellow .control-label { - color: #ffeb3b; -} -.form-group-material-orange .control-label { - color: #ff9800; -} -.form-group-material-deeporange .control-label { - color: #ff5722; -} -.form-group-material-grey .control-label { - color: #9e9e9e; -} -.form-group-material-bluegrey .control-label { - color: #607d8b; -} -.form-group-material-brown .control-label { - color: #795548; -} -.form-group-material-lightgrey .control-label { - color: #ececec; -} -.form-group input.form-control:focus ~ .floating-label, -.form-group-default input.form-control:focus ~ .floating-label { - color: #3f51b5; -} -.form-group-primary input.form-control:focus ~ .floating-label { - color: #4285f4; -} -.form-group-success input.form-control:focus ~ .floating-label { - color: #0f9d58; -} -.form-group-info input.form-control:focus ~ .floating-label { - color: #03a9f4; -} -.form-group-warning input.form-control:focus ~ .floating-label { - color: #ff5722; -} -.form-group-danger input.form-control:focus ~ .floating-label { - color: #f44336; -} -.form-group-material-red input.form-control:focus ~ .floating-label { - color: #f44336; -} -.form-group-material-pink input.form-control:focus ~ .floating-label { - color: #e91e63; -} -.form-group-material-purple input.form-control:focus ~ .floating-label { - color: #9c27b0; -} -.form-group-material-deeppurple input.form-control:focus ~ .floating-label { - color: #673ab7; -} -.form-group-material-indigo input.form-control:focus ~ .floating-label { - color: #3f51b5; -} -.form-group-material-lightblue input.form-control:focus ~ .floating-label { - color: #03a9f4; -} -.form-group-material-cyan input.form-control:focus ~ .floating-label { - color: #00bcd4; -} -.form-group-material-teal input.form-control:focus ~ .floating-label { - color: #009688; -} -.form-group-material-lightgreen input.form-control:focus ~ .floating-label { - color: #8bc34a; -} -.form-group-material-lime input.form-control:focus ~ .floating-label { - color: #cddc39; -} -.form-group-material-lightyellow input.form-control:focus ~ .floating-label { - color: #ffeb3b; -} -.form-group-material-orange input.form-control:focus ~ .floating-label { - color: #ff9800; -} -.form-group-material-deeporange input.form-control:focus ~ .floating-label { - color: #ff5722; -} -.form-group-material-grey input.form-control:focus ~ .floating-label { - color: #9e9e9e; -} -.form-group-material-bluegrey input.form-control:focus ~ .floating-label { - color: #607d8b; -} -.form-group-material-brown input.form-control:focus ~ .floating-label { - color: #795548; -} -.form-group-material-lightgrey input.form-control:focus ~ .floating-label { - color: #ececec; -} -.input-group .form-control-wrapper { - margin-right: 5px; - margin-left: 5px; - bottom: -10px; -} -.input-group .form-control-wrapper .form-control { - float: none; -} -.input-group .input-group-addon { - border: 0; -} -.input-group .input-group-btn .btn { - border-radius: 4px; -} -select.form-control { - border: 0; - box-shadow: none; - border-bottom: 1px solid #757575; - border-radius: 0; -} -select.form-control:focus { - box-shadow: none; - border-color: #757575; -} -legend { - border-bottom: 0; -} -.container .well, -.container-fluid .well, -.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; -} -.container .well p, -.container-fluid .well p, -.container .jumbotron p, -.container-fluid .jumbotron p { - font-weight: 300; -} -.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; - border: 0; -} -.modal-content .modal-header { - border-bottom: 0; -} -.modal-content .modal-footer { - border-top: 0; -} -.modal-content .modal-footer .btn + .btn { - margin-bottom: 10px; -} -.list-group { - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - border-radius: 2px; -} -.list-group .list-group-item:last-child { - border-bottom-right-radius: 2px; - border-bottom-left-radius: 2px; -} -.list-group .list-group-item:first-child { - border-top-right-radius: 2px; - boborder-top-right-radius: 2px; -} -.navbar { - background-color: #4285f4; - border: 0; - border-radius: 0; -} -.navbar .navbar-brand { - position: relative; - height: 60px; - line-height: 30px; - color: #ffffff; -} -.navbar .navbar-brand:hover, -.navbar .navbar-brand:focus { - color: #ffffff; - background-color: transparent; -} -.navbar .navbar-text { - color: #ffffff; -} -.navbar .navbar-nav > li > a { - color: #ffffff; - padding-top: 20px; - padding-bottom: 20px; -} -.navbar .navbar-nav > li > a:hover, -.navbar .navbar-nav > li > a:focus { - color: #ffffff; - background-color: transparent; -} -.navbar .navbar-nav > .active > a, -.navbar .navbar-nav > .active > a:hover, -.navbar .navbar-nav > .active > a:focus { - color: #ffffff; - background-color: rgba(0, 0, 0, 0.05); -} -.navbar .navbar-nav > .disabled > a, -.navbar .navbar-nav > .disabled > a:hover, -.navbar .navbar-nav > .disabled > a:focus { - color: #e5e5e5; - background-color: transparent; -} -.navbar .navbar-toggle { - border-color: #ffffff; -} -.navbar .navbar-toggle:hover, -.navbar .navbar-toggle:focus { - background-color: transparent; -} -.navbar .navbar-toggle .icon-bar { - background-color: #ffffff; -} -.navbar .navbar-collapse, -.navbar .navbar-form { - border-color: rgba(0, 0, 0, 0.1); -} -.navbar .navbar-nav > .open > a, -.navbar .navbar-nav > .open > a:hover, -.navbar .navbar-nav > .open > a:focus { - background-color: rgba(0, 0, 0, 0.05); - color: #ffffff; -} -@media (max-width: 767px) { - .navbar .navbar-nav .open .dropdown-menu > .dropdown-header { - border: 0; - color: #d4d4d4; - } - .navbar .navbar-nav .open .dropdown-menu .divider { - background-color: #ffffff; - } - .navbar .navbar-nav .open .dropdown-menu > li > a { - color: #ffffff; - } - .navbar .navbar-nav .open .dropdown-menu > li > a:hover, - .navbar .navbar-nav .open .dropdown-menu > li > a:focus { - color: #ffffff; - background-color: transparent; - } - .navbar .navbar-nav .open .dropdown-menu > .active > a, - .navbar .navbar-nav .open .dropdown-menu > .active > a:hover, - .navbar .navbar-nav .open .dropdown-menu > .active > a:focus { - color: #ffffff; - background-color: rgba(0, 0, 0, 0.05); - } - .navbar .navbar-nav .open .dropdown-menu > .disabled > a, - .navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover, - .navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus { - color: #e5e5e5; - background-color: transparent; - } -} -.navbar .navbar-link { - color: #ffffff; -} -.navbar .navbar-link:hover { - color: #ffffff; -} -.navbar .btn-link { - color: #ffffff; -} -.navbar .btn-link:hover, -.navbar .btn-link:focus { - color: #ffffff; -} -.navbar .btn-link[disabled]:hover, -fieldset[disabled] .navbar .btn-link:hover, -.navbar .btn-link[disabled]:focus, -fieldset[disabled] .navbar .btn-link:focus { - color: #e5e5e5; -} -.navbar .navbar-form .form-control-wrapper .form-control { - border-color: #ffffff; - color: #ffffff; -} -.navbar .navbar-form .form-control-wrapper .material-input:before, -.navbar .navbar-form .form-control-wrapper input:focus ~ .material-input:after { - background-color: #ffffff; -} -.navbar .navbar-form ::-webkit-input-placeholder { - color: #ffffff; -} -.navbar .navbar-form :-moz-placeholder { - color: #ffffff; -} -.navbar .navbar-form ::-moz-placeholder { - color: #ffffff; -} -.navbar .navbar-form :-ms-input-placeholder { - color: #ffffff; -} -.navbar, -.navbar-default { - background-color: #4285f4; -} -.navbar-primary { - background-color: #4285f4; -} -.navbar-success { - background-color: #0f9d58; -} -.navbar-info { - background-color: #03a9f4; -} -.navbar-warning { - background-color: #ff5722; -} -.navbar-danger { - background-color: #f44336; -} -.navbar-material-red { - background-color: #f44336; -} -.navbar-material-pink { - background-color: #e91e63; -} -.navbar-material-purple { - background-color: #9c27b0; -} -.navbar-material-deeppurple { - background-color: #673ab7; -} -.navbar-material-indigo { - background-color: #3f51b5; -} -.navbar-material-lightblue { - background-color: #03a9f4; -} -.navbar-material-cyan { - background-color: #00bcd4; -} -.navbar-material-teal { - background-color: #009688; -} -.navbar-material-lightgreen { - background-color: #8bc34a; -} -.navbar-material-lime { - background-color: #cddc39; -} -.navbar-material-lightyellow { - background-color: #ffeb3b; -} -.navbar-material-orange { - background-color: #ff9800; -} -.navbar-material-deeporange { - background-color: #ff5722; -} -.navbar-material-grey { - background-color: #9e9e9e; -} -.navbar-material-bluegrey { - background-color: #607d8b; -} -.navbar-material-brown { - background-color: #795548; -} -.navbar-material-lightgrey { - background-color: #ececec; -} -.navbar-inverse { - background-color: #3f51b5; -} -.dropdown-menu { - border: 0; - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -} -.dropdown-menu .divider { - background-color: rgba(229, 229, 229, 0.12); -} -.dropdown-menu li { - overflow: hidden; - position: relative; -} -.dropdown-menu li a:hover { - background-color: transparent; -} -.alert { - border: 0px; - border-radius: 0; -} -.alert a, -.alert .alert-link { - color: #FFFFFF; -} -.alert, -.alert-default { - background-color: #ffffff; -} -.alert-primary { - background-color: #4285f4; -} -.alert-success { - background-color: #0f9d58; -} -.alert-info { - background-color: #03a9f4; -} -.alert-warning { - background-color: #ff5722; -} -.alert-danger { - background-color: #f44336; -} -.alert-material-red { - background-color: #f44336; -} -.alert-material-pink { - background-color: #e91e63; -} -.alert-material-purple { - background-color: #9c27b0; -} -.alert-material-deeppurple { - background-color: #673ab7; -} -.alert-material-indigo { - background-color: #3f51b5; -} -.alert-material-lightblue { - background-color: #03a9f4; -} -.alert-material-cyan { - background-color: #00bcd4; -} -.alert-material-teal { - background-color: #009688; -} -.alert-material-lightgreen { - background-color: #8bc34a; -} -.alert-material-lime { - background-color: #cddc39; -} -.alert-material-lightyellow { - background-color: #ffeb3b; -} -.alert-material-orange { - background-color: #ff9800; -} -.alert-material-deeporange { - background-color: #ff5722; -} -.alert-material-grey { - background-color: #9e9e9e; -} -.alert-material-bluegrey { - background-color: #607d8b; -} -.alert-material-brown { - background-color: #795548; -} -.alert-material-lightgrey { - background-color: #ececec; -} -.alert-info, -.alert-danger, -.alert-warning, -.alert-success { - color: #FFFFFF; -} -.alert-default a, -.alert-default .alert-link { - color: #000000; -} -.progress { - height: 4px; - border-radius: 0; - box-shadow: none; - background: #c8c8c8; -} -.progress .progress-bar { - box-shadow: none; -} -.progress .progress-bar, -.progress .progress-bar-default { - background-color: #4285f4; -} -.progress .progress-bar-primary { - background-color: #4285f4; -} -.progress .progress-bar-success { - background-color: #0f9d58; -} -.progress .progress-bar-info { - background-color: #03a9f4; -} -.progress .progress-bar-warning { - background-color: #ff5722; -} -.progress .progress-bar-danger { - background-color: #f44336; -} -.progress .progress-bar-material-red { - background-color: #f44336; -} -.progress .progress-bar-material-pink { - background-color: #e91e63; -} -.progress .progress-bar-material-purple { - background-color: #9c27b0; -} -.progress .progress-bar-material-deeppurple { - background-color: #673ab7; -} -.progress .progress-bar-material-indigo { - background-color: #3f51b5; -} -.progress .progress-bar-material-lightblue { - background-color: #03a9f4; -} -.progress .progress-bar-material-cyan { - background-color: #00bcd4; -} -.progress .progress-bar-material-teal { - background-color: #009688; -} -.progress .progress-bar-material-lightgreen { - background-color: #8bc34a; -} -.progress .progress-bar-material-lime { - background-color: #cddc39; -} -.progress .progress-bar-material-lightyellow { - background-color: #ffeb3b; -} -.progress .progress-bar-material-orange { - background-color: #ff9800; -} -.progress .progress-bar-material-deeporange { - background-color: #ff5722; -} -.progress .progress-bar-material-grey { - background-color: #9e9e9e; -} -.progress .progress-bar-material-bluegrey { - background-color: #607d8b; -} -.progress .progress-bar-material-brown { - background-color: #795548; -} -.progress .progress-bar-material-lightgrey { - background-color: #ececec; -} -.text-warning { - color: #ff5722; -} -.text-primary { - color: #4285f4; -} -.text-danger { - color: #f44336; -} -.text-success { - color: #0f9d58; -} -.text-info { - color: #03a9f4; -} -.nav-tabs { - background: #4285f4; -} -.nav-tabs > li > a { - color: #FFFFFF; - border: 0; - margin: 0; -} -.nav-tabs > li > a:hover { - background: transparent; - border: 0; -} -.nav-tabs > li.active > a, -.nav-tabs > li.active > a:hover, -.nav-tabs > li.open > a, -.nav-tabs > li.open > a:hover { - background: transparent !important; - border: 0 !important; - color: #FFFFFF !important; - font-weight: 500; -} -.nav-tabs > li.disabled > a, -.nav-tabs > li.disabled > a:hover { - color: rgba(255, 255, 255, 0.5); -} -.popover, -.tooltip-inner { - background: #323232; - color: #FFF; - border-radius: 2px; -} -.tooltip, -.tooltip.in { - opacity: 1; -} -.popover.left .arrow:after, -.tooltip.left .arrow:after, -.popover.left .tooltip-arrow, -.tooltip.left .tooltip-arrow { - border-left-color: #323232; -} -.popover.right .arrow:after, -.tooltip.right .arrow:after, -.popover.right .tooltip-arrow, -.tooltip.right .tooltip-arrow { - border-right-color: #323232; -} -.popover.top .arrow:after, -.tooltip.top .arrow:after, -.popover.top .tooltip-arrow, -.tooltip.top .tooltip-arrow { - border-top-color: #323232; -} -.popover.bottom .arrow:after, -.tooltip.bottom .arrow:after, -.popover.bottom .tooltip-arrow, -.tooltip.bottom .tooltip-arrow { - border-bottom-color: #323232; -} -.snackbar { - display: inline-block; - position: fixed; - z-index: 99999; - left: 20px; - bottom: 0; - min-width: 288px; - max-width: 568px; - padding: 14px 15px; - margin-bottom: 20px; - color: #ffffff; - font-size: 14px; - background-color: #323232; - border-radius: 2px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - opacity: 0; - -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in; - transition: transform 0.2s ease-in-out, opacity 0.2s ease-in; - -webkit-transform: translateY(200%); - transform: translateY(200%); -} -.snackbar.snackbar-opened { - opacity: 1; - -webkit-transform: none; - transform: none; -} -.snackbar.toast { - border-radius: 200px; -} diff --git a/less/material.less b/less/material.less index ce2d9058..c890bbc2 100644 --- a/less/material.less +++ b/less/material.less @@ -122,3 +122,8 @@ legend { @import "tabs.less"; @import "popups.less"; + + +// External plugins +@import "plugin-snackbarjs.less"; +@import "plugin-nouislider.less"; diff --git a/less/plugin-nouislider.less b/less/plugin-nouislider.less new file mode 100644 index 00000000..1b168ad0 --- /dev/null +++ b/less/plugin-nouislider.less @@ -0,0 +1,98 @@ +// main: material.less +.noUi-target, +.noUi-target * { + -webkit-touch-callout: none; + -webkit-user-select: none; + -ms-touch-action: none; + -ms-user-select: none; + -moz-user-select: none; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.noUi-base { + width: 100%; + height: 100%; + position: relative; +} +.noUi-origin { + position: absolute; + right: 0; + top: 0; + left: 0; + bottom: 0; +} +.noUi-handle { + position: relative; + z-index: 1; + box-sizing: border-box; + -webkit-box-sizing: border-box; +} +.noUi-stacking .noUi-handle { + z-index: 10; +} +.noUi-stacking + .noUi-origin { + *z-index: -1; +} +.noUi-state-tap .noUi-origin { + -webkit-transition: left 0.3s, top 0.3s; + transition: left 0.3s, top 0.3s; +} +.noUi-state-drag * { + cursor: inherit !important; +} +.noUi-horizontal { + height: 10px; +} +.noUi-horizontal .noUi-handle { + box-sizing: border-box; + width: 12px; + height: 12px; + left: -10px; + top: -5px; +} +.noUi-horizontal.noUi-extended { + padding: 0 15px; +} +.noUi-horizontal.noUi-extended .noUi-origin { + right: -15px; +} +.noUi-background { + height: 2px; + margin: 20px 0; +} +.noUi-origin { + border-radius: 0; + height: 2px; + background: #c8c8c8; + &[style^="left: 0"] .noUi-handle { + background-color: #fff; + border: 2px solid #c8c8c8; + &:active { + border-width: 1px; + } + } +} +.noUi-target { + border-radius: 2px; +} +.noUi-handle { + border-radius: 100%; + cursor: default; + transition: all 0.2s ease-out; + border: 1px solid; +} +.noUi-horizontal .noUi-handle:active { + transform: scale(2.5); +} +[disabled].noUi-slider{ + opacity: 0.5; +} +[disabled] .noUi-handle { + cursor: not-allowed; +} + +.slider { + .variations(~" .noUi-handle", background-color, @primary); + .variations(~" .noUi-handle", border-color, @primary); + .variations(~"", background-color, @primary); +}