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(listButtons): Update list button sizes, closes #478

Browse Source
This commit is contained in:
Adam Bradley
2014-02-09 21:22:23 -06:00
parent 4c9a4c0c62
commit 91652112a0
3 changed files with 36 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
scss/_items.scss
View File

@@ -308,9 +308,10 @@ 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;
@@ -318,6 +319,13 @@ a.item-content {
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;
}
}

2
scss/_variables.scss
View File

@@ -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;

16
test/lists.html
View File

@@ -64,12 +64,26 @@
<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