mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-29 04:54:12 +03:00
Solves #736 radios and checkboxes need to render outside of .form-group
This commit is contained in:
Kevin Ross
parent
7e02e22bc1
commit
e1189e4b34
150
index.css
150
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;*/
|
||||
/*}*/
|
||||
|
|
|
|||
67
index.html
67
index.html
|
|
@ -217,10 +217,11 @@
|
|||
<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>
|
||||
</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="checkbox">
|
||||
<label>
|
||||
|
|
@ -229,8 +230,6 @@
|
|||
</div>
|
||||
<p class="help-block">Notify me about updates to apps or games that I've downloaded</p>
|
||||
</div>
|
||||
|
||||
<!-- Simple checkbox with label, checked -->
|
||||
<div class="form-group">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
|
|
@ -240,10 +239,7 @@
|
|||
<p class="help-block">Auto-update apps over wifi only</p>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Sound <small>horizontal form with column label variations and <code>checkbox-primary</code> color</small></h2>
|
||||
<!-- Checkboxes with labels on the left -->
|
||||
|
||||
<h2>Horizontal form <small>with column label variations and <code>checkbox-primary</code> color</small></h2>
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label" for="ch3">Vibrate on touch</label>
|
||||
<div class="col-sm-10">
|
||||
|
|
@ -268,14 +263,41 @@
|
|||
<p class="help-block">This shows the <code>control-label</code> variant.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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 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="radio radio-success">
|
||||
<label>
|
||||
|
|
@ -289,18 +311,9 @@
|
|||
Only when plugged in
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio radio-success">
|
||||
<label>
|
||||
<input type="radio" name="sample1" value="option1">
|
||||
Never
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Wi-Fi frequency band</h2>
|
||||
|
||||
<div class="sample2">
|
||||
<h2><small><code>.radio-primary</code> outside a <code>.form-group</code></small></h2>
|
||||
<div class="radio radio-primary">
|
||||
<label>
|
||||
<input type="radio" name="sample2" value="option1" checked="">
|
||||
|
|
@ -313,13 +326,7 @@
|
|||
5 GHz only
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio radio-primary">
|
||||
<label>
|
||||
<input type="radio" name="sample2" value="option1">
|
||||
2.4 GHz only
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="well page" id="toggle-button">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,30 +1,8 @@
|
|||
// 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);
|
||||
}
|
||||
|
||||
// lg label size/location
|
||||
&.form-group-lg {
|
||||
.form-group-checkbox-variant(@mdb-input-font-size-large, @mdb-input-line-height-large);
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
.checkbox {
|
||||
label {
|
||||
cursor: pointer;
|
||||
padding-left: 0; // Reset for Bootstrap rule
|
||||
|
|
@ -140,7 +118,6 @@
|
|||
.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 {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@
|
|||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.radio {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
text-align: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user