mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-07-22 05:59:47 +03:00
adds inline checkbox support
This commit is contained in:
TJ
parent
29c0b07d03
commit
dff3eec918
|
|
@ -1,279 +1,205 @@
|
||||||
// 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();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide native checkbox
|
.checkbox,
|
||||||
input[type=checkbox] {
|
.checkbox-inline {
|
||||||
opacity: 0;
|
// Hide native checkbox
|
||||||
position: absolute;
|
input[type=checkbox] {
|
||||||
margin: 0;
|
opacity: 0;
|
||||||
z-index: -1;
|
position: absolute;
|
||||||
width: 0;
|
margin: 0;
|
||||||
height: 0;
|
z-index: -1;
|
||||||
overflow: hidden;
|
width: 0;
|
||||||
left: 0;
|
height: 0;
|
||||||
pointer-events: none;
|
overflow: hidden;
|
||||||
}
|
left: 0;
|
||||||
|
pointer-events: none;
|
||||||
.checkbox-material {
|
|
||||||
vertical-align: middle;
|
|
||||||
position: relative;
|
|
||||||
top: 3px;
|
|
||||||
&:before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
content: "";
|
|
||||||
background-color: rgba(0,0,0,.84);
|
|
||||||
height: @mdb-checkbox-size;
|
|
||||||
width: @mdb-checkbox-size;
|
|
||||||
border-radius: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
opacity: 0;
|
|
||||||
margin: 0;
|
|
||||||
transform: scale3d(2.3, 2.3, 1);
|
|
||||||
}
|
}
|
||||||
|
.checkbox-material {
|
||||||
.check {
|
vertical-align: middle;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
top: 3px;
|
||||||
width: @mdb-checkbox-size;
|
&:before {
|
||||||
height: @mdb-checkbox-size;
|
// FIXME: document why this is necessary (doesn't seem to be on chrome)
|
||||||
border: @mdb-checkbox-border-size solid @mdb-checkbox-border-color;
|
display: block;
|
||||||
border-radius: @border-radius-base;
|
position: absolute;
|
||||||
overflow: hidden;
|
left: 0;
|
||||||
z-index: 1;
|
content: "";
|
||||||
|
background-color: rgba(0, 0, 0, .84);
|
||||||
|
height: @mdb-checkbox-size;
|
||||||
|
width: @mdb-checkbox-size;
|
||||||
|
border-radius: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 0;
|
||||||
|
margin: 0;
|
||||||
|
transform: scale3d(2.3, 2.3, 1);
|
||||||
|
}
|
||||||
|
.check {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: @mdb-checkbox-size;
|
||||||
|
height: @mdb-checkbox-size;
|
||||||
|
border: @mdb-checkbox-border-size solid @mdb-checkbox-border-color;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.check:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
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, 0 0 0 0 inset;
|
||||||
|
animation: checkbox-off;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.check:before {
|
input[type=checkbox] {
|
||||||
position: absolute;
|
&:focus + .checkbox-material .check:after {
|
||||||
content: "";
|
opacity: 0.2;
|
||||||
transform: rotate(45deg);
|
}
|
||||||
display: block;
|
&:checked {
|
||||||
margin-top: -4px;
|
// FIXME: once working - combine further to reduce code
|
||||||
margin-left: 6px;
|
& + .checkbox-material .check {
|
||||||
width: 0;
|
color: @mdb-checkbox-checked-color;
|
||||||
height: 0;
|
border-color: @mdb-checkbox-checked-color;
|
||||||
box-shadow:
|
}
|
||||||
0 0 0 0,
|
& + .checkbox-material .check:before {
|
||||||
0 0 0 0,
|
color: @mdb-checkbox-checked-color;
|
||||||
0 0 0 0,
|
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,
|
animation: checkbox-on @mdb-checkbox-animation-check forwards;
|
||||||
0 0 0 0,
|
}
|
||||||
0 0 0 0,
|
& + .checkbox-material:before {
|
||||||
0 0 0 0 inset;
|
animation: rippleOn;
|
||||||
animation: checkbox-off;
|
}
|
||||||
|
& + .checkbox-material .check:after {
|
||||||
|
//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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not(:checked) {
|
||||||
|
& + .checkbox-material:before {
|
||||||
|
animation: rippleOff;
|
||||||
|
}
|
||||||
|
& + .checkbox-material .check:after {
|
||||||
|
animation: rippleOff @mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
// Style for disabled inputs
|
||||||
|
fieldset[disabled] &,
|
||||||
input[type=checkbox] {
|
fieldset[disabled] & input[type=checkbox],
|
||||||
|
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
|
||||||
&:focus + .checkbox-material .check:after {
|
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
|
||||||
opacity: 0.2;
|
input[type=checkbox][disabled] + .circle {
|
||||||
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
input[type=checkbox][disabled] + .checkbox-material .check:after {
|
||||||
&:checked {
|
background-color: @mdb-text-color-primary;
|
||||||
|
transform: rotate(-45deg);
|
||||||
// FIXME: once working - combine further to reduce code
|
|
||||||
& + .checkbox-material .check {
|
|
||||||
color: @mdb-checkbox-checked-color;
|
|
||||||
border-color: @mdb-checkbox-checked-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
& + .checkbox-material .check:before {
|
|
||||||
color: @mdb-checkbox-checked-color;
|
|
||||||
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;
|
|
||||||
animation: checkbox-on @mdb-checkbox-animation-check forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
& + .checkbox-material:before {
|
|
||||||
animation: rippleOn;
|
|
||||||
}
|
|
||||||
|
|
||||||
& + .checkbox-material .check:after {
|
|
||||||
//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
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:checked) {
|
|
||||||
& + .checkbox-material:before {
|
|
||||||
animation: rippleOff;
|
|
||||||
}
|
|
||||||
|
|
||||||
& + .checkbox-material .check:after {
|
|
||||||
animation: rippleOff @mdb-checkbox-animation-ripple forwards; // Ripple effect on uncheck
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Style for disabled inputs
|
|
||||||
fieldset[disabled] &,
|
|
||||||
fieldset[disabled] & input[type=checkbox],
|
|
||||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
|
|
||||||
input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
|
|
||||||
input[type=checkbox][disabled] + .circle {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
input[type=checkbox][disabled] + .checkbox-material .check:after {
|
|
||||||
background-color: @mdb-text-color-primary;
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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-material {
|
.checkbox-inline {
|
||||||
.check:before {
|
.checkbox-material {
|
||||||
animation: checkbox-off @mdb-checkbox-animation-check forwards;
|
.check:before {
|
||||||
}
|
animation: checkbox-off @mdb-checkbox-animation-check forwards;
|
||||||
}
|
}
|
||||||
input[type=checkbox] {
|
|
||||||
&:checked {
|
|
||||||
& + .checkbox-material:before {
|
|
||||||
animation: rippleOn @mdb-checkbox-animation-ripple;
|
|
||||||
}
|
}
|
||||||
}
|
input[type=checkbox] {
|
||||||
&:not(:checked) {
|
&:checked {
|
||||||
& + .checkbox-material:before {
|
& + .checkbox-material:before {
|
||||||
animation: rippleOff @mdb-checkbox-animation-ripple;
|
animation: rippleOn @mdb-checkbox-animation-ripple;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not(:checked) {
|
||||||
|
& + .checkbox-material:before {
|
||||||
|
animation: rippleOff @mdb-checkbox-animation-ripple;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@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,
|
50% {
|
||||||
32px 0 0 20px,
|
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;
|
||||||
0px 32px 0 20px,
|
}
|
||||||
-5px 5px 0 10px,
|
100% {
|
||||||
15px 2px 0 11px;
|
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;
|
||||||
}
|
}
|
||||||
50% {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@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,
|
25% {
|
||||||
32px 0 0 20px,
|
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;
|
||||||
0px 32px 0 20px,
|
}
|
||||||
-5px 5px 0 10px,
|
50% {
|
||||||
20px -12px 0 11px,
|
transform: rotate(45deg);
|
||||||
0 0 0 0 inset;
|
margin-top: -4px;
|
||||||
}
|
margin-left: 6px;
|
||||||
25% {
|
width: 0;
|
||||||
box-shadow:
|
height: 0;
|
||||||
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, 15px 2px 0 11px, 0 0 0 0 inset;
|
||||||
10px -10px 0 10px,
|
}
|
||||||
32px 0 0 20px,
|
51% {
|
||||||
0px 32px 0 20px,
|
transform: rotate(0deg);
|
||||||
-5px 5px 0 10px,
|
margin-top: -2px;
|
||||||
20px -12px 0 11px,
|
margin-left: -2px;
|
||||||
0 0 0 0 inset;
|
width: 20px;
|
||||||
}
|
height: 20px;
|
||||||
50% {
|
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;
|
||||||
transform: rotate(45deg);
|
}
|
||||||
margin-top: -4px;
|
100% {
|
||||||
margin-left: 6px;
|
transform: rotate(0deg);
|
||||||
width: 0;
|
margin-top: -2px;
|
||||||
height: 0;
|
margin-left: -2px;
|
||||||
box-shadow:
|
width: 20px;
|
||||||
0 0 0 10px,
|
height: 20px;
|
||||||
10px -10px 0 10px,
|
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;
|
||||||
32px 0 0 20px,
|
}
|
||||||
0px 32px 0 20px,
|
|
||||||
-5px 5px 0 10px,
|
|
||||||
15px 2px 0 11px,
|
|
||||||
0 0 0 0 inset;
|
|
||||||
}
|
|
||||||
51% {
|
|
||||||
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 0 0 10px inset;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
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 0 0 0 inset;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes rippleOn {
|
@keyframes rippleOn {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes rippleOff {
|
@keyframes rippleOff {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
opacity: 0.2;
|
opacity: 0.2;
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -14,12 +14,8 @@
|
||||||
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.which != 9 // tab
|
||||||
&& !evt.metaKey
|
|
||||||
&& !evt.altKey
|
|
||||||
&& evt.which != 8 // backspace
|
|
||||||
&& evt.which != 9 // tab
|
|
||||||
&& evt.which != 13 // enter
|
&& evt.which != 13 // enter
|
||||||
&& evt.which != 16 // shift
|
&& evt.which != 16 // shift
|
||||||
&& evt.which != 17 // ctrl
|
&& evt.which != 17 // ctrl
|
||||||
|
|
@ -32,7 +28,7 @@
|
||||||
|
|
||||||
function _addFormGroupFocus(element) {
|
function _addFormGroupFocus(element) {
|
||||||
var $element = $(element);
|
var $element = $(element);
|
||||||
if (!$element.prop('disabled')) { // this is showing as undefined on chrome but works fine on firefox??
|
if (!$element.prop('disabled')) { // this is showing as undefined on chrome but works fine on firefox??
|
||||||
$element.closest(".form-group").addClass("is-focused");
|
$element.closest(".form-group").addClass("is-focused");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -41,7 +37,7 @@
|
||||||
$input.closest('label').hover(function () {
|
$input.closest('label').hover(function () {
|
||||||
var $i = $(this).find('input');
|
var $i = $(this).find('input');
|
||||||
if (!$i.prop('disabled')) { // hack because the _addFormGroupFocus() wasn't identifying the property on chrome
|
if (!$i.prop('disabled')) { // hack because the _addFormGroupFocus() wasn't identifying the property on chrome
|
||||||
_addFormGroupFocus($i); // need to find the input so we can check disablement
|
_addFormGroupFocus($i); // need to find the input so we can check disablement
|
||||||
}
|
}
|
||||||
}, function () {
|
}, function () {
|
||||||
_removeFormGroupFocus($(this).find('input'));
|
_removeFormGroupFocus($(this).find('input'));
|
||||||
|
|
@ -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");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user