mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
b2021fd9c4
Updates all of the global variables to make sure their naming is consistent, their default values are correct, they are used properly by the related components, and remove any that are not used. - removes some of the non mode-specific global Sass variables - updates the md and ios values so that the default is the css variable with different fallbacks - removes non-color related css variables from the global file - fixes item so it uses the background color that is set by the global file # Breaking Changes ## Removed Global CSS Variables The following global CSS variables have been removed for the reasons listed. | Variable Name | Reason | | ----------------------------------| ------------------------------------------------| | `--ion-toolbar-color-inactive` | Unused | | `--ion-ripple-background-color` | Unused / Ripple color is based on component | | `--ion-header-size` | Removed in favor of using CSS for h1-h6 | | `--ion-header-step` | Removed in favor of using CSS for h1-h6 | ## Renamed Global CSS Variables The following global CSS variables have been renamed for the reasons listed. | Old Variable Name | New Variable Name | Reason | | -----------------------------------------| -----------------------------------| ------------------------------------------------------------------------------| | `--ion-toolbar-text-color` | `--ion-toolbar-color` | Variable is not limited to text color | | `--ion-toolbar-color-active` | `--ion-toolbar-color-activated` | Consistency with our component variables | | `--ion-tabbar-text-color` | `--ion-tab-bar-color` | Variable is not limited to text color | | `--ion-tabbar-text-color-active` | `--ion-tab-bar-color-activated` | Consistency with our component variables | | `--ion-tabbar-background-color` | `--ion-tab-bar-background` | Applies to the background property | | `--ion-tabbar-background-color-focused` | `--ion-tab-bar-background-focused` | Applies to the background property | | `--ion-item-background-color` | `--ion-item-background` | Applies to the background property | | `--ion-item-background-color-active` | `--ion-item-background-activated` | Applies to the background property / Consistency with our component variables | | `--ion-item-text-color` | `--ion-item-color` | Variable is not limited to text color | | `--ion-placeholder-text-color` | `--ion-placeholder-color` | Consistency with other variables | Fixes #15989 Fixes #15559
80 lines
3.4 KiB
SCSS
80 lines
3.4 KiB
SCSS
@import "../../themes/ionic.globals.md";
|
|
|
|
// Material Design Tabs
|
|
// --------------------------------------------------
|
|
|
|
/// @prop - Padding top on the tab button
|
|
$tab-button-md-padding-top: 8px !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: 10px !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 - 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-activated !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-activated !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: 0 !default;
|
|
|
|
/// @prop - Margin end on the tab button text
|
|
$tab-button-md-text-margin-end: $tab-button-md-text-margin-top !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 - Transform for the active tab button text
|
|
$tab-button-md-text-transform-active: scale3d($tab-button-md-font-size-active / $tab-button-md-font-size, $tab-button-md-font-size-active / $tab-button-md-font-size, 1) !default;
|
|
|
|
/// @prop - Text transition for the tab button text
|
|
$tab-button-md-text-transition: transform .1s ease-in-out !default;
|
|
|
|
/// @prop - Transform for the active tab button icon when the layout is icon-top, icon-only, or label-only
|
|
$tab-button-md-icon-transform-active: translate3d(0, -2px, 0) !default;
|
|
|
|
/// @prop - Transform for the active tab button icon when the layout is icon-right
|
|
$tab-button-md-icon-right-transform-active: translate3d(6px, 0, 0) !default;
|
|
|
|
/// @prop - Transform for the active tab button icon when the layout is icon-bottom
|
|
$tab-button-md-icon-bottom-transform-active: translate3d(0, 2px, 0) !default;
|
|
|
|
/// @prop - Transform for the active tab button icon when the layout is icon-left
|
|
$tab-button-md-icon-left-transform-active: translate3d(-6px, 0, 0) !default;
|
|
|
|
/// @prop - Text transition for the tab button icon
|
|
$tab-button-md-icon-transition: transform .1s ease-in-out !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;
|