Merge branch 'master' of github.com:FezVrasta/bootstrap-material-design

This commit is contained in:
Nelson Omuto 2014-10-06 10:51:42 -04:00
commit 4c845b1d14
14 changed files with 1480 additions and 1215 deletions

View File

@ -2,12 +2,12 @@
[![banner](demo/imgs/banner.jpg)](#)
This Bootstrap theme is an easy way to use the new Material Design guidelines by Google in your Bootstrap 3 based application.
Just include the theme right after the Bootstrap CSS and include the javascript at the end of your document, everything will be converted to Material Design (paper) style.
This Bootstrap theme is an easy way to use the new [Material Design guidelines by Google](http://www.google.com/design/spec/material-design/introduction.html) in your Bootstrap 3 based application.
Just include the theme, after the Bootstrap CSS and include the javascript at the end of your document (Just before the end of the `<body>` tag), and everything will be converted to Material Design (paper) style.
This theme is in early development and is not ready for production.
**Note:**This theme is in early development and is not ready for production.
Check out [the demo at this link](http://fezvrasta.github.io/bootstrap-material-design/) (could be not even with the master branch).
Check out [the demo at this link](http://fezvrasta.github.io/bootstrap-material-design/) (This demo may not be even with the master branch.)
## How to install

View File

@ -1562,7 +1562,7 @@ h6,
.h4,
.h5,
.h6 {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body .well,
.container .well,
@ -2230,16 +2230,11 @@ body .jumbotron-material-lightgrey,
font-size: 15px;
}
.form-horizontal .checkbox {
padding-top: 15px;
}
.checkbox {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
padding-top: 20px;
}
.checkbox label {
padding-left: 10px;
cursor: pointer;
padding-left: 45px;
position: relative;
}
.checkbox label span {
@ -2249,6 +2244,17 @@ body .jumbotron-material-lightgrey,
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.checkbox label .check {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid;
border-radius: 2px;
overflow: hidden;
position: relative;
top: 5px;
left: -3px;
}
.checkbox label .check:after {
display: block;
position: absolute;
@ -2264,104 +2270,36 @@ body .jumbotron-material-lightgrey,
margin: 0;
}
.checkbox label .check:before {
display: block;
position: absolute;
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;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
display: block;
margin-top: -4px;
margin-left: 6px;
width: 0;
height: 0;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 0px inset;
-webkit-animation: checkbox-off 0.3s linear forwards;
animation: checkbox-off 0.3s linear forwards;
}
.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;
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;
animation: check 300ms ease-out forwards;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-webkit-animation: checkbox-on 0.3s linear forwards;
animation: checkbox-on 0.3s linear forwards;
}
.checkbox input[type=checkbox]:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms linear forwards;
@ -2455,206 +2393,260 @@ body .jumbotron-material-lightgrey,
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after {
background-color: #ececec;
}
@-webkit-keyframes uncheck {
.checkbox input[type=checkbox]:checked ~ .check:before,
.checkbox-default input[type=checkbox]:checked ~ .check:before {
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check:before {
color: #4285f4;
}
.checkbox-success input[type=checkbox]:checked ~ .check:before {
color: #0f9d58;
}
.checkbox-info input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
.checkbox-warning input[type=checkbox]:checked ~ .check:before {
color: #ff5722;
}
.checkbox-danger input[type=checkbox]:checked ~ .check:before {
color: #f44336;
}
.checkbox-material-red input[type=checkbox]:checked ~ .check:before {
color: #f44336;
}
.checkbox-material-pink input[type=checkbox]:checked ~ .check:before {
color: #e91e63;
}
.checkbox-material-purple input[type=checkbox]:checked ~ .check:before {
color: #9c27b0;
}
.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check:before {
color: #673ab7;
}
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
color: #3f51b5;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
.checkbox-material-cyan input[type=checkbox]:checked ~ .check:before {
color: #00bcd4;
}
.checkbox-material-teal input[type=checkbox]:checked ~ .check:before {
color: #009688;
}
.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check:before {
color: #8bc34a;
}
.checkbox-material-lime input[type=checkbox]:checked ~ .check:before {
color: #cddc39;
}
.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check:before {
color: #ffeb3b;
}
.checkbox-material-orange input[type=checkbox]:checked ~ .check:before {
color: #ff9800;
}
.checkbox-material-deeporange input[type=checkbox]:checked ~ .check:before {
color: #ff5722;
}
.checkbox-material-grey input[type=checkbox]:checked ~ .check:before {
color: #9e9e9e;
}
.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check:before {
color: #607d8b;
}
.checkbox-material-brown input[type=checkbox]:checked ~ .check:before {
color: #795548;
}
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:before {
color: #ececec;
}
.checkbox input[type=checkbox]:checked ~ .check,
.checkbox-default input[type=checkbox]:checked ~ .check {
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check {
color: #4285f4;
}
.checkbox-success input[type=checkbox]:checked ~ .check {
color: #0f9d58;
}
.checkbox-info input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
.checkbox-warning input[type=checkbox]:checked ~ .check {
color: #ff5722;
}
.checkbox-danger input[type=checkbox]:checked ~ .check {
color: #f44336;
}
.checkbox-material-red input[type=checkbox]:checked ~ .check {
color: #f44336;
}
.checkbox-material-pink input[type=checkbox]:checked ~ .check {
color: #e91e63;
}
.checkbox-material-purple input[type=checkbox]:checked ~ .check {
color: #9c27b0;
}
.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check {
color: #673ab7;
}
.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
color: #3f51b5;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
.checkbox-material-cyan input[type=checkbox]:checked ~ .check {
color: #00bcd4;
}
.checkbox-material-teal input[type=checkbox]:checked ~ .check {
color: #009688;
}
.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check {
color: #8bc34a;
}
.checkbox-material-lime input[type=checkbox]:checked ~ .check {
color: #cddc39;
}
.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check {
color: #ffeb3b;
}
.checkbox-material-orange input[type=checkbox]:checked ~ .check {
color: #ff9800;
}
.checkbox-material-deeporange input[type=checkbox]:checked ~ .check {
color: #ff5722;
}
.checkbox-material-grey input[type=checkbox]:checked ~ .check {
color: #9e9e9e;
}
.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check {
color: #607d8b;
}
.checkbox-material-brown input[type=checkbox]:checked ~ .check {
color: #795548;
}
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
color: #ececec;
}
@-webkit-keyframes checkbox-on {
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);
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
}
}
@keyframes checkbox-on {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
}
}
@-webkit-keyframes checkbox-off {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
25% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
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;
margin-top: -4px;
margin-left: 6px;
width: 0px;
height: 0px;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
}
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;
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 10px inset;
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 0px inset;
}
}
@keyframes uncheck {
@keyframes checkbox-off {
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);
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
25% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
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;
margin-top: -4px;
margin-left: 6px;
width: 0px;
height: 0px;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
}
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;
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 10px inset;
}
}
@-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;
}
}
@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;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 0px inset;
}
}
.form-horizontal .radio {
@ -2871,6 +2863,17 @@ body .jumbotron-material-lightgrey,
.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;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
@ -2882,6 +2885,17 @@ body .jumbotron-material-lightgrey,
opacity: 0;
}
}
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;

