From efd350929cf1470b913cad8352dd8957600ac85f Mon Sep 17 00:00:00 2001 From: tilwinjoy Date: Tue, 26 Apr 2016 11:12:39 +0530 Subject: [PATCH 1/2] adds support for inline checkbox --- less/_checkboxes.less | 19 +++++++++++-------- scripts/material.js | 2 +- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/less/_checkboxes.less b/less/_checkboxes.less index a320dc30..9afa0ad1 100644 --- a/less/_checkboxes.less +++ b/less/_checkboxes.less @@ -2,14 +2,16 @@ .form-group { } -.checkbox { - label { - cursor: pointer; - padding-left: 0; // Reset for Bootstrap rule - color: @mdb-checkbox-label-color; - .mdb-label-color-toggle-focus(); - } +.checkbox label, +label.checkbox-inline { + cursor: pointer; + padding-left: 0; // Reset for Bootstrap rule + color: @mdb-checkbox-label-color; + .mdb-label-color-toggle-focus(); +} +.checkbox, +label.checkbox-inline { // Hide native checkbox input[type=checkbox] { opacity: 0; @@ -135,7 +137,8 @@ // Prevent checkbox animation and ripple effect on page load .is-focused { - .checkbox { + .checkbox, + label.checkbox-inline { .checkbox-material { .check:before { animation: checkbox-off @mdb-checkbox-animation-check forwards; diff --git a/scripts/material.js b/scripts/material.js index d0e3cd09..76fd9abb 100644 --- a/scripts/material.js +++ b/scripts/material.js @@ -74,7 +74,7 @@ ".pagination li:not(.active):not(.disabled) a:not(.withoutripple)" ].join(","), "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]", "radioElements": ".radio > label > input[type=radio]" }, From b92a69f0c6fb41417d7f6eeeab405d6e1ad7b977 Mon Sep 17 00:00:00 2001 From: tilwinjoy Date: Tue, 26 Apr 2016 11:38:51 +0530 Subject: [PATCH 2/2] 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