mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-12-01 22:13:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

btn states and toggles variations

Browse Source
This commit is contained in:
FezVrasta 2015-03-09 20:56:57 +01:00
parent 33b164294e
commit 3cf4a656bf
13 changed files with 7363 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
CHANGELOG.md
View File

@ -11,7 +11,8 @@
- Adjusted padding on dialog(modal) to be more inline with standards (thanks @GradyD) - Adjusted padding on dialog(modal) to be more inline with standards (thanks @GradyD)
- Added jQuery 1.9.1 and Bootstrap 3.0 as dependencies (thanks @GradyD) - Added jQuery 1.9.1 and Bootstrap 3.0 as dependencies (thanks @GradyD)
- fixed #468 (thanks @MatrixZ) - fixed #468 (thanks @MatrixZ)
- Added :hover, :focus, :active and .active states on buttons
- Added color variations on toggles
## v 0.2.1 ## v 0.2.1

6791
dist/css/material-fullpalette.css vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/css/material-fullpalette.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material-fullpalette.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material-fullpalette.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

525
dist/css/material.css vendored
View File

@ -2909,6 +2909,346 @@ body .jumbotron-material-blue-grey,
background-color: #607d8b; background-color: #607d8b;
color: rgba(255, 255, 255, 0.84); color: rgba(255, 255, 255, 0.84);
} }
.btn:hover:not(.btn-link):not(.btn-flat),
.btn-default:hover:not(.btn-link):not(.btn-flat) {
background-color: rgba(10, 10, 10, 0);
}
.btn-black:hover:not(.btn-link):not(.btn-flat) {
background-color: #0a0a0a;
}
.btn-white:hover:not(.btn-link):not(.btn-flat) {
background-color: #f5f5f5;
}
.btn-inverse:hover:not(.btn-link):not(.btn-flat) {
background-color: #495bc0;
}
.btn-primary:hover:not(.btn-link):not(.btn-flat) {
background-color: #00a999;
}
.btn-success:hover:not(.btn-link):not(.btn-flat) {
background-color: #11b062;
}
.btn-info:hover:not(.btn-link):not(.btn-flat) {
background-color: #0fb2fc;
}
.btn-warning:hover:not(.btn-link):not(.btn-flat) {
background-color: #ff6736;
}
.btn-danger:hover:not(.btn-link):not(.btn-flat) {
background-color: #f55549;
}
.btn-material-red:hover:not(.btn-link):not(.btn-flat) {
background-color: #f55549;
}
.btn-material-pink:hover:not(.btn-link):not(.btn-flat) {
background-color: #eb3170;
}
.btn-material-purple:hover:not(.btn-link):not(.btn-flat) {
background-color: #ab2bc1;
}
.btn-material-deep-purple:hover:not(.btn-link):not(.btn-flat) {
background-color: #7142c3;
}
.btn-material-indigo:hover:not(.btn-link):not(.btn-flat) {
background-color: #495bc0;
}
.btn-material-blue:hover:not(.btn-link):not(.btn-flat) {
background-color: #349ff4;
}
.btn-material-light-blue:hover:not(.btn-link):not(.btn-flat) {
background-color: #0fb2fc;
}
.btn-material-cyan:hover:not(.btn-link):not(.btn-flat) {
background-color: #00aac0;
}
.btn-material-teal:hover:not(.btn-link):not(.btn-flat) {
background-color: #00aa9a;
}
.btn-material-green:hover:not(.btn-link):not(.btn-flat) {
background-color: #59b75c;
}
.btn-material-light-green:hover:not(.btn-link):not(.btn-flat) {
background-color: #81bb3e;
}
.btn-material-lime:hover:not(.btn-link):not(.btn-flat) {
background-color: #c9d928;
}
.btn-material-yellow:hover:not(.btn-link):not(.btn-flat) {
background-color: #ffe927;
}
.btn-material-amber:hover:not(.btn-link):not(.btn-flat) {
background-color: #f2b500;
}
.btn-material-orange:hover:not(.btn-link):not(.btn-flat) {
background-color: #eb8c00;
}
.btn-material-deep-orange:hover:not(.btn-link):not(.btn-flat) {
background-color: #ff6736;
}
.btn-material-brown:hover:not(.btn-link):not(.btn-flat) {
background-color: #865e50;
}
.btn-material-grey:hover:not(.btn-link):not(.btn-flat) {
background-color: #a8a8a8;
}
.btn-material-blue-grey:hover:not(.btn-link):not(.btn-flat) {
background-color: #688897;
}
.btn:active:not(.btn-link):not(.btn-flat),
.btn-default:active:not(.btn-link):not(.btn-flat) {
background-color: rgba(15, 15, 15, 0);
}
.btn-black:active:not(.btn-link):not(.btn-flat) {
background-color: #0f0f0f;
}
.btn-white:active:not(.btn-link):not(.btn-flat) {
background-color: #f0f0f0;
}
.btn-inverse:active:not(.btn-link):not(.btn-flat) {
background-color: #5062c2;
}
.btn-primary:active:not(.btn-link):not(.btn-flat) {
background-color: #00b4a3;
}
.btn-success:active:not(.btn-link):not(.btn-flat) {
background-color: #12b968;
}
.btn-info:active:not(.btn-link):not(.btn-flat) {
background-color: #19b6fc;
}
.btn-warning:active:not(.btn-link):not(.btn-flat) {
background-color: #ff6e41;
}
.btn-danger:active:not(.btn-link):not(.btn-flat) {
background-color: #f65e53;
}
.btn-material-red:active:not(.btn-link):not(.btn-flat) {
background-color: #f65e53;
}
.btn-material-pink:active:not(.btn-link):not(.btn-flat) {
background-color: #ec3a76;
}
.btn-material-purple:active:not(.btn-link):not(.btn-flat) {
background-color: #b22dc9;
}
.btn-material-deep-purple:active:not(.btn-link):not(.btn-flat) {
background-color: #764ac6;
}
.btn-material-indigo:active:not(.btn-link):not(.btn-flat) {
background-color: #5062c2;
}
.btn-material-blue:active:not(.btn-link):not(.btn-flat) {
background-color: #3ea4f5;
}
.btn-material-light-blue:active:not(.btn-link):not(.btn-flat) {
background-color: #19b6fc;
}
.btn-material-cyan:active:not(.btn-link):not(.btn-flat) {
background-color: #00a1b5;
}
.btn-material-teal:active:not(.btn-link):not(.btn-flat) {
background-color: #00b5a4;
}
.btn-material-green:active:not(.btn-link):not(.btn-flat) {
background-color: #60ba63;
}
.btn-material-light-green:active:not(.btn-link):not(.btn-flat) {
background-color: #7cb33b;
}
.btn-material-lime:active:not(.btn-link):not(.btn-flat) {
background-color: #c2d125;
}
.btn-material-yellow:active:not(.btn-link):not(.btn-flat) {
background-color: #ffe81c;
}
.btn-material-amber:active:not(.btn-link):not(.btn-flat) {
background-color: #e7ae00;
}
.btn-material-orange:active:not(.btn-link):not(.btn-flat) {
background-color: #e08600;
}
.btn-material-deep-orange:active:not(.btn-link):not(.btn-flat) {
background-color: #ff6e41;
}
.btn-material-brown:active:not(.btn-link):not(.btn-flat) {
background-color: #8c6253;
}
.btn-material-grey:active:not(.btn-link):not(.btn-flat) {
background-color: #adadad;
}
.btn-material-blue-grey:active:not(.btn-link):not(.btn-flat) {
background-color: #6e8d9b;
}
.btn.active:not(.btn-link):not(.btn-flat),
.btn-default.active:not(.btn-link):not(.btn-flat) {
background-color: rgba(15, 15, 15, 0);
}
.btn-black.active:not(.btn-link):not(.btn-flat) {
background-color: #0f0f0f;
}
.btn-white.active:not(.btn-link):not(.btn-flat) {
background-color: #f0f0f0;
}
.btn-inverse.active:not(.btn-link):not(.btn-flat) {
background-color: #5062c2;
}
.btn-primary.active:not(.btn-link):not(.btn-flat) {
background-color: #00b4a3;
}
.btn-success.active:not(.btn-link):not(.btn-flat) {
background-color: #12b968;
}
.btn-info.active:not(.btn-link):not(.btn-flat) {
background-color: #19b6fc;
}
.btn-warning.active:not(.btn-link):not(.btn-flat) {
background-color: #ff6e41;
}
.btn-danger.active:not(.btn-link):not(.btn-flat) {
background-color: #f65e53;
}
.btn-material-red.active:not(.btn-link):not(.btn-flat) {
background-color: #f65e53;
}
.btn-material-pink.active:not(.btn-link):not(.btn-flat) {
background-color: #ec3a76;
}
.btn-material-purple.active:not(.btn-link):not(.btn-flat) {
background-color: #b22dc9;
}
.btn-material-deep-purple.active:not(.btn-link):not(.btn-flat) {
background-color: #764ac6;
}
.btn-material-indigo.active:not(.btn-link):not(.btn-flat) {
background-color: #5062c2;
}
.btn-material-blue.active:not(.btn-link):not(.btn-flat) {
background-color: #3ea4f5;
}
.btn-material-light-blue.active:not(.btn-link):not(.btn-flat) {
background-color: #19b6fc;
}
.btn-material-cyan.active:not(.btn-link):not(.btn-flat) {
background-color: #00a1b5;
}
.btn-material-teal.active:not(.btn-link):not(.btn-flat) {
background-color: #00b5a4;
}
.btn-material-green.active:not(.btn-link):not(.btn-flat) {
background-color: #60ba63;
}
.btn-material-light-green.active:not(.btn-link):not(.btn-flat) {
background-color: #7cb33b;
}
.btn-material-lime.active:not(.btn-link):not(.btn-flat) {
background-color: #c2d125;
}
.btn-material-yellow.active:not(.btn-link):not(.btn-flat) {
background-color: #ffe81c;
}
.btn-material-amber.active:not(.btn-link):not(.btn-flat) {
background-color: #e7ae00;
}
.btn-material-orange.active:not(.btn-link):not(.btn-flat) {
background-color: #e08600;
}
.btn-material-deep-orange.active:not(.btn-link):not(.btn-flat) {
background-color: #ff6e41;
}
.btn-material-brown.active:not(.btn-link):not(.btn-flat) {
background-color: #8c6253;
}
.btn-material-grey.active:not(.btn-link):not(.btn-flat) {
background-color: #adadad;
}
.btn-material-blue-grey.active:not(.btn-link):not(.btn-flat) {
background-color: #6e8d9b;
}
.btn.btn-flat:hover:not(.btn-ink),
.btn-default.btn-flat:hover:not(.btn-ink) {
background-color: rgba(0, 0, 0, 0.2);
}
.btn-black.btn-flat:hover:not(.btn-ink) {
background-color: rgba(0, 0, 0, 0.2);
}
.btn-white.btn-flat:hover:not(.btn-ink) {
background-color: rgba(255, 255, 255, 0.2);
}
.btn-inverse.btn-flat:hover:not(.btn-ink) {
background-color: rgba(63, 81, 181, 0.2);
}
.btn-primary.btn-flat:hover:not(.btn-ink) {
background-color: rgba(0, 149, 135, 0.2);
}
.btn-success.btn-flat:hover:not(.btn-ink) {
background-color: rgba(15, 157, 88, 0.2);
}
.btn-info.btn-flat:hover:not(.btn-ink) {
background-color: rgba(3, 169, 244, 0.2);
}
.btn-warning.btn-flat:hover:not(.btn-ink) {
background-color: rgba(255, 87, 34, 0.2);
}
.btn-danger.btn-flat:hover:not(.btn-ink) {
background-color: rgba(244, 67, 54, 0.2);
}
.btn-material-red.btn-flat:hover:not(.btn-ink) {
background-color: rgba(244, 67, 54, 0.2);
}
.btn-material-pink.btn-flat:hover:not(.btn-ink) {
background-color: rgba(233, 30, 99, 0.2);
}
.btn-material-purple.btn-flat:hover:not(.btn-ink) {
background-color: rgba(156, 39, 176, 0.2);
}
.btn-material-deep-purple.btn-flat:hover:not(.btn-ink) {
background-color: rgba(103, 58, 183, 0.2);
}
.btn-material-indigo.btn-flat:hover:not(.btn-ink) {
background-color: rgba(63, 81, 181, 0.2);
}
.btn-material-blue.btn-flat:hover:not(.btn-ink) {
background-color: rgba(33, 150, 243, 0.2);
}
.btn-material-light-blue.btn-flat:hover:not(.btn-ink) {
background-color: rgba(3, 169, 244, 0.2);
}
.btn-material-cyan.btn-flat:hover:not(.btn-ink) {
background-color: rgba(0, 188, 212, 0.2);
}
.btn-material-teal.btn-flat:hover:not(.btn-ink) {
background-color: rgba(0, 150, 136, 0.2);
}
.btn-material-green.btn-flat:hover:not(.btn-ink) {
background-color: rgba(76, 175, 80, 0.2);
}
.btn-material-light-green.btn-flat:hover:not(.btn-ink) {
background-color: rgba(139, 195, 74, 0.2);
}
.btn-material-lime.btn-flat:hover:not(.btn-ink) {
background-color: rgba(205, 220, 57, 0.2);
}
.btn-material-yellow.btn-flat:hover:not(.btn-ink) {
background-color: rgba(255, 235, 59, 0.2);
}
.btn-material-amber.btn-flat:hover:not(.btn-ink) {
background-color: rgba(255, 193, 7, 0.2);
}
.btn-material-orange.btn-flat:hover:not(.btn-ink) {
background-color: rgba(255, 152, 0, 0.2);
}
.btn-material-deep-orange.btn-flat:hover:not(.btn-ink) {
background-color: rgba(255, 87, 34, 0.2);
}
.btn-material-brown.btn-flat:hover:not(.btn-ink) {
background-color: rgba(121, 85, 72, 0.2);
}
.btn-material-grey.btn-flat:hover:not(.btn-ink) {
background-color: rgba(158, 158, 158, 0.2);
}
.btn-material-blue-grey.btn-flat:hover:not(.btn-ink) {
background-color: rgba(96, 125, 139, 0.2);
}
.btn.btn-flat { .btn.btn-flat {
background: none; background: none;
box-shadow: none; box-shadow: none;
@ -3777,7 +4117,9 @@ body .jumbotron-material-blue-grey,
vertical-align: middle; vertical-align: middle;
} }
.togglebutton, .togglebutton,
.togglebutton * { .togglebutton label,
.togglebutton input,
.togglebutton .toggle {
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
@ -3792,12 +4134,6 @@ body .jumbotron-material-blue-grey,
width: 0; width: 0;
height: 0; height: 0;
} }
.togglebutton label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(0, 149, 135, 0.5);
}
.togglebutton label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #009587;
}
.togglebutton label .toggle, .togglebutton label .toggle,
.togglebutton label input[type=checkbox][disabled]:first-of-type + .toggle { .togglebutton label input[type=checkbox][disabled]:first-of-type + .toggle {
content: ""; content: "";
@ -3837,6 +4173,176 @@ body .jumbotron-material-blue-grey,
.togglebutton label input[type=checkbox]:first-of-type:checked + .toggle:after { .togglebutton label input[type=checkbox]:first-of-type:checked + .toggle:after {
left: 15px; left: 15px;
} }
.togglebutton label input[type=checkbox]:first-of-type:checked + .toggle,
.togglebutton-default label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(0, 149, 135, 0.5);
}
.togglebutton-black label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(0, 0, 0, 0.5);
}
.togglebutton-white label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(255, 255, 255, 0.5);
}
.togglebutton-inverse label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(63, 81, 181, 0.5);
}
.togglebutton-primary label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(0, 149, 135, 0.5);
}
.togglebutton-success label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(15, 157, 88, 0.5);
}
.togglebutton-info label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(3, 169, 244, 0.5);
}
.togglebutton-warning label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(255, 87, 34, 0.5);
}
.togglebutton-danger label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(244, 67, 54, 0.5);
}
.togglebutton-material-red label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(244, 67, 54, 0.5);
}
.togglebutton-material-pink label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(233, 30, 99, 0.5);
}
.togglebutton-material-purple label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(156, 39, 176, 0.5);
}
.togglebutton-material-deep-purple label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(103, 58, 183, 0.5);
}
.togglebutton-material-indigo label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(63, 81, 181, 0.5);
}
.togglebutton-material-blue label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(33, 150, 243, 0.5);
}
.togglebutton-material-light-blue label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(3, 169, 244, 0.5);
}
.togglebutton-material-cyan label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(0, 188, 212, 0.5);
}
.togglebutton-material-teal label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(0, 150, 136, 0.5);
}
.togglebutton-material-green label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(76, 175, 80, 0.5);
}
.togglebutton-material-light-green label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(139, 195, 74, 0.5);
}
.togglebutton-material-lime label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(205, 220, 57, 0.5);
}
.togglebutton-material-yellow label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(255, 235, 59, 0.5);
}
.togglebutton-material-amber label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(255, 193, 7, 0.5);
}
.togglebutton-material-orange label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(255, 152, 0, 0.5);
}
.togglebutton-material-deep-orange label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(255, 87, 34, 0.5);
}
.togglebutton-material-brown label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(121, 85, 72, 0.5);
}
.togglebutton-material-grey label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(158, 158, 158, 0.5);
}
.togglebutton-material-blue-grey label input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(96, 125, 139, 0.5);
}
.togglebutton label input[type=checkbox]:first-of-type:checked + .toggle:after,
.togglebutton-default label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #009587;
}
.togglebutton-black label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #000000;
}
.togglebutton-white label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #ffffff;
}
.togglebutton-inverse label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #3f51b5;
}
.togglebutton-primary label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #009587;
}
.togglebutton-success label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #0f9d58;
}
.togglebutton-info label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #03a9f4;
}
.togglebutton-warning label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #ff5722;
}
.togglebutton-danger label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #f44336;
}
.togglebutton-material-red label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #f44336;
}
.togglebutton-material-pink label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #e91e63;
}
.togglebutton-material-purple label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #9c27b0;
}
.togglebutton-material-deep-purple label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #673ab7;
}
.togglebutton-material-indigo label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #3f51b5;
}
.togglebutton-material-blue label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #2196f3;
}
.togglebutton-material-light-blue label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #03a9f4;
}
.togglebutton-material-cyan label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #00bcd4;
}
.togglebutton-material-teal label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #009688;
}
.togglebutton-material-green label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #4caf50;
}
.togglebutton-material-light-green label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #8bc34a;
}
.togglebutton-material-lime label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #cddc39;
}
.togglebutton-material-yellow label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #ffeb3b;
}
.togglebutton-material-amber label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #ffc107;
}
.togglebutton-material-orange label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #ff9800;
}
.togglebutton-material-deep-orange label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #ff5722;
}
.togglebutton-material-brown label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #795548;
}
.togglebutton-material-grey label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #9e9e9e;
}
.togglebutton-material-blue-grey label input[type=checkbox]:first-of-type:checked + .toggle:after {
background-color: #607d8b;
}
.form-horizontal .radio { .form-horizontal .radio {
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -4067,7 +4573,10 @@ body .jumbotron-material-blue-grey,
opacity: 0.5; opacity: 0.5;
} }
.radio input[type=radio] { .radio input[type=radio] {
display: none; opacity: 0;
height: 0;
width: 0;
overflow: hidden;
} }
.radio input[type=radio]:checked ~ .check { .radio input[type=radio]:checked ~ .check {
-webkit-transform: scale(0.55); -webkit-transform: scale(0.55);

2
dist/css/material.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/material.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

14
index.html
View File

@ -407,6 +407,20 @@
</label> </label>
</div> </div>
<h1 class="header">Toggle Button Variations</h1>
<div class="togglebutton togglebutton-material-pink">
<label>
Wi-Fi
<input type="checkbox" checked>
</label>
</div>
<div class="togglebutton togglebutton-material-deep-orange">
<label>
Bluetooth
<input type="checkbox" checked>
</label>
</div>
<style> <style>
#toggle-button h2 { #toggle-button h2 {
font-size: 18.7199993133545px; font-size: 18.7199993133545px;

21
less/_buttons.less
View File

@ -18,10 +18,31 @@
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; outline: none !important;
.variations(~".btn-flat:not(.btn-link)", color, @lightbg-text); .variations(~".btn-flat:not(.btn-link)", color, @lightbg-text);
.background-variations(~":not(.btn-link):not(.btn-flat)", @btn-default); .background-variations(~":not(.btn-link):not(.btn-flat)", @btn-default);
// BTN hover effect
.generic-variations(~":hover:not(.btn-link):not(.btn-flat)", @btn-default, {
background-color: contrast(@material-color, darken(@material-color, 4%), lighten(@material-color, 4%), @contrast-factor);
});
// BTN active effect
.generic-variations(~":active:not(.btn-link):not(.btn-flat)", @btn-default, {
background-color: contrast(@material-color, darken(@material-color, 6%), lighten(@material-color, 6%), @contrast-factor);
});
// BTN .active effect
.generic-variations(~".active:not(.btn-link):not(.btn-flat)", @btn-default, {
background-color: contrast(@material-color, darken(@material-color, 6%), lighten(@material-color, 6%), @contrast-factor);
});
// BTN flat hover effect
.generic-variations(~".btn-flat:hover:not(.btn-ink)", @btn-default, {
background-color: fade(@material-color, 20%);
});
}
.btn {
&.btn-flat { &.btn-flat {
background: none; background: none;
box-shadow: none; box-shadow: none;

20
less/_radios.less
View File

@ -62,16 +62,16 @@
height: 0; height: 0;
width: 0; width: 0;
overflow: hidden; overflow: hidden;
} } }
input[type=radio]:checked ~ .check { input[type=radio]:checked ~ .check {
transform: scale(0.55); transform: scale(0.55);
} }
input[type=radio][disabled] ~ .circle { input[type=radio][disabled] ~ .circle {
border-color: @lightbg-text; border-color: @lightbg-text;
} }
input[type=radio][disabled] ~ .check { input[type=radio][disabled] ~ .check {
background-color: @lightbg-text; background-color: @lightbg-text;
} }
} }