File diff suppressed because one or more lines are too long

560
dist/css/material.css vendored
View File

@ -1561,7 +1561,7 @@ h6,
.h4,
.h5,
.h6 {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body .well,
.container .well,
@ -2229,16 +2229,11 @@ body .jumbotron-material-lightgrey,
font-size: 15px;
}
.form-horizontal .checkbox {
padding-top: 15px;
}
.checkbox {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
padding-top: 20px;
}
.checkbox label {
padding-left: 10px;
cursor: pointer;
padding-left: 45px;
position: relative;
}
.checkbox label span {
@ -2248,6 +2243,17 @@ body .jumbotron-material-lightgrey,
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.checkbox label .check {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid;
border-radius: 2px;
overflow: hidden;
position: relative;
top: 5px;
left: -3px;
}
.checkbox label .check:after {
display: block;
position: absolute;
@ -2263,104 +2269,36 @@ body .jumbotron-material-lightgrey,
margin: 0;
}
.checkbox label .check:before {
display: block;
position: absolute;
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;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
display: block;
margin-top: -4px;
margin-left: 6px;
width: 0;
height: 0;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 0px inset;
-webkit-animation: checkbox-off 0.3s linear forwards;
animation: checkbox-off 0.3s linear forwards;
}
.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;
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;
animation: check 300ms ease-out forwards;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-webkit-animation: checkbox-on 0.3s linear forwards;
animation: checkbox-on 0.3s linear forwards;
}
.checkbox input[type=checkbox]:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms linear forwards;
@ -2454,206 +2392,260 @@ body .jumbotron-material-lightgrey,
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after {
background-color: #ececec;
}
@-webkit-keyframes uncheck {
.checkbox input[type=checkbox]:checked ~ .check:before,
.checkbox-default input[type=checkbox]:checked ~ .check:before {
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check:before {
color: #4285f4;
}
.checkbox-success input[type=checkbox]:checked ~ .check:before {
color: #0f9d58;
}
.checkbox-info input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
.checkbox-warning input[type=checkbox]:checked ~ .check:before {
color: #ff5722;
}
.checkbox-danger input[type=checkbox]:checked ~ .check:before {
color: #f44336;
}
.checkbox-material-red input[type=checkbox]:checked ~ .check:before {
color: #f44336;
}
.checkbox-material-pink input[type=checkbox]:checked ~ .check:before {
color: #e91e63;
}
.checkbox-material-purple input[type=checkbox]:checked ~ .check:before {
color: #9c27b0;
}
.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check:before {
color: #673ab7;
}
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
color: #3f51b5;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
.checkbox-material-cyan input[type=checkbox]:checked ~ .check:before {
color: #00bcd4;
}
.checkbox-material-teal input[type=checkbox]:checked ~ .check:before {
color: #009688;
}
.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check:before {
color: #8bc34a;
}
.checkbox-material-lime input[type=checkbox]:checked ~ .check:before {
color: #cddc39;
}
.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check:before {
color: #ffeb3b;
}
.checkbox-material-orange input[type=checkbox]:checked ~ .check:before {
color: #ff9800;
}
.checkbox-material-deeporange input[type=checkbox]:checked ~ .check:before {
color: #ff5722;
}
.checkbox-material-grey input[type=checkbox]:checked ~ .check:before {
color: #9e9e9e;
}
.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check:before {
color: #607d8b;
}
.checkbox-material-brown input[type=checkbox]:checked ~ .check:before {
color: #795548;
}
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:before {
color: #ececec;
}
.checkbox input[type=checkbox]:checked ~ .check,
.checkbox-default input[type=checkbox]:checked ~ .check {
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check {
color: #4285f4;
}
.checkbox-success input[type=checkbox]:checked ~ .check {
color: #0f9d58;
}
.checkbox-info input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
.checkbox-warning input[type=checkbox]:checked ~ .check {
color: #ff5722;
}
.checkbox-danger input[type=checkbox]:checked ~ .check {
color: #f44336;
}
.checkbox-material-red input[type=checkbox]:checked ~ .check {
color: #f44336;
}
.checkbox-material-pink input[type=checkbox]:checked ~ .check {
color: #e91e63;
}
.checkbox-material-purple input[type=checkbox]:checked ~ .check {
color: #9c27b0;
}
.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check {
color: #673ab7;
}
.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
color: #3f51b5;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
.checkbox-material-cyan input[type=checkbox]:checked ~ .check {
color: #00bcd4;
}
.checkbox-material-teal input[type=checkbox]:checked ~ .check {
color: #009688;
}
.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check {
color: #8bc34a;
}
.checkbox-material-lime input[type=checkbox]:checked ~ .check {
color: #cddc39;
}
.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check {
color: #ffeb3b;
}
.checkbox-material-orange input[type=checkbox]:checked ~ .check {
color: #ff9800;
}
.checkbox-material-deeporange input[type=checkbox]:checked ~ .check {
color: #ff5722;
}
.checkbox-material-grey input[type=checkbox]:checked ~ .check {
color: #9e9e9e;
}
.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check {
color: #607d8b;
}
.checkbox-material-brown input[type=checkbox]:checked ~ .check {
color: #795548;
}
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
color: #ececec;
}
@-webkit-keyframes checkbox-on {
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);
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
}
}
@keyframes checkbox-on {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
}
}
@-webkit-keyframes checkbox-off {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
25% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
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;
margin-top: -4px;
margin-left: 6px;
width: 0px;
height: 0px;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
}
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;
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 10px inset;
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 0px inset;
}
}
@keyframes uncheck {
@keyframes checkbox-off {
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);
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
25% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
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;
margin-top: -4px;
margin-left: 6px;
width: 0px;
height: 0px;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
}
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;
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 10px inset;
}
}
@-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;
}
}
@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;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 0px inset;
}
}
.form-horizontal .radio {
@ -2870,6 +2862,17 @@ body .jumbotron-material-lightgrey,
.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;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
@ -2881,6 +2884,17 @@ body .jumbotron-material-lightgrey,
opacity: 0;
}
}
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;

