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

tweak header/button sizes, and ionicons update

Browse Source
This commit is contained in:
Adam Bradley
2014-01-20 20:45:28 -06:00
parent a66cf95462
commit 7bd6363ea7
3 changed files with 41 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
scss/_bar.scss
View File

@@ -132,42 +132,53 @@
padding: 0 $button-bar-button-padding;
min-width: initial;
min-height: $button-bar-button-height - 1;
//height: $button-bar-button-height;
font-size: $button-bar-button-font-size;
line-height: $button-bar-button-height - $button-border-width - 1;
font-weight: 400;
line-height: $button-bar-button-height;
.icon,
.icon:before,
&.icon:before,
&.icon-left:before,
&.icon-right:before {
padding-right: 2px;
padding-left: 2px;
font-size: $button-bar-button-icon-size;
line-height: $button-bar-button-height - $button-border-width - 1;
line-height: $button-bar-button-height;
}
&.button-icon {
.icon,
.icon:before,
&.icon:before,
&.icon-left:before,
&.icon-right:before {
font-size: $button-large-icon-size;
line-height: $button-bar-button-height;
}
}
&.button-clear {
font-size: 18px;
font-size: $bar-title-font-size;
font-weight: 300;
padding-right: 2px;
padding-left: 2px;
.icon:before,
&.icon:before,
&.icon-left:before,
&.icon-right:before {
font-size: $button-large-icon-size;
line-height: $button-bar-button-height;
}
}
}
.button-bar > .button, .buttons > .button {
.button-bar > .button,
.buttons > .button {
min-height: $button-bar-button-height - 1;
//height: $button-bar-button-height;
line-height: $button-bar-button-height - 2;
line-height: $button-bar-button-height;
}
.button-bar + .button, .button + .button-bar {
.button-bar + .button,
.button + .button-bar {
margin-left: 5px;
}

21
scss/_button.scss
View File

@@ -14,7 +14,7 @@
padding: 1px $button-padding 0 $button-padding;
min-width: ($button-padding * 3) + $button-font-size;
min-height: $button-height;
min-height: $button-height + 5px;
border-width: $button-border-width;
border-style: solid;
@@ -29,7 +29,7 @@
cursor: pointer;
.icon,
.icon:before,
&.icon:before,
&.icon-left:before,
&.icon-right:before {
@@ -37,7 +37,7 @@
padding: 0 0 $button-border-width 0;
vertical-align: inherit;
font-size: $button-icon-size;
line-height: $button-height - $button-border-width - 1;
line-height: $button-height - $button-border-width;
}
&.icon-left:before {
padding-right: .2em;
@@ -112,11 +112,11 @@
.button-small {
padding: 0 $button-small-padding;
min-width: $button-small-height;
min-height: $button-small-height;
min-height: $button-small-height + 3;
font-size: $button-small-font-size;
line-height: $button-small-height - $button-border-width;
line-height: $button-small-height - $button-border-width + 1;
.icon,
.icon:before,
&.icon:before,
&.icon-left:before,
&.icon-right:before {
@@ -128,11 +128,11 @@
.button-large {
padding: 0 $button-large-padding;
min-width: ($button-large-padding * 3) + $button-large-font-size;
min-height: $button-large-height;
min-height: $button-large-height + 5;
font-size: $button-large-font-size;
line-height: $button-large-height - $button-border-width;
.icon,
.icon:before,
&.icon:before,
&.icon-left:before,
&.icon-right:before {
@@ -149,14 +149,15 @@
border-color: transparent;
background: none;
&.button:active, &.button.active {
&.button:active,
&.button.active {
border-color: transparent;
background: none;
box-shadow: none;
opacity: 0.3;
}
.icon,
.icon:before,
&.icon:before {
font-size: $button-large-icon-size;
}

16
scss/_variables.scss
View File

@@ -17,8 +17,8 @@ $dark: #444 !default;
// Base
// -------------------------------
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-light-sans-serif: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !default;
$font-family-light-sans-serif: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace !default;
@@ -57,11 +57,13 @@ $border-radius-base: 4px !default;
$border-radius-large: 6px !default;
$border-radius-small: 3px !default;
// Content
// -------------------------------
$scroll-refresh-icon-color: #666666;
// Buttons
// -------------------------------
@@ -72,11 +74,11 @@ $button-border-radius: 2px;
$button-border-width: 1px;
$button-font-size: 16px;
$button-height: 42px;
$button-height: 47px;
$button-padding: 12px !default;
$button-icon-size: 24px;
$button-large-font-size: 18px;
$button-large-font-size: 20px;
$button-large-height: 54px;
$button-large-padding: 16px !default;
$button-large-icon-size: 32px;
@@ -86,10 +88,10 @@ $button-small-height: 28px;
$button-small-padding: 4px !default;
$button-small-icon-size: 16px;
$button-bar-button-font-size: 12px;
$button-bar-button-font-size: 13px;
$button-bar-button-height: 32px;
$button-bar-button-padding: 8px !default;
$button-bar-button-icon-size: 24px;
$button-bar-button-icon-size: 20px;
$button-light-bg: $light;
$button-light-text: #444;
@@ -156,7 +158,7 @@ $button-default-active-border: $button-stable-active-border;
// -------------------------------
$bar-height: 44px !default;
$bar-title-font-size: $font-size-large;
$bar-title-font-size: 17px;
$bar-padding-portrait: 5px;
$bar-padding-landscape: 5px;
$bar-transparency: 1;