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

fix(components): apply translucent if backdrop-filter is supported (#18832)

Browse Source 
This updates the components and the docs so that translucent is only applied when backdrop filter is supported, this prevents it from being applied when viewing iOS in Chrome, for example.

closes ionic-team/ionic-docs#666
This commit is contained in:
Brandy Carney
2019-07-19 11:16:10 -04:00
committed by GitHub
parent fbfc07688e
commit 6b5a59dc43
29 changed files with 156 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
core/src/components/card-header/card-header.ios.scss
View File

@ -8,7 +8,9 @@
@include padding($card-ios-header-padding-top, $card-ios-header-padding-end, $card-ios-header-padding-bottom, $card-ios-header-padding-start);
}
:host(.card-header-translucent) {
background-color: $card-ios-header-translucent-background-color;
backdrop-filter: $card-ios-header-translucent-filter;
}
@supports (backdrop-filter: blur(0)) {
:host(.card-header-translucent) {
background-color: $card-ios-header-translucent-background-color;
backdrop-filter: $card-ios-header-translucent-filter;
}
}

2
core/src/components/card-header/card-header.tsx
View File

@ -25,6 +25,8 @@ export class CardHeader implements ComponentInterface {
/**
* If `true`, the card header will be translucent.
* Only applies when the mode is `"ios"` and the device supports
* [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
*/
@Prop() translucent = false;

2
core/src/components/card-header/readme.md
View File

@ -12,7 +12,7 @@
| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `translucent` | `translucent` | If `true`, the card header will be translucent. | `boolean` | `false` |
| `translucent` | `translucent` | If `true`, the card header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` |
----------------------------------------------