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

feat(toast): add CSS variables for box-shadow and border (#16679)

Browse Source 
* feat(toast): add border and box-shadow CSS variable

* feat(toast): add new CSS vars
This commit is contained in:
Paul Stelzer
2018-12-11 13:29:42 +01:00
committed by Manu MA
parent 9a47fc4de0
commit 1a299b01fe
8 changed files with 50 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
core/api.txt
View File

@ -1142,6 +1142,11 @@ ion-toast,event,ionToastDidUnload,void,true
ion-toast,event,ionToastWillDismiss,OverlayEventDetail,true ion-toast,event,ionToastWillDismiss,OverlayEventDetail,true
ion-toast,event,ionToastWillPresent,void,true ion-toast,event,ionToastWillPresent,void,true
ion-toast,css-prop,--background ion-toast,css-prop,--background
ion-toast,css-prop,--border-color
ion-toast,css-prop,--border-radius
ion-toast,css-prop,--border-style
ion-toast,css-prop,--border-width
ion-toast,css-prop,--box-shadow
ion-toast,css-prop,--button-color ion-toast,css-prop,--button-color
ion-toast,css-prop,--color ion-toast,css-prop,--color

1
core/src/components/button/button.scss
View File

@ -44,6 +44,7 @@
--border-width: initial; --border-width: initial;
--border-color: initial; --border-color: initial;
--border-style: initial; --border-style: initial;
--box-shadow: none;
display: inline-block; display: inline-block;

15
core/src/components/toast/readme.md
View File

@ -170,11 +170,16 @@ Type: `Promise<void>`
## CSS Custom Properties ## CSS Custom Properties
| Name | Description | | Name | Description |
| ---------------- | ------------------------ | | ----------------- | -------------------------- |
| `--background` | Background of the toast | | `--background` | Background of the toast |
| `--button-color` | Color of the button text | | `--border-color` | Border color of the toast |
| `--color` | Color of the toast text | | `--border-radius` | Border radius of the toast |
| `--border-style` | Border style of the toast |
| `--border-width` | Border width of the toast |
| `--box-shadow` | Box shadow of the toast |
| `--button-color` | Color of the button text |
| `--color` | Color of the toast text |
---------------------------------------------- ----------------------------------------------

10
core/src/components/toast/test/basic/index.html
View File

@ -8,6 +8,15 @@
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet"> <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet"> <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../dist/ionic.js"></script> <script src="../../../../../dist/ionic.js"></script>
<style>
ion-toast.toast-border {
--border-radius: 20px;
--border-width: 5px;
--border-style: double;
--border-color: yellow;
}
</style>
</head> </head>
<body> <body>
@ -28,6 +37,7 @@
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</ion-button> <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</ion-button>
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</ion-button> <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</ion-button>
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, color: 'danger'})">Show Color Toast</ion-button> <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, color: 'danger'})">Show Color Toast</ion-button>
<ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, cssClass: 'toast-border'})">Show Toast with border</ion-button>
<ion-toast-controller></ion-toast-controller> <ion-toast-controller></ion-toast-controller>

3
core/src/components/toast/toast.ios.scss
View File

@ -8,6 +8,7 @@
--background: #{$toast-ios-background-color}; --background: #{$toast-ios-background-color};
--button-color: #{$toast-ios-button-color}; --button-color: #{$toast-ios-button-color};
--color: #{$toast-ios-title-color}; --color: #{$toast-ios-title-color};
--border-radius: #{$toast-ios-border-radius};
font-size: $toast-ios-title-font-size; font-size: $toast-ios-title-font-size;
} }
@ -15,7 +16,7 @@
.toast-wrapper { .toast-wrapper {
@include position-horizontal(10px, 10px); @include position-horizontal(10px, 10px);
@include margin(auto); @include margin(auto);
@include border-radius($toast-ios-border-radius); @include border-radius(var(--border-radius));
display: block; display: block;
position: absolute; position: absolute;

8
core/src/components/toast/toast.md.scss
View File

@ -8,12 +8,14 @@
--button-color: #{ion-color(primary, base)}; --button-color: #{ion-color(primary, base)};
--background: #{$toast-md-background}; --background: #{$toast-md-background};
--color: #{$toast-md-color}; --color: #{$toast-md-color};
--border-radius: #{$toast-md-border-radius};
--box-shadow: #{$toast-md-box-shadow};
font-size: $toast-md-font-size; font-size: #{$toast-md-font-size};
} }
.toast-wrapper { .toast-wrapper {
@include border-radius(4px); @include border-radius(var(--border-radius));
@include position-horizontal(8px, 8px); @include position-horizontal(8px, 8px);
@include margin(auto); @include margin(auto);
@ -22,8 +24,6 @@
max-width: $toast-max-width; max-width: $toast-max-width;
box-shadow: $toast-md-box-shadow;
opacity: .01; opacity: .01;
z-index: $z-index-overlay-wrapper; z-index: $z-index-overlay-wrapper;

3
core/src/components/toast/toast.md.vars.scss
View File

@ -15,6 +15,9 @@ $toast-md-font-size: 14px !default;
/// @prop - Color of the toast /// @prop - Color of the toast
$toast-md-color: $background-color-step-50 !default; $toast-md-color: $background-color-step-50 !default;
/// @prop - Border radius of the toast wrapper
$toast-md-border-radius: 4px !default;
/// @prop - Font size of the toast message /// @prop - Font size of the toast message
$toast-md-message-line-height: 20px !default; $toast-md-message-line-height: 20px !default;

15
core/src/components/toast/toast.scss
View File

@ -6,10 +6,19 @@
:host { :host {
/** /**
* @prop --background: Background of the toast * @prop --background: Background of the toast
* @prop --border-color: Border color of the toast
* @prop --border-radius: Border radius of the toast
* @prop --border-width: Border width of the toast
* @prop --border-style: Border style of the toast
* @prop --box-shadow: Box shadow of the toast
* @prop --button-color: Color of the button text * @prop --button-color: Color of the button text
* @prop --color: Color of the toast text * @prop --color: Color of the toast text
*/ */
--button-color: inherit; --button-color: inherit;
--border-width: 0;
--border-style: none;
--border-color: initial;
--box-shadow: none;
@include position(0, null, null, 0); @include position(0, null, null, 0);
@ -35,7 +44,13 @@
} }
.toast-wrapper { .toast-wrapper {
border-width: var(--border-width);
border-style: var(--border-style);
border-color: var(--border-color);
background: var(--background); background: var(--background);
box-shadow: var(--box-shadow);
} }
.toast-container { .toast-container {