javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +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; -moz-flex-direction: horizontal;
-ms-flex-direction: horizontal; -ms-flex-direction: horizontal;
flex-direction: horizontal; flex-direction: horizontal;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center; -webkit-justify-content: center;
-moz-justify-content: center; -moz-justify-content: center;
justify-content: center; justify-content: center;
@ -3388,8 +3390,14 @@ button.item.item-complex {
-webkit-align-items: center; -webkit-align-items: center;
-moz-align-items: center; -moz-align-items: center;
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; position: absolute;
top: 0; top: 0;
width: 32px;
height: 100%; height: 100%;
font-size: 32px; } 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) * An item button is a child button inside an .item (not the entire .item)
*/ */
.item-button-left { .item-button-left {
padding-left: 75px; } padding-left: 67.5px; }
.item-button-left > .button, .item-button-left > .button,
.item-button-left .item-content > .button { .item-button-left .item-content > .button {
@ -3440,12 +3448,14 @@ button.item.item-complex {
position: absolute; position: absolute;
top: 7.5px; top: 7.5px;
left: 7.5px; left: 7.5px;
min-width: initial;
min-height: 32px; min-height: 32px;
font-size: 32px; } font-size: 32px; }
.item-button-left > .button .icon, .item-button-left > .button .icon,
.item-button-left .item-content > .button .icon { .item-button-left .item-content > .button .icon {
position: relative; position: relative;
left: auto; left: auto;
width: auto;
line-height: 31px; } line-height: 31px; }
.item-button-right, .item-button-right,
@ -3468,12 +3478,14 @@ button.item.item-button-right {
position: absolute; position: absolute;
top: 7.5px; top: 7.5px;
right: 15px; right: 15px;
min-width: initial;
min-height: 32px; min-height: 32px;
font-size: 32px; } font-size: 32px; }
.item-button-right > .button .icon, .item-button-right > .button .icon,
.item-button-right .item-content > .button .icon { .item-button-right .item-content > .button .icon {
position: relative; position: relative;
left: auto; left: auto;
width: auto;
line-height: 31px; } line-height: 31px; }
/** /**

8
scss/_items.scss
View File

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

13
scss/_mixins.scss
View File

@ -474,6 +474,19 @@
} }
@mixin justify-content($value: stretch) { @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; -webkit-justify-content: $value;
-moz-justify-content: $value; -moz-justify-content: $value;
justify-content: $value; justify-content: $value;