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 {
display: block;
width: 100%;
height: 50px;
}
ion-toolbar[position=bottom] {

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

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

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

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

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

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

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

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

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

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