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

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

@ -8,7 +8,8 @@ $toolbar-ios-border-color: #c4c4c4 !default;
$toolbar-ios-title-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 {
@ -34,21 +35,33 @@ $toolbar-ios-button-color: #007aff !default;
content: '';
}
.bar-title {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.bar-inner-title {
font-size: $toolbar-ios-title-font-size;
text-align: center;
opacity: 0;
}
.bar-spacer {
@include flex(1);
}
.button {
font-size: $toolbar-ios-button-font-size;
color: $toolbar-ios-button-color;
color: $toolbar-ios-button-text-color;
border: none;
padding: 0;
margin: 0 10px;
min-height: $toolbar-ios-height;
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-background: #f7f7f8 !default;
.toolbar {
position: relative;
@include flex-display();
@include flex-direction(row);
@include flex-align-items(center);
@include flex-justify-content(space-between);
background: $toolbar-background;
}
.bar-top {
@ -30,13 +34,11 @@
@include flex-align-items(center);
}
.bar-title {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
.bar-spacer {
@include flex(none);
}
.bar-title {
@include flex-display();
@include flex(1);
@include flex-align-items(center);
@ -57,6 +59,7 @@
}
}
.bar-spacer {
@include flex(1);
.toolbar .button {
background: transparent;
border: none;
}