- improves the documentation on customizing scoped overlays using cssClass and/or CSS variables
- includes a section in the Angular usage with information on where the CSS needs to be styled (globally) in order to work for an overlay
- Update action sheet colors to match spec (md)
- Remove activated background on buttons (md - uses ripple)
- Update Segment Button to use proper indicator color when inside of a toolbar
- Add back input highlight on focus
fixes#20276
Before users had to know the exact opacity that the MD/iOS spec called for in order to change the hover or focused background color. This allows them to change the background without having to know the opacity.
- changes apply to Action Sheet (Buttons), Back Button, Button, FAB Button, Item, Menu Button, Segment Button, Tab Button
- greatly reduces the requirement by users to set the background hover, focused states for dark modes and custom themes, also eliminates the need to know what the hover opacity is for each based on the spec
- updates the MD dark theme per their spec
- adds a component guide for internal use changing Ionic components
references #18279fixes#20213fixes#19965
BREAKING CHANGE:
*Activated Class*
The `activated` class that is automatically added to buttons on press has been renamed to `ion-activated`. This will be more consistent with our `ion-focused` class we add and also will reduce conflicts with user's CSS.
*CSS Variables*
The `--background-hover`, `--background-focused` and `--background-activated` CSS variables on components that render native buttons will now have an opacity automatically set. If you are setting any of these like the following:
```
--background-hover: rgba(44, 44, 44, 0.08);
```
You will likely not see a hover state anymore. It should be updated to only set the desired color:
```
--background-hover: rgba(44, 44, 44);
```
If the opacity desired is something other than what the spec asks for, use:
```
--background-hover: rgba(44, 44, 44);
--background-hover-opacity: 1;
```
* Add new keyframes proof of concept
* update esm import
* add base before and after methods, add tests
* add base before and after hooks
* update clean up methods, add tests
* add web animations support, change to arrow functions
* remove console logs
* add from, to, fromTo, and other properties
* add more tests, fix onFinish functionality, being testing with nav transitions
* add progress methods, use force linear
* run linter
* Add playSync
* integrate animations with framework components
* onFinish now supports multiple callbacks
* change const to let
* testing reverse
* add support for both animation utilities
* bug fix
* export createAnimation, a few tweaks
* add base tests
* fix issue with onFinish being called out of order. added tests
* fix race conditions in tests
* clean up
* fix bug where onFinish not calling for empty elements array, update test
* clean up
* fix treeshaking, remove old comments
* remove old tests
* Add test for animationbuilder backwards compat
* update typings for menu controller
* mock web animations in tests
* run build
* fix type errors
* sync with master
* use requestAnimationFrame instead of writeTask
* fix flaky tests, fix menu
* fix ordering
* update webdriver
* fix wrong version
* Revert "fix wrong version"
This reverts commit be91296e97.
Revert chromedriver update
* Revert "update webdriver"
This reverts commit e49bc9d76e.
Revert chromedriver update
* expose raw animation object, add tests
* add stylesheet recycling
* finalize before and after hook tests
* a few styling changes
* fix lint warnings
* get rid of old code
* Fix progressStep overflow bug
* disable reuse stylesheet
* small updates
* fix old animation create
* setStyleProperty helper
* reuse keyframe styles
* keyframes
* fix css animation issue with display: none, add tests
* add comment
* fix issue with progress animations and css animations
* clean up
* clean up pt2
* fix tests
* fix linter
* add fill for overlays
* fix swipe to go back
* clean up css animations when done
* fix edge cases with css animations
* fix menu open and close
* add reset function
* clean up reset fn
* Fix issue where animation always being reset
* allow updating animations on the fly
* add clear onfinish method
* fix linter
* add callback options, expand force direction
* ensure opts is defined
* fix css animations open and close for menus
* remove test
* add extra check
* clean up
* fix css anim bug swipe to go back
* fix pause
* setup alt animation to avoid flickering
* clean up
* reset flags on destroy
* add ability to change duration on progressEnd
* fix flicker on duration change for css animations
* fix ios transition
* remove unneeded recursion
* increase durability of updating css animations on the fly
* fix gesture anim
* fix web anim as well. more work for cleanup
* simplify progressEnd for css animations
* fix swipe to go back race condition
* clean up
* Add todo
* fix one more bug
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.
closesionic-team/ionic-docs#666
