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

ionic-team · May 2, 2014 · 45106a6 · 45106a6
1 parent 24f013f
commit 45106a6
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 4 deletions.
diff --git a/scss/_toggle.scss b/scss/_toggle.scss
@@ -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 {

diff --git a/test/css/input-toggle.html b/test/css/input-toggle.html
@@ -159,6 +159,43 @@ <h1 class="title">Input: Toggle</h1>
              </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">