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

adds inline radio support

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
less/_radios.less
View File

@ -1,75 +1,73 @@
.radio-color(@color, @opacity){ .radio-color(@color, @opacity) {
& ~ .check, & ~ .check,
& ~ .circle { & ~ .circle {
opacity: @opacity; opacity: @opacity;
} }
& ~ .check { & ~ .check {
background-color: @color; background-color: @color;
} }
& ~ .circle { & ~ .circle {
border-color: @color; border-color: @color;
} }
} }
.radio { .radio label,
label { label.radio-inline {
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 {
span { display: block;
display: block; position: absolute;
position: absolute; left: 10px;
left: 10px; top: 2px;
top: 2px; transition-duration: 0.2s;
transition-duration: 0.2s;
}
.circle {
border: 2px solid @mdb-radio-color-off;
height: 15px;
width: 15px;
border-radius: 100%;
}
.check {
height: 15px;
width: 15px;
border-radius: 100%;
background-color: @mdb-radio-color-on;
transform: scale3d(0, 0, 0);
}
.check:after {
display: block;
position: absolute;
content: "";
background-color: @mdb-text-color-primary;
left: -18px;
top: -18px;
height: 50px;
width: 50px;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
transform: scale3d(1.5, 1.5, 1);
}
input[type=radio]:not(:checked) ~ .check:after {
animation: rippleOff 500ms;
}
input[type=radio]:checked ~ .check:after {
animation: rippleOn;
}
} }
.circle {
border: 2px solid @mdb-radio-color-off;
height: 15px;
width: 15px;
border-radius: 100%;
}
.check {
height: 15px;
width: 15px;
border-radius: 100%;
background-color: @mdb-radio-color-on;
transform: scale3d(0, 0, 0);
}
.check:after {
display: block;
position: absolute;
content: "";
background-color: @mdb-text-color-primary;
left: -18px;
top: -18px;
height: 50px;
width: 50px;
border-radius: 100%;
z-index: 1;
opacity: 0;
margin: 0;
transform: scale3d(1.5, 1.5, 1);
}
input[type=radio]:not(:checked) ~ .check:after {
animation: rippleOff 500ms;
}
input[type=radio]:checked ~ .check:after {
animation: rippleOn;
}
}
.radio,
.radio-inline {
input[type=radio] { input[type=radio] {
opacity: 0; opacity: 0;
height: 0; height: 0;
width: 0; width: 0;
overflow: hidden; overflow: hidden;
&:checked { &:checked {
.radio-color(@mdb-radio-color-on, 1); .radio-color(@mdb-radio-color-on, 1);
} }
@ -77,12 +75,9 @@
transform: scale3d(0.55, 0.55, 1); transform: scale3d(0.55, 0.55, 1);
} }
} }
input[type=radio][disabled] { input[type=radio][disabled] {
// light theme spec: Disabled: #000000, Opacity 26% // light theme spec: Disabled: #000000, Opacity 26%
.radio-color(@black, 0.26); .radio-color(@black, 0.26);
// dark theme spec: Disabled: #FFFFFF, Opacity 30% // dark theme spec: Disabled: #FFFFFF, Opacity 30%
.theme-dark & { .theme-dark & {
.radio-color(@white, 0.30); .radio-color(@white, 0.30);
@ -92,7 +87,8 @@
// Prevent ripple effect on page load // Prevent ripple effect on page load
.is-focused { .is-focused {
.radio { .radio,
.radio-inline {
input[type=radio]:checked ~ .check:after { input[type=radio]:checked ~ .check:after {
animation: rippleOn 500ms; animation: rippleOn 500ms;
} }
@ -121,4 +117,4 @@
100% { 100% {
opacity: 0; opacity: 0;
} }
} }

2
scripts/material.js
View File

@ -72,7 +72,7 @@
"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], label.checkbox-inline > 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