feat(checkbox): right align w/ .item-checkbox-right

Closes #1290
ionic-team · May 14, 2014 · 610e232 · 610e232
1 parent fab4a41
commit 610e232
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/scss/_checkbox.scss b/scss/_checkbox.scss
@@ -130,3 +130,14 @@ input:checked + .checkbox-icon:after {
   z-index: $z-index-item-checkbox;
   margin-top: (($checkbox-height + ($checkbox-height / 2)) / 2) * -1;
 }
+
+
+.item-checkbox.item-checkbox-right {
+  padding-right: ($item-padding * 2) + $checkbox-width;
+  padding-left: $item-padding;
+}
+
+.item-checkbox-right .checkbox input,
+.item-checkbox-right .checkbox-icon {
+  float: right;
+}
diff --git a/test/css/input-checkbox.html b/test/css/input-checkbox.html
@@ -12,7 +12,7 @@ <h1 class="title">Input: Checkbox</h1>
     </header>
 
     <main class="content has-header">
-      
+
       <ul class="list">
         <li class="item item-checkbox">
            <label class="checkbox">
@@ -38,6 +38,12 @@ <h1 class="title">Input: Checkbox</h1>
            </label>
            Plutonium Resupply
         </li>
+        <li class="item item-checkbox item-checkbox-right">
+           <label class="checkbox">
+             <input type="checkbox">
+           </label>
+           Right side checkbox
+        </li>
       </ul>
 
       <div class="padding">