javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(toggle): Right side padding for item-complex, closes #1091

Browse Source
This commit is contained in:
Adam Bradley
2014-05-02 13:36:20 -05:00
parent 24f013f2bd
commit 45106a6acf
2 changed files with 46 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
scss/_toggle.scss
View File

@@ -105,13 +105,18 @@
background-color: $toggle-handle-on-bg-color;
}
.item-toggle {
.item-toggle.active {
box-shadow: none;
}
.item-toggle,
.item-toggle.item-complex .item-content {
// make sure list item content have enough padding on right to fit the toggle
padding-right: ($item-padding * 3) + $toggle-width;
}
&.active {
box-shadow: none;
}
.item-toggle.item-complex {
padding-right: 0;
}
.item-toggle .toggle {

37
test/css/input-toggle.html
View File

@@ -159,6 +159,43 @@
</div>
</label>
</li>
<li class="item item-toggle item-icon-left">
asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
<label class="toggle toggle-dark">
<input type="checkbox" checked>
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
<div class="item-toggle item item-complex item-left-editable">
<div class="item-content">
.item.item-toggle.item-complex :
asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
<label class="toggle toggle-assertive">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</div>
<div class="item-left-edit item-delete ng-hide">
<div class="ion-minus-circled button icon button-icon">
</div>
</div>
<div class="item-options invisible">
<div class="button-assertive button">
Edit
</div>
<div class="button-calm button" ng-click="share(item)">
Share
</div>
</div>
</div>
</ul>
<div class="padding">