File diff suppressed because one or more lines are too long

View File

@ -32,9 +32,9 @@
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="well infobox">
<p>Material Design for Bootstrap is a theme for Bootstrap 3 which let you use the new Google Material Design in your favourite front-end framework.</p>
<p>If you like this project you may support me donating something on Gittip, starring this repository or reporting bugs and ideas in the issue section.</p>
<p>Read more about Material Design for Bootstrap <a href="https://github.com/FezVrasta/bootstrap-material-design">visiting the Github page</a>.</p>
<p><em>Material Design for Bootstrap</em> is a theme for Bootstrap 3 which lets you use the new <a href="http://www.google.com/design/spec/material-design/">Google Material Design</a> in your favorite front-end framework.</p>
<p>If you like this project you can support me by donating something on Gittip, starring this repository, or <a href="https://github.com/FezVrasta/bootstrap-material-design/issues">reporting bugs and ideas</a>.</p>
<p>Read more about <em>Material Design for Bootstrap</em> <a href="https://github.com/FezVrasta/bootstrap-material-design">at the Github page</a>.</p>
<a href="https://github.com/FezVrasta/bootstrap-material-design/archive/master.zip" class="btn btn-sup btn-material-pink btn-raised">
<img src="demo/imgs/download.png" alt="gittip" height=30>
@ -2062,7 +2062,7 @@
</div>
</div>
<div id="source-modal" class="modal fade">
<div id="source-modal" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
@ -2085,7 +2085,6 @@
var $button = $("<div id='source-button' class='btn btn-primary btn-xs'>&lt; &gt;</div>").click(function(){
var index = $('.bs-component').index( $(this).parent() );
console.log(index);
$.get(window.location.href, function(data){
var html = $(data).find('.bs-component').eq(index).html();
html = cleanSource(html);

View File

@ -1,13 +1,11 @@
// main: material.less
.form-horizontal .checkbox {
padding-top: 15px;
padding-top: 20px;
}
.checkbox {
transform: rotate(0deg);
label {
padding-left: 10px;
cursor: pointer;
padding-left: 45px;
position: relative;
span {
display: block;
@ -15,6 +13,17 @@
left: 0px;
transition-duration: 0.2s;
}
.check {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid;
border-radius: 2px;
overflow: hidden;
position: relative;
top: 5px;
left: -3px;
}
.check:after {
display: block;
position: absolute;
@ -30,38 +39,46 @@
margin: 0;
}
.check:before {
display: block;
position: absolute;
content: "";
border: 2px solid @lightbg-text;
height: 20px;
width: 20px;
transition-delay: 0.2s;
transform: rotate(45deg);
display: block;
margin-top: -4px;
margin-left: 6px;
width: 0;
height: 0;
box-shadow:
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 0px inset;
animation: checkbox-off 0.3s linear forwards;
}
}
// Variations
.variations(~" .check", color, @success);
// Hide native checkbox
input[type=checkbox] { opacity: 0; }
input[type=checkbox] ~ .check:before {
position: absolute;
top: 2px;
left: 11px;
width: 18px;
height: 18px;
border: solid 2px;
border-color: #5a5a5a;
animation: uncheck 300ms ease-out forwards;
}
input[type=checkbox]:focus ~ .check:after {
opacity: 0.2;
}
input[type=checkbox]:checked ~ .check {
}
input[type=checkbox]:checked ~ .check:before {
animation: check 300ms ease-out forwards;
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px;
animation: checkbox-on 0.3s linear forwards;
}
// Ripple effect on click
@ -89,103 +106,105 @@
}
.variations(~" input[type=checkbox]:checked ~ .check:after", background-color, @success);
.variations(~" input[type=checkbox]:checked ~ .check:before", color, #4caf50);
.variations(~" input[type=checkbox]:checked ~ .check", color, #4caf50);
}
@keyframes uncheck {
@keyframes checkbox-on {
0% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
transform: rotate(45deg);
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
15px 2px 0 11px;
}
50% {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px 2px 0 11px;
}
100% {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px;
}
}
@keyframes checkbox-off {
0% {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px,
0 0 0 0 inset;
}
25% {
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px,
0 0 0 0 inset;
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
transform: rotate(45deg);
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
margin-top: -4px;
margin-left: 6px;
width: 0px;
height: 0px;
box-shadow:
0 0 0 10px,
10px -10px 0 10px,
32px 0px 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
15px 2px 0 11px,
0 0 0 0 inset;
}
51% {
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
100% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow:
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 10px inset;
}
}
@keyframes check {
100% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
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;
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow:
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 0px inset;
}
}

191
less/_checkboxes_old.less Normal file
View File

@ -0,0 +1,191 @@
// main: material.less
.form-horizontal .checkbox {
padding-top: 15px;
}
.checkbox {
transform: rotate(0deg);
label {
cursor: pointer;
padding-left: 45px;
position: relative;
span {
display: block;
position: absolute;
left: 0px;
transition-duration: 0.2s;
}
.check:after {
display: block;
position: absolute;
content: "";
background-color: @lightbg-text;
left: -5px;
top: -15px;
height: 50px;
width: 50px;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
}
.check:before {
display: block;
content: "";
border: 2px solid @lightbg-text;
height: 20px;
width: 20px;
transition-delay: 0.2s;
}
}
// Variations
.variations(~" .check", color, @success);
// Hide native checkbox
input[type=checkbox] { opacity: 0; }
input[type=checkbox] ~ .check:before {
position: absolute;
top: 2px;
left: 11px;
width: 18px;
height: 18px;
border: solid 2px;
border-color: #5a5a5a;
animation: uncheck 300ms ease-out forwards;
}
input[type=checkbox]:focus ~ .check:after {
opacity: 0.2;
}
input[type=checkbox]:checked ~ .check:before {
animation: check 300ms ease-out forwards;
}
// Ripple effect on click
input[type=checkbox]:not(:checked) ~ .check:after {
animation: rippleOff 500ms linear forwards;
}
input[type=checkbox]:checked ~ .check:after {
animation: rippleOn 500ms linear forwards;
}
// Make animate quickly when not hover
&:not(:hover) input[type=checkbox] ~ .check {
&:before, &:after {
animation-duration: 1ms;
}
}
// Style for disabled inputs
input[type=checkbox][disabled]:not(:checked) ~ .check:before {
opacity: 0.5;
}
input[type=checkbox][disabled] ~ .check:after {
background-color: @lightbg-text;
transform: rotate(-45deg);
}
.variations(~" input[type=checkbox]:checked ~ .check:after", background-color, @success);
}
@keyframes uncheck {
0% {
top: -3px;
left: 17px;
width: 10px;
height: 21px;
border-color: #0f9d58;
border-left-color: transparent;
border-top-color: transparent;
transform: rotate(45deg);
}
50% {
top: 14px;
left: 17px;
width: 4px;
height: 4px;
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;
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;
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;
transform: rotate(45deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
0% {
top: 1px;
left: 12px;
width: 18px;
height: 18px;
transform: rotate(0deg);
border-color: #5a5a5a;
border-left-color: #5a5a5a;
border-top-color: #5a5a5a;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}

View File

@ -18,7 +18,7 @@ body {
}
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
// Well and Jumbotrons

View File

@ -17,7 +17,7 @@ body {
}
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
// Well and Jumbotrons

View File

@ -1562,7 +1562,7 @@ h6,
.h4,
.h5,
.h6 {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body .well,
.container .well,
@ -2230,16 +2230,11 @@ body .jumbotron-material-lightgrey,
font-size: 15px;
}
.form-horizontal .checkbox {
padding-top: 15px;
}
.checkbox {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
padding-top: 20px;
}
.checkbox label {
padding-left: 10px;
cursor: pointer;
padding-left: 45px;
position: relative;
}
.checkbox label span {
@ -2249,6 +2244,17 @@ body .jumbotron-material-lightgrey,
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.checkbox label .check {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid;
border-radius: 2px;
overflow: hidden;
position: relative;
top: 5px;
left: -3px;
}
.checkbox label .check:after {
display: block;
position: absolute;
@ -2264,104 +2270,36 @@ body .jumbotron-material-lightgrey,
margin: 0;
}
.checkbox label .check:before {
display: block;
position: absolute;
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;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
display: block;
margin-top: -4px;
margin-left: 6px;
width: 0;
height: 0;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 0px inset;
-webkit-animation: checkbox-off 0.3s linear forwards;
animation: checkbox-off 0.3s linear forwards;
}
.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;
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;
animation: check 300ms ease-out forwards;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-webkit-animation: checkbox-on 0.3s linear forwards;
animation: checkbox-on 0.3s linear forwards;
}
.checkbox input[type=checkbox]:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms linear forwards;
@ -2455,206 +2393,260 @@ body .jumbotron-material-lightgrey,
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after {
background-color: #ececec;
}
@-webkit-keyframes uncheck {
.checkbox input[type=checkbox]:checked ~ .check:before,
.checkbox-default input[type=checkbox]:checked ~ .check:before {
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check:before {
color: #4285f4;
}
.checkbox-success input[type=checkbox]:checked ~ .check:before {
color: #0f9d58;
}
.checkbox-info input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
.checkbox-warning input[type=checkbox]:checked ~ .check:before {
color: #ff5722;
}
.checkbox-danger input[type=checkbox]:checked ~ .check:before {
color: #f44336;
}
.checkbox-material-red input[type=checkbox]:checked ~ .check:before {
color: #f44336;
}
.checkbox-material-pink input[type=checkbox]:checked ~ .check:before {
color: #e91e63;
}
.checkbox-material-purple input[type=checkbox]:checked ~ .check:before {
color: #9c27b0;
}
.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check:before {
color: #673ab7;
}
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
color: #3f51b5;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
.checkbox-material-cyan input[type=checkbox]:checked ~ .check:before {
color: #00bcd4;
}
.checkbox-material-teal input[type=checkbox]:checked ~ .check:before {
color: #009688;
}
.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check:before {
color: #8bc34a;
}
.checkbox-material-lime input[type=checkbox]:checked ~ .check:before {
color: #cddc39;
}
.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check:before {
color: #ffeb3b;
}
.checkbox-material-orange input[type=checkbox]:checked ~ .check:before {
color: #ff9800;
}
.checkbox-material-deeporange input[type=checkbox]:checked ~ .check:before {
color: #ff5722;
}
.checkbox-material-grey input[type=checkbox]:checked ~ .check:before {
color: #9e9e9e;
}
.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check:before {
color: #607d8b;
}
.checkbox-material-brown input[type=checkbox]:checked ~ .check:before {
color: #795548;
}
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:before {
color: #ececec;
}
.checkbox input[type=checkbox]:checked ~ .check,
.checkbox-default input[type=checkbox]:checked ~ .check {
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check {
color: #4285f4;
}
.checkbox-success input[type=checkbox]:checked ~ .check {
color: #0f9d58;
}
.checkbox-info input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
.checkbox-warning input[type=checkbox]:checked ~ .check {
color: #ff5722;
}
.checkbox-danger input[type=checkbox]:checked ~ .check {
color: #f44336;
}
.checkbox-material-red input[type=checkbox]:checked ~ .check {
color: #f44336;
}
.checkbox-material-pink input[type=checkbox]:checked ~ .check {
color: #e91e63;
}
.checkbox-material-purple input[type=checkbox]:checked ~ .check {
color: #9c27b0;
}
.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check {
color: #673ab7;
}
.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
color: #3f51b5;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
.checkbox-material-cyan input[type=checkbox]:checked ~ .check {
color: #00bcd4;
}
.checkbox-material-teal input[type=checkbox]:checked ~ .check {
color: #009688;
}
.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check {
color: #8bc34a;
}
.checkbox-material-lime input[type=checkbox]:checked ~ .check {
color: #cddc39;
}
.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check {
color: #ffeb3b;
}
.checkbox-material-orange input[type=checkbox]:checked ~ .check {
color: #ff9800;
}
.checkbox-material-deeporange input[type=checkbox]:checked ~ .check {
color: #ff5722;
}
.checkbox-material-grey input[type=checkbox]:checked ~ .check {
color: #9e9e9e;
}
.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check {
color: #607d8b;
}
.checkbox-material-brown input[type=checkbox]:checked ~ .check {
color: #795548;
}
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
color: #ececec;
}
@-webkit-keyframes checkbox-on {
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);
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
}
}
@keyframes checkbox-on {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
}
}
@-webkit-keyframes checkbox-off {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
25% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
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;
margin-top: -4px;
margin-left: 6px;
width: 0px;
height: 0px;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
}
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;
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 10px inset;
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 0px inset;
}
}
@keyframes uncheck {
@keyframes checkbox-off {
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);
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
25% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
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;
margin-top: -4px;
margin-left: 6px;
width: 0px;
height: 0px;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
}
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;
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 10px inset;
}
}
@-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;
}
}
@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;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 0px inset;
}
}
.form-horizontal .radio {
@ -2871,6 +2863,17 @@ body .jumbotron-material-lightgrey,
.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;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
@ -2882,6 +2885,17 @@ body .jumbotron-material-lightgrey,
opacity: 0;
}
}
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;

