javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into chore-update-next-from-main

Browse Source
This commit is contained in:
Brandy Carney
2024-05-02 16:43:54 -04:00
parent 1116cdd44a 0124f3b0b3
commit 8b834387d4
876 changed files with 4034 additions and 2766 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
core/src/components/segment-button/segment-button.ios.vars.scss
View File

@@ -4,64 +4,64 @@
// --------------------------------------------------
/// @prop - Background of the segment button
$segment-button-ios-background: none !default;
$segment-button-ios-background: none;
/// @prop - Background of the checked segment button
$segment-button-ios-background-checked: $segment-button-ios-background !default;
$segment-button-ios-background-checked: $segment-button-ios-background;
/// @prop - Text color of the segment button
$segment-button-ios-color: $text-color !default;
$segment-button-ios-color: $text-color;
/// @prop - Background of the checked segment button indicator
$segment-button-ios-indicator-color: var(
--ion-color-step-350,
var(--ion-background-color-step-350, $background-color)
) !default;
);
/// @prop - Margin of the segment button
$segment-button-ios-margin: 2px !default;
$segment-button-ios-margin: 2px;
/// @prop - Opacity of the segment button on hover
$segment-button-ios-opacity-hover: 0.5 !default;
$segment-button-ios-opacity-hover: 0.5;
/// @prop - Opacity of the segment button when focused
$segment-button-ios-opacity-focused: 0.7 !default;
$segment-button-ios-opacity-focused: 0.7;
/// @prop - Opacity of the disabled segment button
$segment-button-ios-opacity-disabled: 0.3 !default;
$segment-button-ios-opacity-disabled: 0.3;
/// @prop - Background of the segment button on hover
$segment-button-ios-background-hover: none !default;
$segment-button-ios-background-hover: none;
/// @prop - Box shadow of the checked segment button
$segment-button-ios-box-shadow-checked: 0 0 5px rgba(0, 0, 0, 0.16) !default;
$segment-button-ios-box-shadow-checked: 0 0 5px rgba(0, 0, 0, 0.16);
/// @prop - Border width of the segment button
$segment-button-ios-border-width: 1px !default;
$segment-button-ios-border-width: 1px;
/// @prop - Border color of the segment button
$segment-button-ios-border-color: rgba($text-color-rgb, 0.12) !default;
$segment-button-ios-border-color: rgba($text-color-rgb, 0.12);
/// @prop - Minimum width of the segment button
$segment-button-ios-min-width: 70px !default;
$segment-button-ios-min-width: 70px;
/// @prop - Minimum height of the segment button
$segment-button-ios-min-height: 28px !default;
$segment-button-ios-min-height: 28px;
/// @prop - Line height of the segment button
$segment-button-ios-line-height: 37px !default;
$segment-button-ios-line-height: 37px;
/// @prop - Font size of the segment button
$segment-button-ios-font-size: 13px !default;
$segment-button-ios-font-size: 13px;
/// @prop - Border radius of the segment button
$segment-button-ios-border-radius: 7px !default;
$segment-button-ios-border-radius: 7px;
/// @prop - Size of an icon in the segment button
$segment-button-ios-icon-size: 24px !default;
$segment-button-ios-icon-size: 24px;
/// @prop - Transition of the segment button
$segment-button-ios-transition: 100ms all linear !default;
$segment-button-ios-transition: 100ms all linear;
/// @prop - Transition of the animated segment button
$segment-button-ios-transition-animated: transform 260ms cubic-bezier(0.4, 0, 0.2, 1) !default;
$segment-button-ios-transition-animated: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);

40
core/src/components/segment-button/segment-button.md.vars.scss
View File

@@ -4,61 +4,61 @@
// --------------------------------------------------
/// @prop - Opacity of the segment button
$segment-button-md-opacity: 0.6 !default;
$segment-button-md-opacity: 0.6;
/// @prop - Text color of the segment button
$segment-button-md-text-color: rgba($text-color-rgb, $segment-button-md-opacity) !default;
$segment-button-md-text-color: rgba($text-color-rgb, $segment-button-md-opacity);
/// @prop - Text color of the checked segment button
$segment-button-md-text-color-checked: ion-color(primary, base) !default;
$segment-button-md-text-color-checked: ion-color(primary, base);
/// @prop - Background of the segment button
$segment-button-md-background: none !default;
$segment-button-md-background: none;
/// @prop - Background of the checked segment button
$segment-button-md-background-checked: $segment-button-md-background !default;
$segment-button-md-background-checked: $segment-button-md-background;
/// @prop - Opacity of the disabled segment button
$segment-button-md-opacity-disabled: 0.3 !default;
$segment-button-md-opacity-disabled: 0.3;
/// @prop - Padding top of the segment button
$segment-button-md-padding-top: 0 !default;
$segment-button-md-padding-top: 0;
/// @prop - Padding end of the segment button
$segment-button-md-padding-end: 16px !default;
$segment-button-md-padding-end: 16px;
/// @prop - Padding bottom of the segment button
$segment-button-md-padding-bottom: $segment-button-md-padding-top !default;
$segment-button-md-padding-bottom: $segment-button-md-padding-top;
/// @prop - Padding start of the segment button
$segment-button-md-padding-start: $segment-button-md-padding-end !default;
$segment-button-md-padding-start: $segment-button-md-padding-end;
/// @prop - Minimum height of the segment button
$segment-button-md-min-height: 48px !default;
$segment-button-md-min-height: 48px;
/// @prop - Minimum width of the segment button
$segment-button-md-min-width: 90px !default;
$segment-button-md-min-width: 90px;
/// @prop - Maximum width of the segment button
$segment-button-md-max-width: 360px !default;
$segment-button-md-max-width: 360px;
/// @prop - Line height of the segment button
$segment-button-md-line-height: 40px !default;
$segment-button-md-line-height: 40px;
/// @prop - Font size of the segment button
$segment-button-md-font-size: 14px !default;
$segment-button-md-font-size: 14px;
/// @prop - Letter spacing of the segment button
$segment-button-md-letter-spacing: 0.06em !default;
$segment-button-md-letter-spacing: 0.06em;
/// @prop - Font weight of the segment button
$segment-button-md-font-weight: 500 !default;
$segment-button-md-font-weight: 500;
/// @prop - Transition of the segment button
$segment-button-md-transition: color 0.15s linear 0s, opacity 0.15s linear 0s !default;
$segment-button-md-transition: color 0.15s linear 0s, opacity 0.15s linear 0s;
/// @prop - Transition of the animated segment button
$segment-button-md-transition-animated: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) !default;
$segment-button-md-transition-animated: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
/// @prop - Size of an icon in the segment button
$segment-button-md-icon-size: 24px !default;
$segment-button-md-icon-size: 24px;