mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-07-22 05:59:47 +03:00
Code Issues Packages Projects Releases Wiki Activity

adds inline checkbox support

Browse Source
This commit is contained in:
TJ 2016-04-25 22:19:23 +05:30
parent 29c0b07d03
commit dff3eec918
2 changed files with 182 additions and 262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
less/_checkboxes.less
View File

@ -1,15 +1,16 @@
// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox // http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
.form-group { .form-group {}
}
.checkbox { .checkbox label,
label { label.checkbox-inline {
cursor: pointer; cursor: pointer;
padding-left: 0; // Reset for Bootstrap rule padding-left: 0; // Reset for Bootstrap rule
color: @mdb-checkbox-label-color; color: @mdb-checkbox-label-color;
.mdb-label-color-toggle-focus(); .mdb-label-color-toggle-focus();
} }
.checkbox,
.checkbox-inline {
// Hide native checkbox // Hide native checkbox
input[type=checkbox] { input[type=checkbox] {
opacity: 0; opacity: 0;
@ -22,17 +23,17 @@
left: 0; left: 0;
pointer-events: none; pointer-events: none;
} }
.checkbox-material { .checkbox-material {
vertical-align: middle; vertical-align: middle;
position: relative; position: relative;
top: 3px; top: 3px;
&:before { // FIXME: document why this is necessary (doesn't seem to be on chrome) &:before {
// FIXME: document why this is necessary (doesn't seem to be on chrome)
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;
content: ""; content: "";
background-color: rgba(0,0,0,.84); background-color: rgba(0, 0, 0, .84);
height: @mdb-checkbox-size; height: @mdb-checkbox-size;
width: @mdb-checkbox-size; width: @mdb-checkbox-size;
border-radius: 100%; border-radius: 100%;
@ -41,7 +42,6 @@
margin: 0; margin: 0;
transform: scale3d(2.3, 2.3, 1); transform: scale3d(2.3, 2.3, 1);
} }
.check { .check {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -61,64 +61,42 @@
margin-left: 6px; margin-left: 6px;
width: 0; width: 0;
height: 0; height: 0;
box-shadow: 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, 0 0 0 0 inset;
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0,
0 0 0 0 inset;
animation: checkbox-off; animation: checkbox-off;
} }
} }
input[type=checkbox] { input[type=checkbox] {
&:focus + .checkbox-material .check:after { &:focus + .checkbox-material .check:after {
opacity: 0.2; opacity: 0.2;
} }
&:checked { &:checked {
// FIXME: once working - combine further to reduce code // FIXME: once working - combine further to reduce code
& + .checkbox-material .check { & + .checkbox-material .check {
color: @mdb-checkbox-checked-color; color: @mdb-checkbox-checked-color;
border-color: @mdb-checkbox-checked-color; border-color: @mdb-checkbox-checked-color;
} }
& + .checkbox-material .check:before { & + .checkbox-material .check:before {
color: @mdb-checkbox-checked-color; color: @mdb-checkbox-checked-color;
box-shadow: 0 0 0 10px, box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
10px -10px 0 10px,
32px 0 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px;
animation: checkbox-on @mdb-checkbox-animation-check forwards; animation: checkbox-on @mdb-checkbox-animation-check forwards;
} }
& + .checkbox-material:before { & + .checkbox-material:before {
animation: rippleOn; animation: rippleOn;
} }
& + .checkbox-material .check:after { & + .checkbox-material .check:after {
//background-color: @brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed //background-color: @brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed
animation: rippleOn @mdb-checkbox-animation-ripple forwards; // Ripple effect on check animation: rippleOn @mdb-checkbox-animation-ripple forwards; // Ripple effect on check
} }
} }
&:not(:checked) { &:not(:checked) {
& + .checkbox-material:before { & + .checkbox-material:before {
animation: rippleOff; animation: rippleOff;
} }
& + .checkbox-material .check:after { & + .checkbox-material .check:after {
animation: rippleOff @mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck animation: rippleOff @mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
} }
} }
} }
// Style for disabled inputs // Style for disabled inputs
fieldset[disabled] &, fieldset[disabled] &,
fieldset[disabled] & input[type=checkbox], fieldset[disabled] & input[type=checkbox],
@ -135,7 +113,8 @@
// Prevent checkbox animation and ripple effect on page load // Prevent checkbox animation and ripple effect on page load
.is-focused { .is-focused {
.checkbox { .checkbox,
.checkbox-inline {
.checkbox-material { .checkbox-material {
.check:before { .check:before {
animation: checkbox-off @mdb-checkbox-animation-check forwards; animation: checkbox-off @mdb-checkbox-animation-check forwards;
@ -158,54 +137,22 @@
@keyframes checkbox-on { @keyframes checkbox-on {
0% { 0% {
box-shadow: box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px;
0 0 0 10px,
10px -10px 0 10px,
32px 0 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
15px 2px 0 11px;
} }
50% { 50% {
box-shadow: box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px 2px 0 11px;
0 0 0 10px,
10px -10px 0 10px,
32px 0 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px 2px 0 11px;
} }
100% { 100% {
box-shadow: box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px;
0 0 0 10px,
10px -10px 0 10px,
32px 0 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px;
} }
} }
@keyframes checkbox-off { @keyframes checkbox-off {
0% { 0% {
box-shadow: box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
0 0 0 10px,
10px -10px 0 10px,
32px 0 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px,
0 0 0 0 inset;
} }
25% { 25% {
box-shadow: box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 20px -12px 0 11px, 0 0 0 0 inset;
0 0 0 10px,
10px -10px 0 10px,
32px 0 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
20px -12px 0 11px,
0 0 0 0 inset;
} }
50% { 50% {
transform: rotate(45deg); transform: rotate(45deg);
@ -213,14 +160,7 @@
margin-left: 6px; margin-left: 6px;
width: 0; width: 0;
height: 0; height: 0;
box-shadow: box-shadow: 0 0 0 10px, 10px -10px 0 10px, 32px 0 0 20px, 0px 32px 0 20px, -5px 5px 0 10px, 15px 2px 0 11px, 0 0 0 0 inset;
0 0 0 10px,
10px -10px 0 10px,
32px 0 0 20px,
0px 32px 0 20px,
-5px 5px 0 10px,
15px 2px 0 11px,
0 0 0 0 inset;
} }
51% { 51% {
transform: rotate(0deg); transform: rotate(0deg);
@ -228,14 +168,7 @@
margin-left: -2px; margin-left: -2px;
width: 20px; width: 20px;
height: 20px; height: 20px;
box-shadow: 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 0 0 10px inset;
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 0 0 10px inset;
} }
100% { 100% {
transform: rotate(0deg); transform: rotate(0deg);
@ -243,14 +176,7 @@
margin-left: -2px; margin-left: -2px;
width: 20px; width: 20px;
height: 20px; height: 20px;
box-shadow: 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 0 0 0 inset;
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 0 0 0 inset;
} }
} }

14
scripts/material.js
View File

@ -14,11 +14,7 @@
if (typeof evt.which == "undefined") { if (typeof evt.which == "undefined") {
return true; return true;
} else if (typeof evt.which == "number" && evt.which > 0) { } else if (typeof evt.which == "number" && evt.which > 0) {
return ( return (!evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8 // backspace
!evt.ctrlKey
&& !evt.metaKey
&& !evt.altKey
&& evt.which != 8 // backspace
&& evt.which != 9 // tab && evt.which != 9 // tab
&& evt.which != 13 // enter && evt.which != 13 // enter
&& evt.which != 16 // shift && evt.which != 16 // shift
@ -74,7 +70,7 @@
".pagination li:not(.active):not(.disabled) a:not(.withoutripple)" ".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"
].join(","), ].join(","),
"inputElements": "input.form-control, textarea.form-control, select.form-control", "inputElements": "input.form-control, textarea.form-control, select.form-control",
"checkboxElements": ".checkbox > label > input[type=checkbox]", "checkboxElements": ".checkbox > label > input[type=checkbox], label.checkbox-inline > input[type=checkbox]",
"togglebuttonElements": ".togglebutton > label > input[type=checkbox]", "togglebuttonElements": ".togglebutton > label > input[type=checkbox]",
"radioElements": ".radio > label > input[type=radio]" "radioElements": ".radio > label > input[type=radio]"
}, },
@ -180,8 +176,7 @@
if ($input.val() === "") { if ($input.val() === "") {
$formGroup.addClass("is-empty"); $formGroup.addClass("is-empty");
} } else {
else {
$formGroup.removeClass("is-empty"); $formGroup.removeClass("is-empty");
} }
@ -194,8 +189,7 @@
if (validate) { if (validate) {
if (isValid) { if (isValid) {
$formGroup.removeClass("has-error"); $formGroup.removeClass("has-error");
} } else {
else {
$formGroup.addClass("has-error"); $formGroup.addClass("has-error");
} }
} }