From e1189e4b344a3186eea96ecb3541009b48d8d4ea Mon Sep 17 00:00:00 2001 From: Kevin Ross Date: Sat, 21 Nov 2015 13:17:53 -0600 Subject: [PATCH] Solves #736 radios and checkboxes need to render outside of .form-group --- index.css | 150 +++++++++++++-------------- index.html | 67 ++++++------ less/_checkboxes.less | 233 +++++++++++++++++++----------------------- less/_form.less | 4 + less/_radios.less | 26 ----- 5 files changed, 221 insertions(+), 259 deletions(-) diff --git a/index.css b/index.css index 6b2ecd1d..ce1ed189 100644 --- a/index.css +++ b/index.css @@ -16,8 +16,8 @@ .header-panel h1 { color: #FFF; - font-size: 20px; - font-weight: 400; + /*font-size: 20px;*/ + /*font-weight: 400;*/ position: absolute; bottom: 10px; padding-left: 35px; @@ -73,11 +73,11 @@ .pages .header { color: rgb(82, 101, 162); - font-size: 24px; - font-weight: normal; - margin-top: 5px; - margin-bottom: 60px; - letter-spacing: 1.20000004768372px; + /*font-size: 24px;*/ + /*font-weight: normal;*/ + /*margin-top: 5px;*/ + /*margin-bottom: 60px;*/ + /*letter-spacing: 1.20000004768372px;*/ } .page { @@ -155,44 +155,44 @@ color: #9D9D9D; } -#checkbox .sample1 label { - font-weight: bold; -} +/*#checkbox .sample1 label {*/ + /*font-weight: bold;*/ +/*}*/ -#checkbox .hint { - padding-left: 45px; - padding-top: 20px; - font-weight: 400; -} +/*#checkbox .hint {*/ + /*padding-left: 45px;*/ + /*padding-top: 20px;*/ + /*font-weight: 400;*/ +/*}*/ -#checkbox .sample1 { - padding-bottom: 20px; -} +/*#checkbox .sample1 {*/ + /*padding-bottom: 20px;*/ +/*}*/ -#checkbox h2 { - font-size: 18.7199993133545px; - font-weight: bold; - margin-bottom: 30px; -} +/*#checkbox h2 {*/ + /*font-size: 18.7199993133545px;*/ + /*font-weight: bold;*/ + /*margin-bottom: 30px;*/ +/*}*/ -#checkbox .sample2 { - width: 300px; - clear: both; - font-weight: 400; -} +/*#checkbox .sample2 {*/ + /*width: 300px;*/ + /*clear: both;*/ + /*font-weight: 400;*/ +/*}*/ -#checkbox .sample2 { - padding: 10px 0; -} +/*#checkbox .sample2 {*/ + /*padding: 10px 0;*/ +/*}*/ -#checkbox .sample2 .text { - display: inline-block; -} +/*#checkbox .sample2 .text {*/ + /*display: inline-block;*/ +/*}*/ -#checkbox .sample2 .checkbox { - float: right; - margin: 0; -} +/*#checkbox .sample2 .checkbox {*/ + /*float: right;*/ + /*margin: 0;*/ +/*}*/ /*#progress-bar h2 {*/ /*font-size: 18.7199993133545px;*/ @@ -255,9 +255,9 @@ /*margin-top: 50px;*/ /*}*/ -#radio-button .radio { - margin: 20px 10px; -} +/*#radio-button .radio {*/ + /*margin: 20px 10px;*/ +/*}*/ /*#input h2 {*/ /*padding: 14px;*/ @@ -273,19 +273,19 @@ /*margin: 30px 0;*/ /*}*/ -#slider .sample1, #slider .sample2 { - padding: 20px 0; - background-color: #f0f0f0; - margin-bottom: 20px; -} +/*#slider .sample1, #slider .sample2 {*/ + /*padding: 20px 0;*/ + /*background-color: #f0f0f0;*/ + /*margin-bottom: 20px;*/ +/*}*/ -#slider .sample2 { - height: 150px; -} +/*#slider .sample2 {*/ + /*height: 150px;*/ +/*}*/ -#slider .sample2 .slider { - margin: 0 40px; -} +/*#slider .sample2 .slider {*/ + /*margin: 0 40px;*/ +/*}*/ /*#slider h2 {*/ /*padding: 14px;*/ @@ -294,9 +294,9 @@ /*font-weight: 400;*/ /*}*/ -#slider .slider { - margin: 15px; -} +/*#slider .slider {*/ + /*margin: 15px;*/ +/*}*/ /*#button h2 {*/ /*padding: 14px;*/ @@ -305,9 +305,9 @@ /*font-weight: 400;*/ /*}*/ -#floating-action-button .btn { - margin: 20px; -} +/*#floating-action-button .btn {*/ + /*margin: 20px;*/ +/*}*/ /*#floating-action-button h2 {*/ /*padding: 14px;*/ @@ -323,10 +323,10 @@ /*font-weight: 400;*/ /*}*/ -#dropdown .dropdown { - font-size: 30px; - padding: 20px; -} +/*#dropdown .dropdown {*/ + /*font-size: 30px;*/ + /*padding: 20px;*/ +/*}*/ /*#dropdown-menu h2 {*/ /*padding: 14px;*/ @@ -335,13 +335,13 @@ /*font-weight: 400;*/ /*}*/ -#dropdown-menu .sample { - width: 200px; -} +/*#dropdown-menu .sample {*/ + /*width: 200px;*/ +/*}*/ -#dropdown-menu .form-group { - margin: 30px 0; -} +/*#dropdown-menu .form-group {*/ + /*margin: 30px 0;*/ +/*}*/ /*#toggle-button h2 {*/ /*font-size: 18.7199993133545px;*/ @@ -350,11 +350,11 @@ /*margin-top: 50px;*/ /*}*/ -#toggle-button .togglebutton label { - margin: 20px 10px; - width: 200px; -} +/*#toggle-button .togglebutton label {*/ + /*margin: 20px 10px;*/ + /*width: 200px;*/ +/*}*/ -#toggle-button .togglebutton .toggle { - float: right; -} +/*#toggle-button .togglebutton .toggle {*/ + /*float: right;*/ +/*}*/ diff --git a/index.html b/index.html index 116d4b67..e98adacd 100644 --- a/index.html +++ b/index.html @@ -217,10 +217,11 @@

