mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
8029df344a
* 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
83 lines
3.5 KiB
SCSS
83 lines
3.5 KiB
SCSS
@import "../../themes/ionic.globals.md";
|
|
|
|
// Material Design Segment Button
|
|
// --------------------------------------------------
|
|
|
|
/// @prop - Opacity of the segment button
|
|
$segment-button-md-opacity: .6 !default;
|
|
|
|
/// @prop - Text color of the segment button
|
|
$segment-button-md-text-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $segment-button-md-opacity) !default;
|
|
|
|
/// @prop - Background of the segment button
|
|
$segment-button-md-background: none !default;
|
|
|
|
/// @prop - Background of the checked segment button
|
|
$segment-button-md-background-checked: $segment-button-md-background !default;
|
|
|
|
/// @prop - Background of the hovered segment button
|
|
$segment-button-md-background-hover: ion-color(primary, base, .04) !default;
|
|
|
|
/// @prop - Background of the activated segment button
|
|
$segment-button-md-background-activated: ion-color(primary, base, .16) !default;
|
|
|
|
/// @prop - Width of the bottom border on the segment button
|
|
$segment-button-md-border-bottom-width: 2px !default;
|
|
|
|
/// @prop - Color of the bottom border on the segment button
|
|
$segment-button-md-border-bottom-color: transparent !default;
|
|
|
|
/// @prop - Text color of the activated segment button
|
|
$segment-button-md-text-color-checked: ion-color(primary, base) !default;
|
|
|
|
/// @prop - Border color of the activated segment button
|
|
$segment-button-md-border-bottom-color-activated: ion-color(primary, base) !default;
|
|
|
|
/// @prop - Opacity of the activated segment button
|
|
$segment-button-md-opacity-activated: 1 !default;
|
|
|
|
/// @prop - Opacity of the disabled segment button
|
|
$segment-button-md-opacity-disabled: .3 !default;
|
|
|
|
/// @prop - Padding top of the segment button
|
|
$segment-button-md-padding-top: 0 !default;
|
|
|
|
/// @prop - Padding end of the segment button
|
|
$segment-button-md-padding-end: 16px !default;
|
|
|
|
/// @prop - Padding bottom of the segment button
|
|
$segment-button-md-padding-bottom: $segment-button-md-padding-top !default;
|
|
|
|
/// @prop - Padding start of the segment button
|
|
$segment-button-md-padding-start: $segment-button-md-padding-end !default;
|
|
|
|
/// @prop - Minimum height of the segment button
|
|
$segment-button-md-min-height: 48px !default;
|
|
|
|
/// @prop - Minimum width of the segment button
|
|
$segment-button-md-min-width: 90px !default;
|
|
|
|
/// @prop - Maximum width of the segment button
|
|
$segment-button-md-max-width: 360px !default;
|
|
|
|
/// @prop - Line height of the segment button
|
|
$segment-button-md-line-height: 40px !default;
|
|
|
|
/// @prop - Font size of the segment button
|
|
$segment-button-md-font-size: 14px !default;
|
|
|
|
/// @prop - Letter spacing of the segment button
|
|
$segment-button-md-letter-spacing: .06em !default;
|
|
|
|
/// @prop - Font weight of the segment button
|
|
$segment-button-md-font-weight: 500 !default;
|
|
|
|
/// @prop - Transition of the segment button
|
|
$segment-button-md-transition: color .15s linear 0s, opacity .15s linear 0s !default;
|
|
|
|
/// @prop - Size of an icon in the segment button
|
|
$segment-button-md-icon-size: 24px !default;
|
|
|
|
/// @prop - Line height of an icon in the segment button
|
|
$segment-button-md-icon-line-height: $segment-button-md-line-height !default;
|