javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

update icon alignment w/in .item

Browse Source
This commit is contained in:
Adam Bradley
2013-11-15 23:19:16 -06:00
parent bfbb61e22a
commit 1dd3816918
3 changed files with 33 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
dist/css/ionic.css vendored
View File

@ -2937,6 +2937,8 @@ a.subdued‎ {
-moz-flex-direction: horizontal;
-ms-flex-direction: horizontal;
flex-direction: horizontal;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
@ -3388,8 +3390,14 @@ button.item.item-complex {
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
position: absolute;
top: 0;
width: 32px;
height: 100%;
font-size: 32px; }
@ -3423,7 +3431,7 @@ button.item.item-complex {
* An item button is a child button inside an .item (not the entire .item)
*/
.item-button-left {
padding-left: 75px; }
padding-left: 67.5px; }
.item-button-left > .button,
.item-button-left .item-content > .button {
@ -3440,12 +3448,14 @@ button.item.item-complex {
position: absolute;
top: 7.5px;
left: 7.5px;
min-width: initial;
min-height: 32px;
font-size: 32px; }
.item-button-left > .button .icon,
.item-button-left .item-content > .button .icon {
position: relative;
left: auto;
width: auto;
line-height: 31px; }
.item-button-right,
@ -3468,12 +3478,14 @@ button.item.item-button-right {
position: absolute;
top: 7.5px;
right: 15px;
min-width: initial;
min-height: 32px;
font-size: 32px; }
.item-button-right > .button .icon,
.item-button-right .item-content > .button .icon {
position: relative;
left: auto;
width: auto;
line-height: 31px; }
/**

8
scss/_items.scss
View File

@ -203,8 +203,10 @@ button.item.item-complex {
.item-icon-right .icon {
@include display-flex();
@include align-items(center);
@include justify-content(center);
position: absolute;
top: 0;
width: $item-icon-font-size;
height: 100%;
font-size: $item-icon-font-size;
}
@ -249,7 +251,7 @@ button.item.item-complex {
*/
.item-button-left {
padding-left: $item-padding * 5;
padding-left: $item-padding * 4.5;
}
.item-button-left > .button,
@ -259,12 +261,14 @@ button.item.item-complex {
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;
.icon {
position: relative;
left: auto;
width: auto;
line-height: $item-icon-font-size - 1;
}
}
@ -282,12 +286,14 @@ 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;
.icon {
position: relative;
left: auto;
width: auto;
line-height: $item-icon-font-size - 1;
}
}

13
scss/_mixins.scss
View File

@ -474,6 +474,19 @@
}
@mixin justify-content($value: stretch) {
@if $value == flex-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
} @else if $value == flex-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
} @else if $value == space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
} @else {
-webkit-box-pack: $value;
-ms-flex-pack: $value;
}
-webkit-justify-content: $value;
-moz-justify-content: $value;
justify-content: $value;