mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
94159291b2
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 #18279 fixes #20213 fixes #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; ```
98 lines
3.6 KiB
SCSS
98 lines
3.6 KiB
SCSS
@import "../../themes/ionic.globals.md";
|
|
|
|
// Material Design Tabs
|
|
// --------------------------------------------------
|
|
|
|
/// @prop - Padding top on the tab button
|
|
$tab-button-md-padding-top: 0 !default;
|
|
|
|
/// @prop - Padding end on the tab button
|
|
$tab-button-md-padding-end: 12px !default;
|
|
|
|
/// @prop - Padding bottom on the tab button
|
|
$tab-button-md-padding-bottom: 0 !default;
|
|
|
|
/// @prop - Padding start on the tab button
|
|
$tab-button-md-padding-start: 12px !default;
|
|
|
|
/// @prop - Font size of the inactive tab button text
|
|
$tab-button-md-font-size: 12px !default;
|
|
|
|
/// @prop - Letter spacing of the tab button
|
|
$tab-button-md-letter-spacing: .03em !default;
|
|
|
|
/// @prop - Font weight of the tab button text
|
|
$tab-button-md-font-weight: normal !default;
|
|
|
|
/// @prop - Text color of the inactive tab button
|
|
$tab-button-md-text-color: $tabbar-md-color !default;
|
|
|
|
/// @prop - Text color of the active tab button
|
|
$tab-button-md-text-color-active: $tabbar-md-color-selected !default;
|
|
|
|
/// @prop - Icon color of the inactive tab button
|
|
$tab-button-md-icon-color: $tabbar-md-color !default;
|
|
|
|
/// @prop - Icon color of the active tab button
|
|
$tab-button-md-icon-color-active: $tabbar-md-color-selected !default;
|
|
|
|
/// @prop - Margin top on the tab button icon
|
|
$tab-button-md-icon-margin-top: 16px !default;
|
|
|
|
/// @prop - Margin end on the tab button icon
|
|
$tab-button-md-icon-margin-end: 0 !default;
|
|
|
|
/// @prop - Margin bottom on the tab button icon
|
|
$tab-button-md-icon-margin-bottom: $tab-button-md-icon-margin-top !default;
|
|
|
|
/// @prop - Margin start on the tab button icon
|
|
$tab-button-md-icon-margin-start: $tab-button-md-icon-margin-end !default;
|
|
|
|
/// @prop - Font size of the active tab button text
|
|
$tab-button-md-font-size-active: 14px !default;
|
|
|
|
/// @prop - Margin top on the tab button text
|
|
$tab-button-md-text-margin-top: 2px !default;
|
|
|
|
/// @prop - Margin end on the tab button text
|
|
$tab-button-md-text-margin-end: 0 !default;
|
|
|
|
/// @prop - Margin bottom on the tab button text
|
|
$tab-button-md-text-margin-bottom: $tab-button-md-text-margin-top !default;
|
|
|
|
/// @prop - Margin start on the tab button text
|
|
$tab-button-md-text-margin-start: $tab-button-md-text-margin-end !default;
|
|
|
|
/// @prop - Capitalization of the tab button text
|
|
$tab-button-md-text-capitalization: none !default;
|
|
|
|
/// @prop - Size of the tab button icon
|
|
$tab-button-md-icon-size: 22px !default;
|
|
|
|
/// @prop - Opacity of the inactive tab button
|
|
$tab-button-md-opacity: .7 !default;
|
|
|
|
/// @prop - Border radius on the tab button badge
|
|
$tab-button-md-badge-border-radius: 8px !default;
|
|
|
|
/// @prop - Padding top on the tab button badge
|
|
$tab-button-md-badge-padding-top: 3px !default;
|
|
|
|
/// @prop - Padding end on the tab button badge
|
|
$tab-button-md-badge-padding-end: 2px !default;
|
|
|
|
/// @prop - Padding bottom on the tab button badge
|
|
$tab-button-md-badge-padding-bottom: 2px !default;
|
|
|
|
/// @prop - Padding start on the tab button badge
|
|
$tab-button-md-badge-padding-start: 2px !default;
|
|
|
|
/// @prop - Minimum width of the tab button badge
|
|
$tab-button-md-badge-min-width: 12px !default;
|
|
|
|
/// @prop - Font size of the tab button badge
|
|
$tab-button-md-badge-font-size: 8px !default;
|
|
|
|
/// @prop - Size of the empty tab button badge
|
|
$tab-button-md-badge-size-empty: 8px !default;
|