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

fix toolbars

Browse Source
This commit is contained in:
Adam Bradley
2015-12-05 16:02:25 -06:00
parent 58717ebb44
commit 98e81641a7
6 changed files with 21 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ionic/components/app/structure.scss
View File

@ -182,7 +182,6 @@ ion-navbar-section ion-navbar.toolbar {
ion-toolbar { ion-toolbar {
display: block; display: block;
width: 100%; width: 100%;
height: 50px;
} }
ion-toolbar[position=bottom] { ion-toolbar[position=bottom] {

8
ionic/components/navbar/navbar.ts
View File

@ -49,7 +49,7 @@ class BackButtonText {
@Directive({ @Directive({
selector: 'toolbar-background' selector: '.toolbar-background'
}) })
class ToolbarBackground { class ToolbarBackground {
constructor( constructor(
@ -64,7 +64,7 @@ class ToolbarBackground {
@Component({ @Component({
selector: 'ion-navbar', selector: 'ion-navbar',
template: template:
'<toolbar-background></toolbar-background>' + '<div class="toolbar-background"></div>' +
'<button class="back-button" [hidden]="hideBackButton">' + '<button class="back-button" [hidden]="hideBackButton">' +
'<icon class="back-button-icon" [name]="bbIcon"></icon>' + '<icon class="back-button-icon" [name]="bbIcon"></icon>' +
'<span class="back-button-text">' + '<span class="back-button-text">' +
@ -74,9 +74,9 @@ class ToolbarBackground {
'<ng-content select="[menu-toggle]"></ng-content>' + '<ng-content select="[menu-toggle]"></ng-content>' +
'<ng-content select="ion-nav-items[primary]"></ng-content>' + '<ng-content select="ion-nav-items[primary]"></ng-content>' +
'<ng-content select="ion-nav-items[secondary]"></ng-content>' + '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
'<toolbar-content>' + '<div class="toolbar-content">' +
'<ng-content></ng-content>' + '<ng-content></ng-content>' +
'</toolbar-content>', '</div>',
host: { host: {
'[hidden]': '_hidden', '[hidden]': '_hidden',
'class': 'toolbar' 'class': 'toolbar'

7
ionic/components/toolbar/modes/ios.scss
View File

@ -1,4 +1,5 @@
@import "../../../globals.ios"; @import "../../../globals.ios";
@import "../toolbar";
// iOS Toolbar // iOS Toolbar
// -------------------------------------------------- // --------------------------------------------------
@ -11,12 +12,14 @@ $toolbar-order-ios: (
menu-toggle-secondary: 60, menu-toggle-secondary: 60,
); );
$toolbar-ios-padding: 4px !default;
$toolbar-ios-height: 4.4rem !default; $toolbar-ios-height: 4.4rem !default;
$toolbar-ios-button-font-size: 1.7rem !default; $toolbar-ios-button-font-size: 1.7rem !default;
$toolbar-ios-title-font-size: 1.7rem !default; $toolbar-ios-title-font-size: 1.7rem !default;
.toolbar { .toolbar {
padding: $toolbar-ios-padding;
min-height: $toolbar-ios-height; min-height: $toolbar-ios-height;
[menu-toggle] { [menu-toggle] {
@ -80,7 +83,7 @@ $toolbar-ios-title-font-size: 1.7rem !default;
background-color: transparent; background-color: transparent;
} }
.toolbar toolbar-background { .toolbar-background {
border-bottom-width: 1px; border-bottom-width: 1px;
border-bottom-style: solid; border-bottom-style: solid;
border-color: $toolbar-ios-border-color; border-color: $toolbar-ios-border-color;
@ -117,7 +120,7 @@ ion-nav-items[secondary] {
order: map-get($toolbar-order-ios, secondary); order: map-get($toolbar-order-ios, secondary);
} }
&.hairlines .toolbar toolbar-background { &.hairlines .toolbar-background {
border-bottom-width: 0.55px; border-bottom-width: 0.55px;
} }

9
ionic/components/toolbar/modes/md.scss
View File

@ -1,14 +1,17 @@
@import "../../../globals.md"; @import "../../../globals.md";
@import "../toolbar";
// Material Design Toolbar // Material Design Toolbar
// -------------------------------------------------- // --------------------------------------------------
$toolbar-md-padding: 4px !default;
$toolbar-md-height: 5.6rem !default; $toolbar-md-height: 5.6rem !default;
$toolbar-md-title-font-size: 2rem !default; $toolbar-md-title-font-size: 2rem !default;
$toolbar-md-button-font-size: 1.4rem !default; $toolbar-md-button-font-size: 1.4rem !default;
.toolbar { .toolbar {
padding: $toolbar-md-padding;
min-height: $toolbar-md-height; min-height: $toolbar-md-height;
button, button,
@ -62,7 +65,7 @@ $toolbar-md-button-font-size: 1.4rem !default;
background-color: transparent; background-color: transparent;
} }
.toolbar toolbar-background { .toolbar-background {
border-color: $toolbar-md-border-color; border-color: $toolbar-md-border-color;
background-color: $toolbar-md-background-color; background-color: $toolbar-md-background-color;
} }
@ -92,12 +95,12 @@ ion-navbar-section {
min-height: $navbar-md-height; min-height: $navbar-md-height;
} }
.toolbar .back-button { .back-button {
margin: 0 0 0 12px; margin: 0 0 0 12px;
box-shadow: none; box-shadow: none;
} }
.toolbar .back-button-icon { .back-button-icon {
margin: 0; margin: 0;
min-width: 44px; min-width: 44px;
font-size: 2.4rem; font-size: 2.4rem;

15
ionic/components/toolbar/toolbar.scss
View File

@ -3,8 +3,6 @@
// Toolbar // Toolbar
// -------------------------------------------------- // --------------------------------------------------
$toolbar-padding: 4px !default;
$toolbar-order: ( $toolbar-order: (
backButton: 10, backButton: 10,
menu-toggle-primary: 20, menu-toggle-primary: 20,
@ -26,18 +24,11 @@ $toolbar-order: (
order: $flex-order-toolbar-top; order: $flex-order-toolbar-top;
flex: 0; flex: 0;
padding: $toolbar-padding;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
button,
[button] {
background-color: transparent;
box-shadow: none;
}
} }
.toolbar toolbar-background { .toolbar-background {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -50,7 +41,7 @@ $toolbar-order: (
pointer-events: none; pointer-events: none;
} }
toolbar-content { .toolbar-content {
display: block; display: block;
flex: 1; flex: 1;
order: map-get($toolbar-order, content); order: map-get($toolbar-order, content);
@ -148,7 +139,7 @@ ion-navbar.toolbar {
.toolbar[#{$color-name}] { .toolbar[#{$color-name}] {
toolbar-background { .toolbar-background {
background-color: $color-value; background-color: $color-value;
border-color: darken($color-value, 10%); border-color: darken($color-value, 10%);
} }

6
ionic/components/toolbar/toolbar.ts
View File

@ -77,13 +77,13 @@ export class ToolbarBase extends Ion {
@Component({ @Component({
selector: 'ion-toolbar', selector: 'ion-toolbar',
template: template:
'<toolbar-background></toolbar-background>' + '<div class="toolbar-background"></div>' +
'<ng-content select="[menu-toggle]"></ng-content>' + '<ng-content select="[menu-toggle]"></ng-content>' +
'<ng-content select="ion-nav-items[primary]"></ng-content>' + '<ng-content select="ion-nav-items[primary]"></ng-content>' +
'<ng-content select="ion-nav-items[secondary]"></ng-content>' + '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
'<toolbar-content>' + '<div class="toolbar-content">' +
'<ng-content></ng-content>' + '<ng-content></ng-content>' +
'</toolbar-content>', '</div>',
host: { host: {
'class': 'toolbar' 'class': 'toolbar'
} }