javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 13:01:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

flexbox buttons

Browse Source
This commit is contained in:
Adam Bradley
2015-03-23 08:06:56 -05:00
parent 9619036844
commit fababbe546
2 changed files with 27 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/app/mixins/_flex.scss
View File

@ -52,13 +52,20 @@
flex-wrap: $value; flex-wrap: $value;
} }
@mixin flex($fg: 1, $fs: null, $fb: null) { @mixin flex($flex-grow: 1, $flex-shrink: null, $flex-basis: null) {
-webkit-box-flex: $fg; -webkit-box-flex: $flex-grow;
-webkit-flex: $fg $fs $fb; -webkit-flex: $flex-grow $flex-shrink $flex-basis;
-moz-box-flex: $fg; -moz-box-flex: $flex-grow;
-moz-flex: $fg $fs $fb; -moz-flex: $flex-grow $flex-shrink $flex-basis;
-ms-flex: $fg $fs $fb; -ms-flex: $flex-grow $flex-shrink $flex-basis;
flex: $fg $fs $fb; flex: $flex-grow $flex-shrink $flex-basis;
}
@mixin flex-shrink($value: 1) {
-webkit-flex-shrink: $value;
-moz-flex-shrink: $value;
-ms-flex-negative: $value;
flex-shrink: $value;
} }
@mixin flex-flow($values: (row nowrap)) { @mixin flex-flow($values: (row nowrap)) {

23
src/components/button/button.scss
View File

@ -79,25 +79,30 @@ $button-bar-button-icon-size: 20px !default;
.button { .button {
position: relative; position: relative;
display: inline-block;
@include flex-display-inline();
@include flex-shrink(0);
@include flex-flow(row nowrap);
@include flex-align-items(center);
@include flex-justify-content(center);
margin: 0; margin: 0;
padding: 0 $button-padding; padding: 0 $button-padding;
min-width: ($button-padding * 3) + $button-font-size; min-width: ($button-padding * 3) + $button-font-size;
min-height: $button-height + 5px; min-height: $button-height + 5px;
line-height: normal;
vertical-align: baseline;
white-space: nowrap;
text-overflow: ellipsis;
border-width: $button-border-width; border-width: $button-border-width;
border-style: solid; border-style: solid;
border-radius: $button-border-radius; border-radius: $button-border-radius;
vertical-align: top;
text-align: center;
text-overflow: ellipsis;
font-size: $button-font-size;
line-height: $button-height - $button-border-width + 1px;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
&:after { &:after {
@ -121,7 +126,6 @@ $button-bar-button-icon-size: 20px !default;
min-width: $button-small-height; min-width: $button-small-height;
min-height: $button-small-height + 2; min-height: $button-small-height + 2;
font-size: $button-small-font-size; font-size: $button-small-font-size;
line-height: $button-small-height - $button-border-width - 1;
} }
.button-large { .button-large {
@ -129,7 +133,6 @@ $button-bar-button-icon-size: 20px !default;
min-width: ($button-large-padding * 3) + $button-large-font-size; min-width: ($button-large-padding * 3) + $button-large-font-size;
min-height: $button-large-height + 5; min-height: $button-large-height + 5;
font-size: $button-large-font-size; font-size: $button-large-font-size;
line-height: $button-large-height - $button-border-width;
} }