mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-09 08:10:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

Solves #736 radios and checkboxes need to render outside of .form-group

Browse Source
This commit is contained in:
Kevin Ross 2015-11-21 13:17:53 -06:00
parent 15446adb11
commit d27ca1bc41
5 changed files with 221 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
index.css
View File

@ -16,8 +16,8 @@
.header-panel h1 { .header-panel h1 {
color: #FFF; color: #FFF;
font-size: 20px; /*font-size: 20px;*/
font-weight: 400; /*font-weight: 400;*/
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
padding-left: 35px; padding-left: 35px;
@ -73,11 +73,11 @@
.pages .header { .pages .header {
color: rgb(82, 101, 162); color: rgb(82, 101, 162);
font-size: 24px; /*font-size: 24px;*/
font-weight: normal; /*font-weight: normal;*/
margin-top: 5px; /*margin-top: 5px;*/
margin-bottom: 60px; /*margin-bottom: 60px;*/
letter-spacing: 1.20000004768372px; /*letter-spacing: 1.20000004768372px;*/
} }
.page { .page {
@ -155,44 +155,44 @@
color: #9D9D9D; color: #9D9D9D;
} }
#checkbox .sample1 label { /*#checkbox .sample1 label {*/
font-weight: bold; /*font-weight: bold;*/
} /*}*/
#checkbox .hint { /*#checkbox .hint {*/
padding-left: 45px; /*padding-left: 45px;*/
padding-top: 20px; /*padding-top: 20px;*/
font-weight: 400; /*font-weight: 400;*/
} /*}*/
#checkbox .sample1 { /*#checkbox .sample1 {*/
padding-bottom: 20px; /*padding-bottom: 20px;*/
} /*}*/
#checkbox h2 { /*#checkbox h2 {*/
font-size: 18.7199993133545px; /*font-size: 18.7199993133545px;*/
font-weight: bold; /*font-weight: bold;*/
margin-bottom: 30px; /*margin-bottom: 30px;*/
} /*}*/
#checkbox .sample2 { /*#checkbox .sample2 {*/
width: 300px; /*width: 300px;*/
clear: both; /*clear: both;*/
font-weight: 400; /*font-weight: 400;*/
} /*}*/
#checkbox .sample2 { /*#checkbox .sample2 {*/
padding: 10px 0; /*padding: 10px 0;*/
} /*}*/
#checkbox .sample2 .text { /*#checkbox .sample2 .text {*/
display: inline-block; /*display: inline-block;*/
} /*}*/
#checkbox .sample2 .checkbox { /*#checkbox .sample2 .checkbox {*/
float: right; /*float: right;*/
margin: 0; /*margin: 0;*/
} /*}*/
/*#progress-bar h2 {*/ /*#progress-bar h2 {*/
/*font-size: 18.7199993133545px;*/ /*font-size: 18.7199993133545px;*/
@ -255,9 +255,9 @@
/*margin-top: 50px;*/ /*margin-top: 50px;*/
/*}*/ /*}*/
#radio-button .radio { /*#radio-button .radio {*/
margin: 20px 10px; /*margin: 20px 10px;*/
} /*}*/
/*#input h2 {*/ /*#input h2 {*/
/*padding: 14px;*/ /*padding: 14px;*/
@ -273,19 +273,19 @@
/*margin: 30px 0;*/ /*margin: 30px 0;*/
/*}*/ /*}*/
#slider .sample1, #slider .sample2 { /*#slider .sample1, #slider .sample2 {*/
padding: 20px 0; /*padding: 20px 0;*/
background-color: #f0f0f0; /*background-color: #f0f0f0;*/
margin-bottom: 20px; /*margin-bottom: 20px;*/
} /*}*/
#slider .sample2 { /*#slider .sample2 {*/
height: 150px; /*height: 150px;*/
} /*}*/
#slider .sample2 .slider { /*#slider .sample2 .slider {*/
margin: 0 40px; /*margin: 0 40px;*/
} /*}*/
/*#slider h2 {*/ /*#slider h2 {*/
/*padding: 14px;*/ /*padding: 14px;*/
@ -294,9 +294,9 @@
/*font-weight: 400;*/ /*font-weight: 400;*/
/*}*/ /*}*/
#slider .slider { /*#slider .slider {*/
margin: 15px; /*margin: 15px;*/
} /*}*/
/*#button h2 {*/ /*#button h2 {*/
/*padding: 14px;*/ /*padding: 14px;*/
@ -305,9 +305,9 @@
/*font-weight: 400;*/ /*font-weight: 400;*/
/*}*/ /*}*/
#floating-action-button .btn { /*#floating-action-button .btn {*/
margin: 20px; /*margin: 20px;*/
} /*}*/
/*#floating-action-button h2 {*/ /*#floating-action-button h2 {*/
/*padding: 14px;*/ /*padding: 14px;*/
@ -323,10 +323,10 @@
/*font-weight: 400;*/ /*font-weight: 400;*/
/*}*/ /*}*/
#dropdown .dropdown { /*#dropdown .dropdown {*/
font-size: 30px; /*font-size: 30px;*/
padding: 20px; /*padding: 20px;*/
} /*}*/
/*#dropdown-menu h2 {*/ /*#dropdown-menu h2 {*/
/*padding: 14px;*/ /*padding: 14px;*/
@ -335,13 +335,13 @@
/*font-weight: 400;*/ /*font-weight: 400;*/
/*}*/ /*}*/
#dropdown-menu .sample { /*#dropdown-menu .sample {*/
width: 200px; /*width: 200px;*/
} /*}*/
#dropdown-menu .form-group { /*#dropdown-menu .form-group {*/
margin: 30px 0; /*margin: 30px 0;*/
} /*}*/
/*#toggle-button h2 {*/ /*#toggle-button h2 {*/
/*font-size: 18.7199993133545px;*/ /*font-size: 18.7199993133545px;*/
@ -350,11 +350,11 @@
/*margin-top: 50px;*/ /*margin-top: 50px;*/
/*}*/ /*}*/
#toggle-button .togglebutton label { /*#toggle-button .togglebutton label {*/
margin: 20px 10px; /*margin: 20px 10px;*/
width: 200px; /*width: 200px;*/
} /*}*/
#toggle-button .togglebutton .toggle { /*#toggle-button .togglebutton .toggle {*/
float: right; /*float: right;*/
} /*}*/

