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

toolbar updates

Browse Source
This commit is contained in:
Adam Bradley
2015-03-31 10:11:14 -05:00
parent 81b4ca4ce0
commit 1f2e29b16c
3 changed files with 36 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/toolbar/extensions/android.scss
View File

@ -7,33 +7,23 @@ $toolbar-android-background: #f7f7f8 !default;
$toolbar-android-title-font-size: 1.7rem !default; $toolbar-android-title-font-size: 1.7rem !default;
$toolbar-android-button-font-size: 1.7rem !default; $toolbar-android-button-font-size: 1.7rem !default;
$toolbar-android-button-color: #007aff !default; $toolbar-android-button-text-color: #007aff !default;
.toolbar-android { .toolbar-android {
height: $toolbar-android-height; height: $toolbar-android-height;
background: $toolbar-android-background; background: $toolbar-android-background;
.bar-spacer {
@include flex(none);
}
.bar-title {
position: static;
margin: 0;
text-align: left;
}
.button { .button {
font-size: $toolbar-android-button-font-size; font-size: $toolbar-android-button-font-size;
color: $toolbar-android-button-color; color: $toolbar-android-button-text-color;
border: none; border: none;
padding: 0; padding: 0;
margin: 0 10px; margin: 0 10px;
min-height: $toolbar-android-height; min-height: $toolbar-android-height;
min-width: 0; min-width: 0;
background: transparent;
} }
} }

29
src/components/toolbar/extensions/ios.scss
View File

@ -2,13 +2,14 @@
// iOS Toolbar // iOS Toolbar
// -------------------------------------------------- // --------------------------------------------------
$toolbar-ios-height: 4.4rem !default; $toolbar-ios-height: 4.4rem !default;
$toolbar-ios-background: #f7f7f8 !default; $toolbar-ios-background: #f7f7f8 !default;
$toolbar-ios-border-color: #c4c4c4 !default; $toolbar-ios-border-color: #c4c4c4 !default;
$toolbar-ios-title-font-size: 1.7rem !default; $toolbar-ios-title-font-size: 1.7rem !default;
$toolbar-ios-button-font-size: 1.7rem !default; $toolbar-ios-button-font-size: 1.7rem !default;
$toolbar-ios-button-color: #007aff !default; $toolbar-ios-button-text-color: #007aff !default;
$toolbar-ios-button-background-color: transparent !default;
.toolbar-ios { .toolbar-ios {
@ -34,21 +35,33 @@ $toolbar-ios-button-color: #007aff !default;
content: ''; content: '';
} }
.bar-title {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.bar-inner-title { .bar-inner-title {
font-size: $toolbar-ios-title-font-size; font-size: $toolbar-ios-title-font-size;
text-align: center; text-align: center;
opacity: 0; opacity: 0;
} }
.bar-spacer {
@include flex(1);
}
.button { .button {
font-size: $toolbar-ios-button-font-size; font-size: $toolbar-ios-button-font-size;
color: $toolbar-ios-button-color; color: $toolbar-ios-button-text-color;
border: none; border: none;
padding: 0; padding: 0;
margin: 0 10px; margin: 0 10px;
min-height: $toolbar-ios-height; min-height: $toolbar-ios-height;
min-width: 0; min-width: 0;
background: transparent; background: $toolbar-ios-button-background-color;
} }
} }

19
src/components/toolbar/toolbar.scss
View File

@ -2,12 +2,16 @@
// Toolbar // Toolbar
// -------------------------------------------------- // --------------------------------------------------
$toolbar-background: #f7f7f8 !default;
.toolbar { .toolbar {
position: relative; position: relative;
@include flex-display(); @include flex-display();
@include flex-direction(row); @include flex-direction(row);
@include flex-align-items(center); @include flex-align-items(center);
@include flex-justify-content(space-between); @include flex-justify-content(space-between);
background: $toolbar-background;
} }
.bar-top { .bar-top {
@ -30,13 +34,11 @@
@include flex-align-items(center); @include flex-align-items(center);
} }
.bar-title { .bar-spacer {
position: absolute; @include flex(none);
top: 0; }
right: 0;
bottom: 0;
left: 0;
.bar-title {
@include flex-display(); @include flex-display();
@include flex(1); @include flex(1);
@include flex-align-items(center); @include flex-align-items(center);
@ -57,6 +59,7 @@
} }
} }
.bar-spacer { .toolbar .button {
@include flex(1); background: transparent;
border: none;
} }