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

align left checkboxes

Browse Source
This commit is contained in:
Adam Bradley
2013-10-17 14:52:39 -05:00
parent 63dfbbd9ef
commit 92be3c5974
5 changed files with 79 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
dist/css/ionic-scoped.css vendored
View File

@ -180,6 +180,8 @@
/* the checkmark within the box */ /* the checkmark within the box */
/* what the background looks like when its checked */ /* what the background looks like when its checked */
/* what the checkmark looks like when its checked */ /* what the checkmark looks like when its checked */
/* make sure list item content have enough padding on left to fit the checkbox */
/* position the checkbox to the left within a list item */
/* the overall container of the toggle */ /* the overall container of the toggle */
/* the handle (circle) thats inside the toggle's track area */ /* the handle (circle) thats inside the toggle's track area */
/* also the appearance when the handle is "off" */ /* also the appearance when the handle is "off" */
@ -2128,14 +2130,14 @@
transition: background-color 0.1s ease-in-out; } transition: background-color 0.1s ease-in-out; }
.ionic .checkbox input:after { .ionic .checkbox input:after {
position: absolute; position: absolute;
top: 37%; top: 34%;
left: 26%; left: 26%;
display: table; display: table;
width: 14px; width: 14px;
height: 7px; height: 10.33333px;
border: 1px solid white; border: 3px solid white;
border-top: none; border-top: 0;
border-right: none; border-right: 0;
content: ' '; content: ' ';
opacity: 0; opacity: 0;
transition: opacity 0.05s ease-in-out; transition: opacity 0.05s ease-in-out;
@ -2146,6 +2148,13 @@
background: #049cdb; } background: #049cdb; }
.ionic .checkbox input:checked:after { .ionic .checkbox input:checked:after {
opacity: 1; } opacity: 1; }
.ionic .checkbox-item .list-item-content {
padding-left: 58px; }
.ionic .checkbox-item .checkbox {
position: absolute;
top: 1px;
left: 7.5px;
z-index: 3; }
.ionic .toggle { .ionic .toggle {
position: relative; position: relative;
display: inline-block; } display: inline-block; }

21
dist/css/ionic.css vendored
View File

@ -2597,14 +2597,14 @@ input[type="checkbox"][readonly] {
/* the checkmark within the box */ /* the checkmark within the box */
.checkbox input:after { .checkbox input:after {
position: absolute; position: absolute;
top: 37%; top: 34%;
left: 26%; left: 26%;
display: table; display: table;
width: 14px; width: 14px;
height: 7px; height: 10.33333px;
border: 1px solid white; border: 3px solid white;
border-top: none; border-top: 0;
border-right: none; border-right: 0;
content: ' '; content: ' ';
opacity: 0; opacity: 0;
transition: opacity 0.05s ease-in-out; transition: opacity 0.05s ease-in-out;
@ -2620,6 +2620,17 @@ input[type="checkbox"][readonly] {
.checkbox input:checked:after { .checkbox input:checked:after {
opacity: 1; } opacity: 1; }
/* make sure list item content have enough padding on left to fit the checkbox */
.checkbox-item .list-item-content {
padding-left: 58px; }
/* position the checkbox to the left within a list item */
.checkbox-item .checkbox {
position: absolute;
top: 1px;
left: 7.5px;
z-index: 3; }
/* the overall container of the toggle */ /* the overall container of the toggle */
.toggle { .toggle {
position: relative; position: relative;

21
scss/ionic/_checkbox.scss
View File

@ -31,14 +31,14 @@
/* the checkmark within the box */ /* the checkmark within the box */
.checkbox input:after { .checkbox input:after {
position: absolute; position: absolute;
top: 37%; top: 34%;
left: 26%; left: 26%;
display: table; display: table;
width: $checkbox-width / 2; width: $checkbox-width / 2;
height: $checkbox-width / 4; height: ($checkbox-width / 3) + 1;
border: $checkbox-check-width solid $checkbox-check-color; border: $checkbox-check-width solid $checkbox-check-color;
border-top: none; border-top: 0;
border-right: none; border-right: 0;
content: ' '; content: ' ';
opacity: 0; opacity: 0;
transition: opacity .05s ease-in-out; transition: opacity .05s ease-in-out;
@ -57,3 +57,16 @@
.checkbox input:checked:after { .checkbox input:checked:after {
opacity: 1; opacity: 1;
} }
/* make sure list item content have enough padding on left to fit the checkbox */
.checkbox-item .list-item-content {
padding-left: ($list-item-padding * 2) + $checkbox-width;
}
/* position the checkbox to the left within a list item */
.checkbox-item .checkbox {
position: absolute;
top: 1px;
left: $list-item-padding / 2;
z-index: 3;
}

2
scss/ionic/_variables.scss
View File

@ -177,7 +177,7 @@ $checkbox-off-border-color: #049cdb;
$checkbox-on-bg-color: #049cdb; $checkbox-on-bg-color: #049cdb;
$checkbox-on-border-color: #049cdb; $checkbox-on-border-color: #049cdb;
$checkbox-check-width: 1px; $checkbox-check-width: 3px;
$checkbox-check-color: #fff; $checkbox-check-color: #fff;

42
test/input-checkbox.html
View File

@ -17,18 +17,38 @@
<main class="content has-header"> <main class="content has-header">
<ul class="list"> <ul class="padding">
<li class="list-item"> <li class="list-item checkbox-item">
Airplane Mode <div class="list-item-content">
<div class="checkbox" id="airplaneMode"> Flux Capacitor
<input type="checkbox" name="airplaneMode"> </div>
</div> <label class="checkbox">
<input type="checkbox" checked>
</label>
</li> </li>
<li class="list-item"> <li class="list-item checkbox-item">
Do Not Disturb <div class="list-item-content">
<div class="checkbox" id="doNotDisturb"> 1.21 Gigawatts
<input type="checkbox" name="doNotDisturb" checked="checked"> </div>
</div> <label class="checkbox">
<input type="checkbox" checked>
</label>
</li>
<li class="list-item checkbox-item">
<div class="list-item-content">
88 MPH
</div>
<label class="checkbox">
<input type="checkbox" checked>
</label>
</li>
<li class="list-item checkbox-item">
<div class="list-item-content">
Plutonium Resupply
</div>
<label class="checkbox">
<input type="checkbox">
</label>
</li> </li>
</ul> </ul>