fix(action-sheet): remove the height shift on press and update iOS design (#16862)

This changes the border into a linear gradient background image which allows us to avoid the height decrease on press and have the same border as the background color when pressed.

- merges all action sheet tests to the basic directory (except standalone, translucent), references #16715
- removes the height shift on press, fixes #16790
- fixes the cancel button on iOS so it is `#ffffff` by default
- gets the look of the action sheet closer to native for iOS
- only applies the translucent and backdrop filter if it is supported by the browser (chrome will not show transparent anymore)
- updates documentation to describe when translucent will show up
- adds documentation on how to use screenshot tests
This commit is contained in:
Brandy Carney
2019-01-10 18:13:31 -05:00
committed by GitHub
parent 509edbc53c
commit 82457d874b
38 changed files with 754 additions and 916 deletions

View File

@ -19,7 +19,7 @@ $picker-ios-top-background-color: var(--background, $picker-ios-
$picker-ios-bottom-background-color-alpha: .8 !default;
/// @prop - Bottom Background Color of the picker wrapper gradient
$picker-ios-bottom-background-color: rgba(var(--background-rgb, var(--ion-background-color-rgb, $background-color-rgb)), $picker-ios-bottom-background-color-alpha) !default;
$picker-ios-bottom-background-color: rgba(var(--background-rgb, $background-color-rgb), $picker-ios-bottom-background-color-alpha) !default;
/// @prop - Height of the picker toolbar
$picker-ios-toolbar-height: 44px !default;

View File

@ -19,7 +19,7 @@ $picker-md-top-background-color: $picker-md-background-color
$picker-md-bottom-background-color-alpha: .8 !default;
/// @prop - Bottom Background Color of the picker wrapper gradient
$picker-md-bottom-background-color: rgba(var(--ion-background-color-rgb, $background-color-rgb), $picker-md-bottom-background-color-alpha) !default;
$picker-md-bottom-background-color: rgba($background-color-rgb, $picker-md-bottom-background-color-alpha) !default;
/// @prop - Height of the picker toolbar
$picker-md-toolbar-height: 44px !default;