From 1a299b01fe8b28142415aa8c06f4a794edd8c83c Mon Sep 17 00:00:00 2001 From: Paul Stelzer Date: Tue, 11 Dec 2018 13:29:42 +0100 Subject: [PATCH] feat(toast): add CSS variables for box-shadow and border (#16679) * feat(toast): add border and box-shadow CSS variable * feat(toast): add new CSS vars --- core/api.txt | 5 +++++ core/src/components/button/button.scss | 1 + core/src/components/toast/readme.md | 15 ++++++++++----- core/src/components/toast/test/basic/index.html | 10 ++++++++++ core/src/components/toast/toast.ios.scss | 3 ++- core/src/components/toast/toast.md.scss | 8 ++++---- core/src/components/toast/toast.md.vars.scss | 3 +++ core/src/components/toast/toast.scss | 15 +++++++++++++++ 8 files changed, 50 insertions(+), 10 deletions(-) diff --git a/core/api.txt b/core/api.txt index 12ec765613..71d67e724c 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1142,6 +1142,11 @@ ion-toast,event,ionToastDidUnload,void,true ion-toast,event,ionToastWillDismiss,OverlayEventDetail,true ion-toast,event,ionToastWillPresent,void,true 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,--color diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss index 9bc3c4ad7a..ef03bf27ac 100644 --- a/core/src/components/button/button.scss +++ b/core/src/components/button/button.scss @@ -44,6 +44,7 @@ --border-width: initial; --border-color: initial; --border-style: initial; + --box-shadow: none; display: inline-block; diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md index 9938acc328..93149f446a 100644 --- a/core/src/components/toast/readme.md +++ b/core/src/components/toast/readme.md @@ -170,11 +170,16 @@ Type: `Promise` ## CSS Custom Properties -| Name | Description | -| ---------------- | ------------------------ | -| `--background` | Background of the toast | -| `--button-color` | Color of the button text | -| `--color` | Color of the toast text | +| Name | Description | +| ----------------- | -------------------------- | +| `--background` | Background of the toast | +| `--border-color` | Border color of the toast | +| `--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 | ---------------------------------------------- diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html index 66a8b9dd6d..cd10d0807a 100644 --- a/core/src/components/toast/test/basic/index.html +++ b/core/src/components/toast/test/basic/index.html @@ -8,6 +8,15 @@ + + @@ -28,6 +37,7 @@ Show Toast with Custom Close Button Text Show Translucent Toast Show Color Toast + Show Toast with border diff --git a/core/src/components/toast/toast.ios.scss b/core/src/components/toast/toast.ios.scss index 2babc1dd3f..c3ec929eb8 100644 --- a/core/src/components/toast/toast.ios.scss +++ b/core/src/components/toast/toast.ios.scss @@ -8,6 +8,7 @@ --background: #{$toast-ios-background-color}; --button-color: #{$toast-ios-button-color}; --color: #{$toast-ios-title-color}; + --border-radius: #{$toast-ios-border-radius}; font-size: $toast-ios-title-font-size; } @@ -15,7 +16,7 @@ .toast-wrapper { @include position-horizontal(10px, 10px); @include margin(auto); - @include border-radius($toast-ios-border-radius); + @include border-radius(var(--border-radius)); display: block; position: absolute; diff --git a/core/src/components/toast/toast.md.scss b/core/src/components/toast/toast.md.scss index 5d1566dbd0..66aa9061a2 100644 --- a/core/src/components/toast/toast.md.scss +++ b/core/src/components/toast/toast.md.scss @@ -8,12 +8,14 @@ --button-color: #{ion-color(primary, base)}; --background: #{$toast-md-background}; --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 { - @include border-radius(4px); + @include border-radius(var(--border-radius)); @include position-horizontal(8px, 8px); @include margin(auto); @@ -22,8 +24,6 @@ max-width: $toast-max-width; - box-shadow: $toast-md-box-shadow; - opacity: .01; z-index: $z-index-overlay-wrapper; diff --git a/core/src/components/toast/toast.md.vars.scss b/core/src/components/toast/toast.md.vars.scss index c4cc32a08d..f451852e55 100644 --- a/core/src/components/toast/toast.md.vars.scss +++ b/core/src/components/toast/toast.md.vars.scss @@ -15,6 +15,9 @@ $toast-md-font-size: 14px !default; /// @prop - Color of the toast $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 $toast-md-message-line-height: 20px !default; diff --git a/core/src/components/toast/toast.scss b/core/src/components/toast/toast.scss index 69c4dbeecd..bb8c7068e7 100644 --- a/core/src/components/toast/toast.scss +++ b/core/src/components/toast/toast.scss @@ -6,10 +6,19 @@ :host { /** * @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 --color: Color of the toast text */ --button-color: inherit; + --border-width: 0; + --border-style: none; + --border-color: initial; + --box-shadow: none; @include position(0, null, null, 0); @@ -35,7 +44,13 @@ } .toast-wrapper { + border-width: var(--border-width); + border-style: var(--border-style); + border-color: var(--border-color); + background: var(--background); + + box-shadow: var(--box-shadow); } .toast-container {