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

Merge pull request #983 from tilwinjoy/inline-radio-checkbox

Browse Source 
Adding support for inline checkbox and radio
This commit is contained in:
Kevin Ross 2016-04-26 09:37:03 -05:00
commit 455e5aeb4a
3 changed files with 57 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
less/_checkboxes.less
View File

@ -2,14 +2,16 @@
.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,
label.checkbox-inline {
// Hide native checkbox // Hide native checkbox
input[type=checkbox] { input[type=checkbox] {
opacity: 0; opacity: 0;
@ -135,7 +137,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,
label.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;

88
less/_radios.less
View File

@ -13,55 +13,55 @@
} }
} }
.radio { .radio label, label.radio-inline {
label {
cursor: pointer; cursor: pointer;
padding-left: 45px; padding-left: 45px;
position: relative; position: relative;
color: @mdb-radio-label-color; color: @mdb-radio-label-color;
.mdb-label-color-toggle-focus(); .mdb-label-color-toggle-focus();
}
span { .radio, label.radio-inline {
display: block; span {
position: absolute; display: block;
left: 10px; position: absolute;
top: 2px; left: 10px;
transition-duration: 0.2s; top: 2px;
} transition-duration: 0.2s;
.circle { }
border: 2px solid @mdb-radio-color-off; .circle {
height: 15px; border: 2px solid @mdb-radio-color-off;
width: 15px; height: 15px;
border-radius: 100%; width: 15px;
} border-radius: 100%;
.check { }
height: 15px; .check {
width: 15px; height: 15px;
border-radius: 100%; width: 15px;
background-color: @mdb-radio-color-on; border-radius: 100%;
transform: scale3d(0, 0, 0); background-color: @mdb-radio-color-on;
} transform: scale3d(0, 0, 0);
.check:after { }
display: block; .check:after {
position: absolute; display: block;
content: ""; position: absolute;
background-color: @mdb-text-color-primary; content: "";
left: -18px; background-color: @mdb-text-color-primary;
top: -18px; left: -18px;
height: 50px; top: -18px;
width: 50px; height: 50px;
border-radius: 100%; width: 50px;
z-index: 1; border-radius: 100%;
opacity: 0; z-index: 1;
margin: 0; opacity: 0;
transform: scale3d(1.5, 1.5, 1); margin: 0;
} transform: scale3d(1.5, 1.5, 1);
input[type=radio]:not(:checked) ~ .check:after { }
animation: rippleOff 500ms; input[type=radio]:not(:checked) ~ .check:after {
} animation: rippleOff 500ms;
input[type=radio]:checked ~ .check:after { }
animation: rippleOn; input[type=radio]:checked ~ .check:after {
} animation: rippleOn;
} }
input[type=radio] { input[type=radio] {
@ -92,7 +92,7 @@
// Prevent ripple effect on page load // Prevent ripple effect on page load
.is-focused { .is-focused {
.radio { .radio, label.radio-inline {
input[type=radio]:checked ~ .check:after { input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms; animation: rippleOn 500ms;
} }

4
scripts/material.js
View File

@ -74,9 +74,9 @@
".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], label.radio-inline > input[type=radio]"
}, },
"checkbox": function (selector) { "checkbox": function (selector) {
// Add fake-checkbox to material checkboxes // Add fake-checkbox to material checkboxes