From 7414cd029d462fc385f4b7374215659877c234b7 Mon Sep 17 00:00:00 2001 From: tilwinjoy Date: Tue, 26 Apr 2016 11:38:51 +0530 Subject: [PATCH] adds support for inline radio --- less/_radios.less | 88 ++++++++++++++++++++++----------------------- scripts/material.js | 2 +- 2 files changed, 45 insertions(+), 45 deletions(-) diff --git a/less/_radios.less b/less/_radios.less index 3ed73752..53acad66 100644 --- a/less/_radios.less +++ b/less/_radios.less @@ -13,55 +13,55 @@ } } -.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; - left: 10px; - top: 2px; - 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; - } +.radio, label.radio-inline { + span { + display: block; + position: absolute; + left: 10px; + top: 2px; + 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; } input[type=radio] { @@ -92,7 +92,7 @@ // Prevent ripple effect on page load .is-focused { - .radio { + .radio, label.radio-inline { input[type=radio]:checked ~ .check:after { animation: rippleOn 500ms; } diff --git a/scripts/material.js b/scripts/material.js index 76fd9abb..e2334b35 100644 --- a/scripts/material.js +++ b/scripts/material.js @@ -76,7 +76,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