67
index.html
View File

@ -217,10 +217,11 @@
<p>Once copied you need to initialize the material javascript by adding the following javascript to your site,</p> <p>Once copied you need to initialize the material javascript by adding the following javascript to your site,</p>
<pre><code>$.material.init()</code></pre> <pre><code>$.material.init()</code></pre>
</div> </div>
<div class="well page" id="checkbox">
<h1 class="header">Checkbox <small>default checkboxes</small></h1>
<!-- Simple checkbox with label --> <div class="well page" id="checkbox">
<h1 class="header">Checkbox</h1>
<h2>Default <small>inside a <code>.form-group</code></small></h2>
<div class="form-group"> <div class="form-group">
<div class="checkbox"> <div class="checkbox">
<label> <label>
@ -229,8 +230,6 @@
</div> </div>
<p class="help-block">Notify me about updates to apps or games that I've downloaded</p> <p class="help-block">Notify me about updates to apps or games that I've downloaded</p>
</div> </div>
<!-- Simple checkbox with label, checked -->
<div class="form-group"> <div class="form-group">
<div class="checkbox"> <div class="checkbox">
<label> <label>
@ -240,10 +239,7 @@
<p class="help-block">Auto-update apps over wifi only</p> <p class="help-block">Auto-update apps over wifi only</p>
</div> </div>
<h2>Horizontal form <small>with column label variations and <code>checkbox-primary</code> color</small></h2>
<h2>Sound <small>horizontal form with column label variations and <code>checkbox-primary</code> color</small></h2>
<!-- Checkboxes with labels on the left -->
<form class="form-horizontal"> <form class="form-horizontal">
<div class="form-group"> <div class="form-group">
<label class="col-sm-2" for="ch1">Touch sounds</label> <label class="col-sm-2" for="ch1">Touch sounds</label>
@ -256,7 +252,6 @@
<p class="help-block">This shows the generic label variant.</p> <p class="help-block">This shows the generic label variant.</p>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="col-sm-2 control-label" for="ch3">Vibrate on touch</label> <label class="col-sm-2 control-label" for="ch3">Vibrate on touch</label>
<div class="col-sm-10"> <div class="col-sm-10">
@ -268,14 +263,41 @@
<p class="help-block">This shows the <code>control-label</code> variant.</p> <p class="help-block">This shows the <code>control-label</code> variant.</p>
</div> </div>
</div> </div>
</form> </form>
<h2>Default <small>outside a <code>.form-group</code></small></h2>
<div class="checkbox">
<label>
<input type="checkbox"> Notifications
</label>
</div>
<p class="help-block">Without a <code>.form-group</code>, <code>.help-block</code> always shows</p>
<div class="checkbox">
<label>
<input type="checkbox" checked> Auto-updates
</label>
</div>
<p class="help-block">Without a <code>.form-group</code>, <code>.help-block</code> sizing is the same as the <code>label</code></p>
</div> </div>
<div class="well page" id="radio-button"> <div class="well page" id="radio-button">
<h1 class="header">Checkbox</h1> <h1 class="header">Radio buttons</h1>
<h2>Keep Wi-Fi on during sleep</h2> <h2>Default <small>outside a <code>.form-group</code></small></h2>
<div class="radio">
<label>
<input type="radio" name="sample1" value="option1" checked="">
Always
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="sample1" value="option1">
Only when plugged in
</label>
</div>
<h2><small><code>.radio-success</code> inside a <code>.form-group</code></small></h2>
<div class="form-group"> <div class="form-group">
<div class="radio radio-success"> <div class="radio radio-success">
<label> <label>
@ -289,18 +311,9 @@
Only when plugged in Only when plugged in
</label> </label>
</div> </div>
<div class="radio radio-success">
<label>
<input type="radio" name="sample1" value="option1">
Never
</label>
</div>
</div> </div>
<h2><small><code>.radio-primary</code> outside a <code>.form-group</code></small></h2>
<h2>Wi-Fi frequency band</h2>
<div class="sample2">
<div class="radio radio-primary"> <div class="radio radio-primary">
<label> <label>
<input type="radio" name="sample2" value="option1" checked=""> <input type="radio" name="sample2" value="option1" checked="">
@ -313,13 +326,7 @@
5 GHz only 5 GHz only
</label> </label>
</div> </div>
<div class="radio radio-primary">
<label>
<input type="radio" name="sample2" value="option1">
2.4 GHz only
</label>
</div>
</div>
</div> </div>
<div class="well page" id="toggle-button"> <div class="well page" id="toggle-button">

23
less/_checkboxes.less
View File

@ -1,27 +1,5 @@
// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox // 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 { .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);
}
// lg label size/location
&.form-group-lg {
.form-group-checkbox-variant(@mdb-input-font-size-large, @mdb-input-line-height-large);
} }
.checkbox { .checkbox {
@ -141,7 +119,6 @@
.variations(~" input[type=checkbox]:checked + .checkbox-material .check", 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); .variations(~" input[type=checkbox]:checked + .checkbox-material .check", border-color, @mdb-checkbox-checked-color);
} }
}
@keyframes checkbox-on { @keyframes checkbox-on {
0% { 0% {

4
less/_form.less
View File

@ -8,6 +8,10 @@
padding-top: 0px; padding-top: 0px;
} }
.radio {
margin-bottom: 10px;
}
label { label {
text-align: right; text-align: right;
} }

26
less/_radios.less
View File

@ -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 { .radio {
label { label {
cursor: pointer; cursor: pointer;