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

Commit

Permalink
Merge pull request #1207 from interactivellama/no-label-checkbox
Browse files Browse the repository at this point in the history 
Correct style for checkbox/radio without a text label
  • Loading branch information
@chriscorwin
chriscorwin committed Apr 2, 2015
2 parents 281b53c + c2da0c3 commit 0730bec
Show file tree
Hide file tree
Showing 6 changed files with 112 additions and 95 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 @@
}
}


}
}
1 change: 0 additions & 1 deletion less/fuelux.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
@import "infinite-scroll.less";
@import "intelligent-dropdown.less";
@import "loader.less";
@import "misc.less";
@import "pillbox.less";
@import "placard.less";
@import "repeater.less";
Expand Down
66 changes: 0 additions & 66 deletions less/misc.less
View file

This file was deleted.

38 changes: 37 additions & 1 deletion less/placard.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,4 +111,40 @@
right: -8px;
top: -8px;
}
}

.glass {
background: transparent;
border: 1px solid #fff;
box-shadow: none;

&:hover {
background: #d9edf7;
border-color: #66afe9;
cursor: pointer;

&[disabled] {
background: transparent;
border-color: #fff;
cursor: not-allowed;
}
}

&:focus {
background: #fff;
border-color: #66afe9;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
cursor: auto;

&[disabled] {
background: transparent;
border-color: #fff;
cursor: not-allowed;
}
}

&[disabled] {
cursor: not-allowed;
}
}

}
19 changes: 19 additions & 0 deletions less/selectlist.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,23 @@

}
}

}

.button-sizer, .selectlist-sizer{
display: inline-block;
position: absolute;
visibility: hidden;
top: 0;
float: left;
.selectlist {
display: block !important;
}
.dropdown-menu {
display: block;
min-width: inherit;
}
.selected-label {
width: auto !important;
}
}

0 comments on commit 0730bec

Please sign in to comment.