javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

checkbox active state fix

Browse Source
This commit is contained in:
Adam Bradley
2013-11-14 08:31:13 -06:00
parent a76007442b
commit cc865ef10a
3 changed files with 26 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
dist/css/ionic.css vendored
View File

@ -4215,18 +4215,28 @@ input[type="checkbox"][readonly] {
opacity: 1; }
/* make sure item content have enough padding on left to fit the checkbox */
.item-checkbox .item-content {
.item-checkbox {
padding-left: 58px; }
.item-checkbox.active, .item-checkbox:active {
box-shadow: none; }
/* position the checkbox to the left within an item */
.item-checkbox .checkbox {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
position: absolute;
top: 0;
left: 7.5px;
z-index: 3;
display: flex;
height: 100%;
align-items: center; }
height: 100%; }
/**
* Toggle

11
scss/_checkbox.scss
View File

@ -64,17 +64,22 @@
}
/* make sure item content have enough padding on left to fit the checkbox */
.item-checkbox .item-content {
.item-checkbox {
padding-left: ($item-padding * 2) + $checkbox-width;
&.active,
&:active {
box-shadow: none;
}
}
/* position the checkbox to the left within an item */
.item-checkbox .checkbox {
@include display-flex();
@include align-items(center);
position: absolute;
top: 0;
left: $item-padding / 2;
z-index: 3;
display: flex;
height: 100%;
align-items: center;
}

24
test/input-checkbox.html
View File

@ -17,36 +17,28 @@
<ul class="list">
<li class="item item-checkbox">
<div class="item-content">
<label class="checkbox">
<input type="checkbox" checked>
</label>
Flux Capacitor
</div>
</li>
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checked>
</label>
</li>
<li class="item item-checkbox">
<div class="item-content">
1.21 Gigawatts
</div>
</li>
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" checked>
</label>
</li>
<li class="item item-checkbox">
<div class="item-content">
88 MPH
</div>
<label class="checkbox">
<input type="checkbox" checked>
</label>
</li>
<li class="item item-checkbox">
<div class="item-content">
Plutonium Resupply
</div>
<label class="checkbox">
<input type="checkbox">
</label>
Plutonium Resupply
</li>
</ul>