mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
fix modal title centering
This commit is contained in:
@@ -2,34 +2,34 @@
|
||||
// Material Design Button
|
||||
// --------------------------------------------------
|
||||
|
||||
$button-material-font-size: 1.4rem !default;
|
||||
$button-material-min-height: 3.6rem !default;
|
||||
$button-material-padding: 0 1.6rem !default;
|
||||
$button-material-box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12),0 1px 1px 0 rgba(0, 0, 0, 0.24);//0 1px 3px 0 rgba(0, 0, 0, 0.3); //0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
|
||||
$button-material-box-shadow-active: 0 4px 5px 0 rgba(0, 0, 0, 0.14),0 1px 10px 0 rgba(0, 0, 0, 0.12),0 2px 4px -1px rgba(0, 0, 0, 0.2); //0 1px 3px 0 rgba(0, 0, 0, 0.3); //0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
|
||||
$button-material-border-radius: 3px !default;
|
||||
$button-md-font-size: 1.4rem !default;
|
||||
$button-md-min-height: 3.6rem !default;
|
||||
$button-md-padding: 0 1.6rem !default;
|
||||
$button-md-box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12),0 1px 1px 0 rgba(0, 0, 0, 0.24);//0 1px 3px 0 rgba(0, 0, 0, 0.3); //0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
|
||||
$button-md-box-shadow-active: 0 4px 5px 0 rgba(0, 0, 0, 0.14),0 1px 10px 0 rgba(0, 0, 0, 0.12),0 2px 4px -1px rgba(0, 0, 0, 0.2); //0 1px 3px 0 rgba(0, 0, 0, 0.3); //0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
|
||||
$button-md-border-radius: 3px !default;
|
||||
|
||||
|
||||
[mode="md"] button,
|
||||
[mode="md"] [button] {
|
||||
border: 0;
|
||||
border-radius: $button-material-border-radius;
|
||||
border-radius: $button-md-border-radius;
|
||||
|
||||
min-height: $button-material-min-height;
|
||||
min-height: $button-md-min-height;
|
||||
|
||||
padding: $button-material-padding;
|
||||
padding: $button-md-padding;
|
||||
text-transform: uppercase;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: $button-material-font-size;
|
||||
box-shadow: $button-material-box-shadow;
|
||||
font-size: $button-md-font-size;
|
||||
box-shadow: $button-md-box-shadow;
|
||||
|
||||
transition: box-shadow 0.2s $animation-curve-fast-out-linear-in,
|
||||
background-color 0.2s $animation-curve-default,
|
||||
color 0.2s $animation-curve-default;
|
||||
|
||||
&.activated {
|
||||
box-shadow: $button-material-box-shadow-active;
|
||||
box-shadow: $button-md-box-shadow-active;
|
||||
}
|
||||
|
||||
&[icon] {
|
||||
|
||||
@@ -5,11 +5,11 @@
|
||||
$navbar-ios-height: 4.4rem !default;
|
||||
|
||||
|
||||
.nav[mode="ios"] .navbar-container {
|
||||
min-height: $navbar-ios-height;
|
||||
}
|
||||
.nav[mode="ios"] {
|
||||
|
||||
.navbar[mode="ios"] {
|
||||
.navbar-container {
|
||||
min-height: $navbar-ios-height;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
padding: 0;
|
||||
|
||||
@@ -2,14 +2,14 @@
|
||||
// Material Design Navbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$navbar-material-height: 5.6rem !default;
|
||||
$navbar-md-height: 5.6rem !default;
|
||||
|
||||
|
||||
.nav[mode="md"] .navbar-container {
|
||||
min-height: $navbar-material-height;
|
||||
}
|
||||
.nav[mode="md"] {
|
||||
|
||||
.navbar[mode="md"] {
|
||||
.navbar-container {
|
||||
min-height: $navbar-md-height;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
padding: 0;
|
||||
|
||||
@@ -20,8 +20,8 @@ import {ViewItem} from '../view/view-item';
|
||||
<button class="back-button">
|
||||
<icon class="back-button-icon" [name]="bbClass"></icon>
|
||||
<span class="back-button-text">
|
||||
<span class="back-default" [inner-text]="bbDefault"></span>
|
||||
<span class="back-title" [inner-text]="bbText"></span>
|
||||
<span class="back-default" [text-content]="bbDefault"></span>
|
||||
<span class="back-title" [text-content]="bbText"></span>
|
||||
</span>
|
||||
</button>
|
||||
<div class="toolbar-title">
|
||||
|
||||
@@ -110,7 +110,8 @@ export class OverlayRef {
|
||||
|
||||
_open(opts={}) {
|
||||
return new Promise(resolve => {
|
||||
this._instance.viewWillEnter && this._instance.viewWillEnter();
|
||||
let instance = this._instance || {};
|
||||
instance.viewWillEnter && instance.viewWillEnter();
|
||||
|
||||
let animationName = (opts && opts.animation) || this._opts.enterAnimation;
|
||||
let animation = Animation.create(this._elementRef.nativeElement, animationName);
|
||||
@@ -122,7 +123,7 @@ export class OverlayRef {
|
||||
animation.play().then(() => {
|
||||
ClickBlock(false);
|
||||
animation.dispose();
|
||||
this._instance.viewDidEnter && this._instance.viewDidEnter();
|
||||
instance.viewDidEnter && instance.viewDidEnter();
|
||||
resolve();
|
||||
});
|
||||
}).catch(err => {
|
||||
@@ -132,8 +133,9 @@ export class OverlayRef {
|
||||
|
||||
close(opts={}) {
|
||||
return new Promise(resolve => {
|
||||
this._instance.viewWillLeave && this._instance.viewWillLeave();
|
||||
this._instance.viewWillUnload && this._instance.viewWillUnload();
|
||||
let instance = this._instance || {};
|
||||
instance.viewWillLeave && instance.viewWillLeave();
|
||||
instance.viewWillUnload && instance.viewWillUnload();
|
||||
|
||||
let animationName = (opts && opts.animation) || this._opts.leaveAnimation;
|
||||
let animation = Animation.create(this._elementRef.nativeElement, animationName);
|
||||
@@ -142,8 +144,8 @@ export class OverlayRef {
|
||||
ClickBlock(true, animation.duration() + 200);
|
||||
|
||||
animation.play().then(() => {
|
||||
this._instance.viewDidLeave && this._instance.viewDidLeave();
|
||||
this._instance.viewDidUnload && this._instance.viewDidUnload();
|
||||
instance.viewDidLeave && instance.viewDidLeave();
|
||||
instance.viewDidUnload && instance.viewDidUnload();
|
||||
|
||||
this._dispose();
|
||||
|
||||
|
||||
@@ -15,6 +15,7 @@ $toolbar-ios-button-font-size: 1.7rem !default;
|
||||
$toolbar-ios-title-font-size: 1.7rem !default;
|
||||
|
||||
|
||||
.nav[mode="ios"] .toolbar,
|
||||
.toolbar[mode="ios"] {
|
||||
border-bottom: 1px solid $toolbar-ios-border-color;
|
||||
min-height: $toolbar-ios-height;
|
||||
|
||||
@@ -7,6 +7,7 @@ $toolbar-md-title-font-size: 2rem !default;
|
||||
$toolbar-md-button-font-size: 1.4rem !default;
|
||||
|
||||
|
||||
.nav[mode="md"] .toolbar,
|
||||
.toolbar[mode="md"] {
|
||||
min-height: $toolbar-md-height;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user