mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +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
@ -5,46 +5,46 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Width of the toggle
|
||||
$toggle-ios-width: 51px !default;
|
||||
$toggle-ios-width: 51px;
|
||||
|
||||
/// @prop - Height of the toggle
|
||||
$toggle-ios-height: 31px !default;
|
||||
$toggle-ios-height: 31px;
|
||||
|
||||
/// @prop - Border width of the toggle
|
||||
$toggle-ios-border-width: 2px !default;
|
||||
$toggle-ios-border-width: 2px;
|
||||
|
||||
/// @prop - Border radius of the toggle
|
||||
$toggle-ios-border-radius: $toggle-ios-height * 0.5 !default;
|
||||
$toggle-ios-border-radius: $toggle-ios-height * 0.5;
|
||||
|
||||
/// @prop - Background color of the unchecked toggle
|
||||
$toggle-ios-background-color-off: rgba($text-color-rgb, .088) !default;
|
||||
$toggle-ios-background-color-off: rgba($text-color-rgb, .088);
|
||||
|
||||
/// @prop - Width of the toggle handle
|
||||
$toggle-ios-handle-width: calc(#{$toggle-ios-height} - (#{$toggle-ios-border-width} * 2)) !default;
|
||||
$toggle-ios-handle-width: calc(#{$toggle-ios-height} - (#{$toggle-ios-border-width} * 2));
|
||||
|
||||
/// @prop - Height of the toggle handle
|
||||
$toggle-ios-handle-height: $toggle-ios-handle-width !default;
|
||||
$toggle-ios-handle-height: $toggle-ios-handle-width;
|
||||
|
||||
/// @prop - Max height of the toggle handle
|
||||
$toggle-ios-handle-max-height: calc(100% - (var(--handle-spacing) * 2)) !default;
|
||||
$toggle-ios-handle-max-height: calc(100% - (var(--handle-spacing) * 2));
|
||||
|
||||
/// @prop - Border radius of the toggle handle
|
||||
$toggle-ios-handle-border-radius: $toggle-ios-width * 0.5 !default;
|
||||
$toggle-ios-handle-border-radius: $toggle-ios-width * 0.5;
|
||||
|
||||
/// @prop - Box shadow of the toggle handle
|
||||
$toggle-ios-handle-box-shadow: 0 3px 4px rgba(0, 0, 0, .06), 0 3px 8px rgba(0, 0, 0, .06) !default;
|
||||
$toggle-ios-handle-box-shadow: 0 3px 4px rgba(0, 0, 0, .06), 0 3px 8px rgba(0, 0, 0, .06);
|
||||
|
||||
/// @prop - Background color of the toggle handle
|
||||
$toggle-ios-handle-background-color: #ffffff !default;
|
||||
$toggle-ios-handle-background-color: #ffffff;
|
||||
|
||||
/// @prop - Transition duration of the toggle icon
|
||||
$toggle-ios-transition-duration: 300ms !default;
|
||||
$toggle-ios-transition-duration: 300ms;
|
||||
|
||||
/// @prop - Transition of the toggle icon
|
||||
$toggle-ios-transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms !default;
|
||||
$toggle-ios-transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms;
|
||||
|
||||
/// @prop - Opacity of the disabled toggle
|
||||
$toggle-ios-disabled-opacity: .3 !default;
|
||||
$toggle-ios-disabled-opacity: .3;
|
||||
|
||||
/// @prop - The text color of the on/off labels when the toggle is checked
|
||||
$toggle-ios-on-off-label-checked-color: #fff !default;
|
||||
$toggle-ios-on-off-label-checked-color: #fff;
|
||||
|
||||
@ -5,46 +5,46 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Width of the toggle track
|
||||
$toggle-md-track-width: 36px !default;
|
||||
$toggle-md-track-width: 36px;
|
||||
|
||||
/// @prop - Height of the toggle track
|
||||
$toggle-md-track-height: 14px !default;
|
||||
$toggle-md-track-height: 14px;
|
||||
|
||||
/// @prop - Background color of the toggle track
|
||||
$toggle-md-track-background-color-off: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39) !default;
|
||||
$toggle-md-track-background-color-off: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39);
|
||||
|
||||
/// @prop - Background color alpha of the checked toggle track
|
||||
$toggle-md-track-background-color-alpha-on: .5 !default;
|
||||
$toggle-md-track-background-color-alpha-on: .5;
|
||||
|
||||
/// @prop - Width of the toggle handle
|
||||
$toggle-md-handle-width: 20px !default;
|
||||
$toggle-md-handle-width: 20px;
|
||||
|
||||
/// @prop - Height of the toggle handle
|
||||
$toggle-md-handle-height: 20px !default;
|
||||
$toggle-md-handle-height: 20px;
|
||||
|
||||
/// @prop - Max height of the toggle handle
|
||||
$toggle-md-handle-max-height: calc(100% + 6px) !default;
|
||||
$toggle-md-handle-max-height: calc(100% + 6px);
|
||||
|
||||
/// @prop - Border radius of the toggle handle
|
||||
$toggle-md-handle-border-radius: 50% !default;
|
||||
$toggle-md-handle-border-radius: 50%;
|
||||
|
||||
/// @prop - Box shadow of the toggle handle
|
||||
$toggle-md-handle-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;
|
||||
$toggle-md-handle-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 - Background color of the toggle handle
|
||||
$toggle-md-handle-background-color-off: #ffffff !default;
|
||||
$toggle-md-handle-background-color-off: #ffffff;
|
||||
|
||||
/// @prop - Transition duration of the toggle icon
|
||||
$toggle-md-transition-duration: 160ms !default;
|
||||
$toggle-md-transition-duration: 160ms;
|
||||
|
||||
/// @prop - Transition of the toggle icon
|
||||
$toggle-md-transition: transform $toggle-md-transition-duration cubic-bezier(0.4, 0.0, 0.2, 1), background-color $toggle-md-transition-duration cubic-bezier(0.4, 0.0, 0.2, 1) !default;
|
||||
$toggle-md-transition: transform $toggle-md-transition-duration cubic-bezier(0.4, 0.0, 0.2, 1), background-color $toggle-md-transition-duration cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
|
||||
/// @prop - Opacity of the disabled toggle
|
||||
$toggle-md-disabled-opacity: $form-control-md-disabled-opacity !default;
|
||||
$toggle-md-disabled-opacity: $form-control-md-disabled-opacity;
|
||||
|
||||
/// @prop - The text color of the on/off labels
|
||||
$toggle-md-on-off-label-color: #000 !default;
|
||||
$toggle-md-on-off-label-color: #000;
|
||||
|
||||
/// @prop - The text color of the on/off labels when the toggle is checked
|
||||
$toggle-md-on-off-label-checked-color: #fff !default;
|
||||
$toggle-md-on-off-label-checked-color: #fff;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/// @prop - Top margin of toggle's label when in an item
|
||||
$toggle-item-label-margin-top: 10px !default;
|
||||
$toggle-item-label-margin-top: 10px;
|
||||
|
||||
/// @prop - Bottom margin of toggle's label when in an item
|
||||
$toggle-item-label-margin-bottom: 10px !default;
|
||||
$toggle-item-label-margin-bottom: 10px;
|
||||
Reference in New Issue
Block a user