21
less/_togglebutton.less
View File

@ -1,25 +1,17 @@
.togglebutton { .togglebutton {
vertical-align: middle; vertical-align: middle;
&, * { &, label, input, .toggle {
user-select: none; user-select: none;
} }
label { label {
font-weight: 400; font-weight: 400;
cursor: pointer; cursor: pointer;
// Hide original checkbox // Hide original checkbox
input[type=checkbox]:first-of-type { input[type=checkbox]:first-of-type {
opacity: 0; opacity: 0;
width: 0; width: 0;
height:0; height:0;
} }
// Switch bg on
input[type=checkbox]:first-of-type:checked + .toggle {
background-color: rgba(0, 149, 135, 0.5);
// Handle on
&:after {
background-color: #009587;
}
}
// Switch bg off and disabled // Switch bg off and disabled
.toggle, .toggle,
input[type=checkbox][disabled]:first-of-type + .toggle { input[type=checkbox][disabled]:first-of-type + .toggle {
@ -65,4 +57,11 @@
left: 15px; left: 15px;
} }
} }
// Switch bg on
.generic-variations(~" label input[type=checkbox]:first-of-type:checked + .toggle", @primary, {
background-color: fade(@material-color, 50%);
});
// Handle on
.variations(~" label input[type=checkbox]:first-of-type:checked + .toggle:after", background-color, @primary);
} }