Once copied you need to initialize the material javascript by adding the following javascript to your site,

$.material.init()
-
-

Checkbox default checkboxes

- +
+

Checkbox

+ +

Default inside a .form-group

Notify me about updates to apps or games that I've downloaded

- -
- -

Sound horizontal form with column label variations and checkbox-primary color

- - +

Horizontal form with column label variations and checkbox-primary color

@@ -256,7 +252,6 @@

This shows the generic label variant.

-
@@ -268,14 +263,41 @@

This shows the control-label variant.

- + +

Default outside a .form-group

+
+ +
+

Without a .form-group, .help-block always shows

+
+ +
+

Without a .form-group, .help-block sizing is the same as the label

+
-

Checkbox

+

Radio buttons

-

Keep Wi-Fi on during sleep

+

Default outside a .form-group

+
+ +
+
+ +
+

.radio-success inside a .form-group

-
- -
- -

Wi-Fi frequency band

- -
+

.radio-primary outside a .form-group

-
- -
-
+
diff --git a/less/_checkboxes.less b/less/_checkboxes.less index c5142bb5..308c3419 100644 --- a/less/_checkboxes.less +++ b/less/_checkboxes.less @@ -1,146 +1,123 @@ // http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox -.form-horizontal .checkbox { - padding-top: 20px; -} - -.form-group-checkbox-variant(@placeholder-font-size, @line-height){ - .checkbox { - // Label is set in _inputs.less - } -} - .form-group { +} - //// default label size/location - .form-group-checkbox-variant(@mdb-input-font-size-base, @mdb-input-line-height-base); - - // sm label size/location - &.form-group-sm { - .form-group-checkbox-variant(@mdb-input-font-size-small, @mdb-input-line-height-small); +.checkbox { + label { + cursor: pointer; + padding-left: 0; // Reset for Bootstrap rule + color: @mdb-checkbox-label-color; } - // lg label size/location - &.form-group-lg { - .form-group-checkbox-variant(@mdb-input-font-size-large, @mdb-input-line-height-large); + // Hide native checkbox + input[type=checkbox] { + opacity: 0; + position: absolute; + margin: 0; + z-index: -1; + width: 0; + height: 0; + overflow: hidden; + left: 0; + pointer-events: none; } - .checkbox { - label { - cursor: pointer; - padding-left: 0; // Reset for Bootstrap rule - color: @mdb-checkbox-label-color; + .checkbox-material { + vertical-align: middle; + position: relative; + top: 3px; + &:before { // FIXME: document why this is necessary (doesn't seem to be on chrome) + display: block; + position: absolute; + left: 0; + content: ""; + background-color: rgba(0,0,0,.84); + height: @mdb-checkbox-size; + width: @mdb-checkbox-size; + border-radius: 100%; + z-index: 1; + opacity: 0; + margin: 0; + transform: scale3d(2.3, 2.3, 1); } - // Hide native checkbox - input[type=checkbox] { - opacity: 0; + .check { + position: relative; + display: inline-block; + width: @mdb-checkbox-size; + height: @mdb-checkbox-size; + border: 2px solid @mdb-checkbox-border-color; + border-radius: 2px; + overflow: hidden; + z-index: 1; + } + .check:before { position: absolute; - margin: 0; - z-index: -1; + content: ""; + transform: rotate(45deg); + display: block; + margin-top: -4px; + margin-left: 6px; width: 0; height: 0; - overflow: hidden; - left: 0; - pointer-events: none; - } - - .checkbox-material { - vertical-align: middle; - position: relative; - top: 3px; - &:before { // FIXME: document why this is necessary (doesn't seem to be on chrome) - display: block; - position: absolute; - left: 0; - content: ""; - background-color: rgba(0,0,0,.84); - height: @mdb-checkbox-size; - width: @mdb-checkbox-size; - border-radius: 100%; - z-index: 1; - opacity: 0; - margin: 0; - transform: scale3d(2.3, 2.3, 1); - } - - .check { - position: relative; - display: inline-block; - width: @mdb-checkbox-size; - height: @mdb-checkbox-size; - border: 2px solid @mdb-checkbox-border-color; - border-radius: 2px; - overflow: hidden; - z-index: 1; - } - .check:before { - position: absolute; - content: ""; - transform: rotate(45deg); - display: block; - margin-top: -4px; - margin-left: 6px; - width: 0; - height: 0; - box-shadow: - 0 0 0 0, - 0 0 0 0, - 0 0 0 0, - 0 0 0 0, - 0 0 0 0, - 0 0 0 0, - 0 0 0 0 inset; - animation: checkbox-off @mdb-checkbox-animation-check forwards; - } - } - - input[type=checkbox]:focus + .checkbox-material .check:after { - opacity: 0.2; - } - input[type=checkbox]:checked + .checkbox-material .check:before { box-shadow: - 0 0 0 10px, - 10px -10px 0 10px, - 32px 0px 0 20px, - 0px 32px 0 20px, - -5px 5px 0 10px, - 20px -12px 0 11px; - animation: checkbox-on @mdb-checkbox-animation-check forwards; + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0, + 0 0 0 0 inset; + animation: checkbox-off @mdb-checkbox-animation-check forwards; } - - input[type=checkbox]:not(:checked) + .checkbox-material:before { - animation: rippleOff @mdb-checkbox-animation-ripple; - } - input[type=checkbox]:checked + .checkbox-material:before { - animation: rippleOn @mdb-checkbox-animation-ripple; - } - - // Ripple effect on click - input[type=checkbox]:not(:checked) + .checkbox-material .check:after { - animation: rippleOff @mdb-checkbox-animation-ripple forwards; - } - input[type=checkbox]:checked + .checkbox-material .check:after { - animation: rippleOn @mdb-checkbox-animation-ripple forwards; - } - - // Style for disabled inputs - fieldset[disabled] &, - fieldset[disabled] & input[type=checkbox], - input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before, - input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check, - input[type=checkbox][disabled] + .circle { - opacity: 0.5; - } - input[type=checkbox][disabled] + .checkbox-material .check:after { - background-color: @lightbg-text; - transform: rotate(-45deg); - } - - .variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @brand-success); - .variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, @mdb-checkbox-checked-color); - .variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, @mdb-checkbox-checked-color); - .variations(~" input[type=checkbox]:checked + .checkbox-material .check", border-color, @mdb-checkbox-checked-color); } + + input[type=checkbox]:focus + .checkbox-material .check:after { + opacity: 0.2; + } + input[type=checkbox]:checked + .checkbox-material .check:before { + box-shadow: + 0 0 0 10px, + 10px -10px 0 10px, + 32px 0px 0 20px, + 0px 32px 0 20px, + -5px 5px 0 10px, + 20px -12px 0 11px; + animation: checkbox-on @mdb-checkbox-animation-check forwards; + } + + input[type=checkbox]:not(:checked) + .checkbox-material:before { + animation: rippleOff @mdb-checkbox-animation-ripple; + } + input[type=checkbox]:checked + .checkbox-material:before { + animation: rippleOn @mdb-checkbox-animation-ripple; + } + + // Ripple effect on click + input[type=checkbox]:not(:checked) + .checkbox-material .check:after { + animation: rippleOff @mdb-checkbox-animation-ripple forwards; + } + input[type=checkbox]:checked + .checkbox-material .check:after { + animation: rippleOn @mdb-checkbox-animation-ripple forwards; + } + + // Style for disabled inputs + fieldset[disabled] &, + fieldset[disabled] & input[type=checkbox], + input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before, + input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check, + input[type=checkbox][disabled] + .circle { + opacity: 0.5; + } + input[type=checkbox][disabled] + .checkbox-material .check:after { + background-color: @lightbg-text; + transform: rotate(-45deg); + } + + .variations(~" input[type=checkbox]:checked + .checkbox-material .check:after", background-color, @brand-success); + .variations(~" input[type=checkbox]:checked + .checkbox-material .check:before", color, @mdb-checkbox-checked-color); + .variations(~" input[type=checkbox]:checked + .checkbox-material .check", color, @mdb-checkbox-checked-color); + .variations(~" input[type=checkbox]:checked + .checkbox-material .check", border-color, @mdb-checkbox-checked-color); } @keyframes checkbox-on { diff --git a/less/_form.less b/less/_form.less index 29c8f6d8..d6e83c2a 100644 --- a/less/_form.less +++ b/less/_form.less @@ -8,6 +8,10 @@ padding-top: 0px; } + .radio { + margin-bottom: 10px; + } + label { text-align: right; } diff --git a/less/_radios.less b/less/_radios.less index c53b13fb..b51d7d6c 100644 --- a/less/_radios.less +++ b/less/_radios.less @@ -1,29 +1,3 @@ -.form-horizontal .radio { - margin-bottom: 10px; -} - -.form-group-radio-variant(@placeholder-font-size, @line-height){ - .radio { - // Label is set in _inputs.less - } -} - -.form-group { - - // default label size/location - .form-group-radio-variant(@mdb-input-font-size-base, @mdb-input-line-height-base); - - // sm label size/location - &.form-group-sm { - .form-group-radio-variant(@mdb-input-font-size-small, @mdb-input-line-height-small); - } - - // lg label size/location - &.form-group-lg { - .form-group-radio-variant(@mdb-input-font-size-large, @mdb-input-line-height-large); - } -} - .radio { label { cursor: pointer;