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;
```
Adds the following CSS properties to item:
```
--highlight-color-focused
--highlight-color-valid
--highlight-color-invalid
--highlight-height
```
This also fixes an issue where we were showing the highlight on items
with no lines, and shows inset vs full properly. Adds documentation and tests for input focus.
fixes#14036fixes#9639fixes#14952closes#15690
- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates
Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>
* docs(components): update grammar and docs
* docs(item): update item documentation and add usage
* test(item): add lines test
* feat(list): add lines property to override borders on items
* feat(item): add lines property to override borders on items
* refactor(item): remove old uses of no-lines attribute
* fix(item-sliding): update item options to show border
- show the border on left options only if in a full list
- show the border on both options only if in an inset list (or ios by
default)
- don’t show border on either for no lines list (and md by default)
also renames isRightSide to isEndSide to match the side values
* chore(package): update package lock
* style(item): fix lint errors
* test(item): update item tests
* refactor(item): remove the custom styling of last child items
instead of us overriding first/last child items to have borders we are
going to add to the documentation how to style items with a full border
* fix(item): apply border to item inputs for MD mode
* docs(components): update docs based on new build
* docs(usage): update item usage to show lines being used
* fix(item): do not set the padding right to 0 on an item by default
* fix(item): cast lines to boolean
fixes: #5537#13218#12689#12073#9112
