adds inline radio support

This commit is contained in:
TJ 2016-04-25 22:28:41 +05:30
parent dff3eec918
commit 6ecac7e5e1
2 changed files with 55 additions and 59 deletions

View File

@ -3,24 +3,21 @@
& ~ .circle {
opacity: @opacity;
}
& ~ .check {
background-color: @color;
}
& ~ .circle {
border-color: @color;
}
}
.radio {
label {
.radio label,
label.radio-inline {
cursor: pointer;
padding-left: 45px;
position: relative;
color: @mdb-radio-label-color;
.mdb-label-color-toggle-focus();
span {
display: block;
position: absolute;
@ -64,12 +61,13 @@
}
}
.radio,
.radio-inline {
input[type=radio] {
opacity: 0;
height: 0;
width: 0;
overflow: hidden;
&:checked {
.radio-color(@mdb-radio-color-on, 1);
}
@ -77,12 +75,9 @@
transform: scale3d(0.55, 0.55, 1);
}
}
input[type=radio][disabled] {
// light theme spec: Disabled: #000000, Opacity 26%
.radio-color(@black, 0.26);
// dark theme spec: Disabled: #FFFFFF, Opacity 30%
.theme-dark & {
.radio-color(@white, 0.30);
@ -92,7 +87,8 @@
// Prevent ripple effect on page load
.is-focused {
.radio {
.radio,
.radio-inline {
input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms;
}

View File

@ -72,7 +72,7 @@
"inputElements": "input.form-control, textarea.form-control, select.form-control",
"checkboxElements": ".checkbox > label > input[type=checkbox], label.checkbox-inline > 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) {
// Add fake-checkbox to material checkboxes