Skip to content
This repository has been archived by the owner on Feb 12, 2022. It is now read-only.

Commit

Permalink
Use span, remove margin-bottom for inline radio/checkbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@interactivellama
interactivellama committed Apr 1, 2015
1 parent 195c143 commit da3a10b
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 27 deletions.
74 changes: 49 additions & 25 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,33 +201,33 @@ <h3 class="panel-title">Checkboxes (no javascript) Inline</h3>
</header>
<section class="x-panel-body">

<div class="checkbox-inline">
<span class="checkbox-inline">
<input type="checkbox" id="checkboxes-no-js-inline--1" name="checkboxes-no-js-inline--1" checked="checked" value="">
<label for="checkboxes-no-js-inline--1">
1, 2, buckle my shoe
</label>
</div>
</span>

<div class="checkbox-inline">
<span class="checkbox-inline">
<input type="checkbox" id="checkboxes-no-js-inline--2" name="checkboxes-no-js-inline--2" value="">
<label for="checkboxes-no-js-inline--2">
3, 4, shut the door
</label>
</div>
</span>

<div class="checkbox-inline">
<span class="checkbox-inline">
<input type="checkbox" id="checkboxes-no-js-inline--3" name="checkboxes-no-js-inline--3" checked="checked" disabled="disabled" value="">
<label for="checkboxes-no-js-inline--3">
5, 6, pick up sticks
</label>
</div>
</span>

<div class="checkbox-inline">
<span class="checkbox-inline">
<input type="checkbox" id="checkboxes-no-js-inline--4" name="checkboxes-no-js-inline--4" disabled="disabled" value="">
<label for="checkboxes-no-js-inline--4">
7, 8, lay them straight
</label>
</div>
</span>

</section>
</section>
Expand Down Expand Up @@ -263,9 +263,7 @@ <h3 class="panel-title">Checkboxes (no javascript) Toggling</h3>
</div>
</section>






<section id="checkboxes-no-js-block-highlighting" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
Expand Down Expand Up @@ -304,43 +302,56 @@ <h3 class="panel-title">Checkboxes (no javascript) Block Highlighting</h3>
</section>
</section>




<section id="checkbox-no-js-add-on" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
<h3 class="panel-title">Checkbox (no javascript) Checkbox inline within input-group-addon</h3>
</header>
<section class="x-panel-body">
<div class="input-group">
<span class="input-group-addon">
<span class="checkbox-inline">
<input type="checkbox" id="example-checkbox-addon" value="">
<label for="example-checkbox-addon"></label>
</span>
</span>
<input type="text" class="form-control" value="Checkbox within input add-on">
</div><!-- /input-group -->
</section>
</section>

<section id="checkboxes-no-js-inline-highlighting" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
<h3 class="panel-title">Checkboxes (no javascript) Inline Highlighting</h3>
</header>
<section class="x-panel-body">

<div class="checkbox-inline highlight">
<span class="checkbox-inline highlight">
<input type="checkbox" id="checkboxes-no-js-inline-highlighting--1" name="checkboxes-no-js-inline-highlighting--1" checked="checked" value="">
<label for="checkboxes-no-js-inline-highlighting--1">
1, 2, buckle my shoe
</label>
</div>
</span>

<div class="checkbox-inline highlight">
<span class="checkbox-inline highlight">
<input type="checkbox" id="checkboxes-no-js-inline-highlighting--2" name="checkboxes-no-js-inline-highlighting--2" value="">
<label for="checkboxes-no-js-inline-highlighting--2">
3, 4, shut the door
</label>
</div>
</span>

<div class="checkbox-inline highlight">
<span class="checkbox-inline highlight">
<input type="checkbox" id="checkboxes-no-js-inline-highlighting--3" name="checkboxes-no-js-inline-highlighting--3" checked="checked" disabled="disabled" value="">
<label for="checkboxes-no-js-inline-highlighting--3">
5, 6, pick up sticks
</label>
</div>
</span>

<div class="checkbox-inline highlight">
<span class="checkbox-inline highlight">
<input type="checkbox" id="checkboxes-no-js-inline-highlighting--4" name="checkboxes-no-js-inline-highlighting--4" disabled="disabled" value="">
<label for="checkboxes-no-js-inline-highlighting--4">
7, 8, lay them straight
</label>
</div>
</span>

</section>
</section>
Expand Down Expand Up @@ -958,9 +969,22 @@ <h3 class="panel-title">Radio Buttons (no javascript) Block Highlighting</h3>
</section>
</section>




<section id="radio-no-js-add-on" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
<h3 class="panel-title">Radio Buttons (no javascript) Radio inline within input-group-addon</h3>
</header>
<section class="x-panel-body">
<div class="input-group">
<span class="input-group-addon">
<span class="radio-inline">
<input type="radio" id="example-radio-addon" value="">
<label for="example-radio-addon"></label>
</span>
</span>
<input type="text" class="form-control" value="Radio within input add-on">
</div><!-- /input-group -->
</section>
</section>

<section id="radiobuttons-no-js-inline-highlighting" class="x-panel x-panel-default">
<header class="hidden x-panel-heading">
Expand Down
9 changes: 7 additions & 2 deletions less/forms.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,13 @@
&.highlight {
left: -8px;
}

// for checkboxes without text labels and alignment in .input-group-addon container
label {
margin-bottom: 0;
}
}

// This handy trick allows us to make rules for .radio, .checkbox, .radio-inline, and, .checkbox-inline all at once.
&, &-inline {

Expand Down Expand Up @@ -164,5 +170,4 @@
}
}


}
}

0 comments on commit da3a10b

Please sign in to comment.