mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 15:51:16 +08:00
chore(theming): remove Sass default flags (#29401)
Issue number: N/A --------- ## What is the current behavior? Currently, every Sass variable in Ionic has the `!default` flag added to the end. From the [Sass variables documentation](https://sass-lang.com/documentation/variables/): > Normally when you assign a value to a variable, if that variable already had a value, its old value is overwritten. But if you’re writing a Sass library, you might want to allow your users to configure your library’s variables before you use them to generate CSS. > > To make this possible, Sass provides the `!default` flag. This assigns a value to a variable only if that variable isn’t defined or its value is [null](https://sass-lang.com/documentation/values/null). Otherwise, the existing value will be used. In past versions of Ionic Framework, developers wrote Sass variables to rebuild Ionic Framework using their own values. In the latest versions of Ionic Framework, this is not possible. ## What is the new behavior? Removes the `!default` flag from all Sass variables. ## Does this introduce a breaking change? - [ ] Yes - [x] No ------- Co-authored-by: brandyscarney <brandyscarney@users.noreply.github.com>
This commit is contained in:
Liam DeBeasi
@ -9,75 +9,75 @@
|
||||
$toast-ios-max-height: 478px;
|
||||
|
||||
/// @prop - Background Color of the toast wrapper
|
||||
$toast-ios-background-color: $background-color-step-50 !default;
|
||||
$toast-ios-background-color: $background-color-step-50;
|
||||
|
||||
/// @prop - Background Color alpha of the toast wrapper when translucent
|
||||
$toast-ios-translucent-background-color-alpha: 0.8 !default;
|
||||
$toast-ios-translucent-background-color-alpha: 0.8;
|
||||
|
||||
/// @prop - Background Color of the toast wrapper when translucent
|
||||
$toast-ios-translucent-background-color: rgba(
|
||||
$background-color-rgb,
|
||||
$toast-ios-translucent-background-color-alpha
|
||||
) !default;
|
||||
);
|
||||
|
||||
/// @prop - Border radius of the toast wrapper
|
||||
$toast-ios-border-radius: 14px !default;
|
||||
$toast-ios-border-radius: 14px;
|
||||
|
||||
/// @prop - Color of the toast title
|
||||
$toast-ios-title-color: $text-color-step-150 !default;
|
||||
$toast-ios-title-color: $text-color-step-150;
|
||||
|
||||
/// @prop - Font size of the toast title
|
||||
$toast-ios-header-font-weight: 500 !default;
|
||||
$toast-ios-header-font-weight: 500;
|
||||
|
||||
/// @prop - Spacing between the header and the message
|
||||
$toast-ios-header-margin-bottom: 2px !default;
|
||||
$toast-ios-header-margin-bottom: 2px;
|
||||
|
||||
/// @prop - Font size of the toast title
|
||||
$toast-ios-content-font-size: dynamic-font-clamp(1, 14px, 3.1) !default;
|
||||
$toast-ios-content-font-size: dynamic-font-clamp(1, 14px, 3.1);
|
||||
|
||||
/// @prop - Padding top of the toast content
|
||||
$toast-ios-content-padding-top: 15px !default;
|
||||
$toast-ios-content-padding-top: 15px;
|
||||
|
||||
/// @prop - Padding end of the toast content
|
||||
$toast-ios-content-padding-end: $toast-ios-content-padding-top !default;
|
||||
$toast-ios-content-padding-end: $toast-ios-content-padding-top;
|
||||
|
||||
/// @prop - Padding bottom of the toast content
|
||||
$toast-ios-content-padding-bottom: $toast-ios-content-padding-top !default;
|
||||
$toast-ios-content-padding-bottom: $toast-ios-content-padding-top;
|
||||
|
||||
/// @prop - Padding start of the toast content
|
||||
$toast-ios-content-padding-start: $toast-ios-content-padding-end !default;
|
||||
$toast-ios-content-padding-start: $toast-ios-content-padding-end;
|
||||
|
||||
/// @prop - Color of the toast button
|
||||
$toast-ios-button-color: #{ion-color(primary, base)} !default;
|
||||
$toast-ios-button-color: #{ion-color(primary, base)};
|
||||
|
||||
/// @prop - Filter of the translucent toast
|
||||
$toast-ios-translucent-filter: saturate(180%) blur(20px) !default;
|
||||
$toast-ios-translucent-filter: saturate(180%) blur(20px);
|
||||
|
||||
/// @prop - Minimum height of the toast button
|
||||
$toast-ios-button-min-height: 44px !default;
|
||||
$toast-ios-button-min-height: 44px;
|
||||
|
||||
/// @prop - Padding top of the toast button
|
||||
$toast-ios-button-padding-top: 10px !default;
|
||||
$toast-ios-button-padding-top: 10px;
|
||||
|
||||
/// @prop - Padding end of the toast button
|
||||
$toast-ios-button-padding-end: 15px !default;
|
||||
$toast-ios-button-padding-end: 15px;
|
||||
|
||||
/// @prop - Padding bottom of the toast button
|
||||
$toast-ios-button-padding-bottom: $toast-ios-button-padding-top !default;
|
||||
$toast-ios-button-padding-bottom: $toast-ios-button-padding-top;
|
||||
|
||||
/// @prop - Padding start of the toast button
|
||||
$toast-ios-button-padding-start: 15px !default;
|
||||
$toast-ios-button-padding-start: 15px;
|
||||
|
||||
/// @prop - Font size of the toast button
|
||||
/// Uses the same font size scaling rules as back button.
|
||||
/// Prioritizing the toast header and message over the button.
|
||||
$toast-ios-button-font-size: dynamic-font-clamp(1, 17px, 1.294) !default;
|
||||
$toast-ios-button-font-size: dynamic-font-clamp(1, 17px, 1.294);
|
||||
|
||||
/// @prop - Font size of the toast button
|
||||
$toast-ios-button-font-weight: 500 !default;
|
||||
$toast-ios-button-font-weight: 500;
|
||||
|
||||
/// @prop - Background color alpha of the toast activated button
|
||||
$toast-ios-button-opacity-activated: 0.4 !default;
|
||||
$toast-ios-button-opacity-activated: 0.4;
|
||||
|
||||
/// @prop - Background color of the toast button
|
||||
$toast-ios-button-background-color: transparent !default;
|
||||
$toast-ios-button-background-color: transparent;
|
||||
|
||||
@ -4,92 +4,92 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Background of the toast
|
||||
$toast-md-background: $background-color-step-800 !default;
|
||||
$toast-md-background: $background-color-step-800;
|
||||
|
||||
/// @prop - Box shadow of the toast
|
||||
$toast-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 18px 0 rgba(0, 0, 0, 0.12) !default;
|
||||
0 1px 18px 0 rgba(0, 0, 0, 0.12);
|
||||
|
||||
/// @prop - Font size of the toast
|
||||
$toast-md-font-size: dynamic-font(14px) !default;
|
||||
$toast-md-font-size: dynamic-font(14px);
|
||||
|
||||
/// @prop - Color of the toast
|
||||
$toast-md-color: $text-color-step-950 !default;
|
||||
$toast-md-color: $text-color-step-950;
|
||||
|
||||
/// @prop - Border radius of the toast wrapper
|
||||
$toast-md-border-radius: 4px !default;
|
||||
$toast-md-border-radius: 4px;
|
||||
|
||||
/// @prop - Font size of the toast message
|
||||
$toast-md-header-line-height: dynamic-font(20px) !default;
|
||||
$toast-md-header-line-height: dynamic-font(20px);
|
||||
|
||||
/// @prop - Font size of the toast message
|
||||
$toast-md-header-font-weight: 500 !default;
|
||||
$toast-md-header-font-weight: 500;
|
||||
|
||||
/// @prop - Spacing between the header and the message
|
||||
$toast-md-header-margin-bottom: 2px !default;
|
||||
$toast-md-header-margin-bottom: 2px;
|
||||
|
||||
/// @prop - Font size of the toast message
|
||||
$toast-md-message-line-height: dynamic-font(20px) !default;
|
||||
$toast-md-message-line-height: dynamic-font(20px);
|
||||
|
||||
/// @prop - Padding top of the toast message
|
||||
$toast-md-content-padding-top: 14px !default;
|
||||
$toast-md-content-padding-top: 14px;
|
||||
|
||||
/// @prop - Padding end of the toast content
|
||||
$toast-md-content-padding-end: 16px !default;
|
||||
$toast-md-content-padding-end: 16px;
|
||||
|
||||
/// @prop - Padding bottom of the toast content
|
||||
$toast-md-content-padding-bottom: $toast-md-content-padding-top !default;
|
||||
$toast-md-content-padding-bottom: $toast-md-content-padding-top;
|
||||
|
||||
/// @prop - Padding start of the toast content
|
||||
$toast-md-content-padding-start: $toast-md-content-padding-end !default;
|
||||
$toast-md-content-padding-start: $toast-md-content-padding-end;
|
||||
|
||||
/// @prop - Padding top of the toast button
|
||||
$toast-md-button-padding-top: 10px !default;
|
||||
$toast-md-button-padding-top: 10px;
|
||||
|
||||
/// @prop - Padding end of the toast button
|
||||
$toast-md-button-padding-end: 15px !default;
|
||||
$toast-md-button-padding-end: 15px;
|
||||
|
||||
/// @prop - Padding bottom of the toast button
|
||||
$toast-md-button-padding-bottom: $toast-md-button-padding-top !default;
|
||||
$toast-md-button-padding-bottom: $toast-md-button-padding-top;
|
||||
|
||||
/// @prop - Padding start of the toast button
|
||||
$toast-md-button-padding-start: 15px !default;
|
||||
$toast-md-button-padding-start: 15px;
|
||||
|
||||
/// @prop - Font size of the toast button
|
||||
$toast-md-button-font-size: dynamic-font(14px) !default;
|
||||
$toast-md-button-font-size: dynamic-font(14px);
|
||||
|
||||
/// @prop - Font weight of the toast button
|
||||
$toast-md-button-font-weight: 500 !default;
|
||||
$toast-md-button-font-weight: 500;
|
||||
|
||||
/// @prop - Letter spacing of the toast button
|
||||
$toast-md-button-letter-spacing: 0.84px !default;
|
||||
$toast-md-button-letter-spacing: 0.84px;
|
||||
|
||||
/// @prop - Background color of the toast button
|
||||
$toast-md-button-background-color: transparent !default;
|
||||
$toast-md-button-background-color: transparent;
|
||||
|
||||
/// @prop - Text transform of the toast button
|
||||
$toast-md-button-text-transform: uppercase !default;
|
||||
$toast-md-button-text-transform: uppercase;
|
||||
|
||||
/// @prop - Opacity of the toast button background on hover
|
||||
$toast-md-button-opacity-hover: 0.08 !default;
|
||||
$toast-md-button-opacity-hover: 0.08;
|
||||
|
||||
/// @prop - Background color of the toast button on hover
|
||||
$toast-md-button-background-color-hover: ion-color(primary, base, $toast-md-button-opacity-hover) !default;
|
||||
$toast-md-button-background-color-hover: ion-color(primary, base, $toast-md-button-opacity-hover);
|
||||
|
||||
/// @prop - Text color of the cancel toast button
|
||||
$toast-md-button-cancel-text-color: $text-color-step-900 !default;
|
||||
$toast-md-button-cancel-text-color: $text-color-step-900;
|
||||
|
||||
/// @prop - Background color of the cancel toast button on hover
|
||||
$toast-md-button-cancel-background-color-hover: rgba($background-color-rgb, $toast-md-button-opacity-hover) !default;
|
||||
$toast-md-button-cancel-background-color-hover: rgba($background-color-rgb, $toast-md-button-opacity-hover);
|
||||
|
||||
/// @prop - Padding of the icon only toast button
|
||||
$toast-md-button-icon-only-padding: 9px !default;
|
||||
$toast-md-button-icon-only-padding: 9px;
|
||||
|
||||
/// @prop - Width of the icon only toast button
|
||||
$toast-md-button-icon-only-width: 36px !default;
|
||||
$toast-md-button-icon-only-width: 36px;
|
||||
|
||||
/// @prop - Height of the icon only toast button
|
||||
$toast-md-button-icon-only-height: $toast-md-button-icon-only-width !default;
|
||||
$toast-md-button-icon-only-height: $toast-md-button-icon-only-width;
|
||||
|
||||
/// @prop - Border radius of the icon only toast button
|
||||
$toast-md-button-icon-only-border-radius: 50% !default;
|
||||
$toast-md-button-icon-only-border-radius: 50%;
|
||||
|
||||
@ -4,4 +4,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Max width of the toast
|
||||
$toast-max-width: 700px !default;
|
||||
$toast-max-width: 700px;
|
||||
|
||||
Reference in New Issue
Block a user