javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(toast): add iOS11 design and animation

Browse Source
This commit is contained in:
Brandy Carney
2017-11-15 15:47:33 -06:00
parent 6806e25a71
commit 891e4195df
4 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/src/components/toast/animations/ios.enter.ts
View File

@ -31,7 +31,7 @@ export default function iOSEnterAnimation(
}
return baseAnimation
.addElement(baseElm)
.easing('cubic-bezier(.36,.66,.04,1)')
.easing('cubic-bezier(.155,1.105,.295,1.12)')
.duration(400)
.add(wrapperAnimation);
}

3
packages/core/src/components/toast/test/basic.html
View File

@ -13,7 +13,7 @@
<ion-page>
<ion-header>
<ion-toolbar color="primary">
<ion-title>Popover</ion-title>
<ion-title>Toast</ion-title>
</ion-toolbar>
</ion-header>
@ -24,7 +24,6 @@
<ion-button block onclick="presentToastWithOptions({message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', duration: 2000})">Show Toast with long message</ion-button>
<ion-button block onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with close button</ion-button>
<ion-button block onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with close button and custom text</ion-button>
<!-- <ion&#45;button block onclick="presentToastWithOptions()">Show Toast Middle</ion&#45;button> -->
<ion-toast-controller></ion-toast-controller>
</ion-content>
</ion-page>

17
packages/core/src/components/toast/toast.ios.scss
View File

@ -5,19 +5,19 @@
// --------------------------------------------------
/// @prop - Background of the toast wrapper
$toast-ios-background: rgba(0, 0, 0, .9) !default;
$toast-ios-background: rgba(237, 237, 239, 1) !default;
/// @prop - Border radius of the toast wrapper
$toast-ios-border-radius: .65rem !default;
$toast-ios-border-radius: 16px !default;
/// @prop - Color of the toast title
$toast-ios-title-color: #fff !default;
$toast-ios-title-color: rgba(71, 71, 71, 1) !default;
/// @prop - Font size of the toast title
$toast-ios-title-font-size: 1.4rem !default;
$toast-ios-title-font-size: 14px !default;
/// @prop - Padding top of the toast title
$toast-ios-title-padding-top: 1.5rem !default;
$toast-ios-title-padding-top: 15px !default;
/// @prop - Padding end of the toast title
$toast-ios-title-padding-end: $toast-ios-title-padding-top !default;
@ -28,6 +28,9 @@ $toast-ios-title-padding-bottom: $toast-ios-title-padding-top !
/// @prop - Padding start of the toast title
$toast-ios-title-padding-start: $toast-ios-title-padding-end !default;
/// @prop - Color of the toast button
$toast-ios-button-color: rgba(71, 71, 71, 1) !default;
.toast-ios .toast-wrapper {
@include position-horizontal(10px, 10px);
@ -67,3 +70,7 @@ $toast-ios-title-padding-start: $toast-ios-title-padding-end !
color: $toast-ios-title-color;
}
.toast-ios .toast-button {
color: $toast-ios-button-color;
}

4
packages/core/src/components/toast/toast.scss
View File

@ -39,9 +39,7 @@ ion-toast {
}
.toast-button {
@include padding(19px, 16px, 17px);
font-size: 1.5rem;
font-size: 15px;
}
.toast-message {