fix(listButtons): Update list button sizes, closes #478

ionic-team · Feb 10, 2014 · 9165211 · 9165211
1 parent 4c9a4c0
commit 9165211
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 9 deletions.
diff --git a/scss/_items.scss b/scss/_items.scss
@@ -308,16 +308,24 @@ a.item-content {
   position: absolute;
   top: $item-padding / 2;
   left: $item-padding / 2;
-  min-width: initial;
-  min-height: $item-icon-font-size;
-  font-size: $item-icon-font-size;
+  min-width: $item-icon-font-size + ($button-border-width * 2);
+  min-height: $item-icon-font-size + ($button-border-width * 2);
+  font-size: $item-button-font-size;
+  line-height: $item-button-line-height;
 
   .icon:before {
     position: relative;
     left: auto;
     width: auto;
     line-height: $item-icon-font-size - 1;
   }
+
+  > .button {
+    margin: 0px 2px;
+    min-height: $item-icon-font-size + ($button-border-width * 2);
+    font-size: $item-button-font-size;
+    line-height: $item-button-line-height;
+  }
 }
 
 .item-button-right,
@@ -335,9 +343,10 @@ button.item.item-button-right {
   position: absolute;
   top: $item-padding / 2;
   right: $item-padding;
-  min-width: initial;
-  min-height: $item-icon-font-size;
-  font-size: $item-icon-font-size;
+  min-width: $item-icon-font-size + ($button-border-width * 2);
+  min-height: $item-icon-font-size + ($button-border-width * 2);
+  font-size: $item-button-font-size;
+  line-height: $item-button-line-height;
 
   .icon:before {
     position: relative;
@@ -348,8 +357,10 @@ button.item.item-button-right {
 
   > .button {
     margin: 0px 2px;
-    min-height: $item-icon-font-size;
-    font-size: $item-icon-font-size;
+    min-width: $item-icon-font-size + ($button-border-width * 2);
+    min-height: $item-icon-font-size + ($button-border-width * 2);
+    font-size: $item-button-font-size;
+    line-height: $item-button-line-height;
   }
 }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -285,6 +285,8 @@ $item-font-size:                   16px;
 $item-border-width:                1px !default;
 $item-padding:                     15px !default;
 
+$item-button-font-size:            18px !default;
+$item-button-line-height:          32px !default;
 $item-icon-font-size:              32px !default;
 $item-icon-fill-font-size:         28px !default;
 

diff --git a/test/lists.html b/test/lists.html
@@ -64,12 +64,26 @@ <h1 class="title">Lists</h1>
 
           <div class="item item-icon-left item-button-right">
             <i class="icon ion-chatbubble-working ion-primary"></i>
-            Call Ma
+            Left Icon and Right Button
+            <button class="button button-positive">
+              <i class="icon ion-ios7-telephone"></i>
+            </button>
+          </div>
+
+          <div class="item item-button-right">
+            Right Button
             <button class="button button-positive">
               <i class="icon ion-ios7-telephone"></i>
             </button>
           </div>
 
+          <div class="item item-button-right">
+            Right Button Text
+            <button class="button button-positive">
+              <i class="icon ion-ios7-telephone"></i> Text
+            </button>
+          </div>
+
           <div class="item item-icon-left item-button-right">
             <i class="icon ion-chatbubble-working ion-primary"></i>
             Call Ma