mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
dc66ce48e1
Changes Closes #18663 * Converts Segment to shadow * Enables gesture to swipe between segment buttons * Adds indicator transition to slide the indicator between buttons * Updates global theme variables * Removes activated state, now handled by the gesture * Updates iOS to latest iOS 13 UI * Ensures customization is working for the buttons and indicator * Updates the e2e tests
77 lines
3.2 KiB
SCSS
77 lines
3.2 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($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 - 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 checked segment button
|
|
$segment-button-md-text-color-checked: ion-color(primary, base) !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 - Transition of the animated segment button
|
|
$segment-button-md-transition-animated: transform 250ms cubic-bezier(.4, 0, .2, 1) !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;
|