File diff suppressed because one or more lines are too long

View File

@ -1561,7 +1561,7 @@ h6,
.h4,
.h5,
.h6 {
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body .well,
.container .well,
@ -2229,16 +2229,11 @@ body .jumbotron-material-lightgrey,
font-size: 15px;
}
.form-horizontal .checkbox {
padding-top: 15px;
}
.checkbox {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
padding-top: 20px;
}
.checkbox label {
padding-left: 10px;
cursor: pointer;
padding-left: 45px;
position: relative;
}
.checkbox label span {
@ -2248,6 +2243,17 @@ body .jumbotron-material-lightgrey,
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.checkbox label .check {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid;
border-radius: 2px;
overflow: hidden;
position: relative;
top: 5px;
left: -3px;
}
.checkbox label .check:after {
display: block;
position: absolute;
@ -2263,104 +2269,36 @@ body .jumbotron-material-lightgrey,
margin: 0;
}
.checkbox label .check:before {
display: block;
position: absolute;
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;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
display: block;
margin-top: -4px;
margin-left: 6px;
width: 0;
height: 0;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 0px inset;
-webkit-animation: checkbox-off 0.3s linear forwards;
animation: checkbox-off 0.3s linear forwards;
}
.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;
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;
animation: check 300ms ease-out forwards;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
-webkit-animation: checkbox-on 0.3s linear forwards;
animation: checkbox-on 0.3s linear forwards;
}
.checkbox input[type=checkbox]:not(:checked) ~ .check:after {
-webkit-animation: rippleOff 500ms linear forwards;
@ -2454,206 +2392,260 @@ body .jumbotron-material-lightgrey,
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:after {
background-color: #ececec;
}
@-webkit-keyframes uncheck {
.checkbox input[type=checkbox]:checked ~ .check:before,
.checkbox-default input[type=checkbox]:checked ~ .check:before {
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check:before {
color: #4285f4;
}
.checkbox-success input[type=checkbox]:checked ~ .check:before {
color: #0f9d58;
}
.checkbox-info input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
.checkbox-warning input[type=checkbox]:checked ~ .check:before {
color: #ff5722;
}
.checkbox-danger input[type=checkbox]:checked ~ .check:before {
color: #f44336;
}
.checkbox-material-red input[type=checkbox]:checked ~ .check:before {
color: #f44336;
}
.checkbox-material-pink input[type=checkbox]:checked ~ .check:before {
color: #e91e63;
}
.checkbox-material-purple input[type=checkbox]:checked ~ .check:before {
color: #9c27b0;
}
.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check:before {
color: #673ab7;
}
.checkbox-material-indigo input[type=checkbox]:checked ~ .check:before {
color: #3f51b5;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check:before {
color: #03a9f4;
}
.checkbox-material-cyan input[type=checkbox]:checked ~ .check:before {
color: #00bcd4;
}
.checkbox-material-teal input[type=checkbox]:checked ~ .check:before {
color: #009688;
}
.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check:before {
color: #8bc34a;
}
.checkbox-material-lime input[type=checkbox]:checked ~ .check:before {
color: #cddc39;
}
.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check:before {
color: #ffeb3b;
}
.checkbox-material-orange input[type=checkbox]:checked ~ .check:before {
color: #ff9800;
}
.checkbox-material-deeporange input[type=checkbox]:checked ~ .check:before {
color: #ff5722;
}
.checkbox-material-grey input[type=checkbox]:checked ~ .check:before {
color: #9e9e9e;
}
.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check:before {
color: #607d8b;
}
.checkbox-material-brown input[type=checkbox]:checked ~ .check:before {
color: #795548;
}
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check:before {
color: #ececec;
}
.checkbox input[type=checkbox]:checked ~ .check,
.checkbox-default input[type=checkbox]:checked ~ .check {
color: #4caf50;
}
.checkbox-primary input[type=checkbox]:checked ~ .check {
color: #4285f4;
}
.checkbox-success input[type=checkbox]:checked ~ .check {
color: #0f9d58;
}
.checkbox-info input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
.checkbox-warning input[type=checkbox]:checked ~ .check {
color: #ff5722;
}
.checkbox-danger input[type=checkbox]:checked ~ .check {
color: #f44336;
}
.checkbox-material-red input[type=checkbox]:checked ~ .check {
color: #f44336;
}
.checkbox-material-pink input[type=checkbox]:checked ~ .check {
color: #e91e63;
}
.checkbox-material-purple input[type=checkbox]:checked ~ .check {
color: #9c27b0;
}
.checkbox-material-deeppurple input[type=checkbox]:checked ~ .check {
color: #673ab7;
}
.checkbox-material-indigo input[type=checkbox]:checked ~ .check {
color: #3f51b5;
}
.checkbox-material-lightblue input[type=checkbox]:checked ~ .check {
color: #03a9f4;
}
.checkbox-material-cyan input[type=checkbox]:checked ~ .check {
color: #00bcd4;
}
.checkbox-material-teal input[type=checkbox]:checked ~ .check {
color: #009688;
}
.checkbox-material-lightgreen input[type=checkbox]:checked ~ .check {
color: #8bc34a;
}
.checkbox-material-lime input[type=checkbox]:checked ~ .check {
color: #cddc39;
}
.checkbox-material-lightyellow input[type=checkbox]:checked ~ .check {
color: #ffeb3b;
}
.checkbox-material-orange input[type=checkbox]:checked ~ .check {
color: #ff9800;
}
.checkbox-material-deeporange input[type=checkbox]:checked ~ .check {
color: #ff5722;
}
.checkbox-material-grey input[type=checkbox]:checked ~ .check {
color: #9e9e9e;
}
.checkbox-material-bluegrey input[type=checkbox]:checked ~ .check {
color: #607d8b;
}
.checkbox-material-brown input[type=checkbox]:checked ~ .check {
color: #795548;
}
.checkbox-material-lightgrey input[type=checkbox]:checked ~ .check {
color: #ececec;
}
@-webkit-keyframes checkbox-on {
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);
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
}
}
@keyframes checkbox-on {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
}
50% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
}
100% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
}
}
@-webkit-keyframes checkbox-off {
0% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
25% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
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;
margin-top: -4px;
margin-left: 6px;
width: 0px;
height: 0px;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
}
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;
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 10px inset;
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 0px inset;
}
}
@keyframes uncheck {
@keyframes checkbox-off {
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);
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
25% {
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
}
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;
margin-top: -4px;
margin-left: 6px;
width: 0px;
height: 0px;
box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0px 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
}
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;
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 10px inset;
}
}
@-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;
}
}
@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;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
margin-top: -2px;
margin-left: -2px;
width: 20px;
height: 20px;
box-shadow: 0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0px 0px 0 0px inset;
}
}
.form-horizontal .radio {
@ -2870,6 +2862,17 @@ body .jumbotron-material-lightgrey,
.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;
}
}
@keyframes rippleOn {
0% {
opacity: 0;
@ -2881,6 +2884,17 @@ body .jumbotron-material-lightgrey,
opacity: 0;
}
}
@-webkit-keyframes rippleOff {
0% {
opacity: 0;
}
50% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
@keyframes rippleOff {
0% {
opacity: 0;

File diff suppressed because one or more lines are too long