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

button variables updates

Browse Source
This commit is contained in:
Adam Bradley
2013-11-01 11:26:43 -05:00
parent 907121cc7d
commit 979bba4810
7 changed files with 142 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
scss/ionic/_bar.scss
View File

@ -20,9 +20,9 @@
border-style: solid;
border-top: 1px solid transparent;
border-bottom: 1px solid $bar-default-border-color;
background-size: 0;
background-color: $bar-bg;
background-size: 0;
@media (min--moz-device-pixel-ratio: 1.5),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
@ -102,22 +102,21 @@
}
> .button {
@include flex(0);
z-index: 1;
margin: 0;
padding: 2px 8px 0 8px;
min-height: $button-bar-button-min-height;
background-color: transparent;
font-size: 12px;
line-height: 28px;
padding: $button-bar-button-padding;
min-height: $button-bar-button-height;
font-size: $button-bar-button-font-size;
line-height: $button-bar-button-height - $button-border-width;
i, .icon {
margin-top: 1px;
font-size: $button-bar-button-icon-size;
line-height: $button-bar-button-height - $button-border-width - 1;
}
}
.button-bar {
line-height: $bar-button-bar-line-height;
.button-bar > .button {
min-height: $button-bar-button-height;
line-height: $button-bar-button-height;
}
.button-bar + .button, .button + .button-bar {

14
scss/ionic/_button-bar.scss
View File

@ -1,3 +1,4 @@
.button-bar {
@include display-flex();
@include flex(1);
@ -6,7 +7,6 @@
.button-bar > .button {
@include flex(1);
display: block;
overflow: hidden;
@ -20,9 +20,6 @@
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
// Fix for box-flex width issue
line-height: $button-bar-button-line-height - 2;
&:first-child {
border-radius: 2px 0px 0px 2px;
@ -32,12 +29,3 @@
border-radius: 0px 2px 2px 0px;
}
}
// Buttons are used to group a set of buttons, useful
// to pull a set of buttons to the right side of a header
// bar, for example.
.buttons {
@include display-flex();
@include flex(1);
@include flex-direction(horizontal);
}

39
scss/ionic/_button.scss
View File

@ -4,7 +4,8 @@
margin: 0;
padding: $button-padding;
min-height: $button-min-height;
padding-top: 1px;
min-height: $button-height;
border-width: $button-border-width;
border-style: solid;
@ -17,31 +18,31 @@
text-overflow: ellipsis;
font-size: $button-font-size;
line-height: $button-line-height;
line-height: $button-height - $button-border-width;
cursor: pointer;
i, .icon {
display: inline-block;
padding: 0;
padding: 0 0 $button-border-width 0;
vertical-align: inherit;
font-size: $button-icon-font-size;
line-height: $button-line-height - 1;
font-size: $button-icon-size;
line-height: $button-height - $button-border-width - 1;
}
&.button-icon {
padding: $button-clear-padding;
padding: 2px 4px;
background: none;
i, .icon {
font-size: $button-icon-large-font-size;
font-size: $button-large-icon-size;
}
}
&.button-clear {
@include transition(opacity .1s);
padding: $button-clear-padding;
max-height: 44px;
max-height: $button-height;
border: none;
background: none;
box-shadow: none;
@ -116,24 +117,26 @@
}
.button-small {
padding: 1px 8px 1px 8px;
min-height: $button-small-min-height;
line-height: $button-small-line-height;
font-size: $button-font-size - 4;
padding: $button-small-padding;
min-height: $button-small-height;
font-size: $button-small-font-size;
line-height: $button-small-height - $button-border-width;
i, .icon {
font-size: $button-icon-font-size - 4;
line-height: $button-small-line-height - 3;
font-size: $button-small-icon-size;
line-height: $button-small-height - $button-border-width - 1;
}
}
.button-large {
padding: 12px 18px 12px 18px;
min-height: $button-min-height + 8;
font-size: $button-font-size + 8;
padding: $button-large-padding;
min-height: $button-large-height;
font-size: $button-large-font-size;
line-height: $button-large-height - $button-border-width;
i, .icon {
font-size: $button-icon-font-size + 8;
font-size: $button-large-icon-size;
line-height: $button-large-height - $button-border-width - 1;
}
}

27
scss/ionic/_variables.scss
View File

@ -210,23 +210,30 @@ $info-border: darken(adjust-hue($info-bg, -10), 7%);
// -------------------------------
$button-color: #222;
$button-padding: 10px 12px 7px 12px;
$button-block-margin: 10px !default;
$button-clear-padding: 12px 6px;
$button-clear-padding: 0 6px;
$button-border-radius: 2px;
$button-border-width: 1px;
$button-font-size: 16px;
$button-line-height: 23px;
$button-min-height: 44px;
$button-height: 42px;
$button-padding: 0 12px;
$button-icon-size: 24px;
$button-small-line-height: 29px !default;
$button-small-min-height: 32px !default;
$button-large-font-size: 18px;
$button-large-height: 54px;
$button-large-padding: 0 12px;
$button-large-icon-size: 32px;
$button-icon-font-size: 24px;
$button-icon-large-font-size: 32px;
$button-small-font-size: 12px;
$button-small-height: 28px;
$button-small-padding: 0 4px;
$button-small-icon-size: 16px;
$button-bar-button-line-height: 15px !default;
$button-bar-button-min-height: 33px !default;
$button-bar-button-font-size: 12px;
$button-bar-button-height: 31px !default;
$button-bar-button-padding: 0 8px;
$button-bar-button-icon-size: 24px;
$button-default-bg: $brand-default;
$button-default-border: #ddd;