javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16: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

68
core/src/components/item/item.ios.vars.scss
View File

@ -4,107 +4,107 @@
// --------------------------------------------------
/// @prop - Minimum height of the item
$item-ios-min-height: 44px !default;
$item-ios-min-height: 44px;
/// @prop - Font size of the item
$item-ios-font-size: dynamic-font(16px) !default;
$item-ios-font-size: dynamic-font(16px);
/// @prop - Margin top of the item paragraph
$item-ios-paragraph-margin-top: 0 !default;
$item-ios-paragraph-margin-top: 0;
/// @prop - Margin end of the item paragraph
$item-ios-paragraph-margin-end: 0 !default;
$item-ios-paragraph-margin-end: 0;
/// @prop - Margin bottom of the item paragraph
$item-ios-paragraph-margin-bottom: 2px !default;
$item-ios-paragraph-margin-bottom: 2px;
/// @prop - Margin start of the item paragraph
$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !default;
$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end;
/// @prop - Font size of the item paragraph
$item-ios-paragraph-font-size: dynamic-font(14px) !default;
$item-ios-paragraph-font-size: dynamic-font(14px);
/// @prop - Color of the item paragraph
$item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3) !default;
$item-ios-paragraph-text-color: var(--ion-text-color-step-550, #a3a3a3);
/// @prop - Width of the avatar in the item
$item-ios-avatar-width: 36px !default;
$item-ios-avatar-width: 36px;
/// @prop - Height of the avatar in the item
$item-ios-avatar-height: $item-ios-avatar-width !default;
$item-ios-avatar-height: $item-ios-avatar-width;
/// @prop - Size of the thumbnail in the item
$item-ios-thumbnail-size: 56px !default;
$item-ios-thumbnail-size: 56px;
/// @prop - Padding top for the item content
$item-ios-padding-top: 10px !default;
$item-ios-padding-top: 10px;
/// @prop - Padding end for the item content
$item-ios-padding-end: 16px !default;
$item-ios-padding-end: 16px;
/// @prop - Padding bottom for the item content
$item-ios-padding-bottom: 10px !default;
$item-ios-padding-bottom: 10px;
/// @prop - Padding start for the item content
$item-ios-padding-start: 16px !default;
$item-ios-padding-start: 16px;
/// @prop - Border bottom width for the item when lines are displayed
$item-ios-border-bottom-width: $hairlines-width !default;
$item-ios-border-bottom-width: $hairlines-width;
/// @prop - Border bottom style for the item when lines are displayed
$item-ios-border-bottom-style: solid !default;
$item-ios-border-bottom-style: solid;
/// @prop - Border bottom color for the item when lines are displayed
$item-ios-border-bottom-color: $item-ios-border-color !default;
$item-ios-border-bottom-color: $item-ios-border-color;
// Item Slots
// --------------------------------------------------
/// @prop - Margin top for the start slot
$item-ios-slot-start-margin-top: 2px !default;
$item-ios-slot-start-margin-top: 2px;
/// @prop - Margin end for the start slot
$item-ios-slot-start-margin-end: $item-ios-padding-end !default;
$item-ios-slot-start-margin-end: $item-ios-padding-end;
/// @prop - Margin bottom for the start slot
$item-ios-slot-start-margin-bottom: $item-ios-slot-start-margin-top !default;
$item-ios-slot-start-margin-bottom: $item-ios-slot-start-margin-top;
/// @prop - Margin start for the start slot
$item-ios-slot-start-margin-start: 0 !default;
$item-ios-slot-start-margin-start: 0;
/// @prop - Margin top for the end slot
$item-ios-slot-end-margin-top: null !default;
$item-ios-slot-end-margin-top: null;
/// @prop - Margin end for the end slot
$item-ios-slot-end-margin-end: null !default;
$item-ios-slot-end-margin-end: null;
/// @prop - Margin bottom for the end slot
$item-ios-slot-end-margin-bottom: $item-ios-slot-end-margin-top !default;
$item-ios-slot-end-margin-bottom: $item-ios-slot-end-margin-top;
/// @prop - Margin start for the end slot
$item-ios-slot-end-margin-start: null !default;
$item-ios-slot-end-margin-start: null;
/// @prop - Margin top for an icon in the start/end slot
$item-ios-icon-slot-margin-top: 7px !default;
$item-ios-icon-slot-margin-top: 7px;
/// @prop - Margin end for an icon in the start/end slot
$item-ios-icon-slot-margin-end: null !default;
$item-ios-icon-slot-margin-end: null;
/// @prop - Margin bottom for an icon in the start/end slot
$item-ios-icon-slot-margin-bottom: 7px !default;
$item-ios-icon-slot-margin-bottom: 7px;
/// @prop - Margin start for an icon in the start/end slot
$item-ios-icon-slot-margin-start: null !default;
$item-ios-icon-slot-margin-start: null;
/// @prop - Margin top for the end slot inside of a floating/stacked label
$item-ios-label-slot-end-margin-top: 7px !default;
$item-ios-label-slot-end-margin-top: 7px;
/// @prop - Margin end for the end slot inside of a floating/stacked label
$item-ios-label-slot-end-margin-end: null !default;
$item-ios-label-slot-end-margin-end: null;
/// @prop - Margin bottom for the end slot inside of a floating/stacked label
$item-ios-label-slot-end-margin-bottom: $item-ios-label-slot-end-margin-top !default;
$item-ios-label-slot-end-margin-bottom: $item-ios-label-slot-end-margin-top;
/// @prop - Margin start for the end slot inside of a floating/stacked label
$item-ios-label-slot-end-margin-start: $item-ios-label-slot-end-margin-end !default;
$item-ios-label-slot-end-margin-start: $item-ios-label-slot-end-margin-end;

106
core/src/components/item/item.md.vars.scss
View File

@ -4,182 +4,182 @@
// --------------------------------------------------
/// @prop - Minimum height of the item
$item-md-min-height: 48px !default;
$item-md-min-height: 48px;
/// @prop - Color of the item paragraph
$item-md-paragraph-text-color: $text-color-step-400 !default;
$item-md-paragraph-text-color: $text-color-step-400;
/// @prop - Font size of the item
$item-md-font-size: 16px !default;
$item-md-font-size: 16px;
/// @prop - Width of the avatar in the item
$item-md-avatar-width: 40px !default;
$item-md-avatar-width: 40px;
/// @prop - Height of the avatar in the item
$item-md-avatar-height: $item-md-avatar-width !default;
$item-md-avatar-height: $item-md-avatar-width;
/// @prop - Size of the thumbnail in the item
$item-md-thumbnail-size: 56px !default;
$item-md-thumbnail-size: 56px;
/// @prop - Padding top for the item content
$item-md-padding-top: 10px !default;
$item-md-padding-top: 10px;
/// @prop - Padding end for the item content
$item-md-padding-end: 16px !default;
$item-md-padding-end: 16px;
/// @prop - Padding bottom for the item content
$item-md-padding-bottom: 11px !default;
$item-md-padding-bottom: 11px;
/// @prop - Padding start for the item content
$item-md-padding-start: 16px !default;
$item-md-padding-start: 16px;
/// @prop - Border bottom width for the item when lines are displayed
$item-md-border-bottom-width: 1px !default;
$item-md-border-bottom-width: 1px;
/// @prop - Border bottom style for the item when lines are displayed
$item-md-border-bottom-style: solid !default;
$item-md-border-bottom-style: solid;
/// @prop - Border bottom color for the item when lines are displayed
$item-md-border-bottom-color: $item-md-border-color !default;
$item-md-border-bottom-color: $item-md-border-color;
// Item Label
// --------------------------------------------------
/// @prop - Margin top of the label
$item-md-label-margin-top: 10px !default;
$item-md-label-margin-top: 10px;
/// @prop - Margin end of the label
$item-md-label-margin-end: 0 !default;
$item-md-label-margin-end: 0;
/// @prop - Margin bottom of the label
$item-md-label-margin-bottom: 10px !default;
$item-md-label-margin-bottom: 10px;
/// @prop - Margin start of the label
$item-md-label-margin-start: 0 !default;
$item-md-label-margin-start: 0;
// Item Slots
// --------------------------------------------------
/// @prop - Margin start for the start slot
$item-md-start-slot-margin-start: null !default;
$item-md-start-slot-margin-start: null;
/// @prop - Margin end for the start slot
$item-md-start-slot-margin-end: 16px !default;
$item-md-start-slot-margin-end: 16px;
/// @prop - Margin start for the end slot
$item-md-end-slot-margin-start: 16px !default;
$item-md-end-slot-margin-start: 16px;
/// @prop - Margin end for the end slot
$item-md-end-slot-margin-end: null !default;
$item-md-end-slot-margin-end: null;
/// @prop - Margin top for content in the start/end slot in a multi-line item
$item-md-multi-line-slot-margin-top: 16px !default;
$item-md-multi-line-slot-margin-top: 16px;
/// @prop - Margin end for content in the start/end slot in a multi-line item
$item-md-multi-line-slot-margin-end: null !default;
$item-md-multi-line-slot-margin-end: null;
/// @prop - Margin bottom for content in the start/end slot in a multi-line item
$item-md-multi-line-slot-margin-bottom: 16px !default;
$item-md-multi-line-slot-margin-bottom: 16px;
/// @prop - Margin start for content in the start/end slot in a multi-line item
$item-md-multi-line-slot-margin-start: null !default;
$item-md-multi-line-slot-margin-start: null;
// Icon Slots
// --------------------------------------------------
/// @prop - Margin top for an icon in the start/end slot
$item-md-icon-slot-margin-top: 12px !default;
$item-md-icon-slot-margin-top: 12px;
/// @prop - Margin end for an icon in the start/end slot
$item-md-icon-slot-margin-end: null !default;
$item-md-icon-slot-margin-end: null;
/// @prop - Margin bottom for an icon in the start/end slot
$item-md-icon-slot-margin-bottom: $item-md-icon-slot-margin-top !default;
$item-md-icon-slot-margin-bottom: $item-md-icon-slot-margin-top;
/// @prop - Margin start for an icon in the start/end slot
$item-md-icon-slot-margin-start: null !default;
$item-md-icon-slot-margin-start: null;
/// @prop - Margin start for an icon in the start slot
$item-md-icon-start-slot-margin-start: null !default;
$item-md-icon-start-slot-margin-start: null;
/// @prop - Margin end for an icon in the start slot
$item-md-icon-start-slot-margin-end: 32px !default;
$item-md-icon-start-slot-margin-end: 32px;
/// @prop - Margin end for an icon in the start slot
$item-md-input-icon-start-slot-margin-end: 8px !default;
$item-md-input-icon-start-slot-margin-end: 8px;
/// @prop - Margin start for an icon in the end slot
$item-md-icon-end-slot-margin-start: 16px !default;
$item-md-icon-end-slot-margin-start: 16px;
/// @prop - Margin end for an icon in the end slot
$item-md-icon-end-slot-margin-end: null !default;
$item-md-icon-end-slot-margin-end: null;
/// @prop - Color for an icon in the start/end slot
$item-md-icon-slot-color: rgba($text-color-rgb, 0.54) !default;
$item-md-icon-slot-color: rgba($text-color-rgb, 0.54);
/// @prop - Font size of an icon in the start/end slot
$item-md-icon-slot-font-size: 24px !default;
$item-md-icon-slot-font-size: 24px;
// Label Slots
// --------------------------------------------------
/// @prop - Margin top for the end slot inside of a floating/stacked label
$item-md-label-slot-end-margin-top: 7px !default;
$item-md-label-slot-end-margin-top: 7px;
/// @prop - Margin end for the end slot inside of a floating/stacked label
$item-md-label-slot-end-margin-end: null !default;
$item-md-label-slot-end-margin-end: null;
/// @prop - Margin bottom for the end slot inside of a floating/stacked label
$item-md-label-slot-end-margin-bottom: $item-md-label-slot-end-margin-top !default;
$item-md-label-slot-end-margin-bottom: $item-md-label-slot-end-margin-top;
/// @prop - Margin start for the end slot inside of a floating/stacked label
$item-md-label-slot-end-margin-start: $item-md-label-slot-end-margin-end !default;
$item-md-label-slot-end-margin-start: $item-md-label-slot-end-margin-end;
// Note Slots
// --------------------------------------------------
/// @prop - Font size of a note in the start/end slot
$item-md-note-slot-font-size: dynamic-font(11px) !default;
$item-md-note-slot-font-size: dynamic-font(11px);
/// @prop - Padding top for a note in the start/end slot
$item-md-note-slot-padding-top: 18px !default;
$item-md-note-slot-padding-top: 18px;
/// @prop - Padding end for a note in the start/end slot
$item-md-note-slot-padding-end: 0 !default;
$item-md-note-slot-padding-end: 0;
/// @prop - Padding bottom for a note in the start/end slot
$item-md-note-slot-padding-bottom: 10px !default;
$item-md-note-slot-padding-bottom: 10px;
/// @prop - Padding start for a note in the start/end slot
$item-md-note-slot-padding-start: $item-md-note-slot-padding-end !default;
$item-md-note-slot-padding-start: $item-md-note-slot-padding-end;
// Avatar/Thumbnail Slots
// --------------------------------------------------
/// @prop - Margin top for an avatar/thumbnail in the start/end slot
$item-md-media-slot-margin-top: 8px !default;
$item-md-media-slot-margin-top: 8px;
/// @prop - Margin end for an avatar/thumbnail in the start/end slot
$item-md-media-slot-margin-end: null !default;
$item-md-media-slot-margin-end: null;
/// @prop - Margin bottom for an avatar/thumbnail in the start/end slot
$item-md-media-slot-margin-bottom: 8px !default;
$item-md-media-slot-margin-bottom: 8px;
/// @prop - Margin start for an avatar/thumbnail in the start/end slot
$item-md-media-slot-margin-start: $item-md-media-slot-margin-end !default;
$item-md-media-slot-margin-start: $item-md-media-slot-margin-end;
/// @prop - Margin start for an avatar/thumbnail in the start slot
$item-md-media-start-slot-margin-start: null !default;
$item-md-media-start-slot-margin-start: null;
/// @prop - Margin end for an avatar/thumbnail in the start slot
$item-md-media-start-slot-margin-end: 16px !default;
$item-md-media-start-slot-margin-end: 16px;
/// @prop - Margin start for an avatar/thumbnail in the end slot
$item-md-media-end-slot-margin-start: 16px !default;
$item-md-media-end-slot-margin-start: 16px;
/// @prop - Margin end for an avatar/thumbnail in the end slot
$item-md-media-end-slot-margin-end: null !default;
$item-md-media-end-slot-margin-end: null;