- style all slotted content to order properly in a toolbar, not only buttons
- removes duplicated sass variables
- use current color in select so icon will inherit toolbar color
BREAKING CHANGES
- Removes `--icon-color` and `--placeholder-color` from select in favor of inheritance with opacity
* style(theming): clean up sass TODOs
* fix(item): use proper padding on small buttons in an item
* refactor(components): remove color from unused components
* chore(components): update build files to remove color
* fix(tab-bar): remove unused layout prop
* test(segment): add custom test and update standalone
* docs(segment): update usage examples to remove layout
* test(segment): update tests to remove layout
* test(tab-bar): update tests to remove layout
* fix(segment): set the colors in the parent segment
but use them in the child segment button
This allows the user to customize all of the segment buttons from segment, while still allowing the `color` property to take precedence, and they can also edit the segment button colors directly if desired.
This actually fixes some bugs surrounding colors and allows customization for a segment inside of a toolbar.
references #14853
* style(sass): fix lint errors
* chore(build): build files
* fix(segment-button): use transparent background
* docs(segment-button): add color activated back
* why does the build hate me
* fix(segment): set initial css variables to avoid inheriting
* fix(segment): set initial color activated
also add new line to the nav readme because reasons
* test(segment): parent mode should match children
BREAKING CHANGES
The outer-content class has been removed in favor of setting the color in your app instead:
```
.outer-content {
--background: #f2f2f2;
}
```
- updates segment button so that when layout is not provided the following will happen
- if both label and icon are there, it will apply icon-top
- if only label or only icon, it will style as such
This moves item-specific margin and flex values out of label and into item as a slotted style to prevent those styles from leaking into labels further down the tree.
closes#15393
fixes#16384
BREAKING CHANGES
The default background color for the Toolbar and Tab Bar is now white (#fff).
This can be changed by overriding the following CSS variables:
```
--ion-toolbar-background
--ion-tab-bar-background
--ion-tab-bar-background-focused
```
See https://beta.ionicframework.com/docs/theming/css-variables for more information.
Updates the tab-bar to match the MD bottom navigation spec: https://material.io/design/components/bottom-navigation.html#specs
Changes proposed in this pull request:
- moved flex properties to host, inherit in child anchor element
- this allows the user to customize the tab-button flex properties & fixes#16231
- increased letter spacing
- removed transforms / transitions on active tab
- decreased badge size, add badge styling when empty for MD
- fix badge positioning on both iOS and MD
- updates e2e tests, adds a preview test for tab-bar
- updates documentation surrounding tabs
fixes#16231fixesionic-team/ionic-docs#175fixesionic-team/ionic-docs#163
