diff --git a/README.md b/README.md index bf944aa0..65935d62 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,11 @@ Check out [the demo at this link](http://fezvrasta.github.io/bootstrap-material- bower install bootstrap-material-design --save +## Getting started + +Navigate to the `template/` folder in this repository, and you will see the `index.html` file, which has the CSS include statements, in the `head` section and the JS includes just before `body` section closes. + +You need to copy the `material/` folder to the root of your project, ensuring that all the files in your project can access the files through the relative URL, supplied in the CSS and the JS includes. ## Features diff --git a/template/index.html b/template/index.html new file mode 100644 index 00000000..aa7ab2f0 --- /dev/null +++ b/template/index.html @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + +

+ You can add your site here. +

+ +

+ To ensure that material-design theme is working, check out the buttons below. +

+ +

+ If you can see the ripple effect on clicking them, then you are good to go! +

+ + +

+ Default + Primary + Success + Info + Warning + Danger + Link +

+ + + + + + + + + + + + diff --git a/template/material/material.css b/template/material/material.css new file mode 100644 index 00000000..f79ae617 --- /dev/null +++ b/template/material/material.css @@ -0,0 +1,3247 @@ +/* Generated by less 1.7.5 */ +@-webkit-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: rgba(255, 255, 255, 0.84); +} +body, +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.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; + border: 0; + margin: 10px 1px; + cursor: pointer; + border-radius: 4px; + text-transform: uppercase; + text-decoration: none; + color: rgba(255, 255, 255, 0.84); + -webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); + transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); + outline: none !important; +} +.btn:hover { + color: rgba(255, 255, 255, 0.84); +} +.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: rgba(0, 0, 0, 0.84); +} +.btn-link:hover, +.btn:not([class^="btn btn-"]):hover, +.btn-default:hover { + color: rgba(0, 0, 0, 0.84); +} +.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); + -webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); + transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); +} +.btn-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); + -webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); + transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); +} +.btn-group:active:not(.btn-link), +.btn-group-vertical:active:not(.btn-link) { + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); +} +.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); + -webkit-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); + transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); +} +.btn-group.btn-group-raised:active:not(.btn-link), +.btn-group-vertical.btn-group-raised:active:not(.btn-link) { + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); +} +.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; +} +.btn-fab { + margin: 0; + padding: 15px; + font-size: 26px; + width: 56px; + height: 56px; +} +.btn-fab, +.btn-fab:hover, +.btn-fab-default, +.btn-fab:hover-default { + background-color: transparent; +} +.btn-fab-primary, +.btn-fab:hover-primary { + background-color: #4285f4; +} +.btn-fab-success, +.btn-fab:hover-success { + background-color: #0f9d58; +} +.btn-fab-info, +.btn-fab:hover-info { + background-color: #03a9f4; +} +.btn-fab-warning, +.btn-fab:hover-warning { + background-color: #ff5722; +} +.btn-fab-danger, +.btn-fab:hover-danger { + background-color: #f44336; +} +.btn-fab-material-red, +.btn-fab:hover-material-red { + background-color: #f44336; +} +.btn-fab-material-pink, +.btn-fab:hover-material-pink { + background-color: #e91e63; +} +.btn-fab-material-purple, +.btn-fab:hover-material-purple { + background-color: #9c27b0; +} +.btn-fab-material-deeppurple, +.btn-fab:hover-material-deeppurple { + background-color: #673ab7; +} +.btn-fab-material-indigo, +.btn-fab:hover-material-indigo { + background-color: #3f51b5; +} +.btn-fab-material-lightblue, +.btn-fab:hover-material-lightblue { + background-color: #03a9f4; +} +.btn-fab-material-cyan, +.btn-fab:hover-material-cyan { + background-color: #00bcd4; +} +.btn-fab-material-teal, +.btn-fab:hover-material-teal { + background-color: #009688; +} +.btn-fab-material-lightgreen, +.btn-fab:hover-material-lightgreen { + background-color: #8bc34a; +} +.btn-fab-material-lime, +.btn-fab:hover-material-lime { + background-color: #cddc39; +} +.btn-fab-material-lightyellow, +.btn-fab:hover-material-lightyellow { + background-color: #ffeb3b; +} +.btn-fab-material-orange, +.btn-fab:hover-material-orange { + background-color: #ff9800; +} +.btn-fab-material-deeporange, +.btn-fab:hover-material-deeporange { + background-color: #ff5722; +} +.btn-fab-material-grey, +.btn-fab:hover-material-grey { + background-color: #9e9e9e; +} +.btn-fab-material-bluegrey, +.btn-fab:hover-material-bluegrey { + background-color: #607d8b; +} +.btn-fab-material-brown, +.btn-fab:hover-material-brown { + background-color: #795548; +} +.btn-fab-material-lightgrey, +.btn-fab:hover-material-lightgrey { + background-color: #ececec; +} +.btn-fab, +.btn-fab .ripple-wrapper { + border-radius: 100%; +} +.btn-fab.btn-mini { + width: 40px; + height: 40px; + padding: 13px; + font-size: 15px; +} +.form-horizontal .checkbox { + padding-top: 15px; +} +.checkbox { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); +} +.checkbox label { + cursor: pointer; + padding-left: 45px; + position: relative; +} +.checkbox label span { + display: block; + position: absolute; + left: 0px; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; +} +.checkbox label .check:after { + display: block; + position: absolute; + content: ""; + background-color: rgba(0, 0, 0, 0.84); + left: -5px; + top: -15px; + height: 50px; + width: 50px; + border-radius: 100%; + z-index: 1; + opacity: 0; + margin: 0; +} +.checkbox label .check:before { + display: block; + content: ""; + border: 2px solid rgba(0, 0, 0, 0.84); + height: 20px; + width: 20px; + -webkit-transition-delay: 0.2s; + 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] { + opacity: 0; +} +.checkbox input[type=checkbox] ~ .check:before { + position: absolute; + top: 2px; + left: 11px; + width: 18px; + height: 18px; + border: solid 2px; + border-color: #5a5a5a; + -webkit-animation: uncheck 300ms ease-out forwards; + -ms-animation: uncheck 300ms ease-out forwards; + animation: uncheck 300ms ease-out forwards; +} +.checkbox input[type=checkbox]:focus ~ .check:after { + opacity: 0.2; +} +.checkbox input[type=checkbox]:checked ~ .check:before { + -webkit-animation: check 300ms ease-out forwards; + -ms-animation: check 300ms ease-out forwards; + animation: check 300ms ease-out forwards; +} +.checkbox input[type=checkbox]:not(:checked) ~ .check:after { + -webkit-animation: rippleOff 500ms; + -ms-animation: rippleOff 500ms; + animation: rippleOff 500ms; +} +.checkbox input[type=checkbox]:checked ~ .check:after { + -webkit-animation: rippleOn 500ms; + -ms-animation: rippleOn 500ms; + animation: rippleOn 500ms; +} +.checkbox input[type=checkbox][disabled]:not(:checked) ~ .check:before { + opacity: 0.5; +} +.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, +.checkbox-default input[type=checkbox]:checked ~ .check:after { + background-color: #0f9d58; +} +.checkbox-primary input[type=checkbox]:checked ~ .check:after { + background-color: #4285f4; +} +.checkbox-success input[type=checkbox]:checked ~ .check:after { + background-color: #0f9d58; +} +.checkbox-info input[type=checkbox]:checked ~ .check:after { + background-color: #03a9f4; +} +.checkbox-warning input[type=checkbox]:checked ~ .check:after { + background-color: #ff5722; +} +.checkbox-danger input[type=checkbox]:checked ~ .check:after { + background-color: #f44336; +} +.checkbox-material-red input[type=checkbox]:checked ~ .check:after { + background-color: #f44336; +} +.checkbox-material-pink input[type=checkbox]:checked ~ .check:after { + background-color: #e91e63; +} +.checkbox-material-purple input[type=checkbox]:checked ~ .check:after { + background-color: #9c27b0; +} +.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check:after { + background-color: #673ab7; +} +.checkbox-material-indigo input[type=checkbox]:checked ~ .check:after { + background-color: #3f51b5; +} +.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:after { + background-color: #03a9f4; +} +.checkbox-material-cyan input[type=checkbox]:checked ~ .check:after { + background-color: #00bcd4; +} +.checkbox-material-teal input[type=checkbox]:checked ~ .check:after { + background-color: #009688; +} +.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check:after { + background-color: #8bc34a; +} +.checkbox-material-lime input[type=checkbox]:checked ~ .check:after { + background-color: #cddc39; +} +.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check:after { + background-color: #ffeb3b; +} +.checkbox-material-orange input[type=checkbox]:checked ~ .check:after { + background-color: #ff9800; +} +.checkbox-material-deeporange input[type=checkbox]:checked ~ .check:after { + background-color: #ff5722; +} +.checkbox-material-grey input[type=checkbox]:checked ~ .check:after { + background-color: #9e9e9e; +} +.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check:after { + background-color: #607d8b; +} +.checkbox-material-brown input[type=checkbox]:checked ~ .check:after { + background-color: #795548; +} +.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after { + background-color: #ececec; +} +@-webkit-keyframes uncheck { + 0% { + top: -3px; + left: 17px; + width: 10px; + height: 21px; + border-color: #0f9d58; + border-left-color: transparent; + border-top-color: transparent; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + } + 50% { + top: 14px; + left: 17px; + width: 4px; + height: 4px; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + border-color: #0f9d58; + border-left-color: transparent; + border-top-color: transparent; + } + 51% { + border-color: #5a5a5a; + border-left-color: #5a5a5a; + border-top-color: #5a5a5a; + } + 100% { + top: 1px; + left: 12px; + width: 18px; + height: 18px; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + border-color: #5a5a5a; + border-left-color: #5a5a5a; + border-top-color: #5a5a5a; + } +} +@-webkit-keyframes check { + 100% { + top: -3px; + left: 17px; + width: 10px; + height: 21px; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + border-color: #0f9d58; + border-left-color: transparent; + border-top-color: transparent; + } + 51% { + border-left: transparent; + border-top-color: transparent; + } + 50% { + top: 14px; + left: 17px; + width: 4px; + height: 4px; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + border-color: #5a5a5a; + border-left-color: #5a5a5a; + border-top-color: #5a5a5a; + } + 0% { + top: 1px; + left: 12px; + width: 18px; + height: 18px; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + border-color: #5a5a5a; + border-left-color: #5a5a5a; + border-top-color: #5a5a5a; + } +} +@-ms-keyframes check { + 100% { + top: -3px; + left: 17px; + width: 10px; + height: 21px; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + border-color: #0f9d58; + border-left-color: transparent; + border-top-color: transparent; + } + 51% { + border-left: transparent; + border-top-color: transparent; + } + 50% { + top: 14px; + left: 17px; + width: 4px; + height: 4px; + -ms-transform: rotate(45deg); + transform: rotate(45deg); + border-color: #5a5a5a; + border-left-color: #5a5a5a; + border-top-color: #5a5a5a; + } + 0% { + top: 1px; + left: 12px; + width: 18px; + height: 18px; + -ms-transform: rotate(0deg); + transform: rotate(0deg); + border-color: #5a5a5a; + border-left-color: #5a5a5a; + border-top-color: #5a5a5a; + } +} +@keyframes check { + 100% { + top: -3px; + left: 17px; + width: 10px; + height: 21px; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + border-color: #0f9d58; + border-left-color: transparent; + border-top-color: transparent; + } + 51% { + border-left: transparent; + border-top-color: transparent; + } + 50% { + top: 14px; + left: 17px; + width: 4px; + height: 4px; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + border-color: #5a5a5a; + border-left-color: #5a5a5a; + border-top-color: #5a5a5a; + } + 0% { + top: 1px; + left: 12px; + width: 18px; + height: 18px; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + border-color: #5a5a5a; + border-left-color: #5a5a5a; + border-top-color: #5a5a5a; + } +} +@-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; + } +} +.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; + -webkit-transition-duration: 0.2s; + transition-duration: 0.2s; +} +.radio label .circle { + border: 2px solid rgba(0, 0, 0, 0.84); + height: 15px; + width: 15px; + border-radius: 100%; +} +.radio label .check { + height: 15px; + width: 15px; + border-radius: 100%; + background-color: rgba(0, 0, 0, 0.84); + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); +} +.radio label .check:after { + 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); + -ms-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); +} +.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: rgba(0, 0, 0, 0.84); +} +.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 { + -webkit-transform: scale(0.55); + -ms-transform: scale(0.55); + transform: scale(0.55); +} +.radio input[type=radio][disabled] ~ .circle { + border-color: rgba(0, 0, 0, 0.84); +} +.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, +fieldset[disabled] .form-control:focus, +.form-control-wrapper .form-control:focus, +.form-control:focus, +fieldset[disabled] .form-control.focus, +.form-control-wrapper .form-control.focus, +.form-control.focus { + padding: 0; + float: none; + border: 0; + box-shadow: none; + border-radius: 0; + background: transparent; + border-bottom: 1px solid #757575; +} +fieldset[disabled] .form-control:not(textarea):not(select), +.form-control-wrapper .form-control:not(textarea):not(select), +.form-control:not(textarea):not(select), +fieldset[disabled] .form-control:focus:not(textarea):not(select), +.form-control-wrapper .form-control:focus:not(textarea):not(select), +.form-control:focus:not(textarea):not(select), +fieldset[disabled] .form-control.focus:not(textarea):not(select), +.form-control-wrapper .form-control.focus:not(textarea):not(select), +.form-control.focus:not(textarea):not(select) { + height: 28px; +} +fieldset[disabled] .form-control:disabled, +.form-control-wrapper .form-control:disabled, +.form-control:disabled, +fieldset[disabled] .form-control:focus:disabled, +.form-control-wrapper .form-control:focus:disabled, +.form-control:focus:disabled, +fieldset[disabled] .form-control.focus:disabled, +.form-control-wrapper .form-control.focus:disabled, +.form-control.focus:disabled { + border-style: dashed; +} +select.form-control { + height: 23px; +} +select[multiple].form-control, +select[multiple].form-control:focus, +select[multiple].form-control.focus { + height: 85px; +} +.form-control-wrapper { + position: relative; + /* active state */ +} +.form-control-wrapper .form-control:focus, +.form-control-wrapper .form-control.focus { + outline: none; +} +.form-control-wrapper .floating-label { + color: #7E7E7E; + font-size: 14px; + position: absolute; + pointer-events: none; + left: 0px; + top: 5px; + -webkit-transition: 0.2s ease all; + transition: 0.2s ease all; + opacity: 0; +} +.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, +.form-control-wrapper .form-control.focus:invalid ~ .floating-label { + color: #f44336; +} +.form-control-wrapper .form-control:focus ~ .material-input:after, +.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:before, +.form-control-wrapper .form-control:focus:invalid ~ .material-input:after, +.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; + -webkit-transform: scaleX(0); + -ms-transform: scaleX(0); + transform: scaleX(0); + -webkit-transition: -webkit-transform 0s; + transition: transform 0s; +} +.form-control-wrapper .form-control:focus ~ .material-input:before, +.form-control-wrapper .form-control.focus ~ .material-input:before { + -webkit-transform: scaleX(1); + -ms-transform: scaleX(1); + transform: scaleX(1); + -webkit-transition: -webkit-transform 0.2s ease-out; + transition: transform 0.2s ease-out; +} +.form-control-wrapper .material-input:after { + content: ""; + position: absolute; + height: 18px; + width: 100px; + margin-top: -1px; + top: 7px; + left: 0; + pointer-events: none; + opacity: 0.9; + -webkit-transform-origin: left; + -ms-transform-origin: left; + transform-origin: left; +} +.form-control-wrapper .input-lg ~ .material-input:after { + 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, +.form-control-wrapper .form-control.focus ~ .material-input:after { + -webkit-animation: input-highlight 0.3s ease; + animation: input-highlight 0.3s ease; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + opacity: 0; +} +.form-control-wrapper select ~ .material-input:after { + display: none; +} +.form-group.has-warning .material-input:before, +.form-group.has-warning input.form-control:focus ~ .material-input:after, +.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:not(.empty) ~ .floating-label { + color: #ff5722; +} +.form-group.has-error .material-input:before, +.form-group.has-error input.form-control:focus ~ .material-input:after, +.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:not(.empty) ~ .floating-label { + color: #f44336; +} +.form-group.has-success .material-input:before, +.form-group.has-success input.form-control:focus ~ .material-input:after, +.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:not(.empty) ~ .floating-label { + color: #0f9d58; +} +.form-group.has-info .material-input:before, +.form-group.has-info input.form-control:focus ~ .material-input:after, +.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:not(.empty) ~ .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 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: rgba(0, 0, 0, 0.84); +} +.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:not(.empty) ~ .floating-label, +.form-group-default input.form-control:not(.empty) ~ .floating-label { + color: #3f51b5; +} +.form-group-primary input.form-control:not(.empty) ~ .floating-label { + color: #4285f4; +} +.form-group-success input.form-control:not(.empty) ~ .floating-label { + color: #0f9d58; +} +.form-group-info input.form-control:not(.empty) ~ .floating-label { + color: #03a9f4; +} +.form-group-warning input.form-control:not(.empty) ~ .floating-label { + color: #ff5722; +} +.form-group-danger input.form-control:not(.empty) ~ .floating-label { + color: #f44336; +} +.form-group-material-red input.form-control:not(.empty) ~ .floating-label { + color: #f44336; +} +.form-group-material-pink input.form-control:not(.empty) ~ .floating-label { + color: #e91e63; +} +.form-group-material-purple input.form-control:not(.empty) ~ .floating-label { + color: #9c27b0; +} +.form-group-material-deeppurple input.form-control:not(.empty) ~ .floating-label { + color: #673ab7; +} +.form-group-material-indigo input.form-control:not(.empty) ~ .floating-label { + color: #3f51b5; +} +.form-group-material-lightblue input.form-control:not(.empty) ~ .floating-label { + color: #03a9f4; +} +.form-group-material-cyan input.form-control:not(.empty) ~ .floating-label { + color: #00bcd4; +} +.form-group-material-teal input.form-control:not(.empty) ~ .floating-label { + color: #009688; +} +.form-group-material-lightgreen input.form-control:not(.empty) ~ .floating-label { + color: #8bc34a; +} +.form-group-material-lime input.form-control:not(.empty) ~ .floating-label { + color: #cddc39; +} +.form-group-material-lightyellow input.form-control:not(.empty) ~ .floating-label { + color: #ffeb3b; +} +.form-group-material-orange input.form-control:not(.empty) ~ .floating-label { + color: #ff9800; +} +.form-group-material-deeporange input.form-control:not(.empty) ~ .floating-label { + color: #ff5722; +} +.form-group-material-grey input.form-control:not(.empty) ~ .floating-label { + color: #9e9e9e; +} +.form-group-material-bluegrey input.form-control:not(.empty) ~ .floating-label { + color: #607d8b; +} +.form-group-material-brown input.form-control:not(.empty) ~ .floating-label { + color: #795548; +} +.form-group-material-lightgrey input.form-control:not(.empty) ~ .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, +select.form-control.focus { + box-shadow: none; + border-color: #757575; +} +@keyframes input-highlight { + 0% { + left: 20%; + -webkit-transform: scaleX(20%); + transform: scaleX(20%); + } + 99% { + -webkit-transform: scaleX(0); + transform: scaleX(0); + left: 0; + opacity: 1; + } + 100% { + opacity: 0; + } +} +.form-control-wrapper input[type=file] { + opacity: 0; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; +} +legend { + border-bottom: 0; +} +.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 { + border-radius: 0; +} +.list-group .list-group-item { + background-color: transparent; + overflow: hidden; + border: 0; + border-radius: 0; + padding: 0 16px; +} +.list-group .list-group-item .row-picture, +.list-group .list-group-item .row-action-primary { + float: left; + display: inline-block; + padding-right: 16px; +} +.list-group .list-group-item .row-picture img, +.list-group .list-group-item .row-action-primary img, +.list-group .list-group-item .row-picture i, +.list-group .list-group-item .row-action-primary i, +.list-group .list-group-item .row-picture label, +.list-group .list-group-item .row-action-primary label { + display: block; + width: 56px; + height: 56px; +} +.list-group .list-group-item .row-picture img, +.list-group .list-group-item .row-action-primary img { + background: rgba(0, 0, 0, 0.1); + padding: 1px; +} +.list-group .list-group-item .row-picture img.circle, +.list-group .list-group-item .row-action-primary img.circle { + border-radius: 100%; +} +.list-group .list-group-item .row-picture i, +.list-group .list-group-item .row-action-primary i { + background: rgba(0, 0, 0, 0.25); + border-radius: 100%; + text-align: center; + line-height: 56px; + font-size: 20px; + color: white; +} +.list-group .list-group-item .row-picture label, +.list-group .list-group-item .row-action-primary label { + margin-left: 7px; + margin-right: -7px; + margin-top: 5px; + margin-bottom: -5px; +} +.list-group .list-group-item .row-content { + display: inline-block; + width: -webkit-calc(100% - 92px); + width: calc(100% - 92px); + min-height: 66px; +} +.list-group .list-group-item .row-content .action-secondary { + position: absolute; + right: 16px; + top: 16px; +} +.list-group .list-group-item .row-content .action-secondary i { + font-size: 20px; + color: rgba(0, 0, 0, 0.25); + cursor: pointer; +} +.list-group .list-group-item .row-content .action-secondary ~ * { + max-width: -webkit-calc(100% - 30px); + max-width: calc(100% - 30px); +} +.list-group .list-group-item .row-content .least-content { + position: absolute; + right: 16px; + top: 0px; + color: rgba(0, 0, 0, 0.54); + font-size: 14px; +} +.list-group .list-group-item .list-group-item-heading { + color: rgba(0, 0, 0, 0.77); + font-size: 20px; + line-height: 29px; +} +.list-group .list-group-separator { + clear: both; + overflow: hidden; + margin-top: 10px; + margin-bottom: 10px; +} +.list-group .list-group-separator:before { + content: ""; + width: -webkit-calc(100% - 90px); + width: calc(100% - 90px); + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + float: right; +} +.navbar { + background-color: #4285f4; + border: 0; + border-radius: 0; +} +.navbar .navbar-brand { + position: relative; + height: 60px; + line-height: 30px; + color: rgba(255, 255, 255, 0.84); +} +.navbar .navbar-brand:hover, +.navbar .navbar-brand:focus { + color: rgba(255, 255, 255, 0.84); + background-color: transparent; +} +.navbar .navbar-text { + color: rgba(255, 255, 255, 0.84); + margin-top: 20px; + margin-bottom: 20px; +} +.navbar .navbar-nav > li > a { + color: rgba(255, 255, 255, 0.84); + padding-top: 20px; + padding-bottom: 20px; +} +.navbar .navbar-nav > li > a:hover, +.navbar .navbar-nav > li > a:focus { + color: rgba(255, 255, 255, 0.84); + background-color: transparent; +} +.navbar .navbar-nav > .active > a, +.navbar .navbar-nav > .active > a:hover, +.navbar .navbar-nav > .active > a:focus { + color: rgba(255, 255, 255, 0.84); + 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: rgba(255, 255, 255, 0.84); +} +.navbar .navbar-toggle:hover, +.navbar .navbar-toggle:focus { + background-color: transparent; +} +.navbar .navbar-toggle .icon-bar { + background-color: rgba(255, 255, 255, 0.84); +} +.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: rgba(255, 255, 255, 0.84); +} +@media (max-width: 767px) { + .navbar .navbar-nav .open .dropdown-menu > .dropdown-header { + border: 0; + color: rgba(212, 212, 212, 0.84); + } + .navbar .navbar-nav .open .dropdown-menu .divider { + background-color: rgba(255, 255, 255, 0.84); + } + .navbar .navbar-nav .open .dropdown-menu > li > a { + color: rgba(255, 255, 255, 0.84); + } + .navbar .navbar-nav .open .dropdown-menu > li > a:hover, + .navbar .navbar-nav .open .dropdown-menu > li > a:focus { + color: rgba(255, 255, 255, 0.84); + 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: rgba(255, 255, 255, 0.84); + 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: rgba(255, 255, 255, 0.84); +} +.navbar .navbar-link:hover { + color: rgba(255, 255, 255, 0.84); +} +.navbar .btn-link { + color: rgba(255, 255, 255, 0.84); +} +.navbar .btn-link:hover, +.navbar .btn-link:focus { + color: rgba(255, 255, 255, 0.84); +} +.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 { + margin-top: 16px; +} +.navbar .navbar-form .form-control-wrapper .form-control, +.navbar .navbar-form .form-control { + border-color: rgba(255, 255, 255, 0.84); + color: rgba(255, 255, 255, 0.84); +} +.navbar .navbar-form .form-control-wrapper .material-input:before, +.navbar .navbar-form .form-control-wrapper input:focus ~ .material-input:after { + background-color: rgba(255, 255, 255, 0.84); +} +.navbar .navbar-form ::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.84); +} +.navbar .navbar-form :-moz-placeholder { + color: rgba(255, 255, 255, 0.84); +} +.navbar .navbar-form ::-moz-placeholder { + color: rgba(255, 255, 255, 0.84); +} +.navbar .navbar-form :-ms-input-placeholder { + color: rgba(255, 255, 255, 0.84); +} +.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; +} +.navbar-material-white { + background-color: #FFF; +} +.navbar-material-white .navbar-brand, +.navbar-material-white .navbar-brand:hover, +.navbar-material-white .navbar-brand:focus { + color: rgba(0, 0, 0, 0.84); +} +.navbar-material-white .navbar-nav > li > a { + color: rgba(0, 0, 0, 0.84); +} +.navbar-material-white .navbar-nav > li > a:hover, +.navbar-material-white .navbar-nav > li > a:focus { + color: rgba(0, 0, 0, 0.84); + background-color: transparent; +} +.navbar-material-white .navbar-nav > .active > a, +.navbar-material-white .navbar-nav > .active > a:hover, +.navbar-material-white .navbar-nav > .active > a:focus { + color: rgba(0, 0, 0, 0.84); + background-color: rgba(0, 0, 0, 0.05); +} +.navbar-material-white .navbar-nav > .disabled > a, +.navbar-material-white .navbar-nav > .disabled > a:hover, +.navbar-material-white .navbar-nav > .disabled > a:focus { + color: rgba(0, 0, 0, 0.84); + background-color: transparent; +} +.navbar-material-white .navbar-nav > .open > a, +.navbar-material-white .navbar-nav > .open > a:hover, +.navbar-material-white .navbar-nav > .open > a:focus { + background-color: rgba(0, 0, 0, 0.05); + color: rgba(0, 0, 0, 0.84); +} +.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: rgba(0, 0, 0, 0.08); +} +.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; +} +.icon, +.icon-default { + color: rgba(0, 0, 0, 0.84); +} +.icon-primary { + color: #4285f4; +} +.icon-success { + color: #0f9d58; +} +.icon-info { + color: #03a9f4; +} +.icon-warning { + color: #ff5722; +} +.icon-danger { + color: #f44336; +} +.icon-material-red { + color: #f44336; +} +.icon-material-pink { + color: #e91e63; +} +.icon-material-purple { + color: #9c27b0; +} +.icon-material-deeppurple { + color: #673ab7; +} +.icon-material-indigo { + color: #3f51b5; +} +.icon-material-lightblue { + color: #03a9f4; +} +.icon-material-cyan { + color: #00bcd4; +} +.icon-material-teal { + color: #009688; +} +.icon-material-lightgreen { + color: #8bc34a; +} +.icon-material-lime { + color: #cddc39; +} +.icon-material-lightyellow { + color: #ffeb3b; +} +.icon-material-orange { + color: #ff9800; +} +.icon-material-deeporange { + color: #ff5722; +} +.icon-material-grey { + color: #9e9e9e; +} +.icon-material-bluegrey { + color: #607d8b; +} +.icon-material-brown { + color: #795548; +} +.icon-material-lightgrey { + color: #ececec; +} +.snackbar { + background-color: #323232; + color: rgba(255, 255, 255, 0.84); + font-size: 14px; + border-radius: 2px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); + height: 0; + -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s; + transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, padding 0 linear 0.2s, height 0 linear 0.2s; + -webkit-transform: translateY(200%); + -ms-transform: translateY(200%); + transform: translateY(200%); +} +.snackbar.snackbar-opened { + padding: 14px 15px; + margin-bottom: 20px; + height: auto; + -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s; + transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0 linear 0.2s, height 0 linear 0.2s; + -webkit-transform: none; + -ms-transform: none; + transform: none; +} +.snackbar.toast { + 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; + -moz-box-sizing: border-box; + 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 { + -moz-box-sizing: border-box; + 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 { + margin: 0; + 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.noUi-active { + border-width: 1px; +} +.noUi-target { + border-radius: 2px; +} +.noUi-handle { + border-radius: 100%; + cursor: default; + -webkit-transition: all 0.2s ease-out; + transition: all 0.2s ease-out; + border: 1px solid; +} +.noUi-horizontal { + height: 2px; + margin: 15px 0; +} +.noUi-horizontal .noUi-handle.noUi-active { + -webkit-transform: scale(2.5); + -ms-transform: scale(2.5); + transform: scale(2.5); +} +[disabled].noUi-slider { + opacity: 0.5; +} +[disabled] .noUi-handle { + cursor: not-allowed; +} +.slider { + background: #c8c8c8; +} +.slider.noUi-connect, +.slider-default.noUi-connect { + background-color: #4285f4; +} +.slider-primary.noUi-connect { + background-color: #4285f4; +} +.slider-success.noUi-connect { + background-color: #0f9d58; +} +.slider-info.noUi-connect { + background-color: #03a9f4; +} +.slider-warning.noUi-connect { + background-color: #ff5722; +} +.slider-danger.noUi-connect { + background-color: #f44336; +} +.slider-material-red.noUi-connect { + background-color: #f44336; +} +.slider-material-pink.noUi-connect { + background-color: #e91e63; +} +.slider-material-purple.noUi-connect { + background-color: #9c27b0; +} +.slider-material-deeppurple.noUi-connect { + background-color: #673ab7; +} +.slider-material-indigo.noUi-connect { + background-color: #3f51b5; +} +.slider-material-lightblue.noUi-connect { + background-color: #03a9f4; +} +.slider-material-cyan.noUi-connect { + background-color: #00bcd4; +} +.slider-material-teal.noUi-connect { + background-color: #009688; +} +.slider-material-lightgreen.noUi-connect { + background-color: #8bc34a; +} +.slider-material-lime.noUi-connect { + background-color: #cddc39; +} +.slider-material-lightyellow.noUi-connect { + background-color: #ffeb3b; +} +.slider-material-orange.noUi-connect { + background-color: #ff9800; +} +.slider-material-deeporange.noUi-connect { + background-color: #ff5722; +} +.slider-material-grey.noUi-connect { + background-color: #9e9e9e; +} +.slider-material-bluegrey.noUi-connect { + background-color: #607d8b; +} +.slider-material-brown.noUi-connect { + background-color: #795548; +} +.slider-material-lightgrey.noUi-connect { + background-color: #ececec; +} +.slider .noUi-connect, +.slider-default .noUi-connect { + background-color: #4285f4; +} +.slider-primary .noUi-connect { + background-color: #4285f4; +} +.slider-success .noUi-connect { + background-color: #0f9d58; +} +.slider-info .noUi-connect { + background-color: #03a9f4; +} +.slider-warning .noUi-connect { + background-color: #ff5722; +} +.slider-danger .noUi-connect { + background-color: #f44336; +} +.slider-material-red .noUi-connect { + background-color: #f44336; +} +.slider-material-pink .noUi-connect { + background-color: #e91e63; +} +.slider-material-purple .noUi-connect { + background-color: #9c27b0; +} +.slider-material-deeppurple .noUi-connect { + background-color: #673ab7; +} +.slider-material-indigo .noUi-connect { + background-color: #3f51b5; +} +.slider-material-lightblue .noUi-connect { + background-color: #03a9f4; +} +.slider-material-cyan .noUi-connect { + background-color: #00bcd4; +} +.slider-material-teal .noUi-connect { + background-color: #009688; +} +.slider-material-lightgreen .noUi-connect { + background-color: #8bc34a; +} +.slider-material-lime .noUi-connect { + background-color: #cddc39; +} +.slider-material-lightyellow .noUi-connect { + background-color: #ffeb3b; +} +.slider-material-orange .noUi-connect { + background-color: #ff9800; +} +.slider-material-deeporange .noUi-connect { + background-color: #ff5722; +} +.slider-material-grey .noUi-connect { + background-color: #9e9e9e; +} +.slider-material-bluegrey .noUi-connect { + background-color: #607d8b; +} +.slider-material-brown .noUi-connect { + background-color: #795548; +} +.slider-material-lightgrey .noUi-connect { + background-color: #ececec; +} +.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; +} \ No newline at end of file diff --git a/template/material/material.js b/template/material/material.js new file mode 100644 index 00000000..d15fdfce --- /dev/null +++ b/template/material/material.js @@ -0,0 +1,84 @@ +/* globals ripples */ + +$(function (){ + + if (ripples) { + ripples.init(".btn:not(.btn-link), .navbar a, .nav-tabs a, .withripple"); + } + + 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").not(".bs-material").addClass("bs-material").after(""); + + // 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); + } + }); + + }; + 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("change", ".checkbox input", function() { + $(this).blur(); + }); + + $(document).on("keyup change", ".form-control", function() { + var self = $(this); + setTimeout(function() { + if (self.val() === "") { + self.addClass("empty"); + } else { + self.removeClass("empty"); + } + }, 1); + }); + $(document) + .on("focus", ".form-control-wrapper.fileinput", function() { + $(this).find("input").addClass("focus"); + }) + .on("blur", ".form-control-wrapper.fileinput", function() { + $(this).find("input").removeClass("focus"); + }) + .on("change", ".form-control-wrapper.fileinput [type=file]", function() { + var value = ""; + $.each($(this)[0].files, function(i, file) { + console.log(file); + value += file.name + ", "; + }); + value = value.substring(0, value.length - 2); + if (value) { + $(this).prev().removeClass("empty"); + } else { + $(this).prev().addClass("empty"); + } + $(this).prev().val(value); + }); +}); \ No newline at end of file diff --git a/template/material/ripples.css b/template/material/ripples.css new file mode 100644 index 00000000..d048256d --- /dev/null +++ b/template/material/ripples.css @@ -0,0 +1,41 @@ +/* Generated by less 1.7.5 */ +.withripple { + position: relative; +} +.ripple-wrapper { + position: absolute; + top: 0; + left: 0; + z-index: 1; + width: 100%; + height: 100%; + overflow: hidden; + border-radius: 2px; +} +.ripple { + position: absolute; + width: 20px; + height: 20px; + margin-left: -10px; + margin-top: -10px; + border-radius: 100%; + background-color: rgba(0, 0, 0, 0.05); + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + -webkit-transform-origin: 50%; + -ms-transform-origin: 50%; + transform-origin: 50%; + opacity: 0; + pointer-events: none; +} +.ripple.ripple-on { + -webkit-transition: opacity 0.15s ease-in 0s, -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; + transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; + opacity: 1; +} +.ripple.ripple-out { + -webkit-transition: opacity 0.1s linear 0s !important; + transition: opacity 0.1s linear 0s !important; + opacity: 0; +} \ No newline at end of file diff --git a/template/material/ripples.js b/template/material/ripples.js new file mode 100644 index 00000000..7fa99307 --- /dev/null +++ b/template/material/ripples.js @@ -0,0 +1,130 @@ +/* Copyright 2014+, Federico Zivolo, LICENSE at https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md */ +/* globals CustomEvent */ + +var ripples = { + init : function(withRipple) { + "use strict"; + + // Cross browser matches function + function matchesSelector(dom_element, selector) { + var matches = dom_element.matches || dom_element.matchesSelector || dom_element.webkitMatchesSelector || dom_element.mozMatchesSelector || dom_element.msMatchesSelector || dom_element.oMatchesSelector; + return matches.call(dom_element, selector); + } + + // animations time + var rippleOutTime = 100, + rippleStartTime = 500; + + // Helper to bind events on dynamically created elements + var bind = function(event, selector, callback) { + document.addEventListener(event, function(e) { + var target = (typeof e.detail !== "number") ? e.detail : e.target; + + if (matchesSelector(target, selector)) { + callback(e, target); + } + }); + }; + + var rippleStart = function(e, target) { + + // Init variables + var $rippleWrapper = target, + $el = $rippleWrapper.parentNode, + $ripple = document.createElement("div"), + elPos = $el.getBoundingClientRect(), + mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top}, + scale = "transform:scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")", + rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}), + refreshElementStyle; + + $ripplecache = $ripple; + + // Set ripple class + $ripple.className = "ripple"; + + // Move ripple to the mouse position + $ripple.setAttribute("style", "left:" + mousePos.x + "px; top:" + mousePos.y + "px;"); + + // Insert new ripple into ripple wrapper + $rippleWrapper.appendChild($ripple); + + // Make sure the ripple has the class applied (ugly hack but it works) + refreshElementStyle = window.getComputedStyle($ripple).opacity; + + // Let other funtions know that this element is animating + $ripple.dataset.animating = 1; + + // Set scale value to ripple and animate it + $ripple.className = "ripple ripple-on"; + $ripple.setAttribute("style", $ripple.getAttribute("style") + ["-ms-" + scale,"-moz-" + scale,"-webkit-" + scale,scale].join(";")); + + // This function is called when the animation is finished + setTimeout(function() { + + // Let know to other functions that this element has finished the animation + $ripple.dataset.animating = 0; + document.dispatchEvent(rippleEnd); + + }, rippleStartTime); + + }; + + var rippleOut = function($ripple) { + console.log($ripple); + // Clear previous animation + $ripple.className = "ripple ripple-on ripple-out"; + + // Let ripple fade out (with CSS) + setTimeout(function() { + $ripple.remove(); + }, rippleOutTime); + }; + + // Helper, need to know if mouse is up or down + var mouseDown = false; + document.body.onmousedown = function() { + mouseDown = true; + }; + document.body.onmouseup = function() { + mouseDown = false; + }; + + // Append ripple wrapper if not exists already + var rippleInit = function(e, target) { + + if (target.getElementsByClassName("ripple-wrapper").length === 0) { + target.className += " withripple"; + var $rippleWrapper = document.createElement("div"); + $rippleWrapper.className = "ripple-wrapper"; + target.appendChild($rippleWrapper); + } + + }; + + + var $ripplecache; + + // Events handler + // init RippleJS and start ripple effect on mousedown + bind("mouseover", withRipple, rippleInit); + + console.log(withRipple); + // start ripple effect on mousedown + bind("mousedown", ".ripple-wrapper", rippleStart); + // if animation ends and user is not holding mouse then destroy the ripple + bind("rippleEnd", ".ripple-wrapper .ripple", function(e, $ripple) { + if (!mouseDown) { + rippleOut($ripple); + } + }); + // Destroy ripple when mouse is not holded anymore if the ripple still exists + bind("mouseup", ".ripple-wrapper", function() { + var $ripple = $ripplecache; + if ($ripple.dataset.animating != 1) { + rippleOut($ripple); + } + }); + + } +}; \ No newline at end of file