mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 07:41:51 +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
@ -4,108 +4,108 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin top of the button
|
||||
$button-ios-margin-top: 4px !default;
|
||||
$button-ios-margin-top: 4px;
|
||||
|
||||
/// @prop - Margin end of the button
|
||||
$button-ios-margin-end: 2px !default;
|
||||
$button-ios-margin-end: 2px;
|
||||
|
||||
/// @prop - Margin bottom of the button
|
||||
$button-ios-margin-bottom: 4px !default;
|
||||
$button-ios-margin-bottom: 4px;
|
||||
|
||||
/// @prop - Margin start of the button
|
||||
$button-ios-margin-start: 2px !default;
|
||||
$button-ios-margin-start: 2px;
|
||||
|
||||
/// @prop - Padding top of the button
|
||||
$button-ios-padding-top: 13px !default;
|
||||
$button-ios-padding-top: 13px;
|
||||
|
||||
/// @prop - Padding end of the button
|
||||
$button-ios-padding-end: 1em !default;
|
||||
$button-ios-padding-end: 1em;
|
||||
|
||||
/// @prop - Padding bottom of the button
|
||||
$button-ios-padding-bottom: $button-ios-padding-top !default;
|
||||
$button-ios-padding-bottom: $button-ios-padding-top;
|
||||
|
||||
/// @prop - Padding start of the button
|
||||
$button-ios-padding-start: $button-ios-padding-end !default;
|
||||
$button-ios-padding-start: $button-ios-padding-end;
|
||||
|
||||
/// @prop - Minimum height of the button
|
||||
$button-ios-min-height: 3.1em !default;
|
||||
$button-ios-min-height: 3.1em;
|
||||
|
||||
/// @prop - Border radius of the button
|
||||
$button-ios-border-radius: 14px !default;
|
||||
$button-ios-border-radius: 14px;
|
||||
|
||||
/// @prop - Font size of the button text
|
||||
/// The maximum font size is calculated by taking the default font size
|
||||
/// and multiplying it by 3, since 310% of the default is the maximum
|
||||
$button-ios-font-size: dynamic-font-max(16px, 3) !default;
|
||||
$button-ios-font-size: dynamic-font-max(16px, 3);
|
||||
|
||||
/// @prop - Font weight of the button text
|
||||
$button-ios-font-weight: 500 !default;
|
||||
$button-ios-font-weight: 500;
|
||||
|
||||
// iOS Large Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the large button
|
||||
$button-ios-large-padding-top: 17px !default;
|
||||
$button-ios-large-padding-top: 17px;
|
||||
|
||||
/// @prop - Padding end of the large button
|
||||
$button-ios-large-padding-end: 1em !default;
|
||||
$button-ios-large-padding-end: 1em;
|
||||
|
||||
/// @prop - Padding bottom of the large button
|
||||
$button-ios-large-padding-bottom: $button-ios-large-padding-top !default;
|
||||
$button-ios-large-padding-bottom: $button-ios-large-padding-top;
|
||||
|
||||
/// @prop - Padding start of the large button
|
||||
$button-ios-large-padding-start: $button-ios-large-padding-end !default;
|
||||
$button-ios-large-padding-start: $button-ios-large-padding-end;
|
||||
|
||||
/// @prop - Minimum height of the large button
|
||||
$button-ios-large-min-height: 3.1em !default;
|
||||
$button-ios-large-min-height: 3.1em;
|
||||
|
||||
/// @prop - Border radius of the large button
|
||||
$button-ios-large-border-radius: 16px !default;
|
||||
$button-ios-large-border-radius: 16px;
|
||||
|
||||
/// @prop - Font size of the large button
|
||||
/// The maximum font size is calculated by taking the default font size
|
||||
/// and multiplying it by 3, since 310% of the default is the maximum
|
||||
$button-ios-large-font-size: dynamic-font-max(20px, 3) !default;
|
||||
$button-ios-large-font-size: dynamic-font-max(20px, 3);
|
||||
|
||||
|
||||
// iOS Small Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the small button
|
||||
$button-ios-small-padding-top: 4px !default;
|
||||
$button-ios-small-padding-top: 4px;
|
||||
|
||||
/// @prop - Padding end of the small button
|
||||
$button-ios-small-padding-end: .9em !default;
|
||||
$button-ios-small-padding-end: .9em;
|
||||
|
||||
/// @prop - Padding bottom of the small button
|
||||
$button-ios-small-padding-bottom: $button-ios-small-padding-top !default;
|
||||
$button-ios-small-padding-bottom: $button-ios-small-padding-top;
|
||||
|
||||
/// @prop - Padding start of the small button
|
||||
$button-ios-small-padding-start: $button-ios-small-padding-end !default;
|
||||
$button-ios-small-padding-start: $button-ios-small-padding-end;
|
||||
|
||||
/// @prop - Minimum height of the small button
|
||||
$button-ios-small-min-height: 2.1em !default;
|
||||
$button-ios-small-min-height: 2.1em;
|
||||
|
||||
/// @prop - Border radius of the small button
|
||||
$button-ios-small-border-radius: 6px !default;
|
||||
$button-ios-small-border-radius: 6px;
|
||||
|
||||
/// @prop - Font size of the small button
|
||||
/// The maximum font size is calculated by taking the default font size
|
||||
/// and multiplying it by 3, since 310% of the default is the maximum
|
||||
$button-ios-small-font-size: dynamic-font-max(13px, 3) !default;
|
||||
$button-ios-small-font-size: dynamic-font-max(13px, 3);
|
||||
|
||||
|
||||
// iOS Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border width of the outline button
|
||||
$button-ios-outline-border-width: 1px !default;
|
||||
$button-ios-outline-border-width: 1px;
|
||||
|
||||
/// @prop - Border style of the outline button
|
||||
$button-ios-outline-border-style: solid !default;
|
||||
$button-ios-outline-border-style: solid;
|
||||
|
||||
/// @prop - Border radius of the outline button
|
||||
$button-ios-outline-border-radius: $button-ios-border-radius !default;
|
||||
$button-ios-outline-border-radius: $button-ios-border-radius;
|
||||
|
||||
// iOS Clear Button
|
||||
// --------------------------------------------------
|
||||
@ -113,41 +113,41 @@ $button-ios-outline-border-radius: $button-ios-border-radius
|
||||
/// @prop - Font size of the clear button
|
||||
/// The maximum font size is calculated by taking the default font size
|
||||
/// and multiplying it by 3, since 310% of the default is the maximum
|
||||
$button-ios-clear-font-size: dynamic-font-max(17px, 3) !default;
|
||||
$button-ios-clear-font-size: dynamic-font-max(17px, 3);
|
||||
|
||||
/// @prop - Font weight of the clear button
|
||||
$button-ios-clear-font-weight: normal !default;
|
||||
$button-ios-clear-font-weight: normal;
|
||||
|
||||
/// @prop - Letter spacing of the button
|
||||
$button-ios-letter-spacing: 0 !default;
|
||||
$button-ios-letter-spacing: 0;
|
||||
|
||||
/// @prop - Opacity of the activated clear button
|
||||
$button-ios-clear-opacity-activated: .4 !default;
|
||||
$button-ios-clear-opacity-activated: .4;
|
||||
|
||||
/// @prop - Opacity of the clear button on hover
|
||||
$button-ios-clear-opacity-hover: .6 !default;
|
||||
$button-ios-clear-opacity-hover: .6;
|
||||
|
||||
// iOS Round Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the round button
|
||||
$button-ios-round-padding-top: $button-round-padding-top !default;
|
||||
$button-ios-round-padding-top: $button-round-padding-top;
|
||||
|
||||
/// @prop - Padding end of the round button
|
||||
$button-ios-round-padding-end: $button-round-padding-end !default;
|
||||
$button-ios-round-padding-end: $button-round-padding-end;
|
||||
|
||||
/// @prop - Padding bottom of the round button
|
||||
$button-ios-round-padding-bottom: $button-round-padding-bottom !default;
|
||||
$button-ios-round-padding-bottom: $button-round-padding-bottom;
|
||||
|
||||
/// @prop - Padding start of the round button
|
||||
$button-ios-round-padding-start: $button-round-padding-start !default;
|
||||
$button-ios-round-padding-start: $button-round-padding-start;
|
||||
|
||||
/// @prop - Border radius of the round button
|
||||
$button-ios-round-border-radius: $button-round-border-radius !default;
|
||||
$button-ios-round-border-radius: $button-round-border-radius;
|
||||
|
||||
|
||||
// iOS Decorator Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font weight of the strong button
|
||||
$button-ios-strong-font-weight: 600 !default;
|
||||
$button-ios-strong-font-weight: 600;
|
||||
|
||||
@ -7,113 +7,113 @@
|
||||
$button-md-margin-top: 4px;
|
||||
|
||||
/// @prop - Margin end of the button
|
||||
$button-md-margin-end: 2px !default;
|
||||
$button-md-margin-end: 2px;
|
||||
|
||||
/// @prop - Margin bottom of the button
|
||||
$button-md-margin-bottom: 4px !default;
|
||||
$button-md-margin-bottom: 4px;
|
||||
|
||||
/// @prop - Margin start of the button
|
||||
$button-md-margin-start: 2px !default;
|
||||
$button-md-margin-start: 2px;
|
||||
|
||||
/// @prop - Padding top of the button
|
||||
$button-md-padding-top: 8px !default;
|
||||
$button-md-padding-top: 8px;
|
||||
|
||||
/// @prop - Padding end of the button
|
||||
$button-md-padding-end: 1.1em !default;
|
||||
$button-md-padding-end: 1.1em;
|
||||
|
||||
/// @prop - Padding bottom of the button
|
||||
$button-md-padding-bottom: $button-md-padding-top !default;
|
||||
$button-md-padding-bottom: $button-md-padding-top;
|
||||
|
||||
/// @prop - Padding start of the button
|
||||
$button-md-padding-start: 1.1em !default;
|
||||
$button-md-padding-start: 1.1em;
|
||||
|
||||
/// @prop - Minimum height of the button
|
||||
$button-md-min-height: 36px !default;
|
||||
$button-md-min-height: 36px;
|
||||
|
||||
/// @prop - Border radius of the button
|
||||
$button-md-border-radius: 4px !default;
|
||||
$button-md-border-radius: 4px;
|
||||
|
||||
/// @prop - Font size of the button text
|
||||
$button-md-font-size: dynamic-font(14px) !default;
|
||||
$button-md-font-size: dynamic-font(14px);
|
||||
|
||||
/// @prop - Font weight of the button text
|
||||
$button-md-font-weight: 500 !default;
|
||||
$button-md-font-weight: 500;
|
||||
|
||||
/// @prop - Capitalization of the button text
|
||||
$button-md-text-transform: uppercase !default;
|
||||
$button-md-text-transform: uppercase;
|
||||
|
||||
$button-md-letter-spacing: 0.06em;
|
||||
|
||||
/// @prop - Box shadow of the button
|
||||
$button-md-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
|
||||
$button-md-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
|
||||
|
||||
/// @prop - Box shadow of the activated button
|
||||
$button-md-box-shadow-activated: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) !default;
|
||||
$button-md-box-shadow-activated: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
|
||||
|
||||
// Material Design Large Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the large button
|
||||
$button-md-large-padding-top: 14px !default;
|
||||
$button-md-large-padding-top: 14px;
|
||||
|
||||
/// @prop - Padding end of the large button
|
||||
$button-md-large-padding-end: 1em !default;
|
||||
$button-md-large-padding-end: 1em;
|
||||
|
||||
/// @prop - Padding bottom of the large button
|
||||
$button-md-large-padding-bottom: $button-md-large-padding-top !default;
|
||||
$button-md-large-padding-bottom: $button-md-large-padding-top;
|
||||
|
||||
/// @prop - Padding start of the large button
|
||||
$button-md-large-padding-start: $button-md-large-padding-end !default;
|
||||
$button-md-large-padding-start: $button-md-large-padding-end;
|
||||
|
||||
/// @prop - Minimum height of the large button
|
||||
$button-md-large-min-height: 2.8em !default;
|
||||
$button-md-large-min-height: 2.8em;
|
||||
|
||||
/// @prop - Font size of the large button
|
||||
$button-md-large-font-size: dynamic-font(20px) !default;
|
||||
$button-md-large-font-size: dynamic-font(20px);
|
||||
|
||||
|
||||
// Material Design Small Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the small button
|
||||
$button-md-small-padding-top: 4px !default;
|
||||
$button-md-small-padding-top: 4px;
|
||||
|
||||
/// @prop - Padding end of the small button
|
||||
$button-md-small-padding-end: .9em !default;
|
||||
$button-md-small-padding-end: .9em;
|
||||
|
||||
/// @prop - Padding bottom of the small button
|
||||
$button-md-small-padding-bottom: $button-md-small-padding-top !default;
|
||||
$button-md-small-padding-bottom: $button-md-small-padding-top;
|
||||
|
||||
/// @prop - Padding start of the small button
|
||||
$button-md-small-padding-start: $button-md-small-padding-end !default;
|
||||
$button-md-small-padding-start: $button-md-small-padding-end;
|
||||
|
||||
/// @prop - Minimum height of the small button
|
||||
$button-md-small-min-height: 2.1em !default;
|
||||
$button-md-small-min-height: 2.1em;
|
||||
|
||||
/// @prop - Font size of the small button
|
||||
$button-md-small-font-size: dynamic-font(13px) !default;
|
||||
$button-md-small-font-size: dynamic-font(13px);
|
||||
|
||||
// Material Design Round Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the round button
|
||||
$button-md-round-padding-top: $button-round-padding-top !default;
|
||||
$button-md-round-padding-top: $button-round-padding-top;
|
||||
|
||||
/// @prop - Padding end of the round button
|
||||
$button-md-round-padding-end: $button-round-padding-end !default;
|
||||
$button-md-round-padding-end: $button-round-padding-end;
|
||||
|
||||
/// @prop - Padding bottom of the round button
|
||||
$button-md-round-padding-bottom: $button-round-padding-bottom !default;
|
||||
$button-md-round-padding-bottom: $button-round-padding-bottom;
|
||||
|
||||
/// @prop - Padding start of the round button
|
||||
$button-md-round-padding-start: $button-round-padding-start !default;
|
||||
$button-md-round-padding-start: $button-round-padding-start;
|
||||
|
||||
/// @prop - Border radius of the round button
|
||||
$button-md-round-border-radius: $button-round-border-radius !default;
|
||||
$button-md-round-border-radius: $button-round-border-radius;
|
||||
|
||||
|
||||
// Material Design Decorator Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Font weight of the strong button
|
||||
$button-md-strong-font-weight: bold !default;
|
||||
$button-md-strong-font-weight: bold;
|
||||
|
||||
@ -4,16 +4,16 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Padding top of the round button
|
||||
$button-round-padding-top: 0 !default;
|
||||
$button-round-padding-top: 0;
|
||||
|
||||
/// @prop - Padding end of the round button
|
||||
$button-round-padding-end: 26px !default;
|
||||
$button-round-padding-end: 26px;
|
||||
|
||||
/// @prop - Padding bottom of the round button
|
||||
$button-round-padding-bottom: $button-round-padding-top !default;
|
||||
$button-round-padding-bottom: $button-round-padding-top;
|
||||
|
||||
/// @prop - Padding start of the round button
|
||||
$button-round-padding-start: $button-round-padding-end !default;
|
||||
$button-round-padding-start: $button-round-padding-end;
|
||||
|
||||
/// @prop - Border radius of the round button
|
||||
$button-round-border-radius: 999px !default;
|
||||
$button-round-border-radius: 999px;
|
||||
|
||||
Reference in New Issue
Block a user