javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(theming): remove Sass default flags (#29401)

Browse Source 
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
2024-04-25 15:59:10 -04:00
committed by GitHub
parent 0873dc2ffb
commit 6e8bf4914f
127 changed files with 1301 additions and 1301 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
core/src/components/range/range.ios.vars.scss
View File

@ -4,71 +4,71 @@
// --------------------------------------------------
/// @prop - Padding top/bottom of the range
$range-ios-padding-vertical: 8px !default;
$range-ios-padding-vertical: 8px;
/// @prop - Padding start/end of the range - modern syntax
/**
* 24px was chosen so the knob and its
* shadow do not get cut off by the item.
*/
$range-ios-item-padding-horizontal: 24px !default;
$range-ios-item-padding-horizontal: 24px;
/// @prop - Height of the range slider
$range-ios-slider-height: 42px !default;
$range-ios-slider-height: 42px;
/// @prop - Height of the area that will select the range knob
$range-ios-hit-height: $range-ios-slider-height !default;
$range-ios-hit-height: $range-ios-slider-height;
/// @prop - Height of the range bar
$range-ios-bar-height: 4px !default;
$range-ios-bar-height: 4px;
/// @prop - Background of the range bar
$range-ios-bar-background-color: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6)) !default;
$range-ios-bar-background-color: var(--ion-color-step-900, var(--ion-background-color-step-900, #e6e6e6));
/// @prop - Border radius of the range bar
$range-ios-bar-border-radius: 2px !default;
$range-ios-bar-border-radius: 2px;
/// @prop - Width of the range knob
$range-ios-knob-width: 26px !default;
$range-ios-knob-width: 26px;
/// @prop - Box shadow of the range knob
$range-ios-knob-box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12) !default;
$range-ios-knob-box-shadow: 0px 0.5px 4px rgba(0, 0, 0, 0.12), 0px 6px 13px rgba(0, 0, 0, 0.12);
/// @prop - Background of the range knob
$range-ios-knob-background-color: #ffffff !default;
$range-ios-knob-background-color: #ffffff;
/// @prop - Width of the range tick
$range-ios-tick-width: $range-ios-bar-height !default;
$range-ios-tick-width: $range-ios-bar-height;
/// @prop - Height of the range tick
$range-ios-tick-height: 8px !default;
$range-ios-tick-height: 8px;
/// @prop - Border radius of the range tick
$range-ios-tick-border-radius: 0 !default;
$range-ios-tick-border-radius: 0;
/// @prop - Background of the range tick
$range-ios-tick-background-color: $range-ios-bar-background-color !default;
$range-ios-tick-background-color: $range-ios-bar-background-color;
/// @prop - Background of the range pin
$range-ios-pin-background-color: transparent !default;
$range-ios-pin-background-color: transparent;
/// @prop - Color of the range pin
$range-ios-pin-color: $text-color !default;
$range-ios-pin-color: $text-color;
/// @prop - Font size of the range pin
$range-ios-pin-font-size: dynamic-font(12px) !default;
$range-ios-pin-font-size: dynamic-font(12px);
/// @prop - Padding top of the range pin
$range-ios-pin-padding-top: 8px !default;
$range-ios-pin-padding-top: 8px;
/// @prop - Padding end of the range pin
$range-ios-pin-padding-end: $range-ios-pin-padding-top !default;
$range-ios-pin-padding-end: $range-ios-pin-padding-top;
/// @prop - Padding bottom of the range pin
$range-ios-pin-padding-bottom: $range-ios-pin-padding-top !default;
$range-ios-pin-padding-bottom: $range-ios-pin-padding-top;
/// @prop - Padding start of the range pin
$range-ios-pin-padding-start: $range-ios-pin-padding-end !default;
$range-ios-pin-padding-start: $range-ios-pin-padding-end;
/// @prop - Opacity of the disabled range
$range-ios-disabled-opacity: $form-control-ios-disabled-opacity !default;
$range-ios-disabled-opacity: $form-control-ios-disabled-opacity;

26
core/src/components/range/range.md.vars.scss
View File

@ -4,44 +4,44 @@
// --------------------------------------------------
/// @prop - Padding top/bottom of the range
$range-md-padding-vertical: 8px !default;
$range-md-padding-vertical: 8px;
/// @prop - Padding start/end of the range - modern range
/**
* 18px was chosen so the knob and its focus/active
* effects do not get cut off by the item.
*/
$range-md-item-padding-horizontal: 18px !default;
$range-md-item-padding-horizontal: 18px;
/// @prop - Height of the range slider
$range-md-slider-height: 42px !default;
$range-md-slider-height: 42px;
/// @prop - Height of the range bar
$range-md-bar-height: 2px !default;
$range-md-bar-height: 2px;
/// @prop - Background of the range bar
$range-md-bar-background-color: $background-color-step-250 !default;
$range-md-bar-background-color: $background-color-step-250;
/// @prop - Font size of the range pin
$range-md-pin-font-size: dynamic-font(12px) !default;
$range-md-pin-font-size: dynamic-font(12px);
/// @prop - Padding top/bottom of the range pin
$range-md-pin-padding-vertical: 8px !default;
$range-md-pin-padding-vertical: 8px;
/// @prop - Padding start/end of the range pin
$range-md-pin-padding-horizontal: 0 !default;
$range-md-pin-padding-horizontal: 0;
/// @prop - Width and height of the range pin
$range-md-pin-dimension: dynamic-font(28px) !default;
$range-md-pin-dimension: dynamic-font(28px);
/// @prop - Opacity of the indicator shown when the range knob is hovered
$range-md-knob-indicator-opacity-hover: 0.13 !default;
$range-md-knob-indicator-opacity-hover: 0.13;
/// @prop - Opacity of the indicator shown when the range knob is focused
$range-md-knob-indicator-opacity-focus: 0.13 !default;
$range-md-knob-indicator-opacity-focus: 0.13;
/// @prop - Opacity of the indicator shown when the range knob is active
$range-md-knob-indicator-opacity-active: 0.25 !default;
$range-md-knob-indicator-opacity-active: 0.25;
/// @prop - Opacity of the disabled range
$range-md-disabled-opacity: $form-control-md-disabled-opacity !default;
$range-md-disabled-opacity: $form-control-md-disabled-opacity;

4
core/src/components/range/range.vars.scss
View File

@ -1,8 +1,8 @@
/// @prop - Top margin of range's label when in an item
$range-item-label-margin-top: 10px !default;
$range-item-label-margin-top: 10px;
/// @prop - Bottom margin of range's label when in an item
// We don't add additional margin because the native container
// has additional white space. Otherwise there would be too
// much white space at the bottom of the item.
$range-item-label-margin-bottom: 0px !default;
$range-item-label-margin-bottom: 0px;