From 6e8bf4914f4d4536165035a5858e83e00ed47131 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 25 Apr 2024 15:59:10 -0400 Subject: [PATCH] chore(theming): remove Sass default flags (#29401) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../accordion/accordion.md.vars.scss | 6 +- .../components/accordion/accordion.vars.scss | 10 +- .../action-sheet/action-sheet.ios.vars.scss | 86 +++---- .../action-sheet/action-sheet.md.vars.scss | 56 ++--- .../action-sheet/action-sheet.vars.scss | 4 +- core/src/components/alert/alert.ios.vars.scss | 202 ++++++++--------- core/src/components/alert/alert.md.vars.scss | 212 +++++++++--------- core/src/components/alert/alert.vars.scss | 10 +- .../components/avatar/avatar.ios.vars.scss | 6 +- .../src/components/avatar/avatar.md.vars.scss | 6 +- .../back-button/back-button.ios.vars.scss | 4 +- .../back-button/back-button.md.vars.scss | 2 +- core/src/components/badge/badge.ios.vars.scss | 2 +- core/src/components/badge/badge.md.vars.scss | 2 +- core/src/components/badge/badge.vars.scss | 16 +- .../breadcrumb/breadcrumb.ios.vars.scss | 20 +- .../breadcrumb/breadcrumb.md.vars.scss | 28 +-- .../breadcrumb/breadcrumb.vars.scss | 8 +- .../components/button/button.ios.vars.scss | 80 +++---- .../src/components/button/button.md.vars.scss | 64 +++--- core/src/components/button/button.vars.scss | 10 +- .../card-content/card-content.ios.vars.scss | 10 +- .../card-content/card-content.md.vars.scss | 12 +- .../card-header/card-header.ios.vars.scss | 14 +- .../card-header/card-header.md.vars.scss | 8 +- .../card-subtitle/card-subtitle.ios.vars.scss | 26 +-- .../card-subtitle/card-subtitle.md.vars.scss | 20 +- .../card-title/card-title.ios.vars.scss | 22 +- .../card-title/card-title.md.vars.scss | 20 +- core/src/components/card/card.ios.vars.scss | 20 +- core/src/components/card/card.md.vars.scss | 16 +- .../checkbox/checkbox.ios.vars.scss | 16 +- .../components/checkbox/checkbox.md.vars.scss | 18 +- .../components/checkbox/checkbox.vars.scss | 4 +- core/src/components/col/col.vars.scss | 4 +- .../datetime/datetime.ios.vars.scss | 10 +- .../components/datetime/datetime.md.vars.scss | 14 +- .../fab-button/fab-button.ios.vars.scss | 36 +-- .../fab-button/fab-button.md.vars.scss | 20 +- .../fab-button/fab-button.vars.scss | 8 +- .../components/fab-list/fab-list.vars.scss | 2 +- core/src/components/fab/fab.vars.scss | 2 +- .../components/footer/footer.ios.vars.scss | 2 +- .../src/components/footer/footer.md.vars.scss | 2 +- core/src/components/grid/grid.vars.scss | 6 +- .../components/header/header.ios.vars.scss | 2 +- .../src/components/header/header.md.vars.scss | 2 +- .../infinite-scroll-content.ios.vars.scss | 4 +- .../infinite-scroll-content.md.vars.scss | 4 +- .../infinite-scroll-content.vars.scss | 18 +- core/src/components/input/input.ios.vars.scss | 4 +- core/src/components/input/input.md.vars.scss | 6 +- .../item-divider/item-divider.ios.vars.scss | 14 +- .../item-divider/item-divider.md.vars.scss | 14 +- .../item-option/item-option.ios.vars.scss | 2 +- .../item-option/item-option.md.vars.scss | 2 +- core/src/components/item/item.ios.vars.scss | 68 +++--- core/src/components/item/item.md.vars.scss | 106 ++++----- core/src/components/label/label.ios.vars.scss | 8 +- core/src/components/label/label.md.vars.scss | 6 +- .../list-header/list-header.ios.vars.scss | 12 +- .../list-header/list-header.md.vars.scss | 8 +- core/src/components/list/list.ios.vars.scss | 20 +- core/src/components/list/list.md.vars.scss | 28 +-- .../components/loading/loading.ios.vars.scss | 30 +-- .../components/loading/loading.md.vars.scss | 26 +-- core/src/components/menu/menu.ios.vars.scss | 14 +- core/src/components/menu/menu.md.vars.scss | 2 +- core/src/components/menu/menu.vars.scss | 4 +- core/src/components/modal/modal.ios.vars.scss | 2 +- core/src/components/modal/modal.md.vars.scss | 4 +- core/src/components/modal/modal.vars.scss | 14 +- core/src/components/note/note.ios.vars.scss | 4 +- core/src/components/note/note.md.vars.scss | 4 +- .../picker-legacy/picker.ios.vars.scss | 56 ++--- .../picker-legacy/picker.md.vars.scss | 48 ++-- .../components/picker-legacy/picker.vars.scss | 4 +- .../components/popover/popover.ios.vars.scss | 16 +- .../components/popover/popover.md.vars.scss | 8 +- core/src/components/popover/popover.vars.scss | 4 +- .../progress-bar/progress-bar.ios.vars.scss | 4 +- .../progress-bar/progress-bar.md.vars.scss | 2 +- core/src/components/radio/radio.ios.vars.scss | 12 +- core/src/components/radio/radio.md.vars.scss | 24 +- core/src/components/radio/radio.vars.scss | 4 +- core/src/components/range/range.ios.vars.scss | 44 ++-- core/src/components/range/range.md.vars.scss | 26 +-- core/src/components/range/range.vars.scss | 4 +- .../refresher/refresher.ios.vars.scss | 10 +- .../refresher/refresher.md.vars.scss | 12 +- .../components/refresher/refresher.vars.scss | 6 +- .../components/reorder/reorder.ios.vars.scss | 4 +- .../components/reorder/reorder.md.vars.scss | 4 +- .../searchbar/searchbar.ios.vars.scss | 38 ++-- .../searchbar/searchbar.md.vars.scss | 34 +-- .../segment-button.ios.vars.scss | 40 ++-- .../segment-button.md.vars.scss | 40 ++-- .../components/segment/segment.ios.vars.scss | 6 +- .../components/select/select.ios.vars.scss | 4 +- .../src/components/select/select.md.vars.scss | 6 +- core/src/components/select/select.vars.scss | 2 +- .../skeleton-text/skeleton-text.vars.scss | 8 +- .../split-pane/split-pane.ios.vars.scss | 6 +- .../split-pane/split-pane.md.vars.scss | 6 +- .../split-pane/split-pane.vars.scss | 4 +- .../components/tab-bar/tab-bar.ios.vars.scss | 6 +- .../tab-button/tab-button.ios.vars.scss | 18 +- .../tab-button/tab-button.md.vars.scss | 52 ++--- .../textarea/textarea.ios.vars.scss | 12 +- .../components/textarea/textarea.md.vars.scss | 14 +- .../components/textarea/textarea.vars.scss | 2 +- core/src/components/toast/toast.ios.vars.scss | 46 ++-- core/src/components/toast/toast.md.vars.scss | 60 ++--- core/src/components/toast/toast.vars.scss | 2 +- .../components/toggle/toggle.ios.vars.scss | 30 +-- .../src/components/toggle/toggle.md.vars.scss | 30 +-- core/src/components/toggle/toggle.vars.scss | 4 +- .../components/toolbar/toolbar.ios.vars.scss | 14 +- .../components/toolbar/toolbar.md.vars.scss | 2 +- core/src/css/palettes/high-contrast-dark.scss | 20 +- core/src/css/palettes/high-contrast.scss | 20 +- core/src/css/typography.scss | 16 +- core/src/themes/ionic.functions.font.scss | 4 +- core/src/themes/ionic.globals.scss | 12 +- core/src/themes/ionic.theme.default.ios.scss | 28 +-- core/src/themes/ionic.theme.default.md.scss | 32 +-- core/src/themes/ionic.theme.default.scss | 114 +++++----- 127 files changed, 1301 insertions(+), 1301 deletions(-) diff --git a/core/src/components/accordion/accordion.md.vars.scss b/core/src/components/accordion/accordion.md.vars.scss index 1a6ffd64a5..07a5040b16 100644 --- a/core/src/components/accordion/accordion.md.vars.scss +++ b/core/src/components/accordion/accordion.md.vars.scss @@ -4,10 +4,10 @@ // -------------------------------------------------- /// @prop - Border radius applied to the accordion -$accordion-md-border-radius: 6px !default; +$accordion-md-border-radius: 6px; /// @prop - Box shadow of the accordion -$accordion-md-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default; +$accordion-md-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); /// @prop - Margin of the expanded accordion -$accordion-md-expanded-margin: 16px !default; +$accordion-md-expanded-margin: 16px; diff --git a/core/src/components/accordion/accordion.vars.scss b/core/src/components/accordion/accordion.vars.scss index 2899324be1..e03b154b1b 100644 --- a/core/src/components/accordion/accordion.vars.scss +++ b/core/src/components/accordion/accordion.vars.scss @@ -4,16 +4,16 @@ // -------------------------------------------------- /// @prop - Background color of the accordion -$accordion-background-color: var(--ion-background-color, #ffffff) !default; +$accordion-background-color: var(--ion-background-color, #ffffff); /// @prop - Duration of the accordion transition -$accordion-transition-duration: 300ms !default; +$accordion-transition-duration: 300ms; /// @prop - Timing function of the accordion transition -$accordion-transition-easing: cubic-bezier(0.25, 0.8, 0.5, 1) !default; +$accordion-transition-easing: cubic-bezier(0.25, 0.8, 0.5, 1); /// @prop - Opacity of the disabled accordion -$accordion-disabled-opacity: 0.4 !default; +$accordion-disabled-opacity: 0.4; /// @prop - Margin of the inset accordion -$accordion-inset-margin: 16px !default; +$accordion-inset-margin: 16px; diff --git a/core/src/components/action-sheet/action-sheet.ios.vars.scss b/core/src/components/action-sheet/action-sheet.ios.vars.scss index 7aa19b4404..01fa09d8eb 100644 --- a/core/src/components/action-sheet/action-sheet.ios.vars.scss +++ b/core/src/components/action-sheet/action-sheet.ios.vars.scss @@ -4,145 +4,145 @@ // -------------------------------------------------- /// @prop - Text align of the action sheet -$action-sheet-ios-text-align: center !default; +$action-sheet-ios-text-align: center; /// @prop - Padding top of the action sheet -$action-sheet-ios-padding-top: 0 !default; +$action-sheet-ios-padding-top: 0; /// @prop - Padding end of the action sheet -$action-sheet-ios-padding-end: 8px !default; +$action-sheet-ios-padding-end: 8px; /// @prop - Padding bottom of the action sheet -$action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top !default; +$action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top; /// @prop - Padding start of the action sheet -$action-sheet-ios-padding-start: $action-sheet-ios-padding-end !default; +$action-sheet-ios-padding-start: $action-sheet-ios-padding-end; /// @prop - Top margin of the action sheet button group -$action-sheet-ios-group-margin-top: 10px !default; +$action-sheet-ios-group-margin-top: 10px; /// @prop - Bottom margin of the action sheet button group -$action-sheet-ios-group-margin-bottom: 10px !default; +$action-sheet-ios-group-margin-bottom: 10px; /// @prop - Background color of the action sheet -$action-sheet-ios-background-color: $overlay-ios-background-color !default; +$action-sheet-ios-background-color: $overlay-ios-background-color; /// @prop - Border radius of the action sheet -$action-sheet-ios-border-radius: 13px !default; +$action-sheet-ios-border-radius: 13px; // Action Sheet Title // -------------------------------------------------- /// @prop - Padding top of the action sheet title -$action-sheet-ios-title-padding-top: 14px !default; +$action-sheet-ios-title-padding-top: 14px; /// @prop - Padding end of the action sheet title -$action-sheet-ios-title-padding-end: 10px !default; +$action-sheet-ios-title-padding-end: 10px; /// @prop - Padding bottom of the action sheet title -$action-sheet-ios-title-padding-bottom: 13px !default; +$action-sheet-ios-title-padding-bottom: 13px; /// @prop - Padding start of the action sheet title -$action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end !default; +$action-sheet-ios-title-padding-start: $action-sheet-ios-title-padding-end; /// @prop - Color of the action sheet title -$action-sheet-ios-title-color: $text-color-step-600 !default; +$action-sheet-ios-title-color: $text-color-step-600; /// @prop - Font size of the action sheet title -$action-sheet-ios-title-font-size: dynamic-font-min(1, 13px) !default; +$action-sheet-ios-title-font-size: dynamic-font-min(1, 13px); /// @prop - Font weight of the action sheet title -$action-sheet-ios-title-font-weight: 400 !default; +$action-sheet-ios-title-font-weight: 400; /// @prop - Font weight of the action sheet title when it has a sub title -$action-sheet-ios-title-with-sub-title-font-weight: 600 !default; +$action-sheet-ios-title-with-sub-title-font-weight: 600; // Action Sheet Subtitle // -------------------------------------------------- /// @prop - Font size of the action sheet sub title -$action-sheet-ios-sub-title-font-size: dynamic-font-min(1, 13px) !default; +$action-sheet-ios-sub-title-font-size: dynamic-font-min(1, 13px); /// @prop - Padding top of the action sheet sub title -$action-sheet-ios-sub-title-padding-top: 6px !default; +$action-sheet-ios-sub-title-padding-top: 6px; /// @prop - Padding end of the action sheet sub title -$action-sheet-ios-sub-title-padding-end: 0 !default; +$action-sheet-ios-sub-title-padding-end: 0; /// @prop - Padding bottom of the action sheet sub title -$action-sheet-ios-sub-title-padding-bottom: 0 !default; +$action-sheet-ios-sub-title-padding-bottom: 0; /// @prop - Padding start of the action sheet sub title -$action-sheet-ios-sub-title-padding-start: $action-sheet-ios-sub-title-padding-end !default; +$action-sheet-ios-sub-title-padding-start: $action-sheet-ios-sub-title-padding-end; // Action Sheet Button // -------------------------------------------------- /// @prop - Minimum height of the action sheet button -$action-sheet-ios-button-height: 56px !default; +$action-sheet-ios-button-height: 56px; /// @prop - Padding of the action sheet button -$action-sheet-ios-button-padding: 14px !default; +$action-sheet-ios-button-padding: 14px; /// @prop - Text color of the action sheet button -$action-sheet-ios-button-text-color: ion-color(primary, base) !default; +$action-sheet-ios-button-text-color: ion-color(primary, base); /// @prop - Font size of the action sheet button icon -$action-sheet-ios-button-icon-font-size: dynamic-font-min(1, 28px) !default; +$action-sheet-ios-button-icon-font-size: dynamic-font-min(1, 28px); /// @prop - Padding right of the action sheet button icon -$action-sheet-ios-button-icon-padding-right: .3em !default; +$action-sheet-ios-button-icon-padding-right: .3em; /// @prop - Font size of the action sheet button -$action-sheet-ios-button-font-size: dynamic-font-min(1, 20px) !default; +$action-sheet-ios-button-font-size: dynamic-font-min(1, 20px); /// @prop - Border color alpha of the action sheet button -$action-sheet-ios-button-border-color-alpha: .08 !default; +$action-sheet-ios-button-border-color-alpha: .08; /// @prop - Border color of the action sheet button -$action-sheet-ios-button-border-color: rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha) !default; +$action-sheet-ios-button-border-color: rgba($text-color-rgb, $action-sheet-ios-button-border-color-alpha); /// @prop - Background color of the action sheet button -$action-sheet-ios-button-background: linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%) bottom / 100% 1px no-repeat transparent !default; +$action-sheet-ios-button-background: linear-gradient(0deg, $action-sheet-ios-button-border-color, $action-sheet-ios-button-border-color 50%, transparent 50%) bottom / 100% 1px no-repeat transparent; /// @prop - Background color of the activated action sheet button -$action-sheet-ios-button-background-activated: $text-color !default; +$action-sheet-ios-button-background-activated: $text-color; /// @prop - Background color of the selected action sheet button -$action-sheet-ios-button-background-selected: var(--ion-color-step-150, var(--ion-background-color-step-150, $background-color)) !default; +$action-sheet-ios-button-background-selected: var(--ion-color-step-150, var(--ion-background-color-step-150, $background-color)); /// @prop - Destructive text color of the action sheet button -$action-sheet-ios-button-destructive-text-color: ion-color(danger, base) !default; +$action-sheet-ios-button-destructive-text-color: ion-color(danger, base); /// @prop - Font weight of the action sheet cancel button -$action-sheet-ios-button-cancel-font-weight: 600 !default; +$action-sheet-ios-button-cancel-font-weight: 600; // Action Sheet Translucent // -------------------------------------------------- /// @prop - Background color alpha of the action sheet when translucent -$action-sheet-ios-translucent-background-color-alpha: .8 !default; +$action-sheet-ios-translucent-background-color-alpha: .8; /// @prop - Background color of the action sheet when translucent -$action-sheet-ios-translucent-background-color: rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-alpha) !default; +$action-sheet-ios-translucent-background-color: rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-alpha); /// @prop - Border color alpha of the action sheet when translucent -$action-sheet-ios-translucent-border-color-alpha: .4 !default; +$action-sheet-ios-translucent-border-color-alpha: .4; /// @prop - Border color of the action sheet when translucent -$action-sheet-ios-translucent-border-color: rgba($background-color-rgb, $action-sheet-ios-translucent-border-color-alpha) !default; +$action-sheet-ios-translucent-border-color: rgba($background-color-rgb, $action-sheet-ios-translucent-border-color-alpha); /// @prop - Background color alpha of the activated action sheet when translucent -$action-sheet-ios-translucent-background-color-activated-alpha: .7 !default; +$action-sheet-ios-translucent-background-color-activated-alpha: .7; /// @prop - Background color of the activated action sheet when translucent -$action-sheet-ios-translucent-background-color-activated: rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-activated-alpha) !default; +$action-sheet-ios-translucent-background-color-activated: rgba($background-color-rgb, $action-sheet-ios-translucent-background-color-activated-alpha); /// @prop - Filter of the translucent action-sheet group -$action-sheet-ios-group-translucent-filter: saturate(280%) blur(20px) !default; +$action-sheet-ios-group-translucent-filter: saturate(280%) blur(20px); /// @prop - Filter of the translucent action-sheet button -$action-sheet-ios-button-translucent-filter: saturate(120%) !default; +$action-sheet-ios-button-translucent-filter: saturate(120%); diff --git a/core/src/components/action-sheet/action-sheet.md.vars.scss b/core/src/components/action-sheet/action-sheet.md.vars.scss index c7d945090d..1362052d70 100644 --- a/core/src/components/action-sheet/action-sheet.md.vars.scss +++ b/core/src/components/action-sheet/action-sheet.md.vars.scss @@ -4,100 +4,100 @@ // -------------------------------------------------- /// @prop - Text align of the action sheet -$action-sheet-md-text-align: start !default; +$action-sheet-md-text-align: start; /// @prop - Background color of the action sheet -$action-sheet-md-background-color: $overlay-md-background-color !default; +$action-sheet-md-background-color: $overlay-md-background-color; /// @prop - Padding top of the action sheet -$action-sheet-md-padding-top: 0 !default; +$action-sheet-md-padding-top: 0; /// @prop - Padding bottom of the action sheet -$action-sheet-md-padding-bottom: var(--ion-safe-area-bottom) !default; +$action-sheet-md-padding-bottom: var(--ion-safe-area-bottom); // Action Sheet Title // -------------------------------------------------- /// @prop - Height of the action sheet title -$action-sheet-md-title-height: 60px !default; +$action-sheet-md-title-height: 60px; /// @prop - Color of the action sheet title -$action-sheet-md-title-color: rgba($text-color-rgb, 0.54) !default; +$action-sheet-md-title-color: rgba($text-color-rgb, 0.54); /// @prop - Font size of the action sheet title -$action-sheet-md-title-font-size: dynamic-font(16px) !default; +$action-sheet-md-title-font-size: dynamic-font(16px); /// @prop - Padding top of the action sheet title -$action-sheet-md-title-padding-top: 20px !default; +$action-sheet-md-title-padding-top: 20px; /// @prop - Padding end of the action sheet title -$action-sheet-md-title-padding-end: 16px !default; +$action-sheet-md-title-padding-end: 16px; /// @prop - Padding bottom of the action sheet title -$action-sheet-md-title-padding-bottom: 17px !default; +$action-sheet-md-title-padding-bottom: 17px; /// @prop - Padding start of the action sheet title -$action-sheet-md-title-padding-start: $action-sheet-md-title-padding-end !default; +$action-sheet-md-title-padding-start: $action-sheet-md-title-padding-end; // Action Sheet Subtitle // -------------------------------------------------- /// @prop - Font size of the action sheet sub title -$action-sheet-md-sub-title-font-size: dynamic-font(14px) !default; +$action-sheet-md-sub-title-font-size: dynamic-font(14px); /// @prop - Padding top of the action sheet sub title -$action-sheet-md-sub-title-padding-top: 16px !default; +$action-sheet-md-sub-title-padding-top: 16px; /// @prop - Padding end of the action sheet sub title -$action-sheet-md-sub-title-padding-end: 0 !default; +$action-sheet-md-sub-title-padding-end: 0; /// @prop - Padding bottom of the action sheet sub title -$action-sheet-md-sub-title-padding-bottom: 0 !default; +$action-sheet-md-sub-title-padding-bottom: 0; /// @prop - Padding start of the action sheet sub title -$action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end !default; +$action-sheet-md-sub-title-padding-start: $action-sheet-md-sub-title-padding-end; // Action Sheet Button // -------------------------------------------------- /// @prop - Minimum height of the action sheet button -$action-sheet-md-button-height: 52px !default; +$action-sheet-md-button-height: 52px; /// @prop - Text color of the action sheet button -$action-sheet-md-button-text-color: $text-color-step-150 !default; +$action-sheet-md-button-text-color: $text-color-step-150; /// @prop - Font size of the action sheet button -$action-sheet-md-button-font-size: dynamic-font(16px) !default; +$action-sheet-md-button-font-size: dynamic-font(16px); /// @prop - Padding top of the action sheet button -$action-sheet-md-button-padding-top: 12px !default; +$action-sheet-md-button-padding-top: 12px; /// @prop - Padding end of the action sheet button -$action-sheet-md-button-padding-end: 16px !default; +$action-sheet-md-button-padding-end: 16px; /// @prop - Padding bottom of the action sheet button -$action-sheet-md-button-padding-bottom: $action-sheet-md-button-padding-top !default; +$action-sheet-md-button-padding-bottom: $action-sheet-md-button-padding-top; /// @prop - Padding start of the action sheet button -$action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end !default; +$action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end; // Action Sheet Icon // -------------------------------------------------- /// @prop - Font size of the icon in the action sheet button -$action-sheet-md-icon-font-size: dynamic-font(24px) !default; +$action-sheet-md-icon-font-size: dynamic-font(24px); /// @prop - Margin top of the icon in the action sheet button -$action-sheet-md-icon-margin-top: 0 !default; +$action-sheet-md-icon-margin-top: 0; /// @prop - Margin end of the icon in the action sheet button -$action-sheet-md-icon-margin-end: 32px !default; +$action-sheet-md-icon-margin-end: 32px; /// @prop - Margin bottom of the icon in the action sheet button -$action-sheet-md-icon-margin-bottom: 0 !default; +$action-sheet-md-icon-margin-bottom: 0; /// @prop - Margin start of the icon in the action sheet button -$action-sheet-md-icon-margin-start: 0 !default; +$action-sheet-md-icon-margin-start: 0; diff --git a/core/src/components/action-sheet/action-sheet.vars.scss b/core/src/components/action-sheet/action-sheet.vars.scss index 11cb6a28bf..c16c2cb1e2 100644 --- a/core/src/components/action-sheet/action-sheet.vars.scss +++ b/core/src/components/action-sheet/action-sheet.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Width of the action sheet -$action-sheet-width: 100% !default; +$action-sheet-width: 100%; /// @prop - Maximum width of the action sheet -$action-sheet-max-width: 500px !default; +$action-sheet-max-width: 500px; diff --git a/core/src/components/alert/alert.ios.vars.scss b/core/src/components/alert/alert.ios.vars.scss index b3ddac35a8..ed913bf88d 100644 --- a/core/src/components/alert/alert.ios.vars.scss +++ b/core/src/components/alert/alert.ios.vars.scss @@ -6,136 +6,136 @@ // -------------------------------------------------- /// @prop - Font size of the alert -$alert-ios-font-size: dynamic-font-min(1, 14px) !default; +$alert-ios-font-size: dynamic-font-min(1, 14px); /// @prop - Max width of the alert -$alert-ios-max-width: dynamic-font-clamp(1, 270px, 1.2) !default; +$alert-ios-max-width: dynamic-font-clamp(1, 270px, 1.2); /// @prop - Border radius of the alert -$alert-ios-border-radius: 13px !default; +$alert-ios-border-radius: 13px; /// @prop - Background color of the alert -$alert-ios-background-color: $overlay-ios-background-color !default; +$alert-ios-background-color: $overlay-ios-background-color; /// @prop - Background color alpha of the alert when translucent -$alert-ios-translucent-background-color-alpha: .9 !default; +$alert-ios-translucent-background-color-alpha: .9; /// @prop - Background color of the alert when translucent -$alert-ios-translucent-background-color: rgba($background-color-rgb, $alert-ios-translucent-background-color-alpha) !default; +$alert-ios-translucent-background-color: rgba($background-color-rgb, $alert-ios-translucent-background-color-alpha); /// @prop - Box shadow of the alert -$alert-ios-box-shadow: none !default; +$alert-ios-box-shadow: none; /// @prop - Padding top of the alert head -$alert-ios-head-padding-top: 12px !default; +$alert-ios-head-padding-top: 12px; /// @prop - Padding end of the alert head -$alert-ios-head-padding-end: 16px !default; +$alert-ios-head-padding-end: 16px; /// @prop - Padding bottom of the alert head -$alert-ios-head-padding-bottom: 7px !default; +$alert-ios-head-padding-bottom: 7px; /// @prop - Padding start of the alert head -$alert-ios-head-padding-start: $alert-ios-head-padding-end !default; +$alert-ios-head-padding-start: $alert-ios-head-padding-end; /// @prop - Text align of the alert head -$alert-ios-head-text-align: center !default; +$alert-ios-head-text-align: center; /// @prop - Color of the alert title -$alert-ios-title-color: $text-color !default; +$alert-ios-title-color: $text-color; /// @prop - Margin top of the alert title -$alert-ios-title-margin-top: 8px !default; +$alert-ios-title-margin-top: 8px; /// @prop - Font size of the alert title -$alert-ios-title-font-size: dynamic-font-min(1, 17px) !default; +$alert-ios-title-font-size: dynamic-font-min(1, 17px); /// @prop - Font weight of the alert title -$alert-ios-title-font-weight: 600 !default; +$alert-ios-title-font-weight: 600; /// @prop - Font size of the alert sub title -$alert-ios-sub-title-font-size: dynamic-font-min(1, 14px) !default; +$alert-ios-sub-title-font-size: dynamic-font-min(1, 14px); /// @prop - Text color of the alert sub title -$alert-ios-sub-title-text-color: $text-color-step-400 !default; +$alert-ios-sub-title-text-color: $text-color-step-400; /// @prop - Padding top of the alert message -$alert-ios-message-padding-top: 0 !default; +$alert-ios-message-padding-top: 0; /// @prop - Padding end of the alert message -$alert-ios-message-padding-end: 16px !default; +$alert-ios-message-padding-end: 16px; /// @prop - Padding bottom of the alert message -$alert-ios-message-padding-bottom: 21px !default; +$alert-ios-message-padding-bottom: 21px; /// @prop - Padding start of the alert message -$alert-ios-message-padding-start: $alert-ios-message-padding-end !default; +$alert-ios-message-padding-start: $alert-ios-message-padding-end; /// @prop - Font size of the alert message -$alert-ios-message-font-size: dynamic-font-min(1, 13px) !default; +$alert-ios-message-font-size: dynamic-font-min(1, 13px); /// @prop - Text align of the alert message -$alert-ios-message-text-align: center !default; +$alert-ios-message-text-align: center; /// @prop - Text color of the alert message -$alert-ios-message-text-color: $text-color !default; +$alert-ios-message-text-color: $text-color; /// @prop - Padding top of the alert empty message -$alert-ios-message-empty-padding-top: 0 !default; +$alert-ios-message-empty-padding-top: 0; /// @prop - Padding end of the alert empty message -$alert-ios-message-empty-padding-end: 0 !default; +$alert-ios-message-empty-padding-end: 0; /// @prop - Padding bottom of the alert empty message -$alert-ios-message-empty-padding-bottom: 12px !default; +$alert-ios-message-empty-padding-bottom: 12px; /// @prop - Padding start of the alert empty message -$alert-ios-message-empty-padding-start: 0 !default; +$alert-ios-message-empty-padding-start: 0; /// @prop - Maximum height of the alert content -$alert-ios-content-max-height: 240px !default; +$alert-ios-content-max-height: 240px; /// @prop - Margin top of the alert input -$alert-ios-input-margin-top: 10px !default; +$alert-ios-input-margin-top: 10px; /// @prop - Padding top on the alert input -$alert-ios-input-padding-top: 7px !default; +$alert-ios-input-padding-top: 7px; /// @prop - Padding end on the alert input -$alert-ios-input-padding-end: $alert-ios-input-padding-top !default; +$alert-ios-input-padding-end: $alert-ios-input-padding-top; /// @prop - Padding bottom on the alert input -$alert-ios-input-padding-bottom: $alert-ios-input-padding-top !default; +$alert-ios-input-padding-bottom: $alert-ios-input-padding-top; /// @prop - Padding start on the alert input -$alert-ios-input-padding-start: $alert-ios-input-padding-end !default; +$alert-ios-input-padding-start: $alert-ios-input-padding-end; /// @prop - Placeholder Color for input -$alert-ios-input-placeholder-color: $placeholder-text-color !default; +$alert-ios-input-placeholder-color: $placeholder-text-color; /// @prop - Border color of the alert input -$alert-ios-input-border-color: $background-color-step-250 !default; +$alert-ios-input-border-color: $background-color-step-250; /// @prop - Border of the alert input -$alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color !default; +$alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color; /// @prop - Border radius of the alert input -$alert-ios-input-border-radius: 7px !default; +$alert-ios-input-border-radius: 7px; /// @prop - Background color of the alert input -$alert-ios-input-background-color: $background-color !default; +$alert-ios-input-background-color: $background-color; /// @prop - Flex wrap of the alert button group -$alert-ios-button-group-flex-wrap: wrap !default; +$alert-ios-button-group-flex-wrap: wrap; /// @prop - Flex of the alert button -$alert-ios-button-flex: 1 1 auto !default; +$alert-ios-button-flex: 1 1 auto; /// @prop - Margin of the alert button -$alert-ios-button-margin: 0 !default; +$alert-ios-button-margin: 0; /// @prop - Min width of the alert button -$alert-ios-button-min-width: 50% !default; +$alert-ios-button-min-width: 50%; /// @prop - Height of the alert button /** @@ -147,172 +147,172 @@ $alert-ios-button-min-width: 50% !default; * a hairline (<1px) width, this will cause subpixel rendering * differences across browsers. */ -$alert-ios-button-height: dynamic-font-min(1, 44px) !default; +$alert-ios-button-height: dynamic-font-min(1, 44px); /// @prop - Padding of the alert button -$alert-ios-button-padding: 8px !default; +$alert-ios-button-padding: 8px; /// @prop - Font size of the alert button -$alert-ios-button-font-size: dynamic-font-min(1, 17px) !default; +$alert-ios-button-font-size: dynamic-font-min(1, 17px); /// @prop - Color of the text in the alert button -$alert-ios-button-text-color: ion-color(primary, base) !default; +$alert-ios-button-text-color: ion-color(primary, base); /// @prop - Destructive text color of the alert button -$alert-ios-button-destructive-text-color: ion-color(danger, base) !default; +$alert-ios-button-destructive-text-color: ion-color(danger, base); /// @prop - Background color of the alert button -$alert-ios-button-background-color: transparent !default; +$alert-ios-button-background-color: transparent; /// @prop - Background color alpha of the alert activated button -$alert-ios-button-background-color-alpha-activated: .1 !default; +$alert-ios-button-background-color-alpha-activated: .1; /// @prop - Background color of the alert activated button -$alert-ios-button-background-color-activated: rgba($text-color-rgb, $alert-ios-button-background-color-alpha-activated) !default; +$alert-ios-button-background-color-activated: rgba($text-color-rgb, $alert-ios-button-background-color-alpha-activated); /// @prop - Border width of the alert button -$alert-ios-button-border-width: $hairlines-width !default; +$alert-ios-button-border-width: $hairlines-width; /// @prop - Border style of the alert button -$alert-ios-button-border-style: solid !default; +$alert-ios-button-border-style: solid; /// @prop - Border color alpha of the alert button -$alert-ios-button-border-color-alpha: .2 !default; +$alert-ios-button-border-color-alpha: .2; /// @prop - Border color of the alert button -$alert-ios-button-border-color: rgba($text-color-rgb, $alert-ios-button-border-color-alpha) !default; +$alert-ios-button-border-color: rgba($text-color-rgb, $alert-ios-button-border-color-alpha); /// @prop - Border radius of the alert button -$alert-ios-button-border-radius: 0 !default; +$alert-ios-button-border-radius: 0; /// @prop - Font weight of the main text on the alert button -$alert-ios-button-main-font-weight: bold !default; +$alert-ios-button-main-font-weight: bold; /// @prop - Border top of the alert list -$alert-ios-list-border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color !default; +$alert-ios-list-border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color; /// @prop - Padding top on the label for the radio alert -$alert-ios-radio-label-padding-top: 13px !default; +$alert-ios-radio-label-padding-top: 13px; /// @prop - Padding end on the label for the radio alert -$alert-ios-radio-label-padding-end: $alert-ios-radio-label-padding-top !default; +$alert-ios-radio-label-padding-end: $alert-ios-radio-label-padding-top; /// @prop - Padding bottom on the label for the radio alert -$alert-ios-radio-label-padding-bottom: $alert-ios-radio-label-padding-top !default; +$alert-ios-radio-label-padding-bottom: $alert-ios-radio-label-padding-top; /// @prop - Padding start on the label for the radio alert -$alert-ios-radio-label-padding-start: $alert-ios-radio-label-padding-end !default; +$alert-ios-radio-label-padding-start: $alert-ios-radio-label-padding-end; /// @prop - Text color of the label for the radio alert -$alert-ios-radio-label-text-color: $text-color !default; +$alert-ios-radio-label-text-color: $text-color; /// @prop - Text color of the label for the checked radio alert -$alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color !default; +$alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color; /// @prop - Min width of the radio alert -$alert-ios-radio-min-width: 30px !default; +$alert-ios-radio-min-width: 30px; /// @prop - Top of the icon in the radio alert -$alert-ios-radio-icon-top: -7px !default; +$alert-ios-radio-icon-top: -7px; /// @prop - Start of the icon in the radio alert -$alert-ios-radio-icon-start: 7px !default; +$alert-ios-radio-icon-start: 7px; /// @prop - Width of the icon in the radio alert -$alert-ios-radio-icon-width: 6px !default; +$alert-ios-radio-icon-width: 6px; /// @prop - Height of the icon in the radio alert -$alert-ios-radio-icon-height: 12px !default; +$alert-ios-radio-icon-height: 12px; /// @prop - Border width of the icon in the radio alert -$alert-ios-radio-icon-border-width: 2px !default; +$alert-ios-radio-icon-border-width: 2px; /// @prop - Border style of the icon in the radio alert -$alert-ios-radio-icon-border-style: solid !default; +$alert-ios-radio-icon-border-style: solid; /// @prop - Border color of the icon in the radio alert -$alert-ios-radio-icon-border-color: $alert-ios-button-text-color !default; +$alert-ios-radio-icon-border-color: $alert-ios-button-text-color; /// @prop - Transform of the icon in the radio alert -$alert-ios-radio-icon-transform: rotate(45deg) !default; +$alert-ios-radio-icon-transform: rotate(45deg); /// @prop - Padding top of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding-top: 13px !default; +$alert-ios-checkbox-label-padding-top: 13px; /// @prop - Padding end of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding-end: $alert-ios-checkbox-label-padding-top !default; +$alert-ios-checkbox-label-padding-end: $alert-ios-checkbox-label-padding-top; /// @prop - Padding bottom of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding-bottom: $alert-ios-checkbox-label-padding-top !default; +$alert-ios-checkbox-label-padding-bottom: $alert-ios-checkbox-label-padding-top; /// @prop - Padding start of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding-start: $alert-ios-checkbox-label-padding-end !default; +$alert-ios-checkbox-label-padding-start: $alert-ios-checkbox-label-padding-end; /// @prop - Text color of the label for the checkbox in the alert -$alert-ios-checkbox-label-text-color: $text-color !default; +$alert-ios-checkbox-label-text-color: $text-color; /// @prop - Margin top of the checkbox in the alert -$alert-ios-checkbox-margin-top: 10px !default; +$alert-ios-checkbox-margin-top: 10px; /// @prop - Margin end of the checkbox in the alert -$alert-ios-checkbox-margin-end: 6px !default; +$alert-ios-checkbox-margin-end: 6px; /// @prop - Margin bottom of the checkbox in the alert -$alert-ios-checkbox-margin-bottom: 10px !default; +$alert-ios-checkbox-margin-bottom: 10px; /// @prop - Margin start of the checkbox in the alert -$alert-ios-checkbox-margin-start: 16px !default; +$alert-ios-checkbox-margin-start: 16px; /// @prop - Size of the checkbox in the alert -$alert-ios-checkbox-size: dynamic-font-max(22px, 2.538) !default; +$alert-ios-checkbox-size: dynamic-font-max(22px, 2.538); /// @prop - Border width of the checkbox in the alert -$alert-ios-checkbox-border-width: dynamic-font(2px) !default; +$alert-ios-checkbox-border-width: dynamic-font(2px); /// @prop - Border style of the checkbox in the alert -$alert-ios-checkbox-border-style: solid !default; +$alert-ios-checkbox-border-style: solid; /// @prop - Border radius of the checkbox in the alert -$alert-ios-checkbox-border-radius: 50% !default; +$alert-ios-checkbox-border-radius: 50%; /// @prop - Border color of the checkbox in the alert when off -$alert-ios-checkbox-border-color-off: $item-ios-border-color !default; +$alert-ios-checkbox-border-color-off: $item-ios-border-color; /// @prop - Border color of the checkbox in the alert when on -$alert-ios-checkbox-border-color-on: ion-color(primary, base) !default; +$alert-ios-checkbox-border-color-on: ion-color(primary, base); /// @prop - Background color of the checkbox in the alert when off -$alert-ios-checkbox-background-color-off: $item-ios-background !default; +$alert-ios-checkbox-background-color-off: $item-ios-background; /// @prop - Background color of the checkbox in the alert when on -$alert-ios-checkbox-background-color-on: ion-color(primary, base) !default; +$alert-ios-checkbox-background-color-on: ion-color(primary, base); /// @prop - Top of the icon in the checkbox alert -$alert-ios-checkbox-icon-top: calc($alert-ios-checkbox-size / 8) !default; +$alert-ios-checkbox-icon-top: calc($alert-ios-checkbox-size / 8); /// @prop - Start of the icon in the checkbox alert -$alert-ios-checkbox-icon-start: calc($alert-ios-checkbox-size / 3) !default; +$alert-ios-checkbox-icon-start: calc($alert-ios-checkbox-size / 3); /// @prop - Width of the icon in the checkbox alert -$alert-ios-checkbox-icon-width: calc($alert-ios-checkbox-size / 6 + 1px) !default; +$alert-ios-checkbox-icon-width: calc($alert-ios-checkbox-size / 6 + 1px); /// @prop - Height of the icon in the checkbox alert -$alert-ios-checkbox-icon-height: calc($alert-ios-checkbox-size * 0.5) !default; +$alert-ios-checkbox-icon-height: calc($alert-ios-checkbox-size * 0.5); /// @prop - Border width of the icon in the checkbox alert -$alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-border-width !default; +$alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-border-width; /// @prop - Border style of the icon in the checkbox alert -$alert-ios-checkbox-icon-border-style: $alert-ios-checkbox-border-style !default; +$alert-ios-checkbox-icon-border-style: $alert-ios-checkbox-border-style; /// @prop - Border color of the icon in the checkbox alert -$alert-ios-checkbox-icon-border-color: $background-color !default; +$alert-ios-checkbox-icon-border-color: $background-color; /// @prop - Transform of the icon in the checkbox alert -$alert-ios-checkbox-icon-transform: rotate(45deg) !default; +$alert-ios-checkbox-icon-transform: rotate(45deg); /// @prop - Filter of the translucent alert -$alert-ios-translucent-filter: saturate(180%) blur(20px) !default; +$alert-ios-translucent-filter: saturate(180%) blur(20px); /// @prop - Height of the tappable inputs in the checkbox alert -$alert-ios-tappable-height: $item-ios-min-height !default; +$alert-ios-tappable-height: $item-ios-min-height; diff --git a/core/src/components/alert/alert.md.vars.scss b/core/src/components/alert/alert.md.vars.scss index 86965476ff..5f56d9161d 100644 --- a/core/src/components/alert/alert.md.vars.scss +++ b/core/src/components/alert/alert.md.vars.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- /// @prop - Font size of the alert -$alert-md-font-size: dynamic-font(14px) !default; +$alert-md-font-size: dynamic-font(14px); /// @prop - Max width of the alert -$alert-md-max-width: 280px !default; +$alert-md-max-width: 280px; /// @prop - Max width of the alert on a tablet /** @@ -19,313 +19,313 @@ $alert-md-max-width: 280px !default; * 3. The height can increase up to 560px. * Source: https://m2.material.io/components/dialogs#behavior */ -$alert-md-max-width-tablet: min(calc(100vw - 96px), 560px) !default; +$alert-md-max-width-tablet: min(calc(100vw - 96px), 560px); /// @prop - Max width of the alert on a tablet -$alert-md-max-height-tablet: min(calc(100vh - 96px), 560px) !default; +$alert-md-max-height-tablet: min(calc(100vh - 96px), 560px); /// @prop - Border radius of the alert -$alert-md-border-radius: 4px !default; +$alert-md-border-radius: 4px; /// @prop - Background color of the alert -$alert-md-background-color: $overlay-md-background-color !default; +$alert-md-background-color: $overlay-md-background-color; /// @prop - Box shadow color of the alert -$alert-md-box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12) !default; +$alert-md-box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12); /// @prop - Padding top of the alert head -$alert-md-head-padding-top: 20px !default; +$alert-md-head-padding-top: 20px; /// @prop - Padding end of the alert head -$alert-md-head-padding-end: 23px !default; +$alert-md-head-padding-end: 23px; /// @prop - Padding bottom of the alert head -$alert-md-head-padding-bottom: 15px !default; +$alert-md-head-padding-bottom: 15px; /// @prop - Padding start of the alert head -$alert-md-head-padding-start: $alert-md-head-padding-end !default; +$alert-md-head-padding-start: $alert-md-head-padding-end; /// @prop - Text align of the alert head -$alert-md-head-text-align: start !default; +$alert-md-head-text-align: start; /// @prop - Color of the alert title -$alert-md-title-color: $text-color !default; +$alert-md-title-color: $text-color; /// @prop - Font size of the alert title -$alert-md-title-font-size: dynamic-font(20px) !default; +$alert-md-title-font-size: dynamic-font(20px); /// @prop - Font weight of the alert title -$alert-md-title-font-weight: 500 !default; +$alert-md-title-font-weight: 500; /// @prop - Font size of the alert sub title -$alert-md-sub-title-font-size: dynamic-font(16px) !default; +$alert-md-sub-title-font-size: dynamic-font(16px); /// @prop - Text color of the alert sub title -$alert-md-sub-title-text-color: $text-color !default; +$alert-md-sub-title-text-color: $text-color; /// @prop - Padding top of the alert message -$alert-md-message-padding-top: 20px !default; +$alert-md-message-padding-top: 20px; /// @prop - Padding end of the alert message -$alert-md-message-padding-end: 24px !default; +$alert-md-message-padding-end: 24px; /// @prop - Padding bottom of the alert message -$alert-md-message-padding-bottom: $alert-md-message-padding-top !default; +$alert-md-message-padding-bottom: $alert-md-message-padding-top; /// @prop - Padding start of the alert message -$alert-md-message-padding-start: $alert-md-message-padding-end !default; +$alert-md-message-padding-start: $alert-md-message-padding-end; /// @prop - Font size of the alert message -$alert-md-message-font-size: dynamic-font(16px) !default; +$alert-md-message-font-size: dynamic-font(16px); /// @prop - Text color of the alert message -$alert-md-message-text-color: $text-color-step-450 !default; +$alert-md-message-text-color: $text-color-step-450; /// @prop - Padding top of the alert empty message -$alert-md-message-empty-padding-top: 0 !default; +$alert-md-message-empty-padding-top: 0; /// @prop - Padding end of the alert empty message -$alert-md-message-empty-padding-end: $alert-md-message-empty-padding-top !default; +$alert-md-message-empty-padding-end: $alert-md-message-empty-padding-top; /// @prop - Padding bottom of the alert empty message -$alert-md-message-empty-padding-bottom: $alert-md-message-empty-padding-top !default; +$alert-md-message-empty-padding-bottom: $alert-md-message-empty-padding-top; /// @prop - Padding start of the alert empty message -$alert-md-message-empty-padding-start: $alert-md-message-empty-padding-end !default; +$alert-md-message-empty-padding-start: $alert-md-message-empty-padding-end; /// @prop - Maximum height of the alert content -$alert-md-content-max-height: 266px !default; +$alert-md-content-max-height: 266px; /// @prop - Border width of the alert input -$alert-md-input-border-width: 1px !default; +$alert-md-input-border-width: 1px; /// @prop - Border style of the alert input -$alert-md-input-border-style: solid !default; +$alert-md-input-border-style: solid; /// @prop - Border color of the alert input -$alert-md-input-border-color: $background-color-step-150 !default; +$alert-md-input-border-color: $background-color-step-150; /// @prop - Text color of the alert input -$alert-md-input-text-color: $text-color !default; +$alert-md-input-text-color: $text-color; /// @prop - Border width of the alert input when focused -$alert-md-input-border-width-focused: 2px !default; +$alert-md-input-border-width-focused: 2px; /// @prop - Border style of the alert input when focused -$alert-md-input-border-style-focused: $alert-md-input-border-style !default; +$alert-md-input-border-style-focused: $alert-md-input-border-style; /// @prop - Border color of the alert input when focused -$alert-md-input-border-color-focused: ion-color(primary, base) !default; +$alert-md-input-border-color-focused: ion-color(primary, base); /// @prop - Margin top of the alert input -$alert-md-input-margin-top: 5px !default; +$alert-md-input-margin-top: 5px; /// @prop - Margin end of the alert input -$alert-md-input-margin-end: 0 !default; +$alert-md-input-margin-end: 0; /// @prop - Margin bottom of the alert input -$alert-md-input-margin-bottom: 5px !default; +$alert-md-input-margin-bottom: 5px; /// @prop - Margin start of the alert input -$alert-md-input-margin-start: 0 !default; +$alert-md-input-margin-start: 0; /// @prop - Placeholder Color for input -$alert-md-input-placeholder-color: $placeholder-text-color !default; +$alert-md-input-placeholder-color: $placeholder-text-color; /// @prop - Flex wrap of the alert button group -$alert-md-button-group-flex-wrap: wrap-reverse !default; +$alert-md-button-group-flex-wrap: wrap-reverse; /// @prop - Justify content of the alert button group -$alert-md-button-group-justify-content: flex-end !default; +$alert-md-button-group-justify-content: flex-end; /// @prop - Padding top of the alert button -$alert-md-button-padding-top: 10px !default; +$alert-md-button-padding-top: 10px; /// @prop - Padding end of the alert button -$alert-md-button-padding-end: $alert-md-button-padding-top !default; +$alert-md-button-padding-end: $alert-md-button-padding-top; /// @prop - Padding bottom of the alert button -$alert-md-button-padding-bottom: $alert-md-button-padding-top !default; +$alert-md-button-padding-bottom: $alert-md-button-padding-top; /// @prop - Padding start of the alert button -$alert-md-button-padding-start: $alert-md-button-padding-end !default; +$alert-md-button-padding-start: $alert-md-button-padding-end; /// @prop - Margin top of the alert button -$alert-md-button-margin-top: 0 !default; +$alert-md-button-margin-top: 0; /// @prop - Margin end of the alert button -$alert-md-button-margin-end: 8px !default; +$alert-md-button-margin-end: 8px; /// @prop - Margin bottom of the alert button -$alert-md-button-margin-bottom: 0 !default; +$alert-md-button-margin-bottom: 0; /// @prop - Margin start of the alert button -$alert-md-button-margin-start: 0 !default; +$alert-md-button-margin-start: 0; /// @prop - Font weight of the alert button -$alert-md-button-font-weight: 500 !default; +$alert-md-button-font-weight: 500; /// @prop - Text color of the alert button -$alert-md-button-text-color: ion-color(primary, base) !default; +$alert-md-button-text-color: ion-color(primary, base); /// @prop - Background color of the alert button -$alert-md-button-background-color: transparent !default; +$alert-md-button-background-color: transparent; /// @prop - Border radius of the alert button -$alert-md-button-border-radius: 2px !default; +$alert-md-button-border-radius: 2px; /// @prop - Text transform of the alert button -$alert-md-button-text-transform: uppercase !default; +$alert-md-button-text-transform: uppercase; /// @prop - Text align of the alert button -$alert-md-button-text-align: end !default; +$alert-md-button-text-align: end; /// @prop - Border top of the alert list -$alert-md-list-border-top: 1px solid $alert-md-input-border-color !default; +$alert-md-list-border-top: 1px solid $alert-md-input-border-color; /// @prop - Border bottom of the alert list -$alert-md-list-border-bottom: $alert-md-list-border-top !default; +$alert-md-list-border-bottom: $alert-md-list-border-top; /// @prop - Top of the alert radio -$alert-md-radio-top: 0 !default; +$alert-md-radio-top: 0; /// @prop - Left of the alert radio -$alert-md-radio-left: 26px !default; +$alert-md-radio-left: 26px; /// @prop - Width of the alert radio -$alert-md-radio-width: 20px !default; +$alert-md-radio-width: 20px; /// @prop - Height of the alert radio -$alert-md-radio-height: $alert-md-radio-width !default; +$alert-md-radio-height: $alert-md-radio-width; /// @prop - Border width of the alert radio -$alert-md-radio-border-width: 2px !default; +$alert-md-radio-border-width: 2px; /// @prop - Border style of the alert radio -$alert-md-radio-border-style: solid !default; +$alert-md-radio-border-style: solid; /// @prop - Border radius of the alert radio -$alert-md-radio-border-radius: 50% !default; +$alert-md-radio-border-radius: 50%; /// @prop - Border color of the alert radio when off -$alert-md-radio-border-color-off: $background-color-step-550 !default; +$alert-md-radio-border-color-off: $background-color-step-550; /// @prop - Border color of the alert radio when on -$alert-md-radio-border-color-on: $alert-md-button-text-color !default; +$alert-md-radio-border-color-on: $alert-md-button-text-color; /// @prop - Width of the icon in the alert radio -$alert-md-radio-icon-width: $alert-md-radio-width * 0.5 !default; +$alert-md-radio-icon-width: $alert-md-radio-width * 0.5; /// @prop - Height of the icon in the alert radio -$alert-md-radio-icon-height: $alert-md-radio-icon-width !default; +$alert-md-radio-icon-height: $alert-md-radio-icon-width; /// @prop - Top of the icon in the alert radio -$alert-md-radio-icon-top: ($alert-md-radio-width - $alert-md-radio-icon-width - $alert-md-radio-border-width * 2) * 0.5 !default; +$alert-md-radio-icon-top: ($alert-md-radio-width - $alert-md-radio-icon-width - $alert-md-radio-border-width * 2) * 0.5; /// @prop - Start of the icon in the radio alert -$alert-md-radio-icon-start: $alert-md-radio-icon-top !default; +$alert-md-radio-icon-start: $alert-md-radio-icon-top; /// @prop - Border radius of the icon in the alert radio -$alert-md-radio-icon-border-radius: $alert-md-radio-border-radius !default; +$alert-md-radio-icon-border-radius: $alert-md-radio-border-radius; /// @prop - Transform of the icon in the alert radio when off -$alert-md-radio-icon-transform-off: scale3d(0, 0, 0) !default; +$alert-md-radio-icon-transform-off: scale3d(0, 0, 0); /// @prop - Transform of the icon in the alert radio when on -$alert-md-radio-icon-transform-on: scale3d(1, 1, 1) !default; +$alert-md-radio-icon-transform-on: scale3d(1, 1, 1); /// @prop - Transition of the icon in the alert radio -$alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0, .2, 1) !default; +$alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0, .2, 1); /// @prop - Padding top on the label for the radio alert -$alert-md-radio-label-padding-top: 13px !default; +$alert-md-radio-label-padding-top: 13px; /// @prop - Padding end on the label for the radio alert -$alert-md-radio-label-padding-end: 26px !default; +$alert-md-radio-label-padding-end: 26px; /// @prop - Padding bottom on the label for the radio alert -$alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top !default; +$alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top; /// @prop - Padding start on the label for the radio alert -$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end + 26px !default; +$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end + 26px; /// @prop - Font size of the label for the radio alert -$alert-md-radio-label-font-size: dynamic-font(16px) !default; +$alert-md-radio-label-font-size: dynamic-font(16px); /// @prop - Text color of the label for the radio alert -$alert-md-radio-label-text-color: $text-color-step-150 !default; +$alert-md-radio-label-text-color: $text-color-step-150; /// @prop - Text color of the label for the checked radio alert -$alert-md-radio-label-text-color-checked: $alert-md-radio-label-text-color !default; +$alert-md-radio-label-text-color-checked: $alert-md-radio-label-text-color; /// @prop - Top of the checkbox in the alert -$alert-md-checkbox-top: 0 !default; +$alert-md-checkbox-top: 0; /// @prop - Left of the checkbox in the alert -$alert-md-checkbox-left: 26px !default; +$alert-md-checkbox-left: 26px; /// @prop - Width of the checkbox in the alert -$alert-md-checkbox-width: 16px !default; +$alert-md-checkbox-width: 16px; /// @prop - Height of the checkbox in the alert -$alert-md-checkbox-height: 16px !default; +$alert-md-checkbox-height: 16px; /// @prop - Border width of the checkbox in the alert -$alert-md-checkbox-border-width: 2px !default; +$alert-md-checkbox-border-width: 2px; /// @prop - Border style of the checkbox in the alert -$alert-md-checkbox-border-style: solid !default; +$alert-md-checkbox-border-style: solid; /// @prop - Border radius of the checkbox in the alert -$alert-md-checkbox-border-radius: 2px !default; +$alert-md-checkbox-border-radius: 2px; /// @prop - Border color of the checkbox in the alert when off -$alert-md-checkbox-border-color-off: $background-color-step-550 !default; +$alert-md-checkbox-border-color-off: $background-color-step-550; /// @prop - Border color of the checkbox in the alert when on -$alert-md-checkbox-border-color-on: $alert-md-button-text-color !default; +$alert-md-checkbox-border-color-on: $alert-md-button-text-color; /// @prop - Top of the icon in the checkbox alert -$alert-md-checkbox-icon-top: 0 !default; +$alert-md-checkbox-icon-top: 0; /// @prop - Start of the icon in the checkbox alert -$alert-md-checkbox-icon-start: 3px !default; +$alert-md-checkbox-icon-start: 3px; /// @prop - Width of the icon in the checkbox alert -$alert-md-checkbox-icon-width: 6px !default; +$alert-md-checkbox-icon-width: 6px; /// @prop - Height of the icon in the checkbox alert -$alert-md-checkbox-icon-height: 10px !default; +$alert-md-checkbox-icon-height: 10px; /// @prop - Border width of the icon in the checkbox alert -$alert-md-checkbox-icon-border-width: 2px !default; +$alert-md-checkbox-icon-border-width: 2px; /// @prop - Border style of the icon in the checkbox alert -$alert-md-checkbox-icon-border-style: solid !default; +$alert-md-checkbox-icon-border-style: solid; /// @prop - Border color of the icon in the checkbox alert -$alert-md-checkbox-icon-border-color: ion-color(primary, contrast) !default; +$alert-md-checkbox-icon-border-color: ion-color(primary, contrast); /// @prop - Transform of the icon in the checkbox alert -$alert-md-checkbox-icon-transform: rotate(45deg) !default; +$alert-md-checkbox-icon-transform: rotate(45deg); /// @prop - Padding top of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-top: 13px !default; +$alert-md-checkbox-label-padding-top: 13px; /// @prop - Padding end of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-end: $alert-md-checkbox-left !default; +$alert-md-checkbox-label-padding-end: $alert-md-checkbox-left; /// @prop - Padding bottom of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top !default; +$alert-md-checkbox-label-padding-bottom: $alert-md-checkbox-label-padding-top; /// @prop - Padding start of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end + 27px !default; +$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end + 27px; /// @prop - Text color of the label for the checkbox in the alert -$alert-md-checkbox-label-text-color: $text-color-step-150 !default; +$alert-md-checkbox-label-text-color: $text-color-step-150; /// @prop - Font size of the label for the checkbox in the alert -$alert-md-checkbox-label-font-size: dynamic-font(16px) !default; +$alert-md-checkbox-label-font-size: dynamic-font(16px); /// @prop - Height of the tappable inputs in the checkbox alert -$alert-md-tappable-height: $item-md-min-height !default; +$alert-md-tappable-height: $item-md-min-height; diff --git a/core/src/components/alert/alert.vars.scss b/core/src/components/alert/alert.vars.scss index c37269f65c..b996b03dcf 100644 --- a/core/src/components/alert/alert.vars.scss +++ b/core/src/components/alert/alert.vars.scss @@ -4,16 +4,16 @@ // -------------------------------------------------- /// @prop - Minimum width of the alert -$alert-min-width: 250px !default; +$alert-min-width: 250px; /// @prop - Maximum height of the alert -$alert-max-height: 90% !default; +$alert-max-height: 90%; /// @prop - Line height of the alert button -$alert-button-line-height: dynamic-font(20px) !default; +$alert-button-line-height: dynamic-font(20px); /// @prop - Font size of the alert button -$alert-button-font-size: dynamic-font(14px) !default; +$alert-button-font-size: dynamic-font(14px); /// @prop - Minimum height of a textarea in the alert -$alert-input-min-height: 37px !default; +$alert-input-min-height: 37px; diff --git a/core/src/components/avatar/avatar.ios.vars.scss b/core/src/components/avatar/avatar.ios.vars.scss index 4a8a931c7b..2979468650 100644 --- a/core/src/components/avatar/avatar.ios.vars.scss +++ b/core/src/components/avatar/avatar.ios.vars.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- /// @prop - Width of the avatar -$avatar-ios-width: 48px !default; +$avatar-ios-width: 48px; /// @prop - Height of the avatar -$avatar-ios-height: $avatar-ios-width !default; +$avatar-ios-height: $avatar-ios-width; /// @prop - Border radius of the avatar -$avatar-ios-border-radius: 50% !default; +$avatar-ios-border-radius: 50%; diff --git a/core/src/components/avatar/avatar.md.vars.scss b/core/src/components/avatar/avatar.md.vars.scss index f397e61c4b..87e2afd1f3 100644 --- a/core/src/components/avatar/avatar.md.vars.scss +++ b/core/src/components/avatar/avatar.md.vars.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- /// @prop - Width of the avatar -$avatar-md-width: 64px !default; +$avatar-md-width: 64px; /// @prop - Height of the avatar -$avatar-md-height: $avatar-md-width !default; +$avatar-md-height: $avatar-md-width; /// @prop - Border radius of the avatar -$avatar-md-border-radius: 50% !default; +$avatar-md-border-radius: 50%; diff --git a/core/src/components/back-button/back-button.ios.vars.scss b/core/src/components/back-button/back-button.ios.vars.scss index 8793d741f2..a63366c568 100644 --- a/core/src/components/back-button/back-button.ios.vars.scss +++ b/core/src/components/back-button/back-button.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Z index of the back button -$back-button-ios-button-z-index: $z-index-toolbar-buttons !default; +$back-button-ios-button-z-index: $z-index-toolbar-buttons; /// @prop - Text color of the back button -$back-button-ios-color: ion-color(primary, base) !default; +$back-button-ios-color: ion-color(primary, base); diff --git a/core/src/components/back-button/back-button.md.vars.scss b/core/src/components/back-button/back-button.md.vars.scss index c7ce25cbb9..36ad7abe80 100644 --- a/core/src/components/back-button/back-button.md.vars.scss +++ b/core/src/components/back-button/back-button.md.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Text color of the back button -$back-button-md-color: currentColor !default; +$back-button-md-color: currentColor; diff --git a/core/src/components/badge/badge.ios.vars.scss b/core/src/components/badge/badge.ios.vars.scss index 73dc0be8f7..ec21f97ca1 100644 --- a/core/src/components/badge/badge.ios.vars.scss +++ b/core/src/components/badge/badge.ios.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Border radius of the badge -$badge-ios-border-radius: 10px !default; +$badge-ios-border-radius: 10px; diff --git a/core/src/components/badge/badge.md.vars.scss b/core/src/components/badge/badge.md.vars.scss index 90516314ec..350b948417 100644 --- a/core/src/components/badge/badge.md.vars.scss +++ b/core/src/components/badge/badge.md.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Border radius of the badge -$badge-md-border-radius: 4px !default; +$badge-md-border-radius: 4px; diff --git a/core/src/components/badge/badge.vars.scss b/core/src/components/badge/badge.vars.scss index ebaa3490a5..a8ff7e2f6e 100644 --- a/core/src/components/badge/badge.vars.scss +++ b/core/src/components/badge/badge.vars.scss @@ -4,25 +4,25 @@ // -------------------------------------------------- /// @prop - Padding top of the badge -$badge-padding-top: 3px !default; +$badge-padding-top: 3px; /// @prop - Padding end of the badge -$badge-padding-end: 8px !default; +$badge-padding-end: 8px; /// @prop - Padding bottom of the badge -$badge-padding-bottom: $badge-padding-top !default; +$badge-padding-bottom: $badge-padding-top; /// @prop - Padding start of the badge -$badge-padding-start: $badge-padding-end !default; +$badge-padding-start: $badge-padding-end; /// @prop - Minimum width of the badge -$badge-min-width: 10px !default; +$badge-min-width: 10px; /// @prop - Baseline font size of the badge -$badge-baseline-font-size: 13px !default; +$badge-baseline-font-size: 13px; /// @prop - Font size of the badge -$badge-font-size: dynamic-font($badge-baseline-font-size) !default; +$badge-font-size: dynamic-font($badge-baseline-font-size); /// @prop - Font weight of the badge -$badge-font-weight: bold !default; +$badge-font-weight: bold; diff --git a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss index 97a91a74cc..61619ef46d 100644 --- a/core/src/components/breadcrumb/breadcrumb.ios.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.ios.vars.scss @@ -4,31 +4,31 @@ // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665)) !default; +$breadcrumb-ios-color: var(--ion-color-step-850, var(--ion-text-color-step-150, #2d4665)); /// @prop - Color of the active breadcrumb -$breadcrumb-ios-color-active: var(--ion-text-color, #03060b) !default; +$breadcrumb-ios-color-active: var(--ion-text-color, #03060b); /// @prop - Background color of the focused breadcrumb -$breadcrumb-ios-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7))) !default; +$breadcrumb-ios-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, rgba(233, 237, 243, 0.7))); /// @prop - Color of the breadcrumb icon -$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3)) !default; +$breadcrumb-ios-icon-color: var(--ion-color-step-400, var(--ion-text-color-step-600, #92a0b3)); /// @prop - Color of the breadcrumb icon when active -$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39)) !default; +$breadcrumb-ios-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #242d39)); /// @prop - Color of the breadcrumb icon when focused -$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78)) !default; +$breadcrumb-ios-icon-color-focused: var(--ion-color-step-750, var(--ion-text-color-step-250, #445b78)); /// @prop - Color of the breadcrumb separator -$breadcrumb-ios-separator-color: $breadcrumb-separator-color !default; +$breadcrumb-ios-separator-color: $breadcrumb-separator-color; /// @prop - Color of the breadcrumb indicator -$breadcrumb-ios-indicator-color: $breadcrumb-ios-separator-color !default; +$breadcrumb-ios-indicator-color: $breadcrumb-ios-separator-color; /// @prop - Background color of the breadcrumb indicator -$breadcrumb-ios-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3)) !default; +$breadcrumb-ios-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e9edf3)); /// @prop - Background color of the breadcrumb indicator when focused -$breadcrumb-ios-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea)) !default; +$breadcrumb-ios-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #d9e0ea)); diff --git a/core/src/components/breadcrumb/breadcrumb.md.vars.scss b/core/src/components/breadcrumb/breadcrumb.md.vars.scss index d638047353..0b96adeed1 100644 --- a/core/src/components/breadcrumb/breadcrumb.md.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.md.vars.scss @@ -4,43 +4,43 @@ // -------------------------------------------------- /// @prop - Color of the breadcrumb -$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483)) !default; +$breadcrumb-md-color: var(--ion-color-step-600, var(--ion-text-color-step-400, #677483)); /// @prop - Color of the active breadcrumb -$breadcrumb-md-color-active: var(--ion-text-color, #03060b) !default; +$breadcrumb-md-color-active: var(--ion-text-color, #03060b); /// @prop - Color of the focused breadcrumb -$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e)) !default; +$breadcrumb-md-color-focused: var(--ion-color-step-800, var(--ion-text-color-step-200, #35404e)); /// @prop - Background color of the focused breadcrumb -$breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff)) !default; +$breadcrumb-md-background-focused: var(--ion-color-step-50, var(--ion-background-color-step-50, #fff)); /// @prop - Color of the breadcrumb icon -$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894)) !default; +$breadcrumb-md-icon-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #7d8894)); /// @prop - Color of the breadcrumb icon when active -$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a)) !default; +$breadcrumb-md-icon-color-active: var(--ion-color-step-850, var(--ion-text-color-step-150, #222d3a)); /// @prop - Margin top of the breadcrumb separator -$breadcrumb-md-separator-margin-top: -1px !default; +$breadcrumb-md-separator-margin-top: -1px; /// @prop - Margin end of the breadcrumb separator -$breadcrumb-md-separator-margin-end: 10px !default; +$breadcrumb-md-separator-margin-end: 10px; /// @prop - Margin bottom of the breadcrumb separator -$breadcrumb-md-separator-margin-bottom: null !default; +$breadcrumb-md-separator-margin-bottom: null; /// @prop - Margin start of the breadcrumb separator -$breadcrumb-md-separator-margin-start: 10px !default; +$breadcrumb-md-separator-margin-start: 10px; /// @prop - Color of the breadcrumb separator -$breadcrumb-md-separator-color: $breadcrumb-separator-color !default; +$breadcrumb-md-separator-color: $breadcrumb-separator-color; /// @prop - Color of the breadcrumb indicator -$breadcrumb-md-indicator-color: $breadcrumb-md-separator-color !default; +$breadcrumb-md-indicator-color: $breadcrumb-md-separator-color; /// @prop - Background color of the breadcrumb indicator -$breadcrumb-md-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3)) !default; +$breadcrumb-md-indicator-background: var(--ion-color-step-100, var(--ion-background-color-step-100, #eef1f3)); /// @prop - Background color of the breadcrumb indicator when focused -$breadcrumb-md-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8)) !default; +$breadcrumb-md-indicator-background-focused: var(--ion-color-step-150, var(--ion-background-color-step-150, #dfe5e8)); diff --git a/core/src/components/breadcrumb/breadcrumb.vars.scss b/core/src/components/breadcrumb/breadcrumb.vars.scss index 43129a30d9..6ead8b96f1 100644 --- a/core/src/components/breadcrumb/breadcrumb.vars.scss +++ b/core/src/components/breadcrumb/breadcrumb.vars.scss @@ -4,12 +4,12 @@ // -------------------------------------------------- /// @prop - Font weight of the breadcrumb -$breadcrumb-font-weight: 400 !default; +$breadcrumb-font-weight: 400; -$breadcrumb-baseline-font-size: 16px !default; +$breadcrumb-baseline-font-size: 16px; /// @prop - Font size of the breadcrumb -$breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size) !default; +$breadcrumb-font-size: dynamic-font($breadcrumb-baseline-font-size); /// @prop - Color of the breadcrumb separator -$breadcrumb-separator-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a)) !default; +$breadcrumb-separator-color: var(--ion-color-step-550, var(--ion-text-color-step-450, #73849a)); diff --git a/core/src/components/button/button.ios.vars.scss b/core/src/components/button/button.ios.vars.scss index 9b49c47e4c..7cae8c15f4 100644 --- a/core/src/components/button/button.ios.vars.scss +++ b/core/src/components/button/button.ios.vars.scss @@ -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; diff --git a/core/src/components/button/button.md.vars.scss b/core/src/components/button/button.md.vars.scss index 99f942769a..295ec46120 100644 --- a/core/src/components/button/button.md.vars.scss +++ b/core/src/components/button/button.md.vars.scss @@ -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; diff --git a/core/src/components/button/button.vars.scss b/core/src/components/button/button.vars.scss index 448cc7b006..1cfe282505 100644 --- a/core/src/components/button/button.vars.scss +++ b/core/src/components/button/button.vars.scss @@ -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; diff --git a/core/src/components/card-content/card-content.ios.vars.scss b/core/src/components/card-content/card-content.ios.vars.scss index 8bb5fa0383..3d903fcb62 100644 --- a/core/src/components/card-content/card-content.ios.vars.scss +++ b/core/src/components/card-content/card-content.ios.vars.scss @@ -4,16 +4,16 @@ // -------------------------------------------------- /// @prop - Padding top of the card -$card-ios-padding-top: 20px !default; +$card-ios-padding-top: 20px; /// @prop - Padding end of the card -$card-ios-padding-end: $card-ios-padding-top !default; +$card-ios-padding-end: $card-ios-padding-top; /// @prop - Padding bottom of the card -$card-ios-padding-bottom: $card-ios-padding-top !default; +$card-ios-padding-bottom: $card-ios-padding-top; /// @prop - Padding start of the card -$card-ios-padding-start: $card-ios-padding-top !default; +$card-ios-padding-start: $card-ios-padding-top; /// @prop - Font size of the card -$card-ios-font-size: dynamic-font(16px) !default; +$card-ios-font-size: dynamic-font(16px); diff --git a/core/src/components/card-content/card-content.md.vars.scss b/core/src/components/card-content/card-content.md.vars.scss index 8d436c15c9..a97c42ca3c 100644 --- a/core/src/components/card-content/card-content.md.vars.scss +++ b/core/src/components/card-content/card-content.md.vars.scss @@ -4,19 +4,19 @@ // -------------------------------------------------- /// @prop - Padding top of the card -$card-md-padding-top: 13px !default; +$card-md-padding-top: 13px; /// @prop - Padding right of the card -$card-md-padding-end: 16px !default; +$card-md-padding-end: 16px; /// @prop - Padding bottom of the card -$card-md-padding-bottom: 13px !default; +$card-md-padding-bottom: 13px; /// @prop - Padding start of the card -$card-md-padding-start: 16px !default; +$card-md-padding-start: 16px; /// @prop - Font size of the card -$card-md-font-size: dynamic-font(14px) !default; +$card-md-font-size: dynamic-font(14px); /// @prop - Line height of the card -$card-md-line-height: 1.5 !default; +$card-md-line-height: 1.5; diff --git a/core/src/components/card-header/card-header.ios.vars.scss b/core/src/components/card-header/card-header.ios.vars.scss index b261a51f1b..cbce9963d0 100644 --- a/core/src/components/card-header/card-header.ios.vars.scss +++ b/core/src/components/card-header/card-header.ios.vars.scss @@ -4,22 +4,22 @@ // -------------------------------------------------- /// @prop - Padding top of the card header -$card-ios-header-padding-top: 20px !default; +$card-ios-header-padding-top: 20px; /// @prop - Padding end of the card header -$card-ios-header-padding-end: $card-ios-header-padding-top !default; +$card-ios-header-padding-end: $card-ios-header-padding-top; /// @prop - Padding bottom of the card header -$card-ios-header-padding-bottom: 16px !default; +$card-ios-header-padding-bottom: 16px; /// @prop - Padding start of the card header -$card-ios-header-padding-start: $card-ios-header-padding-end !default; +$card-ios-header-padding-start: $card-ios-header-padding-end; /// @prop - Filter of the translucent card header background color alpha -$card-ios-header-translucent-background-color-alpha: .9 !default; +$card-ios-header-translucent-background-color-alpha: .9; /// @prop - Filter of the translucent card header background color -$card-ios-header-translucent-background-color: rgba($background-color-rgb, $card-ios-header-translucent-background-color-alpha) !default; +$card-ios-header-translucent-background-color: rgba($background-color-rgb, $card-ios-header-translucent-background-color-alpha); /// @prop - Filter of the translucent card header -$card-ios-header-translucent-filter: saturate(180%) blur(30px) !default; +$card-ios-header-translucent-filter: saturate(180%) blur(30px); diff --git a/core/src/components/card-header/card-header.md.vars.scss b/core/src/components/card-header/card-header.md.vars.scss index e64451a202..8031795587 100644 --- a/core/src/components/card-header/card-header.md.vars.scss +++ b/core/src/components/card-header/card-header.md.vars.scss @@ -4,13 +4,13 @@ // -------------------------------------------------- /// @prop - Padding top of the card header -$card-md-header-padding-top: 16px !default; +$card-md-header-padding-top: 16px; /// @prop - Padding end of the card header -$card-md-header-padding-end: $card-md-header-padding-top !default; +$card-md-header-padding-end: $card-md-header-padding-top; /// @prop - Padding bottom of the card header -$card-md-header-padding-bottom: $card-md-header-padding-top !default; +$card-md-header-padding-bottom: $card-md-header-padding-top; /// @prop - Padding start of the card header -$card-md-header-padding-start: $card-md-header-padding-end !default; +$card-md-header-padding-start: $card-md-header-padding-end; diff --git a/core/src/components/card-subtitle/card-subtitle.ios.vars.scss b/core/src/components/card-subtitle/card-subtitle.ios.vars.scss index 86f221d011..c4ec2c00c4 100644 --- a/core/src/components/card-subtitle/card-subtitle.ios.vars.scss +++ b/core/src/components/card-subtitle/card-subtitle.ios.vars.scss @@ -4,40 +4,40 @@ // -------------------------------------------------- /// @prop - Font size of the card subtitle -$card-ios-subtitle-font-size: dynamic-font(12px) !default; +$card-ios-subtitle-font-size: dynamic-font(12px); /// @prop - Font weight of the card subtitle -$card-ios-subtitle-font-weight: 700 !default; +$card-ios-subtitle-font-weight: 700; /// @prop - Font weight of the card subtitle -$card-ios-subtitle-text-transform: uppercase !default; +$card-ios-subtitle-text-transform: uppercase; /// @prop - Letter spacing of the card subtitle -$card-ios-subtitle-letter-spacing: .4px !default; +$card-ios-subtitle-letter-spacing: .4px; /// @prop - Padding top of the card subtitle -$card-ios-subtitle-padding-top: 0 !default; +$card-ios-subtitle-padding-top: 0; /// @prop - Padding end of the card subtitle -$card-ios-subtitle-padding-end: $card-ios-subtitle-padding-top !default; +$card-ios-subtitle-padding-end: $card-ios-subtitle-padding-top; /// @prop - Padding bottom of the card subtitle -$card-ios-subtitle-padding-bottom: $card-ios-subtitle-padding-top !default; +$card-ios-subtitle-padding-bottom: $card-ios-subtitle-padding-top; /// @prop - Padding start of the card subtitle -$card-ios-subtitle-padding-start: $card-ios-subtitle-padding-end !default; +$card-ios-subtitle-padding-start: $card-ios-subtitle-padding-end; /// @prop - Margin top of the card subtitle -$card-ios-subtitle-margin-top: 0 !default; +$card-ios-subtitle-margin-top: 0; /// @prop - Margin end of the card subtitle -$card-ios-subtitle-margin-end: $card-ios-subtitle-margin-top !default; +$card-ios-subtitle-margin-end: $card-ios-subtitle-margin-top; /// @prop - Margin bottom of the card subtitle -$card-ios-subtitle-margin-bottom: 4px !default; +$card-ios-subtitle-margin-bottom: 4px; /// @prop - Margin start of the card subtitle -$card-ios-subtitle-margin-start: $card-ios-subtitle-margin-end !default; +$card-ios-subtitle-margin-start: $card-ios-subtitle-margin-end; /// @prop - Color of the card subtitle -$card-ios-subtitle-color: $text-color-step-400 !default; +$card-ios-subtitle-color: $text-color-step-400; diff --git a/core/src/components/card-subtitle/card-subtitle.md.vars.scss b/core/src/components/card-subtitle/card-subtitle.md.vars.scss index 1a0c4f69c8..60aa8da988 100644 --- a/core/src/components/card-subtitle/card-subtitle.md.vars.scss +++ b/core/src/components/card-subtitle/card-subtitle.md.vars.scss @@ -4,31 +4,31 @@ // -------------------------------------------------- /// @prop - Font size of the card subtitle -$card-md-subtitle-font-size: dynamic-font(14px) !default; +$card-md-subtitle-font-size: dynamic-font(14px); /// @prop - Padding top of the card subtitle -$card-md-subtitle-padding-top: 0 !default; +$card-md-subtitle-padding-top: 0; /// @prop - Padding end of the card subtitle -$card-md-subtitle-padding-end: $card-md-subtitle-padding-top !default; +$card-md-subtitle-padding-end: $card-md-subtitle-padding-top; /// @prop - Padding bottom of the card subtitle -$card-md-subtitle-padding-bottom: $card-md-subtitle-padding-top !default; +$card-md-subtitle-padding-bottom: $card-md-subtitle-padding-top; /// @prop - Padding start of the card subtitle -$card-md-subtitle-padding-start: $card-md-subtitle-padding-end !default; +$card-md-subtitle-padding-start: $card-md-subtitle-padding-end; /// @prop - Margin top of the card subtitle -$card-md-subtitle-margin-top: 0 !default; +$card-md-subtitle-margin-top: 0; /// @prop - Margin end of the card subtitle -$card-md-subtitle-margin-end: $card-md-subtitle-margin-top !default; +$card-md-subtitle-margin-end: $card-md-subtitle-margin-top; /// @prop - Margin bottom of the card subtitle -$card-md-subtitle-margin-bottom: 0 !default; +$card-md-subtitle-margin-bottom: 0; /// @prop - Margin start of the card subtitle -$card-md-subtitle-margin-start: $card-md-subtitle-margin-end !default; +$card-md-subtitle-margin-start: $card-md-subtitle-margin-end; /// @prop - Color of the card subtitle -$card-md-subtitle-color: $text-color-step-450 !default; +$card-md-subtitle-color: $text-color-step-450; diff --git a/core/src/components/card-title/card-title.ios.vars.scss b/core/src/components/card-title/card-title.ios.vars.scss index 43d4c74143..3569b5f053 100644 --- a/core/src/components/card-title/card-title.ios.vars.scss +++ b/core/src/components/card-title/card-title.ios.vars.scss @@ -4,34 +4,34 @@ // -------------------------------------------------- /// @prop - Font size of the card title -$card-ios-title-font-size: dynamic-font(28px) !default; +$card-ios-title-font-size: dynamic-font(28px); /// @prop - Font weight of the card title -$card-ios-title-font-weight: 700 !default; +$card-ios-title-font-weight: 700; /// @prop - Padding top of the card title -$card-ios-title-padding-top: 0 !default; +$card-ios-title-padding-top: 0; /// @prop - Padding end of the card title -$card-ios-title-padding-end: $card-ios-title-padding-top !default; +$card-ios-title-padding-end: $card-ios-title-padding-top; /// @prop - Padding bottom of the card title -$card-ios-title-padding-bottom: $card-ios-title-padding-top !default; +$card-ios-title-padding-bottom: $card-ios-title-padding-top; /// @prop - Padding start of the card title -$card-ios-title-padding-start: $card-ios-title-padding-top !default; +$card-ios-title-padding-start: $card-ios-title-padding-top; /// @prop - Margin top of the card title -$card-ios-title-margin-top: 0 !default; +$card-ios-title-margin-top: 0; /// @prop - Margin end of the card title -$card-ios-title-margin-end: $card-ios-title-margin-top !default; +$card-ios-title-margin-end: $card-ios-title-margin-top; /// @prop - Margin bottom of the card title -$card-ios-title-margin-bottom: $card-ios-title-margin-top !default; +$card-ios-title-margin-bottom: $card-ios-title-margin-top; /// @prop - Margin start of the card title -$card-ios-title-margin-start: $card-ios-title-margin-top !default; +$card-ios-title-margin-start: $card-ios-title-margin-top; /// @prop - Color of the card title -$card-ios-title-text-color: $text-color !default; +$card-ios-title-text-color: $text-color; diff --git a/core/src/components/card-title/card-title.md.vars.scss b/core/src/components/card-title/card-title.md.vars.scss index 31914b32b8..f3db03f493 100644 --- a/core/src/components/card-title/card-title.md.vars.scss +++ b/core/src/components/card-title/card-title.md.vars.scss @@ -4,31 +4,31 @@ // -------------------------------------------------- /// @prop - Font size of the card title -$card-md-title-font-size: dynamic-font(20px) !default; +$card-md-title-font-size: dynamic-font(20px); /// @prop - Padding top of the card title -$card-md-title-padding-top: 0 !default; +$card-md-title-padding-top: 0; /// @prop - Padding end of the card title -$card-md-title-padding-end: $card-md-title-padding-top !default; +$card-md-title-padding-end: $card-md-title-padding-top; /// @prop - Padding bottom of the card title -$card-md-title-padding-bottom: $card-md-title-padding-top !default; +$card-md-title-padding-bottom: $card-md-title-padding-top; /// @prop - Padding start of the card title -$card-md-title-padding-start: $card-md-title-padding-end !default; +$card-md-title-padding-start: $card-md-title-padding-end; /// @prop - Margin top of the card title -$card-md-title-margin-top: 0 !default; +$card-md-title-margin-top: 0; /// @prop - Margin end of the card title -$card-md-title-margin-end: $card-md-title-margin-top !default; +$card-md-title-margin-end: $card-md-title-margin-top; /// @prop - Margin bottom of the card title -$card-md-title-margin-bottom: $card-md-title-margin-top !default; +$card-md-title-margin-bottom: $card-md-title-margin-top; /// @prop - Margin start of the card title -$card-md-title-margin-start: $card-md-title-margin-end !default; +$card-md-title-margin-start: $card-md-title-margin-end; /// @prop - Color of the card title -$card-md-title-text-color: $text-color-step-150 !default; +$card-md-title-text-color: $text-color-step-150; diff --git a/core/src/components/card/card.ios.vars.scss b/core/src/components/card/card.ios.vars.scss index ce9876ea26..e259797e5c 100755 --- a/core/src/components/card/card.ios.vars.scss +++ b/core/src/components/card/card.ios.vars.scss @@ -4,31 +4,31 @@ // -------------------------------------------------- /// @prop - Margin top of the card -$card-ios-margin-top: 24px !default; +$card-ios-margin-top: 24px; /// @prop - Margin end of the card -$card-ios-margin-end: 16px !default; +$card-ios-margin-end: 16px; /// @prop - Margin bottom of the card -$card-ios-margin-bottom: $card-ios-margin-top !default; +$card-ios-margin-bottom: $card-ios-margin-top; /// @prop - Margin start of the card -$card-ios-margin-start: 16px !default; +$card-ios-margin-start: 16px; /// @prop - Box shadow color of the card -$card-ios-box-shadow-color: rgba(0, 0, 0, .12) !default; +$card-ios-box-shadow-color: rgba(0, 0, 0, .12); /// @prop - Box shadow of the card -$card-ios-box-shadow: 0 4px 16px $card-ios-box-shadow-color !default; +$card-ios-box-shadow: 0 4px 16px $card-ios-box-shadow-color; /// @prop - Border radius of the card -$card-ios-border-radius: 8px !default; +$card-ios-border-radius: 8px; /// @prop - Font size of the card -$card-ios-font-size: dynamic-font(14px) !default; +$card-ios-font-size: dynamic-font(14px); /// @prop - Transition timing function of the card -$card-ios-transition-timing-function: cubic-bezier(0.12, 0.72, 0.29, 1) !default; +$card-ios-transition-timing-function: cubic-bezier(0.12, 0.72, 0.29, 1); /// @prop - Transform of the card on activate -$card-ios-transform-activated: scale3d(.97, .97, 1) !default; +$card-ios-transform-activated: scale3d(.97, .97, 1); diff --git a/core/src/components/card/card.md.vars.scss b/core/src/components/card/card.md.vars.scss index cb13c43aee..2af656861f 100755 --- a/core/src/components/card/card.md.vars.scss +++ b/core/src/components/card/card.md.vars.scss @@ -4,25 +4,25 @@ // -------------------------------------------------- /// @prop - Margin top of the card -$card-md-margin-top: 10px !default; +$card-md-margin-top: 10px; /// @prop - Margin end of the card -$card-md-margin-end: 10px !default; +$card-md-margin-end: 10px; /// @prop - Margin bottom of the card -$card-md-margin-bottom: 10px !default; +$card-md-margin-bottom: 10px; /// @prop - Margin start of the card -$card-md-margin-start: 10px !default; +$card-md-margin-start: 10px; /// @prop - Box shadow of the card -$card-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; +$card-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 - Border radius of the card -$card-md-border-radius: 4px !default; +$card-md-border-radius: 4px; /// @prop - Font size of the card -$card-md-font-size: dynamic-font(14px) !default; +$card-md-font-size: dynamic-font(14px); /// @prop - Line height of the card -$card-md-line-height: 1.5 !default; +$card-md-line-height: 1.5; diff --git a/core/src/components/checkbox/checkbox.ios.vars.scss b/core/src/components/checkbox/checkbox.ios.vars.scss index b63650a309..78605a85f8 100644 --- a/core/src/components/checkbox/checkbox.ios.vars.scss +++ b/core/src/components/checkbox/checkbox.ios.vars.scss @@ -6,25 +6,25 @@ // -------------------------------------------------- /// @prop - Background color of the checkbox when off -$checkbox-ios-background-color-off: $item-ios-background !default; +$checkbox-ios-background-color-off: $item-ios-background; /// @prop - Size of the checkbox icon -$checkbox-ios-icon-size: dynamic-font-max(22px, 2.538) !default; +$checkbox-ios-icon-size: dynamic-font-max(22px, 2.538); /// @prop - Border color of the checkbox icon when off -$checkbox-ios-icon-border-color-off: rgba($text-color-rgb, 0.23) !default; +$checkbox-ios-icon-border-color-off: rgba($text-color-rgb, 0.23); /// @prop - Border width of the checkbox icon -$checkbox-ios-icon-border-width: dynamic-font(2px) !default; +$checkbox-ios-icon-border-width: dynamic-font(2px); /// @prop - Border style of the checkbox icon -$checkbox-ios-icon-border-style: solid !default; +$checkbox-ios-icon-border-style: solid; /// @prop - Border radius of the checkbox icon -$checkbox-ios-icon-border-radius: 50% !default; +$checkbox-ios-icon-border-radius: 50%; /// @prop - Opacity of the disabled checkbox -$checkbox-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; +$checkbox-ios-disabled-opacity: $form-control-ios-disabled-opacity; /// @prop - Checkmark width of the checkbox icon -$checkbox-ios-icon-checkmark-width: 1.5px !default; +$checkbox-ios-icon-checkmark-width: 1.5px; diff --git a/core/src/components/checkbox/checkbox.md.vars.scss b/core/src/components/checkbox/checkbox.md.vars.scss index d2359c4067..445d50b6a6 100644 --- a/core/src/components/checkbox/checkbox.md.vars.scss +++ b/core/src/components/checkbox/checkbox.md.vars.scss @@ -5,30 +5,30 @@ // -------------------------------------------------- /// @prop - Opacity of the disabled checkbox label -$checkbox-md-disabled-opacity: $form-control-md-disabled-opacity !default; +$checkbox-md-disabled-opacity: $form-control-md-disabled-opacity; /// @prop - Background color of the checkbox icon when off -$checkbox-md-icon-background-color-off: $item-md-background !default; +$checkbox-md-icon-background-color-off: $item-md-background; /// @prop - Size of the checkbox icon /// The icon size does not use dynamic font /// because it does not scale in native. -$checkbox-md-icon-size: 18px !default; +$checkbox-md-icon-size: 18px; /// @prop - Border width of the checkbox icon -$checkbox-md-icon-border-width: 2px !default; +$checkbox-md-icon-border-width: 2px; /// @prop - Border style of the checkbox icon -$checkbox-md-icon-border-style: solid !default; +$checkbox-md-icon-border-style: solid; /// @prop - Border color of the checkbox icon when off -$checkbox-md-icon-border-color-off: rgb($text-color-rgb, 0.60) !default; +$checkbox-md-icon-border-color-off: rgb($text-color-rgb, 0.60); /// @prop - Transition duration of the checkbox -$checkbox-md-transition-duration: 180ms !default; +$checkbox-md-transition-duration: 180ms; /// @prop - Transition easing of the checkbox -$checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; +$checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1); /// @prop - Opacity of the disabled checkbox /// This value is used because the checkbox color is set to @@ -37,4 +37,4 @@ $checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; /// opacity is applied on top of the transparent color so /// this opacity gets us the equivalent of applying `0.38` /// on top of an opaque checkbox `rgb(0, 0, 0, 1.0)` -$checkbox-md-icon-disabled-opacity: 0.63 !default; +$checkbox-md-icon-disabled-opacity: 0.63; diff --git a/core/src/components/checkbox/checkbox.vars.scss b/core/src/components/checkbox/checkbox.vars.scss index 2116a369e8..8c73dff6f8 100644 --- a/core/src/components/checkbox/checkbox.vars.scss +++ b/core/src/components/checkbox/checkbox.vars.scss @@ -1,5 +1,5 @@ /// @prop - Top margin of checkbox's label when in an item -$checkbox-item-label-margin-top: 10px !default; +$checkbox-item-label-margin-top: 10px; /// @prop - Bottom margin of checkbox's label when in an item -$checkbox-item-label-margin-bottom: 10px !default; \ No newline at end of file +$checkbox-item-label-margin-bottom: 10px; \ No newline at end of file diff --git a/core/src/components/col/col.vars.scss b/core/src/components/col/col.vars.scss index ca89b021cc..2ce79d1bd6 100644 --- a/core/src/components/col/col.vars.scss +++ b/core/src/components/col/col.vars.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- /// @prop - The padding for the grid column -$grid-column-padding: var(--ion-grid-column-padding, 5px) !default; +$grid-column-padding: var(--ion-grid-column-padding, 5px); /// @prop - The padding for the column at different breakpoints $grid-column-paddings: ( @@ -14,4 +14,4 @@ $grid-column-paddings: ( md: var(--ion-grid-column-padding-md, $grid-column-padding), lg: var(--ion-grid-column-padding-lg, $grid-column-padding), xl: var(--ion-grid-column-padding-xl, $grid-column-padding) -) !default; +); diff --git a/core/src/components/datetime/datetime.ios.vars.scss b/core/src/components/datetime/datetime.ios.vars.scss index 4cb8ad9db1..de2698b3b2 100644 --- a/core/src/components/datetime/datetime.ios.vars.scss +++ b/core/src/components/datetime/datetime.ios.vars.scss @@ -2,16 +2,16 @@ // -------------------------------------------------- /// @prop - Border color for dividers between header and footer -$datetime-ios-border-color: 0.55px solid $background-color-step-200 !default; +$datetime-ios-border-color: 0.55px solid $background-color-step-200; /// @prop - Padding for content -$datetime-ios-padding: 16px !default; +$datetime-ios-padding: 16px; /// @prop - The font size at which layouts may change to accommodate Dynamic Type -$datetime-dynamic-font-breakpoint: 24px !default; +$datetime-dynamic-font-breakpoint: 24px; /// @prop - Width of the calendar day -$datetime-ios-day-width: 40px !default; +$datetime-ios-day-width: 40px; /// @prop - Height of the calendar day -$datetime-ios-day-height: $datetime-ios-day-width !default; +$datetime-ios-day-height: $datetime-ios-day-width; diff --git a/core/src/components/datetime/datetime.md.vars.scss b/core/src/components/datetime/datetime.md.vars.scss index c35c405232..9a925d6521 100644 --- a/core/src/components/datetime/datetime.md.vars.scss +++ b/core/src/components/datetime/datetime.md.vars.scss @@ -2,22 +2,22 @@ // -------------------------------------------------- /// @prop - Font size for title in header -$datetime-md-title-font-size: dynamic-font(12px) !default; +$datetime-md-title-font-size: dynamic-font(12px); /// @prop - Font size for selected date in header -$datetime-md-selected-date-font-size: dynamic-font(34px) !default; +$datetime-md-selected-date-font-size: dynamic-font(34px); /// @prop - Font size for calendar day button -$datetime-md-calendar-item-font-size: dynamic-font(14px) !default; +$datetime-md-calendar-item-font-size: dynamic-font(14px); /// @prop - Padding for content in header -$datetime-md-header-padding: 20px !default; +$datetime-md-header-padding: 20px; /// @prop - Padding for content -$datetime-md-padding: 16px !default; +$datetime-md-padding: 16px; /// @prop - Width of the calendar day -$datetime-md-day-width: 42px !default; +$datetime-md-day-width: 42px; /// @prop - Height of the calendar day -$datetime-md-day-height: $datetime-md-day-width !default; +$datetime-md-day-height: $datetime-md-day-width; diff --git a/core/src/components/fab-button/fab-button.ios.vars.scss b/core/src/components/fab-button/fab-button.ios.vars.scss index 1d1faa392a..95f2227106 100755 --- a/core/src/components/fab-button/fab-button.ios.vars.scss +++ b/core/src/components/fab-button/fab-button.ios.vars.scss @@ -4,58 +4,58 @@ // -------------------------------------------------- /// @prop - Box shadow of the FAB button -$fab-ios-box-shadow: 0 4px 16px rgba(0, 0, 0, .12) !default; +$fab-ios-box-shadow: 0 4px 16px rgba(0, 0, 0, .12); /// @prop - Box shadow of the activated FAB button -$fab-ios-box-shadow-activated: $fab-ios-box-shadow !default; +$fab-ios-box-shadow-activated: $fab-ios-box-shadow; /// @prop - Transform of the FAB button -$fab-ios-transform: scale(1.1) !default; +$fab-ios-transform: scale(1.1); /// @prop - Transition of the FAB button -$fab-ios-transition: .2s transform cubic-bezier(.25, 1.11, .78, 1.59) !default; +$fab-ios-transition: .2s transform cubic-bezier(.25, 1.11, .78, 1.59); /// @prop - Transition of the activated FAB button -$fab-ios-transition-activated: .2s transform ease-out !default; +$fab-ios-transition-activated: .2s transform ease-out; /// @prop - Background color of the button -$fab-ios-background-color: ion-color(primary, base) !default; +$fab-ios-background-color: ion-color(primary, base); /// @prop - Background color of the activated button -$fab-ios-background-color-activated: ion-color(primary, shade) !default; +$fab-ios-background-color-activated: ion-color(primary, shade); /// @prop - Text color of the button -$fab-ios-text-color: ion-color(primary, contrast) !default; +$fab-ios-text-color: ion-color(primary, contrast); /// @prop - Font size of the button icon -$fab-ios-icon-font-size: 28px !default; +$fab-ios-icon-font-size: 28px; /// @prop - Background color of the button in a list -$fab-ios-list-button-background-color: ion-color(light, base) !default; +$fab-ios-list-button-background-color: ion-color(light, base); /// @prop - Background color of the activated button in a list -$fab-ios-list-button-background-color-activated: ion-color(light, shade) !default; +$fab-ios-list-button-background-color-activated: ion-color(light, shade); /// @prop - Background color of the hovered button in a list -$fab-ios-list-button-background-color-hover: ion-color(light, tint) !default; +$fab-ios-list-button-background-color-hover: ion-color(light, tint); /// @prop - Text color of the button in a list -$fab-ios-list-button-text-color: ion-color(light, contrast) !default; +$fab-ios-list-button-text-color: ion-color(light, contrast); /// @prop - Font size of the button icon in a list -$fab-ios-list-button-icon-font-size: 18px !default; +$fab-ios-list-button-icon-font-size: 18px; // Translucent FAB Button // -------------------------------------------------- /// @prop - Backdrop filter of the translucent button -$fab-ios-translucent-filter: saturate(180%) blur(20px) !default; +$fab-ios-translucent-filter: saturate(180%) blur(20px); /// @prop - Alpha level of the translucent button background -$fab-ios-translucent-background-alpha: .9 !default; +$fab-ios-translucent-background-alpha: .9; /// @prop - Alpha level of the translucent button background on hover -$fab-ios-translucent-background-alpha-hover: .8 !default; +$fab-ios-translucent-background-alpha-hover: .8; /// @prop - Alpha level of the translucent button background on focus -$fab-ios-translucent-background-alpha-focused: .82 !default; +$fab-ios-translucent-background-alpha-focused: .82; diff --git a/core/src/components/fab-button/fab-button.md.vars.scss b/core/src/components/fab-button/fab-button.md.vars.scss index edd4f572a0..e4b8139c42 100755 --- a/core/src/components/fab-button/fab-button.md.vars.scss +++ b/core/src/components/fab-button/fab-button.md.vars.scss @@ -4,31 +4,31 @@ // -------------------------------------------------- /// @prop - Box shadow of the FAB button -$fab-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12) !default; +$fab-md-box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12); /// @prop - Box shadow of the activated FAB button -$fab-md-box-shadow-activated: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12) !default; +$fab-md-box-shadow-activated: 0 7px 8px -4px rgba(0, 0, 0, .2), 0 12px 17px 2px rgba(0, 0, 0, .14), 0 5px 22px 4px rgba(0, 0, 0, .12); /// @prop - Background color of the button -$fab-md-background-color: ion-color(primary, base) !default; +$fab-md-background-color: ion-color(primary, base); /// @prop - Text color of the button -$fab-md-text-color: ion-color(primary, contrast) !default; +$fab-md-text-color: ion-color(primary, contrast); /// @prop - Font size of the button icon -$fab-md-icon-font-size: 24px !default; +$fab-md-icon-font-size: 24px; /// @prop - Background color of the button in a list -$fab-md-list-button-background-color: ion-color(light, base) !default; +$fab-md-list-button-background-color: ion-color(light, base); /// @prop - Background color of the activated button in a list -$fab-md-list-button-background-color-activated: ion-color(light, shade) !default; +$fab-md-list-button-background-color-activated: ion-color(light, shade); /// @prop - Background color of the activated button in a list -$fab-md-list-button-background-color-hover: ion-color(light, tint) !default; +$fab-md-list-button-background-color-hover: ion-color(light, tint); /// @prop - Text color of the button in a list -$fab-md-list-button-text-color: rgba($text-color-rgb, 0.54) !default; +$fab-md-list-button-text-color: rgba($text-color-rgb, 0.54); /// @prop - Font size of the button icon in a list -$fab-md-list-button-icon-font-size: 18px !default; +$fab-md-list-button-icon-font-size: 18px; diff --git a/core/src/components/fab-button/fab-button.vars.scss b/core/src/components/fab-button/fab-button.vars.scss index 2556fec9b3..490cd33ca3 100755 --- a/core/src/components/fab-button/fab-button.vars.scss +++ b/core/src/components/fab-button/fab-button.vars.scss @@ -4,13 +4,13 @@ // -------------------------------------------------- /// @prop - Width and height of the FAB button -$fab-size: 56px !default; +$fab-size: 56px; /// @prop - Width and height of the mini FAB button -$fab-small-size: 40px !default; +$fab-small-size: 40px; /// @prop - Border radius of the FAB button -$fab-border-radius: 50% !default; +$fab-border-radius: 50%; /// @prop - Margin applied to the small FAB button -$fab-button-small-margin: 8px !default; +$fab-button-small-margin: 8px; diff --git a/core/src/components/fab-list/fab-list.vars.scss b/core/src/components/fab-list/fab-list.vars.scss index eed9c736fa..f62dc416d1 100644 --- a/core/src/components/fab-list/fab-list.vars.scss +++ b/core/src/components/fab-list/fab-list.vars.scss @@ -5,4 +5,4 @@ // -------------------------------------------------- /// @prop - Margin of the FAB List -$fab-list-margin: 10px !default; +$fab-list-margin: 10px; diff --git a/core/src/components/fab/fab.vars.scss b/core/src/components/fab/fab.vars.scss index 13e2a09493..05bb309515 100644 --- a/core/src/components/fab/fab.vars.scss +++ b/core/src/components/fab/fab.vars.scss @@ -5,4 +5,4 @@ // -------------------------------------------------- /// @prop - Margin of the FAB Container -$fab-content-margin: 10px !default; +$fab-content-margin: 10px; diff --git a/core/src/components/footer/footer.ios.vars.scss b/core/src/components/footer/footer.ios.vars.scss index bb1311cdcd..20fdd8f32e 100644 --- a/core/src/components/footer/footer.ios.vars.scss +++ b/core/src/components/footer/footer.ios.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Filter of the translucent footer -$footer-ios-translucent-filter: saturate(180%) blur(20px) !default; +$footer-ios-translucent-filter: saturate(180%) blur(20px); diff --git a/core/src/components/footer/footer.md.vars.scss b/core/src/components/footer/footer.md.vars.scss index 38d8bd63a0..00ab78ccfc 100644 --- a/core/src/components/footer/footer.md.vars.scss +++ b/core/src/components/footer/footer.md.vars.scss @@ -5,4 +5,4 @@ /// @Prop - Box shadow of the footer $footer-md-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), - 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default; + 0 1px 10px 0 rgba(0, 0, 0, 0.12); diff --git a/core/src/components/grid/grid.vars.scss b/core/src/components/grid/grid.vars.scss index bdfd69bc9c..a6a6f4808b 100644 --- a/core/src/components/grid/grid.vars.scss +++ b/core/src/components/grid/grid.vars.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- /// @prop - The padding for the grid -$grid-padding: var(--ion-grid-padding, 5px) !default; +$grid-padding: var(--ion-grid-padding, 5px); /// @prop - The padding for the grid at different breakpoints $grid-paddings: ( @@ -14,7 +14,7 @@ $grid-paddings: ( md: var(--ion-grid-padding-md, $grid-padding), lg: var(--ion-grid-padding-lg, $grid-padding), xl: var(--ion-grid-padding-xl, $grid-padding) -) !default; +); /// @prop - Width of the grid for different screen sizes when fixed is enabled $grid-widths: ( @@ -23,4 +23,4 @@ $grid-widths: ( md: var(--ion-grid-width-md, var(--ion-grid-width, 720px)), lg: var(--ion-grid-width-lg, var(--ion-grid-width, 960px)), xl: var(--ion-grid-width-xl, var(--ion-grid-width, 1140px)) -) !default; +); diff --git a/core/src/components/header/header.ios.vars.scss b/core/src/components/header/header.ios.vars.scss index a4e8272d6f..078b483cf9 100644 --- a/core/src/components/header/header.ios.vars.scss +++ b/core/src/components/header/header.ios.vars.scss @@ -7,4 +7,4 @@ $header-ios-blur: 20px; /// @prop - Filter of the translucent header -$header-ios-translucent-filter: saturate(180%) blur($header-ios-blur) !default; +$header-ios-translucent-filter: saturate(180%) blur($header-ios-blur); diff --git a/core/src/components/header/header.md.vars.scss b/core/src/components/header/header.md.vars.scss index a99c36f93f..5d4f7c05d0 100644 --- a/core/src/components/header/header.md.vars.scss +++ b/core/src/components/header/header.md.vars.scss @@ -5,4 +5,4 @@ /// @Prop - Box shadow of the header $header-md-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), - 0 1px 10px 0 rgba(0, 0, 0, 0.12) !default; + 0 1px 10px 0 rgba(0, 0, 0, 0.12); diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss index 35c84a8776..bad6ee59c7 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Color of the infinite scroll loading indicator -$infinite-scroll-ios-loading-color: $text-color-step-400 !default; +$infinite-scroll-ios-loading-color: $text-color-step-400; /// @prop - Color of the infinite scroll loading indicator text -$infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color !default; +$infinite-scroll-ios-loading-text-color: $infinite-scroll-ios-loading-color; diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss index fb1b0d18ee..eea3d5b633 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Color of the infinite scroll loading indicator -$infinite-scroll-md-loading-color: $text-color-step-400 !default; +$infinite-scroll-md-loading-color: $text-color-step-400; /// @prop - Color of the infinite scroll loading indicator text -$infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color !default; +$infinite-scroll-md-loading-text-color: $infinite-scroll-md-loading-color; diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.vars.scss b/core/src/components/infinite-scroll-content/infinite-scroll-content.vars.scss index 8fdd8d5775..6fbd23ab34 100644 --- a/core/src/components/infinite-scroll-content/infinite-scroll-content.vars.scss +++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.vars.scss @@ -4,28 +4,28 @@ // -------------------------------------------------- /// @prop - Minimum height of the infinite scroll content -$infinite-scroll-content-min-height: 84px !default; +$infinite-scroll-content-min-height: 84px; /// @prop - Margin top of the infinite scroll loading icon -$infinite-scroll-loading-margin-top: 0 !default; +$infinite-scroll-loading-margin-top: 0; /// @prop - Margin end of the infinite scroll loading icon -$infinite-scroll-loading-margin-end: 0 !default; +$infinite-scroll-loading-margin-end: 0; /// @prop - Margin bottom of the infinite scroll loading icon -$infinite-scroll-loading-margin-bottom: 32px !default; +$infinite-scroll-loading-margin-bottom: 32px; /// @prop - Margin start of the infinite scroll loading icon -$infinite-scroll-loading-margin-start: $infinite-scroll-loading-margin-end !default; +$infinite-scroll-loading-margin-start: $infinite-scroll-loading-margin-end; /// @prop - Margin top of the infinite scroll loading text -$infinite-scroll-loading-text-margin-top: 4px !default; +$infinite-scroll-loading-text-margin-top: 4px; /// @prop - Margin end of the infinite scroll loading text -$infinite-scroll-loading-text-margin-end: 32px !default; +$infinite-scroll-loading-text-margin-end: 32px; /// @prop - Margin bottom of the infinite scroll loading text -$infinite-scroll-loading-text-margin-bottom: 0 !default; +$infinite-scroll-loading-text-margin-bottom: 0; /// @prop - Margin start of the infinite scroll loading text -$infinite-scroll-loading-text-margin-start: $infinite-scroll-loading-text-margin-end !default; +$infinite-scroll-loading-text-margin-start: $infinite-scroll-loading-text-margin-end; diff --git a/core/src/components/input/input.ios.vars.scss b/core/src/components/input/input.ios.vars.scss index 238d9cd427..5135181612 100644 --- a/core/src/components/input/input.ios.vars.scss +++ b/core/src/components/input/input.ios.vars.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- /// @prop - Font size of the input -$input-ios-font-size: inherit !default; +$input-ios-font-size: inherit; /// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled input -$input-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; +$input-ios-disabled-opacity: $form-control-ios-disabled-opacity; diff --git a/core/src/components/input/input.md.vars.scss b/core/src/components/input/input.md.vars.scss index 952bc390ff..6d2c164928 100644 --- a/core/src/components/input/input.md.vars.scss +++ b/core/src/components/input/input.md.vars.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- /// @prop - Font size of the input -$input-md-font-size: inherit !default; +$input-md-font-size: inherit; /// @prop - The amount of whitespace to display on either side of the floating label -$input-md-floating-label-padding: 4px !default; +$input-md-floating-label-padding: 4px; /// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled input -$input-md-disabled-opacity: $form-control-md-disabled-opacity !default; +$input-md-disabled-opacity: $form-control-md-disabled-opacity; diff --git a/core/src/components/item-divider/item-divider.ios.vars.scss b/core/src/components/item-divider/item-divider.ios.vars.scss index 73de9f08fc..b8c2b5020c 100644 --- a/core/src/components/item-divider/item-divider.ios.vars.scss +++ b/core/src/components/item-divider/item-divider.ios.vars.scss @@ -5,22 +5,22 @@ // -------------------------------------------------- /// @prop - Minimum height for the divider -$item-divider-ios-min-height: 28px !default; +$item-divider-ios-min-height: 28px; /// @prop - Font size of the item -$item-divider-ios-font-size: dynamic-font(17px) !default; +$item-divider-ios-font-size: dynamic-font(17px); /// @prop - Font weight of the item -$item-divider-ios-font-weight: 600 !default; +$item-divider-ios-font-weight: 600; /// @prop - Background for the divider -$item-divider-ios-background: $background-color-step-100 !default; +$item-divider-ios-background: $background-color-step-100; /// @prop - Color for the divider -$item-divider-ios-color: $text-color-step-150 !default; +$item-divider-ios-color: $text-color-step-150; /// @prop - Padding start for the divider -$item-divider-ios-padding-start: $item-ios-padding-start !default; +$item-divider-ios-padding-start: $item-ios-padding-start; /// @prop - Padding end for the divider -$item-divider-ios-padding-end: $item-ios-padding-end !default; +$item-divider-ios-padding-end: $item-ios-padding-end; diff --git a/core/src/components/item-divider/item-divider.md.vars.scss b/core/src/components/item-divider/item-divider.md.vars.scss index f817b80b45..3688b88ea6 100644 --- a/core/src/components/item-divider/item-divider.md.vars.scss +++ b/core/src/components/item-divider/item-divider.md.vars.scss @@ -5,22 +5,22 @@ // -------------------------------------------------- /// @prop - Minimum height for the divider -$item-divider-md-min-height: 30px !default; +$item-divider-md-min-height: 30px; /// @prop - Color for the divider -$item-divider-md-color: $text-color-step-600 !default; +$item-divider-md-color: $text-color-step-600; /// @prop - Background for the divider -$item-divider-md-background: $background-color !default; +$item-divider-md-background: $background-color; /// @prop - Font size for the divider -$item-divider-md-font-size: 14px !default; +$item-divider-md-font-size: 14px; /// @prop - Border bottom for the divider -$item-divider-md-border-bottom: 1px solid $item-md-border-color !default; +$item-divider-md-border-bottom: 1px solid $item-md-border-color; /// @prop - Padding start for the divider -$item-divider-md-padding-start: $item-md-padding-start !default; +$item-divider-md-padding-start: $item-md-padding-start; /// @prop - Padding end for the divider -$item-divider-md-padding-end: $item-md-padding-end !default; +$item-divider-md-padding-end: $item-md-padding-end; diff --git a/core/src/components/item-option/item-option.ios.vars.scss b/core/src/components/item-option/item-option.ios.vars.scss index 5c63226dc4..80b53ff0bf 100644 --- a/core/src/components/item-option/item-option.ios.vars.scss +++ b/core/src/components/item-option/item-option.ios.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Font size of the item option button -$item-option-button-ios-font-size: dynamic-font-clamp(1, 16px, 2.2) !default; +$item-option-button-ios-font-size: dynamic-font-clamp(1, 16px, 2.2); diff --git a/core/src/components/item-option/item-option.md.vars.scss b/core/src/components/item-option/item-option.md.vars.scss index 3e27b73ccf..c8c6f91512 100644 --- a/core/src/components/item-option/item-option.md.vars.scss +++ b/core/src/components/item-option/item-option.md.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Font size of the sliding option button -$item-option-button-md-font-size: dynamic-font(14px) !default; +$item-option-button-md-font-size: dynamic-font(14px); diff --git a/core/src/components/item/item.ios.vars.scss b/core/src/components/item/item.ios.vars.scss index 4ebbb24f0a..0823827d89 100644 --- a/core/src/components/item/item.ios.vars.scss +++ b/core/src/components/item/item.ios.vars.scss @@ -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; diff --git a/core/src/components/item/item.md.vars.scss b/core/src/components/item/item.md.vars.scss index d16d30300d..fd9087067a 100644 --- a/core/src/components/item/item.md.vars.scss +++ b/core/src/components/item/item.md.vars.scss @@ -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; diff --git a/core/src/components/label/label.ios.vars.scss b/core/src/components/label/label.ios.vars.scss index 4c277c0860..8007a715df 100644 --- a/core/src/components/label/label.ios.vars.scss +++ b/core/src/components/label/label.ios.vars.scss @@ -5,13 +5,13 @@ // -------------------------------------------------- /// @prop - Text color of the stacked/floating label when it is focused -$label-ios-text-color-focused: null !default; +$label-ios-text-color-focused: null; /// @prop - Font size of the label when the text wraps -$label-ios-text-wrap-font-size: dynamic-font(14px) !default; +$label-ios-text-wrap-font-size: dynamic-font(14px); /// @prop - Line height of the label when the text wraps -$label-ios-text-wrap-line-height: 1.5 !default; +$label-ios-text-wrap-line-height: 1.5; /// @prop - Color of the item paragraph -$item-ios-paragraph-text-color: $text-color-step-600 !default; +$item-ios-paragraph-text-color: $text-color-step-600; diff --git a/core/src/components/label/label.md.vars.scss b/core/src/components/label/label.md.vars.scss index ed785732a8..00136e716a 100644 --- a/core/src/components/label/label.md.vars.scss +++ b/core/src/components/label/label.md.vars.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- /// @prop - Text color of the stacked/floating label when it is focused -$label-md-text-color-focused: ion-color(primary, base) !default; +$label-md-text-color-focused: ion-color(primary, base); /// @prop - Line height of the label when the text wraps -$label-md-text-wrap-line-height: 1.5 !default; +$label-md-text-wrap-line-height: 1.5; /// @prop - Transition timing function of the label (stacked / focused) -$label-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default; +$label-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1); diff --git a/core/src/components/list-header/list-header.ios.vars.scss b/core/src/components/list-header/list-header.ios.vars.scss index f15afb19b5..313f8ec5ac 100644 --- a/core/src/components/list-header/list-header.ios.vars.scss +++ b/core/src/components/list-header/list-header.ios.vars.scss @@ -5,19 +5,19 @@ // -------------------------------------------------- /// @prop - Padding start of the list header -$list-header-ios-padding-start: $item-ios-padding-start !default; +$list-header-ios-padding-start: $item-ios-padding-start; /// @prop - Font size of the list header -$list-header-ios-font-size: dynamic-font-max(22px, 2.55) !default; +$list-header-ios-font-size: dynamic-font-max(22px, 2.55); /// @prop - Font weight of the list header -$list-header-ios-font-weight: 700 !default; +$list-header-ios-font-weight: 700; /// @prop - Letter spacing of the list header -$list-header-ios-letter-spacing: 0 !default; +$list-header-ios-letter-spacing: 0; /// @prop - Text color of the list header -$list-header-ios-color: $text-color-step-150 !default; +$list-header-ios-color: $text-color-step-150; /// @prop - Background color of the list header -$list-header-ios-background-color: transparent !default; +$list-header-ios-background-color: transparent; diff --git a/core/src/components/list-header/list-header.md.vars.scss b/core/src/components/list-header/list-header.md.vars.scss index 400d02ba82..2768b924c3 100644 --- a/core/src/components/list-header/list-header.md.vars.scss +++ b/core/src/components/list-header/list-header.md.vars.scss @@ -5,13 +5,13 @@ // -------------------------------------------------- /// @prop - Padding start of the list header -$list-header-md-padding-start: $item-md-padding-start !default; +$list-header-md-padding-start: $item-md-padding-start; /// @prop - Minimum height of the list header -$list-header-md-min-height: 45px !default; +$list-header-md-min-height: 45px; /// @prop - Font size of the list header -$list-header-md-font-size: dynamic-font(14px) !default; +$list-header-md-font-size: dynamic-font(14px); /// @prop - Text color of the list header -$list-header-md-color: $text-color !default; +$list-header-md-color: $text-color; diff --git a/core/src/components/list/list.ios.vars.scss b/core/src/components/list/list.ios.vars.scss index 423d6aac6a..bc1a04f0c3 100644 --- a/core/src/components/list/list.ios.vars.scss +++ b/core/src/components/list/list.ios.vars.scss @@ -5,31 +5,31 @@ // -------------------------------------------------- /// @prop - Margin top of the list -$list-ios-margin-top: null !default; +$list-ios-margin-top: null; /// @prop - Margin end of the list -$list-ios-margin-end: null !default; +$list-ios-margin-end: null; /// @prop - Margin bottom of the list -$list-ios-margin-bottom: null !default; +$list-ios-margin-bottom: null; /// @prop - Margin start of the list -$list-ios-margin-start: null !default; +$list-ios-margin-start: null; /// @prop - Border bottom of the item in a list -$list-ios-item-border-bottom-width: $item-ios-border-bottom-width !default; +$list-ios-item-border-bottom-width: $item-ios-border-bottom-width; /// @prop - Margin top of the inset list -$list-inset-ios-margin-top: 16px !default; +$list-inset-ios-margin-top: 16px; /// @prop - Margin end of the inset list -$list-inset-ios-margin-end: 16px !default; +$list-inset-ios-margin-end: 16px; /// @prop - Margin bottom of the inset list -$list-inset-ios-margin-bottom: 16px !default; +$list-inset-ios-margin-bottom: 16px; /// @prop - Margin start of the inset list -$list-inset-ios-margin-start: 16px !default; +$list-inset-ios-margin-start: 16px; /// @prop - Border radius of the inset list -$list-inset-ios-border-radius: 10px !default; +$list-inset-ios-border-radius: 10px; diff --git a/core/src/components/list/list.md.vars.scss b/core/src/components/list/list.md.vars.scss index dd9ff16e6b..2a219aa797 100644 --- a/core/src/components/list/list.md.vars.scss +++ b/core/src/components/list/list.md.vars.scss @@ -5,43 +5,43 @@ // -------------------------------------------------- /// @prop - Margin top of the list -$list-md-margin-top: 0 !default; +$list-md-margin-top: 0; /// @prop - Margin end of the list -$list-md-margin-end: 0 !default; +$list-md-margin-end: 0; /// @prop - Margin bottom of the list -$list-md-margin-bottom: 0 !default; +$list-md-margin-bottom: 0; /// @prop - Margin start of the list -$list-md-margin-start: 0 !default; +$list-md-margin-start: 0; /// @prop - Padding top of the list -$list-md-padding-top: 8px !default; +$list-md-padding-top: 8px; /// @prop - Padding end of the list -$list-md-padding-end: 0 !default; +$list-md-padding-end: 0; /// @prop - Padding bottom of the list -$list-md-padding-bottom: 8px !default; +$list-md-padding-bottom: 8px; /// @prop - Padding start of the list -$list-md-padding-start: 0 !default; +$list-md-padding-start: 0; /// @prop - Border bottom of the item in a list -$list-md-item-border-bottom-width: $item-md-border-bottom-width !default; +$list-md-item-border-bottom-width: $item-md-border-bottom-width; /// @prop - Margin top of the inset list -$list-inset-md-margin-top: 16px !default; +$list-inset-md-margin-top: 16px; /// @prop - Margin end of the inset list -$list-inset-md-margin-end: 16px !default; +$list-inset-md-margin-end: 16px; /// @prop - Margin bottom of the inset list -$list-inset-md-margin-bottom: 16px !default; +$list-inset-md-margin-bottom: 16px; /// @prop - Margin start of the inset list -$list-inset-md-margin-start: 16px !default; +$list-inset-md-margin-start: 16px; /// @prop - Border radius of the inset list -$list-inset-md-border-radius: 2px !default; +$list-inset-md-border-radius: 2px; diff --git a/core/src/components/loading/loading.ios.vars.scss b/core/src/components/loading/loading.ios.vars.scss index 92d1946bc2..5e8df7c4d4 100644 --- a/core/src/components/loading/loading.ios.vars.scss +++ b/core/src/components/loading/loading.ios.vars.scss @@ -4,46 +4,46 @@ // -------------------------------------------------- /// @prop - Font size of the loading wrapper -$loading-ios-font-size: dynamic-font(14px) !default; +$loading-ios-font-size: dynamic-font(14px); /// @prop - Padding top of the loading wrapper -$loading-ios-padding-top: 24px !default; +$loading-ios-padding-top: 24px; /// @prop - Padding end of the loading wrapper -$loading-ios-padding-end: 34px !default; +$loading-ios-padding-end: 34px; /// @prop - Padding bottom of the loading wrapper -$loading-ios-padding-bottom: $loading-ios-padding-top !default; +$loading-ios-padding-bottom: $loading-ios-padding-top; /// @prop - Padding start of the loading wrapper -$loading-ios-padding-start: $loading-ios-padding-end !default; +$loading-ios-padding-start: $loading-ios-padding-end; /// @prop - Max width of the loading wrapper -$loading-ios-max-width: 270px !default; +$loading-ios-max-width: 270px; /// @prop - Maximum height of the loading wrapper -$loading-ios-max-height: 90% !default; +$loading-ios-max-height: 90%; /// @prop - Border radius of the loading wrapper -$loading-ios-border-radius: 8px !default; +$loading-ios-border-radius: 8px; /// @prop - Text color of the loading wrapper -$loading-ios-text-color: $text-color !default; +$loading-ios-text-color: $text-color; /// @prop - Background of the loading wrapper -$loading-ios-background-color: $overlay-ios-background-color !default; +$loading-ios-background-color: $overlay-ios-background-color; /// @prop - Background color alpha of the translucent loading wrapper -$loading-ios-translucent-background-color-alpha: .8 !default; +$loading-ios-translucent-background-color-alpha: .8; /// @prop - Background color of the translucent loading wrapper -$loading-ios-translucent-background-color: rgba($background-color-rgb, $loading-ios-translucent-background-color-alpha) !default; +$loading-ios-translucent-background-color: rgba($background-color-rgb, $loading-ios-translucent-background-color-alpha); /// @prop - Font weight of the loading content -$loading-ios-content-font-weight: bold !default; +$loading-ios-content-font-weight: bold; /// @prop - Color of the loading spinner -$loading-ios-spinner-color: $text-color-step-400 !default; +$loading-ios-spinner-color: $text-color-step-400; /// @prop - Filter of the translucent loading -$loading-ios-translucent-filter: saturate(180%) blur(20px) !default; +$loading-ios-translucent-filter: saturate(180%) blur(20px); diff --git a/core/src/components/loading/loading.md.vars.scss b/core/src/components/loading/loading.md.vars.scss index ec8611debe..af11c750f3 100644 --- a/core/src/components/loading/loading.md.vars.scss +++ b/core/src/components/loading/loading.md.vars.scss @@ -4,40 +4,40 @@ // -------------------------------------------------- /// @prop - Font size of the loading wrapper -$loading-md-font-size: dynamic-font(14px) !default; +$loading-md-font-size: dynamic-font(14px); /// @prop - Padding top of the loading wrapper -$loading-md-padding-top: 24px !default; +$loading-md-padding-top: 24px; /// @prop - Padding end of the loading wrapper -$loading-md-padding-end: $loading-md-padding-top !default; +$loading-md-padding-end: $loading-md-padding-top; /// @prop - Padding bottom of the loading wrapper -$loading-md-padding-bottom: $loading-md-padding-top !default; +$loading-md-padding-bottom: $loading-md-padding-top; /// @prop - Padding start of the loading wrapper -$loading-md-padding-start: $loading-md-padding-end !default; +$loading-md-padding-start: $loading-md-padding-end; /// @prop - Max width of the loading wrapper -$loading-md-max-width: 280px !default; +$loading-md-max-width: 280px; /// @prop - Maximum height of the loading wrapper -$loading-md-max-height: 90% !default; +$loading-md-max-height: 90%; /// @prop - Border radius of the loading wrapper -$loading-md-border-radius: 2px !default; +$loading-md-border-radius: 2px; /// @prop - Text color of the loading wrapper -$loading-md-text-color: $text-color-step-150 !default; +$loading-md-text-color: $text-color-step-150; /// @prop - Background of the loading wrapper -$loading-md-background: $background-color-step-50 !default; +$loading-md-background: $background-color-step-50; /// @prop - Box shadow color of the loading wrapper -$loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default; +$loading-md-box-shadow-color: rgba(0, 0, 0, .4); /// @prop - Box shadow of the loading wrapper -$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color !default; +$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color; /// @prop - Color of the loading spinner -$loading-md-spinner-color: ion-color(primary, base) !default; +$loading-md-spinner-color: ion-color(primary, base); diff --git a/core/src/components/menu/menu.ios.vars.scss b/core/src/components/menu/menu.ios.vars.scss index c2936ddff7..4b4ce895bc 100644 --- a/core/src/components/menu/menu.ios.vars.scss +++ b/core/src/components/menu/menu.ios.vars.scss @@ -4,22 +4,22 @@ // -------------------------------------------------- /// @prop - Box shadow color of the menu -$menu-ios-box-shadow-color: rgba(0, 0, 0, .08) !default; +$menu-ios-box-shadow-color: rgba(0, 0, 0, .08); /// @prop - Box shadow of the menu -$menu-ios-box-shadow: -8px 0 42px $menu-ios-box-shadow-color !default; +$menu-ios-box-shadow: -8px 0 42px $menu-ios-box-shadow-color; /// @prop - Box shadow of the menu in rtl mode -$menu-ios-box-shadow-rtl: 8px 0 42px $menu-ios-box-shadow-color !default; +$menu-ios-box-shadow-rtl: 8px 0 42px $menu-ios-box-shadow-color; /// @prop - Box shadow of the reveal menu -$menu-ios-box-shadow-reveal: $menu-ios-box-shadow !default; +$menu-ios-box-shadow-reveal: $menu-ios-box-shadow; /// @prop - Box shadow of the reveal menu -$menu-ios-box-shadow-reveal-rtl: $menu-ios-box-shadow-rtl !default; +$menu-ios-box-shadow-reveal-rtl: $menu-ios-box-shadow-rtl; /// @prop - Box shadow of the push menu -$menu-ios-box-shadow-push: null !default; +$menu-ios-box-shadow-push: null; /// @prop - Box shadow of the overlay menu -$menu-ios-box-shadow-overlay: null !default; +$menu-ios-box-shadow-overlay: null; diff --git a/core/src/components/menu/menu.md.vars.scss b/core/src/components/menu/menu.md.vars.scss index 6acf939cce..d47b011739 100644 --- a/core/src/components/menu/menu.md.vars.scss +++ b/core/src/components/menu/menu.md.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Box shadow of the menu -$menu-md-box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18) !default; +$menu-md-box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18); diff --git a/core/src/components/menu/menu.vars.scss b/core/src/components/menu/menu.vars.scss index 236417c136..a42a96d548 100644 --- a/core/src/components/menu/menu.vars.scss +++ b/core/src/components/menu/menu.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Width of the menu -$menu-width: 304px !default; +$menu-width: 304px; /// @prop - Width of the menu on small devices (under 340px) -$menu-small-width: $menu-width - 40px !default; +$menu-small-width: $menu-width - 40px; diff --git a/core/src/components/modal/modal.ios.vars.scss b/core/src/components/modal/modal.ios.vars.scss index 664aefd331..d82de67f79 100644 --- a/core/src/components/modal/modal.ios.vars.scss +++ b/core/src/components/modal/modal.ios.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Border radius for the modal -$modal-ios-border-radius: 10px !default; +$modal-ios-border-radius: 10px; diff --git a/core/src/components/modal/modal.md.vars.scss b/core/src/components/modal/modal.md.vars.scss index bf77d69a7e..37aa47cb53 100644 --- a/core/src/components/modal/modal.md.vars.scss +++ b/core/src/components/modal/modal.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Box shadow color of the alert -$modal-inset-box-shadow-color: rgba(0, 0, 0, .4) !default; +$modal-inset-box-shadow-color: rgba(0, 0, 0, .4); /// @prop - Box shadow of the alert -$modal-inset-box-shadow: 0 28px 48px $modal-inset-box-shadow-color !default; +$modal-inset-box-shadow: 0 28px 48px $modal-inset-box-shadow-color; diff --git a/core/src/components/modal/modal.vars.scss b/core/src/components/modal/modal.vars.scss index f881168971..724de22a0c 100644 --- a/core/src/components/modal/modal.vars.scss +++ b/core/src/components/modal/modal.vars.scss @@ -4,22 +4,22 @@ // -------------------------------------------------- /// @prop - Min width of the modal inset -$modal-inset-min-width: 768px !default; +$modal-inset-min-width: 768px; /// @prop - Minimum height of the small modal inset -$modal-inset-min-height-small: 600px !default; +$modal-inset-min-height-small: 600px; /// @prop - Minimum height of the large modal inset -$modal-inset-min-height-large: 768px !default; +$modal-inset-min-height-large: 768px; /// @prop - Width of the large modal inset -$modal-inset-width: 600px !default; +$modal-inset-width: 600px; /// @prop - Height of the small modal inset -$modal-inset-height-small: 500px !default; +$modal-inset-height-small: 500px; /// @prop - Height of the large modal inset -$modal-inset-height-large: 600px !default; +$modal-inset-height-large: 600px; /// @prop - Text color of the modal content -$modal-text-color: $text-color !default; +$modal-text-color: $text-color; diff --git a/core/src/components/note/note.ios.vars.scss b/core/src/components/note/note.ios.vars.scss index b452c16e41..e9674e23a0 100644 --- a/core/src/components/note/note.ios.vars.scss +++ b/core/src/components/note/note.ios.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Text color of the note -$note-ios-color: $text-color-step-650 !default; +$note-ios-color: $text-color-step-650; /// @prop - Font size of the note -$note-ios-font-size: dynamic-font-min(0.875, 16px) !default; +$note-ios-font-size: dynamic-font-min(0.875, 16px); diff --git a/core/src/components/note/note.md.vars.scss b/core/src/components/note/note.md.vars.scss index f08f55ef91..ab634d4620 100644 --- a/core/src/components/note/note.md.vars.scss +++ b/core/src/components/note/note.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Text color of the note -$note-md-color: $text-color-step-400 !default; +$note-md-color: $text-color-step-400; /// @prop - Font size of the note -$note-md-font-size: dynamic-font(14px) !default; +$note-md-font-size: dynamic-font(14px); diff --git a/core/src/components/picker-legacy/picker.ios.vars.scss b/core/src/components/picker-legacy/picker.ios.vars.scss index 6bb3e14e06..3009a441fb 100644 --- a/core/src/components/picker-legacy/picker.ios.vars.scss +++ b/core/src/components/picker-legacy/picker.ios.vars.scss @@ -4,85 +4,85 @@ // -------------------------------------------------- /// @prop - Height of the picker wrapper -$picker-ios-height: 260px !default; +$picker-ios-height: 260px; /// @prop - Border color of the picker wrapper -$picker-ios-border-color: $item-ios-border-color !default; +$picker-ios-border-color: $item-ios-border-color; /// @prop - Background Color of the picker wrapper -$picker-ios-background-color: $background-color !default; +$picker-ios-background-color: $background-color; /// @prop - Top Background Color of the picker wrapper gradient -$picker-ios-top-background-color: var(--background, $picker-ios-background-color) !default; +$picker-ios-top-background-color: var(--background, $picker-ios-background-color); /// @prop - Bottom Background Color alpha of the picker wrapper gradient -$picker-ios-bottom-background-color-alpha: .8 !default; +$picker-ios-bottom-background-color-alpha: .8; /// @prop - Bottom Background Color of the picker wrapper gradient -$picker-ios-bottom-background-color: rgba(var(--background-rgb, $background-color-rgb), $picker-ios-bottom-background-color-alpha) !default; +$picker-ios-bottom-background-color: rgba(var(--background-rgb, $background-color-rgb), $picker-ios-bottom-background-color-alpha); /// @prop - Height of the picker toolbar -$picker-ios-toolbar-height: 44px !default; +$picker-ios-toolbar-height: 44px; /// @prop - Height of the picker button -$picker-ios-button-height: $picker-ios-toolbar-height !default; +$picker-ios-button-height: $picker-ios-toolbar-height; /// @prop - Text color of the picker button -$picker-ios-button-text-color: ion-color(primary, base) !default; +$picker-ios-button-text-color: ion-color(primary, base); /// @prop - Font size of the picker button -$picker-ios-button-font-size: 16px !default; +$picker-ios-button-font-size: 16px; /// @prop - Padding top of the picker button -$picker-ios-button-padding-top: 0 !default; +$picker-ios-button-padding-top: 0; /// @prop - Padding end of the picker button -$picker-ios-button-padding-end: 1em !default; +$picker-ios-button-padding-end: 1em; /// @prop - Padding bottom of the picker button -$picker-ios-button-padding-bottom: $picker-ios-button-padding-top !default; +$picker-ios-button-padding-bottom: $picker-ios-button-padding-top; /// @prop - Padding start of the picker button -$picker-ios-button-padding-start: $picker-ios-button-padding-end !default; +$picker-ios-button-padding-start: $picker-ios-button-padding-end; /// @prop - Font weight of the strong picker button -$picker-ios-button-strong-font-weight: 600 !default; +$picker-ios-button-strong-font-weight: 600; /// @prop - Padding top of the picker column -$picker-ios-column-padding-top: 0 !default; +$picker-ios-column-padding-top: 0; /// @prop - Padding end of the picker column -$picker-ios-column-padding-end: 4px !default; +$picker-ios-column-padding-end: 4px; /// @prop - Padding bottom of the picker column -$picker-ios-column-padding-bottom: $picker-ios-column-padding-top !default; +$picker-ios-column-padding-bottom: $picker-ios-column-padding-top; /// @prop - Padding start of the picker column -$picker-ios-column-padding-start: $picker-ios-column-padding-end !default; +$picker-ios-column-padding-start: $picker-ios-column-padding-end; /// @prop - Perspective of the picker column -$picker-ios-column-perspective: 1000px !default; +$picker-ios-column-perspective: 1000px; /// @prop - Padding top of the picker option -$picker-ios-option-padding-top: 0 !default; +$picker-ios-option-padding-top: 0; /// @prop - Padding end of the picker option -$picker-ios-option-padding-end: $picker-ios-option-padding-top !default; +$picker-ios-option-padding-end: $picker-ios-option-padding-top; /// @prop - Padding bottom of the picker option -$picker-ios-option-padding-bottom: $picker-ios-option-padding-top !default; +$picker-ios-option-padding-bottom: $picker-ios-option-padding-top; /// @prop - Padding start of the picker option -$picker-ios-option-padding-start: $picker-ios-option-padding-end !default; +$picker-ios-option-padding-start: $picker-ios-option-padding-end; /// @prop - Text color of the picker option -$picker-ios-option-text-color: $item-ios-color !default; +$picker-ios-option-text-color: $item-ios-color; /// @prop - Font size of the picker option -$picker-ios-option-font-size: 20px !default; +$picker-ios-option-font-size: 20px; /// @prop - Height of the picker option -$picker-ios-option-height: 42px !default; +$picker-ios-option-height: 42px; /// @prop - Offset y of the picker option -$picker-ios-option-offset-y: (($picker-ios-height - $picker-ios-toolbar-height) * 0.5) - ($picker-ios-option-height * 0.5) - 10 !default; +$picker-ios-option-offset-y: (($picker-ios-height - $picker-ios-toolbar-height) * 0.5) - ($picker-ios-option-height * 0.5) - 10; diff --git a/core/src/components/picker-legacy/picker.md.vars.scss b/core/src/components/picker-legacy/picker.md.vars.scss index d2f8675beb..10d9b50da6 100644 --- a/core/src/components/picker-legacy/picker.md.vars.scss +++ b/core/src/components/picker-legacy/picker.md.vars.scss @@ -4,73 +4,73 @@ // -------------------------------------------------- /// @prop - Height of the picker wrapper -$picker-md-height: 260px !default; +$picker-md-height: 260px; /// @prop - Border color of the picker wrapper -$picker-md-border-color: $item-md-border-color !default; +$picker-md-border-color: $item-md-border-color; /// @prop - Background Color of the picker wrapper -$picker-md-background-color: $background-color !default; +$picker-md-background-color: $background-color; /// @prop - Top Background Color of the picker wrapper gradient -$picker-md-top-background-color: $picker-md-background-color !default; +$picker-md-top-background-color: $picker-md-background-color; /// @prop - Bottom Background Color alpha of the picker wrapper gradient -$picker-md-bottom-background-color-alpha: .8 !default; +$picker-md-bottom-background-color-alpha: .8; /// @prop - Bottom Background Color of the picker wrapper gradient -$picker-md-bottom-background-color: rgba($background-color-rgb, $picker-md-bottom-background-color-alpha) !default; +$picker-md-bottom-background-color: rgba($background-color-rgb, $picker-md-bottom-background-color-alpha); /// @prop - Height of the picker toolbar -$picker-md-toolbar-height: 44px !default; +$picker-md-toolbar-height: 44px; /// @prop - Height of the picker button -$picker-md-button-height: $picker-md-toolbar-height !default; +$picker-md-button-height: $picker-md-toolbar-height; /// @prop - Text color of the picker button -$picker-md-button-text-color: ion-color(primary, base) !default; +$picker-md-button-text-color: ion-color(primary, base); /// @prop - Background of the picker button -$picker-md-button-background-color: transparent !default; +$picker-md-button-background-color: transparent; /// @prop - Font size of the picker button -$picker-md-button-font-size: 14px !default; +$picker-md-button-font-size: 14px; /// @prop - Padding top of the picker column -$picker-md-column-padding-top: 0 !default; +$picker-md-column-padding-top: 0; /// @prop - Padding end of the picker column -$picker-md-column-padding-end: 8px !default; +$picker-md-column-padding-end: 8px; /// @prop - Padding bottom of the picker column -$picker-md-column-padding-bottom: $picker-md-column-padding-top !default; +$picker-md-column-padding-bottom: $picker-md-column-padding-top; /// @prop - Padding start of the picker column -$picker-md-column-padding-start: $picker-md-column-padding-end !default; +$picker-md-column-padding-start: $picker-md-column-padding-end; /// @prop - Padding top of the picker option -$picker-md-option-padding-top: 0 !default; +$picker-md-option-padding-top: 0; /// @prop - Padding end of the picker option -$picker-md-option-padding-end: $picker-md-option-padding-top !default; +$picker-md-option-padding-end: $picker-md-option-padding-top; /// @prop - Padding bottom of the picker option -$picker-md-option-padding-bottom: $picker-md-option-padding-top !default; +$picker-md-option-padding-bottom: $picker-md-option-padding-top; /// @prop - Padding start of the picker option -$picker-md-option-padding-start: $picker-md-option-padding-end !default; +$picker-md-option-padding-start: $picker-md-option-padding-end; /// @prop - Text color of the picker option -$picker-md-option-text-color: $item-md-color !default; +$picker-md-option-text-color: $item-md-color; /// @prop - Font size of the picker option -$picker-md-option-font-size: 22px !default; +$picker-md-option-font-size: 22px; /// @prop - Height of the picker option -$picker-md-option-height: 42px !default; +$picker-md-option-height: 42px; /// @prop - Offset y of the picker option -$picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) * 0.5) - ($picker-md-option-height * 0.5) - 10 !default; +$picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) * 0.5) - ($picker-md-option-height * 0.5) - 10; /// @prop - Text color of the selected picker option -$picker-md-option-selected-color: ion-color(primary, base) !default; +$picker-md-option-selected-color: ion-color(primary, base); diff --git a/core/src/components/picker-legacy/picker.vars.scss b/core/src/components/picker-legacy/picker.vars.scss index 31a7ffd2b8..24421b72b4 100644 --- a/core/src/components/picker-legacy/picker.vars.scss +++ b/core/src/components/picker-legacy/picker.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Width of the picker -$picker-width: 100% !default; +$picker-width: 100%; /// @prop - Max width of the picker -$picker-max-width: 500px !default; +$picker-max-width: 500px; diff --git a/core/src/components/popover/popover.ios.vars.scss b/core/src/components/popover/popover.ios.vars.scss index c5f9cbe8f4..bf803b5d76 100644 --- a/core/src/components/popover/popover.ios.vars.scss +++ b/core/src/components/popover/popover.ios.vars.scss @@ -4,25 +4,25 @@ // -------------------------------------------------- /// @prop - Width of the popover content -$popover-ios-width: 200px !default; +$popover-ios-width: 200px; /// @prop - Maximum height of the popover content -$popover-ios-max-height: 90% !default; +$popover-ios-max-height: 90%; /// @prop - Border radius of the popover content -$popover-ios-border-radius: 10px !default; +$popover-ios-border-radius: 10px; /// @prop - Background color alpha of the popover content -$popover-ios-translucent-background-color-alpha: .8 !default; +$popover-ios-translucent-background-color-alpha: .8; /// @prop - Background color of the popover content -$popover-ios-translucent-background-color: rgba($background-color-rgb, $popover-ios-translucent-background-color-alpha) !default; +$popover-ios-translucent-background-color: rgba($background-color-rgb, $popover-ios-translucent-background-color-alpha); /// @prop - Filter of the translucent popover -$popover-ios-translucent-filter: saturate(180%) blur(20px) !default; +$popover-ios-translucent-filter: saturate(180%) blur(20px); /// $prop - Box shadow of popover on desktop -$popover-ios-desktop-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12) !default; +$popover-ios-desktop-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12); /// $prop - Border of popover content on desktop -$popover-ios-desktop-border: 0.5px solid $background-color-step-100 !default; +$popover-ios-desktop-border: 0.5px solid $background-color-step-100; diff --git a/core/src/components/popover/popover.md.vars.scss b/core/src/components/popover/popover.md.vars.scss index 4241aea4de..9eaf10c874 100644 --- a/core/src/components/popover/popover.md.vars.scss +++ b/core/src/components/popover/popover.md.vars.scss @@ -4,13 +4,13 @@ // -------------------------------------------------- /// @prop - Width of the popover content -$popover-md-width: 250px !default; +$popover-md-width: 250px; /// @prop - Maximum height of the popover content -$popover-md-max-height: 90% !default; +$popover-md-max-height: 90%; /// @prop - Border radius of the popover content -$popover-md-border-radius: 4px !default; +$popover-md-border-radius: 4px; /// @prop - Box shadow of the popover content -$popover-md-box-shadow: 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; +$popover-md-box-shadow: 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); diff --git a/core/src/components/popover/popover.vars.scss b/core/src/components/popover/popover.vars.scss index 2ce9fdc7ba..3b8f52bb85 100644 --- a/core/src/components/popover/popover.vars.scss +++ b/core/src/components/popover/popover.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Text color of the popover content -$popover-text-color: $text-color !default; +$popover-text-color: $text-color; /// @prop - Background color of the popover content -$popover-background-color: $background-color !default; \ No newline at end of file +$popover-background-color: $background-color; \ No newline at end of file diff --git a/core/src/components/progress-bar/progress-bar.ios.vars.scss b/core/src/components/progress-bar/progress-bar.ios.vars.scss index f38bba637c..ff83c57d2e 100644 --- a/core/src/components/progress-bar/progress-bar.ios.vars.scss +++ b/core/src/components/progress-bar/progress-bar.ios.vars.scss @@ -2,7 +2,7 @@ // -------------------------------------------------- /// @prop - Height of the progress bar -$progress-bar-ios-height: 4px !default; +$progress-bar-ios-height: 4px; /// @prop - Border radius of the progress bar container -$progress-bar-ios-border-radius: 9999px !default; +$progress-bar-ios-border-radius: 9999px; diff --git a/core/src/components/progress-bar/progress-bar.md.vars.scss b/core/src/components/progress-bar/progress-bar.md.vars.scss index feb8de2bb0..0ff0af1f4a 100644 --- a/core/src/components/progress-bar/progress-bar.md.vars.scss +++ b/core/src/components/progress-bar/progress-bar.md.vars.scss @@ -2,4 +2,4 @@ // -------------------------------------------------- /// @prop - Height of the progress bar -$progress-bar-md-height: 4px !default; +$progress-bar-md-height: 4px; diff --git a/core/src/components/radio/radio.ios.vars.scss b/core/src/components/radio/radio.ios.vars.scss index 459e96dd15..2c97112643 100644 --- a/core/src/components/radio/radio.ios.vars.scss +++ b/core/src/components/radio/radio.ios.vars.scss @@ -5,19 +5,19 @@ // -------------------------------------------------- /// @prop - Background color of focus indicator for radio when focused -$radio-ios-background-color-focused: ion-color(primary, tint) !default; +$radio-ios-background-color-focused: ion-color(primary, tint); /// @prop - Width of the radio icon -$radio-ios-icon-width: dynamic-font(15px) !default; +$radio-ios-icon-width: dynamic-font(15px); /// @prop - Height of the radio icon -$radio-ios-icon-height: dynamic-font(24px) !default; +$radio-ios-icon-height: dynamic-font(24px); /// @prop - Border width of the radio icon -$radio-ios-icon-border-width: dynamic-font(2px) !default; +$radio-ios-icon-border-width: dynamic-font(2px); /// @prop - Border style of the radio icon -$radio-ios-icon-border-style: solid !default; +$radio-ios-icon-border-style: solid; /// @prop - Opacity of the disabled radio -$radio-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; +$radio-ios-disabled-opacity: $form-control-ios-disabled-opacity; diff --git a/core/src/components/radio/radio.md.vars.scss b/core/src/components/radio/radio.md.vars.scss index 1dfa6c780f..99dca7c1c5 100644 --- a/core/src/components/radio/radio.md.vars.scss +++ b/core/src/components/radio/radio.md.vars.scss @@ -5,37 +5,37 @@ // -------------------------------------------------- /// @prop - Color of the checked radio -$radio-md-color-on: current-color(base) !default; +$radio-md-color-on: current-color(base); /// @prop - Background color of focus indicator for radio when focused -$radio-md-background-color-focused: ion-color(primary, tint) !default; +$radio-md-background-color-focused: ion-color(primary, tint); /// @prop - Color of the unchecked radio -$radio-md-color-off: rgb($text-color-rgb, 0.60) !default; +$radio-md-color-off: rgb($text-color-rgb, 0.60); /// @prop - Width of the radio icon -$radio-md-icon-width: dynamic-font(20px) !default; +$radio-md-icon-width: dynamic-font(20px); /// @prop - Height of the radio icon -$radio-md-icon-height: dynamic-font(20px) !default; +$radio-md-icon-height: dynamic-font(20px); /// @prop - Border width of the radio icon -$radio-md-icon-border-width: dynamic-font(2px) !default; +$radio-md-icon-border-width: dynamic-font(2px); /// @prop - Border style of the radio icon -$radio-md-icon-border-style: solid !default; +$radio-md-icon-border-style: solid; /// @prop - Border radius of the radio icon -$radio-md-icon-border-radius: 50% !default; +$radio-md-icon-border-radius: 50%; /// @prop - Transition duration of the radio -$radio-md-transition-duration: 280ms !default; +$radio-md-transition-duration: 280ms; /// @prop - Transition easing of the radio -$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; +$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1); /// @prop - Opacity of the disabled radio label -$radio-md-disabled-opacity: $form-control-md-disabled-opacity !default; +$radio-md-disabled-opacity: $form-control-md-disabled-opacity; /// @prop - Opacity of the disabled radio /// This value is used because the radio color is set to @@ -44,4 +44,4 @@ $radio-md-disabled-opacity: $form-control-md-disabled-opacity !default; /// opacity is applied on top of the transparent color so /// this opacity gets us the equivalent of applying `0.38` /// on top of an opaque radio `rgb(0, 0, 0, 1.0)` -$radio-md-icon-disabled-opacity: 0.63 !default; +$radio-md-icon-disabled-opacity: 0.63; diff --git a/core/src/components/radio/radio.vars.scss b/core/src/components/radio/radio.vars.scss index 76dbfaf79f..b578bb6996 100644 --- a/core/src/components/radio/radio.vars.scss +++ b/core/src/components/radio/radio.vars.scss @@ -1,5 +1,5 @@ /// @prop - Top margin of radio's label when in an item -$radio-item-label-margin-top: 10px !default; +$radio-item-label-margin-top: 10px; /// @prop - Bottom margin of radio's label when in an item -$radio-item-label-margin-bottom: 10px !default; \ No newline at end of file +$radio-item-label-margin-bottom: 10px; \ No newline at end of file diff --git a/core/src/components/range/range.ios.vars.scss b/core/src/components/range/range.ios.vars.scss index b51ed489e9..465b2434c5 100644 --- a/core/src/components/range/range.ios.vars.scss +++ b/core/src/components/range/range.ios.vars.scss @@ -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; diff --git a/core/src/components/range/range.md.vars.scss b/core/src/components/range/range.md.vars.scss index c5c0293c8c..39b5a6ad72 100644 --- a/core/src/components/range/range.md.vars.scss +++ b/core/src/components/range/range.md.vars.scss @@ -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; diff --git a/core/src/components/range/range.vars.scss b/core/src/components/range/range.vars.scss index 69c46f7e9f..de30b4f9c0 100644 --- a/core/src/components/range/range.vars.scss +++ b/core/src/components/range/range.vars.scss @@ -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; diff --git a/core/src/components/refresher/refresher.ios.vars.scss b/core/src/components/refresher/refresher.ios.vars.scss index bc4dc4ed9c..bf806d5096 100644 --- a/core/src/components/refresher/refresher.ios.vars.scss +++ b/core/src/components/refresher/refresher.ios.vars.scss @@ -1,16 +1,16 @@ @import "../../themes/ionic.globals.ios"; /// @prop - Color of the refresher icon -$refresher-ios-icon-color: $text-color !default; +$refresher-ios-icon-color: $text-color; /// @prop - Text color of the refresher content -$refresher-ios-text-color: $text-color !default; +$refresher-ios-text-color: $text-color; /// @prop - Color of the native refresher spinner -$refresher-ios-native-spinner-color: var(--ion-color-step-450, var(--ion-background-color-step-450, #747577)) !default; +$refresher-ios-native-spinner-color: var(--ion-color-step-450, var(--ion-background-color-step-450, #747577)); /// @prop - Width of the native refresher spinner -$refresher-ios-native-spinner-width: 32px !default; +$refresher-ios-native-spinner-width: 32px; /// @prop - Height of the native refresher spinner -$refresher-ios-native-spinner-height: 32px !default; +$refresher-ios-native-spinner-height: 32px; diff --git a/core/src/components/refresher/refresher.md.vars.scss b/core/src/components/refresher/refresher.md.vars.scss index 3e893b0ce8..bb18595820 100644 --- a/core/src/components/refresher/refresher.md.vars.scss +++ b/core/src/components/refresher/refresher.md.vars.scss @@ -1,19 +1,19 @@ @import "../../themes/ionic.globals.md"; /// @prop - Color of the refresher icon -$refresher-md-icon-color: $text-color !default; +$refresher-md-icon-color: $text-color; /// @prop - Text color of the refresher content -$refresher-md-text-color: $text-color !default; +$refresher-md-text-color: $text-color; /// @prop - Color of the native refresher spinner -$refresher-md-native-spinner-color: #{ion-color(primary, base)} !default; +$refresher-md-native-spinner-color: #{ion-color(primary, base)}; /// @prop - Border of the native refresher spinner -$refresher-md-native-spinner-border: 1px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #ececec)) !default; +$refresher-md-native-spinner-border: 1px solid var(--ion-color-step-200, var(--ion-background-color-step-200, #ececec)); /// @prop - Background of the native refresher spinner -$refresher-md-native-spinner-background: var(--ion-color-step-250, var(--ion-background-color-step-250, #ffffff)) !default; +$refresher-md-native-spinner-background: var(--ion-color-step-250, var(--ion-background-color-step-250, #ffffff)); /// @prop - Box shadow of the native refresher spinner -$refresher-md-native-spinner-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1) !default; +$refresher-md-native-spinner-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1); diff --git a/core/src/components/refresher/refresher.vars.scss b/core/src/components/refresher/refresher.vars.scss index 2f74eeb767..2c8af2b51d 100644 --- a/core/src/components/refresher/refresher.vars.scss +++ b/core/src/components/refresher/refresher.vars.scss @@ -2,10 +2,10 @@ // -------------------------------------------------- /// @prop - Height of the refresher -$refresher-height: 60px !default; +$refresher-height: 60px; /// @prop - Font size of the refresher icon -$refresher-icon-font-size: 30px !default; +$refresher-icon-font-size: 30px; /// @prop - Font size of the refresher content -$refresher-text-font-size: 16px !default; +$refresher-text-font-size: 16px; diff --git a/core/src/components/reorder/reorder.ios.vars.scss b/core/src/components/reorder/reorder.ios.vars.scss index 723f9324d7..abbbcd6c9a 100644 --- a/core/src/components/reorder/reorder.ios.vars.scss +++ b/core/src/components/reorder/reorder.ios.vars.scss @@ -4,8 +4,8 @@ // -------------------------------------------------- /// @prop - Font size of the reorder icon -$reorder-ios-icon-font-size: dynamic-font(34px) !default; +$reorder-ios-icon-font-size: dynamic-font(34px); /// @prop - Opacity of the reorder icon -$reorder-ios-icon-opacity: .4 !default; +$reorder-ios-icon-opacity: .4; diff --git a/core/src/components/reorder/reorder.md.vars.scss b/core/src/components/reorder/reorder.md.vars.scss index ebf7214b28..7f9f7a5079 100644 --- a/core/src/components/reorder/reorder.md.vars.scss +++ b/core/src/components/reorder/reorder.md.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Font size of the reorder icon -$reorder-md-icon-font-size: dynamic-font(31px) !default; +$reorder-md-icon-font-size: dynamic-font(31px); /// @prop - Opacity of the reorder icon -$reorder-md-icon-opacity: .3 !default; +$reorder-md-icon-opacity: .3; diff --git a/core/src/components/searchbar/searchbar.ios.vars.scss b/core/src/components/searchbar/searchbar.ios.vars.scss index 0bdb096617..6a12287ed6 100644 --- a/core/src/components/searchbar/searchbar.ios.vars.scss +++ b/core/src/components/searchbar/searchbar.ios.vars.scss @@ -4,59 +4,59 @@ // -------------------------------------------------- /// @prop - Padding top of the searchbar -$searchbar-ios-padding-top: 12px !default; +$searchbar-ios-padding-top: 12px; /// @prop - Padding end of the searchbar -$searchbar-ios-padding-end: $searchbar-ios-padding-top !default; +$searchbar-ios-padding-end: $searchbar-ios-padding-top; /// @prop - Padding bottom of the searchbar -$searchbar-ios-padding-bottom: $searchbar-ios-padding-top !default; +$searchbar-ios-padding-bottom: $searchbar-ios-padding-top; /// @prop - Padding start of the searchbar -$searchbar-ios-padding-start: $searchbar-ios-padding-end !default; +$searchbar-ios-padding-start: $searchbar-ios-padding-end; /// @prop - Font size of the searchbar cancel button // The cancel button on iOS does not scale with Dynamic Type -$searchbar-ios-cancel-button-font-size: 17px !default; +$searchbar-ios-cancel-button-font-size: 17px; /// @prop - Color of the searchbar cancel button -$searchbar-ios-cancel-button-color: ion-color(primary, base) !default; +$searchbar-ios-cancel-button-color: ion-color(primary, base); /// @prop - Background color of the searchbar cancel button -$searchbar-ios-cancel-button-background-color: transparent !default; +$searchbar-ios-cancel-button-background-color: transparent; /// @prop - Size of the searchbar input search icon -$searchbar-ios-input-search-icon-size: dynamic-font(22px) !default; +$searchbar-ios-input-search-icon-size: dynamic-font(22px); /// @prop - Color of the searchbar input search icon -$searchbar-ios-input-search-icon-color: $text-color-step-400 !default; +$searchbar-ios-input-search-icon-color: $text-color-step-400; /// @prop - Minimum Height of the searchbar input -$searchbar-ios-input-min-height: 36px !default; +$searchbar-ios-input-min-height: 36px; /// @prop - Border radius of the searchbar input -$searchbar-ios-input-border-radius: 10px !default; +$searchbar-ios-input-border-radius: 10px; /// @prop - Color of the searchbar input text -$searchbar-ios-input-text-color: $text-color !default; +$searchbar-ios-input-text-color: $text-color; /// @prop - Background color alpha of the searchbar input -$searchbar-ios-input-background-color-alpha: .07 !default; +$searchbar-ios-input-background-color-alpha: .07; /// @prop - Background color of the searchbar input -$searchbar-ios-input-background-color: rgba($text-color-rgb, $searchbar-ios-input-background-color-alpha) !default; +$searchbar-ios-input-background-color: rgba($text-color-rgb, $searchbar-ios-input-background-color-alpha); /// @prop - Transition of the searchbar input -$searchbar-ios-input-transition: all 300ms ease !default; +$searchbar-ios-input-transition: all 300ms ease; /// @prop - Transition of the searchbar input cancel button -$searchbar-ios-cancel-transition: all 300ms ease !default; +$searchbar-ios-cancel-transition: all 300ms ease; /// @prop - Alpha of the searchbar input icons -$searchbar-ios-input-icon-opacity: .5 !default; +$searchbar-ios-input-icon-opacity: .5; /// @prop - Color of the searchbar input clear icon -$searchbar-ios-input-clear-icon-color: $text-color-step-400 !default; +$searchbar-ios-input-clear-icon-color: $text-color-step-400; /// @prop - Size of the searchbar input clear icon -$searchbar-ios-input-clear-icon-size: dynamic-font(18px) !default; +$searchbar-ios-input-clear-icon-size: dynamic-font(18px); diff --git a/core/src/components/searchbar/searchbar.md.vars.scss b/core/src/components/searchbar/searchbar.md.vars.scss index 0af1072dc2..2f4051a0f8 100644 --- a/core/src/components/searchbar/searchbar.md.vars.scss +++ b/core/src/components/searchbar/searchbar.md.vars.scss @@ -4,52 +4,52 @@ // -------------------------------------------------- /// @prop - Padding top of the searchbar -$searchbar-md-padding-top: 8px !default; +$searchbar-md-padding-top: 8px; /// @prop - Padding end of the searchbar -$searchbar-md-padding-end: $searchbar-md-padding-top !default; +$searchbar-md-padding-end: $searchbar-md-padding-top; /// @prop - Padding bottom of the searchbar -$searchbar-md-padding-bottom: $searchbar-md-padding-top !default; +$searchbar-md-padding-bottom: $searchbar-md-padding-top; /// @prop - Padding start of the searchbar -$searchbar-md-padding-start: $searchbar-md-padding-end !default; +$searchbar-md-padding-start: $searchbar-md-padding-end; /// @prop - Background of the searchbar -$searchbar-md-background: inherit !default; +$searchbar-md-background: inherit; /// @prop - Color of the searchbar cancel button -$searchbar-md-cancel-button-color: $text-color-step-100 !default; +$searchbar-md-cancel-button-color: $text-color-step-100; /// @prop - Background color of the searchbar cancel button -$searchbar-md-cancel-button-background-color: transparent !default; +$searchbar-md-cancel-button-background-color: transparent; /// @prop - Font size of the searchbar cancel button -$searchbar-md-cancel-button-font-size: 1.5em !default; +$searchbar-md-cancel-button-font-size: 1.5em; /// @prop - Color of the searchbar input search icon -$searchbar-md-input-search-icon-color: $text-color-step-400 !default; +$searchbar-md-input-search-icon-color: $text-color-step-400; /// @prop - Size of the searchbar input search icon -$searchbar-md-input-search-icon-size: dynamic-font(21px) !default; +$searchbar-md-input-search-icon-size: dynamic-font(21px); /// @prop - Height of the searchbar input -$searchbar-md-input-height: auto !default; +$searchbar-md-input-height: auto; /// @prop - Line height of the searchbar input -$searchbar-md-input-line-height: 30px !default; +$searchbar-md-input-line-height: 30px; /// @prop - Box shadow of the searchbar input -$searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default; +$searchbar-md-input-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); /// @prop - Color of the searchbar input text -$searchbar-md-input-text-color: $text-color-step-150 !default; +$searchbar-md-input-text-color: $text-color-step-150; /// @prop - Background of the searchbar input -$searchbar-md-input-background-color: $background-color !default; +$searchbar-md-input-background-color: $background-color; /// @prop - Border radius of the searchbar input -$searchbar-md-input-border-radius: 2px !default; +$searchbar-md-input-border-radius: 2px; /// @prop - Size of the searchbar input clear icon -$searchbar-md-input-clear-icon-size: dynamic-font(22px) !default; +$searchbar-md-input-clear-icon-size: dynamic-font(22px); diff --git a/core/src/components/segment-button/segment-button.ios.vars.scss b/core/src/components/segment-button/segment-button.ios.vars.scss index 77dce9d42d..6fb8a785b5 100644 --- a/core/src/components/segment-button/segment-button.ios.vars.scss +++ b/core/src/components/segment-button/segment-button.ios.vars.scss @@ -4,61 +4,61 @@ // -------------------------------------------------- /// @prop - Background of the segment button -$segment-button-ios-background: none !default; +$segment-button-ios-background: none; /// @prop - Background of the checked segment button -$segment-button-ios-background-checked: $segment-button-ios-background !default; +$segment-button-ios-background-checked: $segment-button-ios-background; /// @prop - Text color of the segment button -$segment-button-ios-color: $text-color !default; +$segment-button-ios-color: $text-color; /// @prop - Background of the checked segment button indicator -$segment-button-ios-indicator-color: var(--ion-color-step-350, var(--ion-background-color-step-350, $background-color)) !default; +$segment-button-ios-indicator-color: var(--ion-color-step-350, var(--ion-background-color-step-350, $background-color)); /// @prop - Margin of the segment button -$segment-button-ios-margin: 2px !default; +$segment-button-ios-margin: 2px; /// @prop - Opacity of the segment button on hover -$segment-button-ios-opacity-hover: .5 !default; +$segment-button-ios-opacity-hover: .5; /// @prop - Opacity of the segment button when focused -$segment-button-ios-opacity-focused: .7 !default; +$segment-button-ios-opacity-focused: .7; /// @prop - Opacity of the disabled segment button -$segment-button-ios-opacity-disabled: .3 !default; +$segment-button-ios-opacity-disabled: .3; /// @prop - Background of the segment button on hover -$segment-button-ios-background-hover: none !default; +$segment-button-ios-background-hover: none; /// @prop - Box shadow of the checked segment button -$segment-button-ios-box-shadow-checked: 0 0 5px rgba(0, 0, 0, 0.16) !default; +$segment-button-ios-box-shadow-checked: 0 0 5px rgba(0, 0, 0, 0.16); /// @prop - Border width of the segment button -$segment-button-ios-border-width: 1px !default; +$segment-button-ios-border-width: 1px; /// @prop - Border color of the segment button -$segment-button-ios-border-color: rgba($text-color-rgb, 0.12) !default; +$segment-button-ios-border-color: rgba($text-color-rgb, 0.12); /// @prop - Minimum width of the segment button -$segment-button-ios-min-width: 70px !default; +$segment-button-ios-min-width: 70px; /// @prop - Minimum height of the segment button -$segment-button-ios-min-height: 28px !default; +$segment-button-ios-min-height: 28px; /// @prop - Line height of the segment button -$segment-button-ios-line-height: 37px !default; +$segment-button-ios-line-height: 37px; /// @prop - Font size of the segment button -$segment-button-ios-font-size: 13px !default; +$segment-button-ios-font-size: 13px; /// @prop - Border radius of the segment button -$segment-button-ios-border-radius: 7px !default; +$segment-button-ios-border-radius: 7px; /// @prop - Size of an icon in the segment button -$segment-button-ios-icon-size: 24px !default; +$segment-button-ios-icon-size: 24px; /// @prop - Transition of the segment button -$segment-button-ios-transition: 100ms all linear !default; +$segment-button-ios-transition: 100ms all linear; /// @prop - Transition of the animated segment button -$segment-button-ios-transition-animated: transform 260ms cubic-bezier(0.4, 0, 0.2, 1) !default; +$segment-button-ios-transition-animated: transform 260ms cubic-bezier(0.4, 0, 0.2, 1); diff --git a/core/src/components/segment-button/segment-button.md.vars.scss b/core/src/components/segment-button/segment-button.md.vars.scss index 35ce67c163..8ba0e08248 100644 --- a/core/src/components/segment-button/segment-button.md.vars.scss +++ b/core/src/components/segment-button/segment-button.md.vars.scss @@ -4,61 +4,61 @@ // -------------------------------------------------- /// @prop - Opacity of the segment button -$segment-button-md-opacity: .6 !default; +$segment-button-md-opacity: .6; /// @prop - Text color of the segment button -$segment-button-md-text-color: rgba($text-color-rgb, $segment-button-md-opacity) !default; +$segment-button-md-text-color: rgba($text-color-rgb, $segment-button-md-opacity); /// @prop - Text color of the checked segment button -$segment-button-md-text-color-checked: ion-color(primary, base) !default; +$segment-button-md-text-color-checked: ion-color(primary, base); /// @prop - Background of the segment button -$segment-button-md-background: none !default; +$segment-button-md-background: none; /// @prop - Background of the checked segment button -$segment-button-md-background-checked: $segment-button-md-background !default; +$segment-button-md-background-checked: $segment-button-md-background; /// @prop - Opacity of the disabled segment button -$segment-button-md-opacity-disabled: .3 !default; +$segment-button-md-opacity-disabled: .3; /// @prop - Padding top of the segment button -$segment-button-md-padding-top: 0 !default; +$segment-button-md-padding-top: 0; /// @prop - Padding end of the segment button -$segment-button-md-padding-end: 16px !default; +$segment-button-md-padding-end: 16px; /// @prop - Padding bottom of the segment button -$segment-button-md-padding-bottom: $segment-button-md-padding-top !default; +$segment-button-md-padding-bottom: $segment-button-md-padding-top; /// @prop - Padding start of the segment button -$segment-button-md-padding-start: $segment-button-md-padding-end !default; +$segment-button-md-padding-start: $segment-button-md-padding-end; /// @prop - Minimum height of the segment button -$segment-button-md-min-height: 48px !default; +$segment-button-md-min-height: 48px; /// @prop - Minimum width of the segment button -$segment-button-md-min-width: 90px !default; +$segment-button-md-min-width: 90px; /// @prop - Maximum width of the segment button -$segment-button-md-max-width: 360px !default; +$segment-button-md-max-width: 360px; /// @prop - Line height of the segment button -$segment-button-md-line-height: 40px !default; +$segment-button-md-line-height: 40px; /// @prop - Font size of the segment button -$segment-button-md-font-size: 14px !default; +$segment-button-md-font-size: 14px; /// @prop - Letter spacing of the segment button -$segment-button-md-letter-spacing: .06em !default; +$segment-button-md-letter-spacing: .06em; /// @prop - Font weight of the segment button -$segment-button-md-font-weight: 500 !default; +$segment-button-md-font-weight: 500; /// @prop - Transition of the segment button -$segment-button-md-transition: color .15s linear 0s, opacity .15s linear 0s !default; +$segment-button-md-transition: color .15s linear 0s, opacity .15s linear 0s; /// @prop - Transition of the animated segment button -$segment-button-md-transition-animated: transform 250ms cubic-bezier(.4, 0, .2, 1) !default; +$segment-button-md-transition-animated: transform 250ms cubic-bezier(.4, 0, .2, 1); /// @prop - Size of an icon in the segment button -$segment-button-md-icon-size: 24px !default; +$segment-button-md-icon-size: 24px; diff --git a/core/src/components/segment/segment.ios.vars.scss b/core/src/components/segment/segment.ios.vars.scss index f7a9161644..1aa8e905dd 100644 --- a/core/src/components/segment/segment.ios.vars.scss +++ b/core/src/components/segment/segment.ios.vars.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- /// @prop - Alpha of the segment for use in the backgrounds -$segment-ios-background-alpha: 0.065 !default; +$segment-ios-background-alpha: 0.065; /// @prop - Background color of the segment -$segment-ios-background-color: rgba($text-color-rgb, $segment-ios-background-alpha) !default; +$segment-ios-background-color: rgba($text-color-rgb, $segment-ios-background-alpha); /// @prop - Border radius of the segment -$segment-ios-border-radius: 8px !default; +$segment-ios-border-radius: 8px; diff --git a/core/src/components/select/select.ios.vars.scss b/core/src/components/select/select.ios.vars.scss index 57677a8438..3dfd4b29a5 100644 --- a/core/src/components/select/select.ios.vars.scss +++ b/core/src/components/select/select.ios.vars.scss @@ -5,7 +5,7 @@ // -------------------------------------------------- /// @prop - Size of the select icon -$select-ios-icon-size: dynamic-font(18px) !default; +$select-ios-icon-size: dynamic-font(18px); /// @prop - Opacity of the disabled select -$select-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; +$select-ios-disabled-opacity: $form-control-ios-disabled-opacity; diff --git a/core/src/components/select/select.md.vars.scss b/core/src/components/select/select.md.vars.scss index a6125e618d..a8540da58a 100644 --- a/core/src/components/select/select.md.vars.scss +++ b/core/src/components/select/select.md.vars.scss @@ -5,9 +5,9 @@ // -------------------------------------------------- /// @prop - Size of the select icon -$select-md-icon-size: dynamic-font(13px) !default; +$select-md-icon-size: dynamic-font(13px); /// @prop - The amount of whitespace to display on either side of the floating label -$select-md-floating-label-padding: 4px !default; +$select-md-floating-label-padding: 4px; /// @prop - Opacity of the disabled select -$select-md-disabled-opacity: $form-control-md-disabled-opacity !default; +$select-md-disabled-opacity: $form-control-md-disabled-opacity; diff --git a/core/src/components/select/select.vars.scss b/core/src/components/select/select.vars.scss index ae137c052b..e296aacb4b 100644 --- a/core/src/components/select/select.vars.scss +++ b/core/src/components/select/select.vars.scss @@ -1,4 +1,4 @@ @import "../../themes/ionic.globals"; /// @prop - Margin start of the select icon -$select-icon-margin-start: 4px !default; +$select-icon-margin-start: 4px; diff --git a/core/src/components/skeleton-text/skeleton-text.vars.scss b/core/src/components/skeleton-text/skeleton-text.vars.scss index 3ebd68d936..713447e6ba 100644 --- a/core/src/components/skeleton-text/skeleton-text.vars.scss +++ b/core/src/components/skeleton-text/skeleton-text.vars.scss @@ -4,13 +4,13 @@ // -------------------------------------------------- /// @prop - Background color alpha of the skeleton text -$skeleton-text-background-alpha: .065 !default; +$skeleton-text-background-alpha: .065; /// @prop - Background color of the skeleton text -$skeleton-text-background: rgba(var(--background-rgb, $text-color-rgb), $skeleton-text-background-alpha) !default; +$skeleton-text-background: rgba(var(--background-rgb, $text-color-rgb), $skeleton-text-background-alpha); /// @prop - Background color alpha of the skeleton text animation -$skeleton-text-background-animated-alpha: .135 !default; +$skeleton-text-background-animated-alpha: .135; /// @prop - Background color of the skeleton text animation -$skeleton-text-background-animated: rgba(var(--background-rgb, $text-color-rgb), $skeleton-text-background-animated-alpha) !default; +$skeleton-text-background-animated: rgba(var(--background-rgb, $text-color-rgb), $skeleton-text-background-animated-alpha); diff --git a/core/src/components/split-pane/split-pane.ios.vars.scss b/core/src/components/split-pane/split-pane.ios.vars.scss index 67a968d9c5..ac37a55715 100644 --- a/core/src/components/split-pane/split-pane.ios.vars.scss +++ b/core/src/components/split-pane/split-pane.ios.vars.scss @@ -4,10 +4,10 @@ // -------------------------------------------------- /// @prop - Minimum width of the split pane's side pane -$split-pane-ios-side-min-width: $split-pane-side-min-width !default; +$split-pane-ios-side-min-width: $split-pane-side-min-width; /// @prop - Maximum width of the split pane's side pane -$split-pane-ios-side-max-width: $split-pane-side-max-width !default; +$split-pane-ios-side-max-width: $split-pane-side-max-width; /// @prop - Border style of the side pane -$split-pane-ios-border: $hairlines-width solid $item-ios-border-color !default; +$split-pane-ios-border: $hairlines-width solid $item-ios-border-color; diff --git a/core/src/components/split-pane/split-pane.md.vars.scss b/core/src/components/split-pane/split-pane.md.vars.scss index a600f620fa..3236ae58a2 100644 --- a/core/src/components/split-pane/split-pane.md.vars.scss +++ b/core/src/components/split-pane/split-pane.md.vars.scss @@ -4,10 +4,10 @@ // -------------------------------------------------- /// @prop - Minimum width of the split pane's side pane -$split-pane-md-side-min-width: $split-pane-side-min-width !default; +$split-pane-md-side-min-width: $split-pane-side-min-width; /// @prop - Maximum width of the split pane's side pane -$split-pane-md-side-max-width: $split-pane-side-max-width !default; +$split-pane-md-side-max-width: $split-pane-side-max-width; /// @prop - Border style of the side pane -$split-pane-md-border: 1px solid $item-md-border-color !default; +$split-pane-md-border: 1px solid $item-md-border-color; diff --git a/core/src/components/split-pane/split-pane.vars.scss b/core/src/components/split-pane/split-pane.vars.scss index e7df6a8a01..2dc7125d60 100644 --- a/core/src/components/split-pane/split-pane.vars.scss +++ b/core/src/components/split-pane/split-pane.vars.scss @@ -4,7 +4,7 @@ // -------------------------------------------------- /// @prop - Minimum width of the split pane's side pane -$split-pane-side-min-width: 270px !default; +$split-pane-side-min-width: 270px; /// @prop - Maximum width of the split pane's side pane -$split-pane-side-max-width: 28% !default; +$split-pane-side-max-width: 28%; diff --git a/core/src/components/tab-bar/tab-bar.ios.vars.scss b/core/src/components/tab-bar/tab-bar.ios.vars.scss index c4ba6aebcc..bbebcf63fa 100644 --- a/core/src/components/tab-bar/tab-bar.ios.vars.scss +++ b/core/src/components/tab-bar/tab-bar.ios.vars.scss @@ -5,10 +5,10 @@ // -------------------------------------------------- /// @prop - Alpha of translucent tab bar background color -$tab-bar-ios-translucent-background-color-alpha: .8 !default; +$tab-bar-ios-translucent-background-color-alpha: .8; /// @prop - Translucent tab bar background color -$tab-bar-ios-translucent-background-color: rgba($background-color-rgb, $tab-bar-ios-translucent-background-color-alpha) !default; +$tab-bar-ios-translucent-background-color: rgba($background-color-rgb, $tab-bar-ios-translucent-background-color-alpha); /// @prop - Filter of the translucent tab bar background color -$tab-bar-ios-translucent-filter: saturate(210%) blur(20px) !default; \ No newline at end of file +$tab-bar-ios-translucent-filter: saturate(210%) blur(20px); \ No newline at end of file diff --git a/core/src/components/tab-button/tab-button.ios.vars.scss b/core/src/components/tab-button/tab-button.ios.vars.scss index 37b844d73a..2fdeaa2d9d 100644 --- a/core/src/components/tab-button/tab-button.ios.vars.scss +++ b/core/src/components/tab-button/tab-button.ios.vars.scss @@ -4,28 +4,28 @@ // -------------------------------------------------- /// @prop - Padding top on the tab button -$tab-button-ios-padding-top: 0 !default; +$tab-button-ios-padding-top: 0; /// @prop - Padding end on the tab button -$tab-button-ios-padding-end: 2px !default; +$tab-button-ios-padding-end: 2px; /// @prop - Padding bottom on the tab button -$tab-button-ios-padding-bottom: $tab-button-ios-padding-top !default; +$tab-button-ios-padding-bottom: $tab-button-ios-padding-top; /// @prop - Padding start on the tab button -$tab-button-ios-padding-start: $tab-button-ios-padding-end !default; +$tab-button-ios-padding-start: $tab-button-ios-padding-end; /// @prop - Max width of the tab button -$tab-button-ios-max-width: 240px !default; +$tab-button-ios-max-width: 240px; /// @prop - Text color of the inactive tab button -$tab-button-ios-text-color: $tabbar-ios-color !default; +$tab-button-ios-text-color: $tabbar-ios-color; /// @prop - Font size of the tab button text -$tab-button-ios-font-size: 10px !default; +$tab-button-ios-font-size: 10px; /// @prop - Size of the tab button icon when there is a label -$tab-button-ios-icon-size: 24px !default; +$tab-button-ios-icon-size: 24px; /// @prop - Size of the tab button icon when there is not a label -$tab-button-ios-icon-only-size: 30px !default; +$tab-button-ios-icon-only-size: 30px; diff --git a/core/src/components/tab-button/tab-button.md.vars.scss b/core/src/components/tab-button/tab-button.md.vars.scss index ea005b4509..0eb681efd1 100644 --- a/core/src/components/tab-button/tab-button.md.vars.scss +++ b/core/src/components/tab-button/tab-button.md.vars.scss @@ -4,79 +4,79 @@ // -------------------------------------------------- /// @prop - Padding top on the tab button -$tab-button-md-padding-top: 0 !default; +$tab-button-md-padding-top: 0; /// @prop - Padding end on the tab button -$tab-button-md-padding-end: 12px !default; +$tab-button-md-padding-end: 12px; /// @prop - Padding bottom on the tab button -$tab-button-md-padding-bottom: 0 !default; +$tab-button-md-padding-bottom: 0; /// @prop - Padding start on the tab button -$tab-button-md-padding-start: 12px !default; +$tab-button-md-padding-start: 12px; /// @prop - Font size of the inactive tab button text -$tab-button-md-font-size: 12px !default; +$tab-button-md-font-size: 12px; /// @prop - Letter spacing of the tab button -$tab-button-md-letter-spacing: .03em !default; +$tab-button-md-letter-spacing: .03em; /// @prop - Font weight of the tab button text -$tab-button-md-font-weight: normal !default; +$tab-button-md-font-weight: normal; /// @prop - Text color of the inactive tab button -$tab-button-md-text-color: $tabbar-md-color !default; +$tab-button-md-text-color: $tabbar-md-color; /// @prop - Margin top on the tab button icon -$tab-button-md-icon-margin-top: 16px !default; +$tab-button-md-icon-margin-top: 16px; /// @prop - Margin end on the tab button icon -$tab-button-md-icon-margin-end: 0 !default; +$tab-button-md-icon-margin-end: 0; /// @prop - Margin bottom on the tab button icon -$tab-button-md-icon-margin-bottom: $tab-button-md-icon-margin-top !default; +$tab-button-md-icon-margin-bottom: $tab-button-md-icon-margin-top; /// @prop - Margin start on the tab button icon -$tab-button-md-icon-margin-start: $tab-button-md-icon-margin-end !default; +$tab-button-md-icon-margin-start: $tab-button-md-icon-margin-end; /// @prop - Margin top on the tab button text -$tab-button-md-text-margin-top: 2px !default; +$tab-button-md-text-margin-top: 2px; /// @prop - Margin end on the tab button text -$tab-button-md-text-margin-end: 0 !default; +$tab-button-md-text-margin-end: 0; /// @prop - Margin bottom on the tab button text -$tab-button-md-text-margin-bottom: $tab-button-md-text-margin-top !default; +$tab-button-md-text-margin-bottom: $tab-button-md-text-margin-top; /// @prop - Margin start on the tab button text -$tab-button-md-text-margin-start: $tab-button-md-text-margin-end !default; +$tab-button-md-text-margin-start: $tab-button-md-text-margin-end; /// @prop - Capitalization of the tab button text -$tab-button-md-text-capitalization: none !default; +$tab-button-md-text-capitalization: none; /// @prop - Size of the tab button icon -$tab-button-md-icon-size: 22px !default; +$tab-button-md-icon-size: 22px; /// @prop - Border radius on the tab button badge -$tab-button-md-badge-border-radius: 8px !default; +$tab-button-md-badge-border-radius: 8px; /// @prop - Padding top on the tab button badge -$tab-button-md-badge-padding-top: 3px !default; +$tab-button-md-badge-padding-top: 3px; /// @prop - Padding end on the tab button badge -$tab-button-md-badge-padding-end: 2px !default; +$tab-button-md-badge-padding-end: 2px; /// @prop - Padding bottom on the tab button badge -$tab-button-md-badge-padding-bottom: 2px !default; +$tab-button-md-badge-padding-bottom: 2px; /// @prop - Padding start on the tab button badge -$tab-button-md-badge-padding-start: 2px !default; +$tab-button-md-badge-padding-start: 2px; /// @prop - Minimum width of the tab button badge -$tab-button-md-badge-min-width: 12px !default; +$tab-button-md-badge-min-width: 12px; /// @prop - Font size of the tab button badge -$tab-button-md-badge-font-size: 8px !default; +$tab-button-md-badge-font-size: 8px; /// @prop - Size of the empty tab button badge -$tab-button-md-badge-size-empty: 8px !default; +$tab-button-md-badge-size-empty: 8px; diff --git a/core/src/components/textarea/textarea.ios.vars.scss b/core/src/components/textarea/textarea.ios.vars.scss index c6f807af1e..93f6d3da16 100644 --- a/core/src/components/textarea/textarea.ios.vars.scss +++ b/core/src/components/textarea/textarea.ios.vars.scss @@ -5,19 +5,19 @@ // -------------------------------------------------- /// @prop - Font size of the textarea -$textarea-ios-font-size: inherit !default; +$textarea-ios-font-size: inherit; /// @prop - Margin top of the textarea -$textarea-ios-padding-top: $item-ios-padding-top !default; +$textarea-ios-padding-top: $item-ios-padding-top; /// @prop - Margin end of the textarea -$textarea-ios-padding-end: ($item-ios-padding-end * 0.5) !default; +$textarea-ios-padding-end: ($item-ios-padding-end * 0.5); /// @prop - Margin bottom of the textarea -$textarea-ios-padding-bottom: $item-ios-padding-bottom !default; +$textarea-ios-padding-bottom: $item-ios-padding-bottom; /// @prop - Margin start of the textarea -$textarea-ios-padding-start: 0 !default; +$textarea-ios-padding-start: 0; /// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled textarea -$textarea-ios-disabled-opacity: $form-control-ios-disabled-opacity !default; +$textarea-ios-disabled-opacity: $form-control-ios-disabled-opacity; diff --git a/core/src/components/textarea/textarea.md.vars.scss b/core/src/components/textarea/textarea.md.vars.scss index 40a864039c..3bf7800d4d 100644 --- a/core/src/components/textarea/textarea.md.vars.scss +++ b/core/src/components/textarea/textarea.md.vars.scss @@ -5,22 +5,22 @@ // -------------------------------------------------- /// @prop - Font size of the textarea -$textarea-md-font-size: inherit !default; +$textarea-md-font-size: inherit; /// @prop - Margin top of the textarea -$textarea-md-padding-top: $item-md-padding-top !default; +$textarea-md-padding-top: $item-md-padding-top; /// @prop - Margin end of the textarea -$textarea-md-padding-end: 0 !default; +$textarea-md-padding-end: 0; /// @prop - Margin bottom of the textarea -$textarea-md-padding-bottom: $item-md-padding-bottom !default; +$textarea-md-padding-bottom: $item-md-padding-bottom; /// @prop - Margin start of the textarea -$textarea-md-padding-start: ($item-md-padding-start * 0.5) !default; +$textarea-md-padding-start: ($item-md-padding-start * 0.5); /// @prop - The amount of whitespace to display on either side of the floating label -$textarea-md-floating-label-padding: 4px !default; +$textarea-md-floating-label-padding: 4px; /// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled textarea -$textarea-md-disabled-opacity: $form-control-md-disabled-opacity !default; +$textarea-md-disabled-opacity: $form-control-md-disabled-opacity; diff --git a/core/src/components/textarea/textarea.vars.scss b/core/src/components/textarea/textarea.vars.scss index 1b20bb6ecd..be97dd64eb 100644 --- a/core/src/components/textarea/textarea.vars.scss +++ b/core/src/components/textarea/textarea.vars.scss @@ -2,4 +2,4 @@ /// @prop - The bottom padding of the textarea element. /// The value 8px is to add additional spacing for auto grow and scrollable textareas. -$textarea-padding-bottom: 8px !default; +$textarea-padding-bottom: 8px; diff --git a/core/src/components/toast/toast.ios.vars.scss b/core/src/components/toast/toast.ios.vars.scss index 60aa1c4a4c..12b037ee7c 100644 --- a/core/src/components/toast/toast.ios.vars.scss +++ b/core/src/components/toast/toast.ios.vars.scss @@ -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; diff --git a/core/src/components/toast/toast.md.vars.scss b/core/src/components/toast/toast.md.vars.scss index 158815aec6..67a0fbd6ce 100644 --- a/core/src/components/toast/toast.md.vars.scss +++ b/core/src/components/toast/toast.md.vars.scss @@ -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%; diff --git a/core/src/components/toast/toast.vars.scss b/core/src/components/toast/toast.vars.scss index 98d53a85d3..53048ac3c1 100644 --- a/core/src/components/toast/toast.vars.scss +++ b/core/src/components/toast/toast.vars.scss @@ -4,4 +4,4 @@ // -------------------------------------------------- /// @prop - Max width of the toast -$toast-max-width: 700px !default; +$toast-max-width: 700px; diff --git a/core/src/components/toggle/toggle.ios.vars.scss b/core/src/components/toggle/toggle.ios.vars.scss index e95847dd7b..65d955e769 100644 --- a/core/src/components/toggle/toggle.ios.vars.scss +++ b/core/src/components/toggle/toggle.ios.vars.scss @@ -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; diff --git a/core/src/components/toggle/toggle.md.vars.scss b/core/src/components/toggle/toggle.md.vars.scss index 7377082f00..63f9ef72c9 100644 --- a/core/src/components/toggle/toggle.md.vars.scss +++ b/core/src/components/toggle/toggle.md.vars.scss @@ -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; diff --git a/core/src/components/toggle/toggle.vars.scss b/core/src/components/toggle/toggle.vars.scss index 629eb5048b..4f0d34a764 100644 --- a/core/src/components/toggle/toggle.vars.scss +++ b/core/src/components/toggle/toggle.vars.scss @@ -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; \ No newline at end of file +$toggle-item-label-margin-bottom: 10px; \ No newline at end of file diff --git a/core/src/components/toolbar/toolbar.ios.vars.scss b/core/src/components/toolbar/toolbar.ios.vars.scss index 0648a2efe1..1b57622bde 100644 --- a/core/src/components/toolbar/toolbar.ios.vars.scss +++ b/core/src/components/toolbar/toolbar.ios.vars.scss @@ -17,24 +17,24 @@ $toolbar-order-ios: ( ); /// @prop - Minimum height of the toolbar -$toolbar-ios-min-height: 44px !default; +$toolbar-ios-min-height: 44px; /// @prop - Padding top of the toolbar -$toolbar-ios-padding-top: 3px !default; +$toolbar-ios-padding-top: 3px; /// @prop - Padding end of the toolbar -$toolbar-ios-padding-end: 4px !default; +$toolbar-ios-padding-end: 4px; /// @prop - Padding bottom of the toolbar -$toolbar-ios-padding-bottom: $toolbar-ios-padding-top !default; +$toolbar-ios-padding-bottom: $toolbar-ios-padding-top; /// @prop - Padding start of the toolbar -$toolbar-ios-padding-start: $toolbar-ios-padding-end !default; +$toolbar-ios-padding-start: $toolbar-ios-padding-end; /// @prop - Font size of the toolbar button /// The minimum and maximum font sizes for a toolbar button are /// 100% and 135%, respectively, of their default font size -$toolbar-ios-button-font-size: dynamic-font-clamp(1, 17px, 1.24) !default; +$toolbar-ios-button-font-size: dynamic-font-clamp(1, 17px, 1.24); /// @prop - Border radius of the toolbar button -$toolbar-ios-button-border-radius: 4px !default; +$toolbar-ios-button-border-radius: 4px; diff --git a/core/src/components/toolbar/toolbar.md.vars.scss b/core/src/components/toolbar/toolbar.md.vars.scss index dc713a3424..8a62c62d00 100644 --- a/core/src/components/toolbar/toolbar.md.vars.scss +++ b/core/src/components/toolbar/toolbar.md.vars.scss @@ -16,4 +16,4 @@ $toolbar-order-md: ( ); /// @prop - Border radius of the toolbar button -$toolbar-md-button-border-radius: 2px !default; +$toolbar-md-button-border-radius: 2px; diff --git a/core/src/css/palettes/high-contrast-dark.scss b/core/src/css/palettes/high-contrast-dark.scss index 927cbeb688..e0f3b8aeb5 100644 --- a/core/src/css/palettes/high-contrast-dark.scss +++ b/core/src/css/palettes/high-contrast-dark.scss @@ -1,15 +1,15 @@ @use "sass:map"; @import "../../themes/ionic.functions.color"; -$primary: #7cabff !default; -$secondary: #62bdff !default; -$tertiary: #b6b9f9 !default; -$success: #4ada71 !default; -$warning: #ffce31 !default; -$danger: #fc9aa2 !default; -$light: #222428 !default; -$medium: #a8aab3 !default; -$dark: #f4f5f8 !default; +$primary: #7cabff; +$secondary: #62bdff; +$tertiary: #b6b9f9; +$success: #4ada71; +$warning: #ffce31; +$danger: #fc9aa2; +$light: #222428; +$medium: #a8aab3; +$dark: #f4f5f8; $colors: ( primary: ( @@ -66,7 +66,7 @@ $colors: ( shade: get-color-shade($dark), tint: get-color-tint($dark) ) -) !default; +); /// Text step colors are generated based on /// how dark or light text can be. The darkest diff --git a/core/src/css/palettes/high-contrast.scss b/core/src/css/palettes/high-contrast.scss index ec7152c211..c7387aa649 100644 --- a/core/src/css/palettes/high-contrast.scss +++ b/core/src/css/palettes/high-contrast.scss @@ -1,15 +1,15 @@ @use "sass:map"; @import "../../themes/ionic.functions.color"; -$primary: #003fae !default; -$secondary: #01487b !default; -$tertiary: #3400e6 !default; -$success: #004314 !default; -$warning: #5f4100 !default; -$danger: #9c000c !default; -$light: #f4f5f8 !default; -$medium: #444446 !default; -$dark: #222428 !default; +$primary: #003fae; +$secondary: #01487b; +$tertiary: #3400e6; +$success: #004314; +$warning: #5f4100; +$danger: #9c000c; +$light: #f4f5f8; +$medium: #444446; +$dark: #222428; $colors: ( primary: ( @@ -66,7 +66,7 @@ $colors: ( shade: get-color-shade($dark), tint: get-color-tint($dark) ) -) !default; +); /// Text step colors are generated based on /// how dark or light text can be. The darkest diff --git a/core/src/css/typography.scss b/core/src/css/typography.scss index d1474a38d9..8f829b73e2 100644 --- a/core/src/css/typography.scss +++ b/core/src/css/typography.scss @@ -5,28 +5,28 @@ // -------------------------------------------------- /// @prop - Font weight of all headings -$headings-font-weight: 500 !default; +$headings-font-weight: 500; /// @prop - Line height of all headings -$headings-line-height: 1.2 !default; +$headings-line-height: 1.2; /// @prop - Font size of heading level 1 -$h1-font-size: dynamic-font(26px) !default; +$h1-font-size: dynamic-font(26px); /// @prop - Font size of heading level 2 -$h2-font-size: dynamic-font(24px) !default; +$h2-font-size: dynamic-font(24px); /// @prop - Font size of heading level 3 -$h3-font-size: dynamic-font(22px) !default; +$h3-font-size: dynamic-font(22px); /// @prop - Font size of heading level 4 -$h4-font-size: dynamic-font(20px) !default; +$h4-font-size: dynamic-font(20px); /// @prop - Font size of heading level 5 -$h5-font-size: dynamic-font(18px) !default; +$h5-font-size: dynamic-font(18px); /// @prop - Font size of heading level 6 -$h6-font-size: dynamic-font(16px) !default; +$h6-font-size: dynamic-font(16px); html { font-family: var(--ion-font-family); diff --git a/core/src/themes/ionic.functions.font.scss b/core/src/themes/ionic.functions.font.scss index 81adff90e7..a9628a12c3 100644 --- a/core/src/themes/ionic.functions.font.scss +++ b/core/src/themes/ionic.functions.font.scss @@ -1,7 +1,7 @@ @use "sass:math"; -$baselineSize: 16px !default; -$baselineUnit: 1rem !default; +$baselineSize: 16px; +$baselineUnit: 1rem; /** * Convert a font size to a dynamic font size. diff --git a/core/src/themes/ionic.globals.scss b/core/src/themes/ionic.globals.scss index f4c52d1472..6f281136fa 100644 --- a/core/src/themes/ionic.globals.scss +++ b/core/src/themes/ionic.globals.scss @@ -17,10 +17,10 @@ // Default General // -------------------------------------------------- -$font-family-base: var(--ion-font-family, inherit) !default; +$font-family-base: var(--ion-font-family, inherit); // Hairlines width -$hairlines-width: .55px !default; +$hairlines-width: .55px; // The minimum dimensions at which your layout will change, // adapting to different screen sizes, for use in media queries @@ -30,19 +30,19 @@ $screen-breakpoints: ( md: 768px, lg: 992px, xl: 1200px -) !default; +); // Input placeholder opacity // Ensures that the placeholder has the // correct color contrast against the background. -$placeholder-opacity: var(--ion-placeholder-opacity, 0.6) !default; +$placeholder-opacity: var(--ion-placeholder-opacity, 0.6); -$form-control-label-margin: 16px !default; +$form-control-label-margin: 16px; // How much the stacked labels should be scaled by /// The value 0.75 is used to match the MD spec. /// iOS does not have a floating label design spec, so we standardize on 0.75. -$form-control-label-stacked-scale: 0.75 !default; +$form-control-label-stacked-scale: 0.75; // Z-Index diff --git a/core/src/themes/ionic.theme.default.ios.scss b/core/src/themes/ionic.theme.default.ios.scss index c5c5e7045a..f07aeef5ee 100644 --- a/core/src/themes/ionic.theme.default.ios.scss +++ b/core/src/themes/ionic.theme.default.ios.scss @@ -6,33 +6,33 @@ // iOS General Colors // -------------------------------------------------- -$backdrop-ios-color: var(--ion-backdrop-color, #000) !default; -$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9))) !default; +$backdrop-ios-color: var(--ion-backdrop-color, #000); +$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-100, var(--ion-background-color-step-100, #f9f9f9))); // iOS Tabs & Tab bar // -------------------------------------------------- -$tabbar-ios-background: var(--ion-tab-bar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7))) !default; -$tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default; +$tabbar-ios-background: var(--ion-tab-bar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7))); +$tabbar-ios-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)); $tabbar-ios-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .2)))) )!default; -$tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-400) !default; -$tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default; +$tabbar-ios-color: var(--ion-tab-bar-color, $text-color-step-400); +$tabbar-ios-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)); // iOS Toolbar // -------------------------------------------------- -$toolbar-ios-background: var(--ion-toolbar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7))) !default; -$toolbar-ios-border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .2))))) !default; -$toolbar-ios-color: var(--ion-toolbar-color, $text-color) !default; +$toolbar-ios-background: var(--ion-toolbar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7))); +$toolbar-ios-border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .2))))); +$toolbar-ios-color: var(--ion-toolbar-color, $text-color); // iOS List & List Items // -------------------------------------------------- -$item-ios-background: var(--ion-item-background, $background-color) !default; -$item-ios-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc)))) !default; -$item-ios-color: var(--ion-item-color, $text-color) !default; +$item-ios-background: var(--ion-item-background, $background-color); +$item-ios-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc)))); +$item-ios-color: var(--ion-item-color, $text-color); // iOS Card // -------------------------------------------------- -$card-ios-background: var(--ion-card-background, $item-ios-background) !default; -$card-ios-color: var(--ion-card-color, var(--ion-item-color, $text-color-step-400)) !default; +$card-ios-background: var(--ion-card-background, $item-ios-background); +$card-ios-color: var(--ion-card-color, var(--ion-item-color, $text-color-step-400)); // iOS Form Controls // -------------------------------------------------- diff --git a/core/src/themes/ionic.theme.default.md.scss b/core/src/themes/ionic.theme.default.md.scss index 14f1f34c7a..bae22a078d 100644 --- a/core/src/themes/ionic.theme.default.md.scss +++ b/core/src/themes/ionic.theme.default.md.scss @@ -7,34 +7,34 @@ // Material Design General Colors // -------------------------------------------------- -$backdrop-md-color: var(--ion-backdrop-color, #000) !default; -$border-md-color: var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd))) !default; -$overlay-md-background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff)) !default; +$backdrop-md-color: var(--ion-backdrop-color, #000); +$border-md-color: var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd))); +$overlay-md-background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff)); // Material Design Tabs & Tab bar // -------------------------------------------------- -$tabbar-md-background: var(--ion-tab-bar-background, $background-color) !default; -$tabbar-md-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)) !default; -$tabbar-md-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .07))))) !default; -$tabbar-md-color: var(--ion-tab-bar-color, $text-color-step-350) !default; -$tabbar-md-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)) !default; +$tabbar-md-background: var(--ion-tab-bar-background, $background-color); +$tabbar-md-background-focused: var(--ion-tab-bar-background-focused, get-color-shade(#fff)); +$tabbar-md-border-color: var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .07))))); +$tabbar-md-color: var(--ion-tab-bar-color, $text-color-step-350); +$tabbar-md-color-selected: var(--ion-tab-bar-color-selected, ion-color(primary, base)); // Material Design Toolbar // -------------------------------------------------- -$toolbar-md-background: var(--ion-toolbar-background, $background-color) !default; -$toolbar-md-border-color: var(--ion-toolbar-border-color, $border-md-color) !default; -$toolbar-md-color: var(--ion-toolbar-color, var(--ion-text-color, #424242)) !default; +$toolbar-md-background: var(--ion-toolbar-background, $background-color); +$toolbar-md-border-color: var(--ion-toolbar-border-color, $border-md-color); +$toolbar-md-color: var(--ion-toolbar-color, var(--ion-text-color, #424242)); // Material Design List & List Items // -------------------------------------------------- -$item-md-background: var(--ion-item-background, $background-color) !default; -$item-md-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .13))))) !default; -$item-md-color: var(--ion-item-color, $text-color) !default; +$item-md-background: var(--ion-item-background, $background-color); +$item-md-border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, .13))))); +$item-md-color: var(--ion-item-color, $text-color); // Material Design Card // -------------------------------------------------- -$card-md-background: var(--ion-card-background, $item-md-background) !default; -$card-md-color: var(--ion-card-color, var(--ion-item-color, $text-color-step-450)) !default; +$card-md-background: var(--ion-card-background, $item-md-background); +$card-md-color: var(--ion-card-color, var(--ion-item-color, $text-color-step-450)); // Material Design Form Controls // -------------------------------------------------- diff --git a/core/src/themes/ionic.theme.default.scss b/core/src/themes/ionic.theme.default.scss index 8a7c4c6013..6ed8d34cd1 100644 --- a/core/src/themes/ionic.theme.default.scss +++ b/core/src/themes/ionic.theme.default.scss @@ -12,15 +12,15 @@ // - shade: 12% darker version of the base color (mix with black) // - tint: 10% lighter version of the base color (mix with white) -$primary: #0054e9 !default; -$secondary: #0163aa !default; -$tertiary: #6030ff !default; -$success: #2dd55b !default; -$warning: #ffc409 !default; -$danger: #c5000f !default; -$light: #f4f5f8 !default; -$medium: #636469 !default; -$dark: #222428 !default; +$primary: #0054e9; +$secondary: #0163aa; +$tertiary: #6030ff; +$success: #2dd55b; +$warning: #ffc409; +$danger: #c5000f; +$light: #f4f5f8; +$medium: #636469; +$dark: #222428; $colors: ( primary: ( @@ -77,22 +77,22 @@ $colors: ( shade: get-color-shade($dark), tint: get-color-tint($dark) ) -) !default; +); // Default Foreground and Background Colors // ------------------------------------------------------------------------------------------- // Used internally to calculate the default steps -$background-color-value: #fff !default; -$background-color-rgb-value: 255, 255, 255 !default; +$background-color-value: #fff; +$background-color-rgb-value: 255, 255, 255; -$text-color-value: #000 !default; -$text-color-rgb-value: 0, 0, 0 !default; +$text-color-value: #000; +$text-color-rgb-value: 0, 0, 0; -$background-color: var(--ion-background-color, $background-color-value) !default; -$background-color-rgb: var(--ion-background-color-rgb, $background-color-rgb-value) !default; -$text-color: var(--ion-text-color, $text-color-value) !default; -$text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value) !default; +$background-color: var(--ion-background-color, $background-color-value); +$background-color-rgb: var(--ion-background-color-rgb, $background-color-rgb-value); +$text-color: var(--ion-text-color, $text-color-value); +$text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-value); // Default Foreground and Background Step Colors // ------------------------------------------------------------------------------------------- @@ -101,45 +101,45 @@ $text-color-rgb: var(--ion-text-color-rgb, $text-color-rgb-va // For example, $text-color-step-XXX will be $text-color stepping towards $background-color, // but a $background-color-step-XXX will be $background-color stepping towards $text-color. -$background-color-step-50: var(--ion-color-step-50, var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%))) !default; -$background-color-step-100: var(--ion-color-step-100, var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%))) !default; -$background-color-step-150: var(--ion-color-step-150, var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%))) !default; -$background-color-step-200: var(--ion-color-step-200, var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%))) !default; -$background-color-step-250: var(--ion-color-step-250, var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%))) !default; -$background-color-step-300: var(--ion-color-step-300, var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%))) !default; -$background-color-step-350: var(--ion-color-step-350, var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%))) !default; -$background-color-step-400: var(--ion-color-step-400, var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%))) !default; -$background-color-step-450: var(--ion-color-step-450, var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%))) !default; -$background-color-step-500: var(--ion-color-step-500, var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%))) !default; -$background-color-step-550: var(--ion-color-step-550, var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%))) !default; -$background-color-step-600: var(--ion-color-step-600, var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%))) !default; -$background-color-step-650: var(--ion-color-step-650, var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%))) !default; -$background-color-step-700: var(--ion-color-step-700, var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%))) !default; -$background-color-step-750: var(--ion-color-step-750, var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%))) !default; -$background-color-step-800: var(--ion-color-step-800, var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%))) !default; -$background-color-step-850: var(--ion-color-step-850, var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%))) !default; -$background-color-step-900: var(--ion-color-step-900, var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%))) !default; -$background-color-step-950: var(--ion-color-step-950, var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%))) !default; -$text-color-step-50: var(--ion-color-step-950, var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%))) !default; -$text-color-step-100: var(--ion-color-step-900, var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%))) !default; -$text-color-step-150: var(--ion-color-step-850, var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%))) !default; -$text-color-step-200: var(--ion-color-step-800, var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%))) !default; -$text-color-step-250: var(--ion-color-step-750, var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%))) !default; -$text-color-step-300: var(--ion-color-step-700, var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%))) !default; -$text-color-step-350: var(--ion-color-step-650, var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%))) !default; -$text-color-step-400: var(--ion-color-step-600, var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%))) !default; -$text-color-step-450: var(--ion-color-step-550, var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%))) !default; -$text-color-step-500: var(--ion-color-step-500, var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%))) !default; -$text-color-step-550: var(--ion-color-step-450, var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%))) !default; -$text-color-step-600: var(--ion-color-step-400, var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%))) !default; -$text-color-step-650: var(--ion-color-step-350, var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%))) !default; -$text-color-step-700: var(--ion-color-step-300, var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%))) !default; -$text-color-step-750: var(--ion-color-step-250, var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%))) !default; -$text-color-step-800: var(--ion-color-step-200, var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%))) !default; -$text-color-step-850: var(--ion-color-step-150, var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%))) !default; -$text-color-step-900: var(--ion-color-step-100, var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%))) !default; -$text-color-step-950: var(--ion-color-step-50, var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%))) !default; +$background-color-step-50: var(--ion-color-step-50, var(--ion-background-color-step-50, mix($text-color-value, $background-color-value, 5%))); +$background-color-step-100: var(--ion-color-step-100, var(--ion-background-color-step-100, mix($text-color-value, $background-color-value, 10%))); +$background-color-step-150: var(--ion-color-step-150, var(--ion-background-color-step-150, mix($text-color-value, $background-color-value, 15%))); +$background-color-step-200: var(--ion-color-step-200, var(--ion-background-color-step-200, mix($text-color-value, $background-color-value, 20%))); +$background-color-step-250: var(--ion-color-step-250, var(--ion-background-color-step-250, mix($text-color-value, $background-color-value, 25%))); +$background-color-step-300: var(--ion-color-step-300, var(--ion-background-color-step-300, mix($text-color-value, $background-color-value, 30%))); +$background-color-step-350: var(--ion-color-step-350, var(--ion-background-color-step-350, mix($text-color-value, $background-color-value, 35%))); +$background-color-step-400: var(--ion-color-step-400, var(--ion-background-color-step-400, mix($text-color-value, $background-color-value, 40%))); +$background-color-step-450: var(--ion-color-step-450, var(--ion-background-color-step-450, mix($text-color-value, $background-color-value, 45%))); +$background-color-step-500: var(--ion-color-step-500, var(--ion-background-color-step-500, mix($text-color-value, $background-color-value, 50%))); +$background-color-step-550: var(--ion-color-step-550, var(--ion-background-color-step-550, mix($text-color-value, $background-color-value, 55%))); +$background-color-step-600: var(--ion-color-step-600, var(--ion-background-color-step-600, mix($text-color-value, $background-color-value, 60%))); +$background-color-step-650: var(--ion-color-step-650, var(--ion-background-color-step-650, mix($text-color-value, $background-color-value, 65%))); +$background-color-step-700: var(--ion-color-step-700, var(--ion-background-color-step-700, mix($text-color-value, $background-color-value, 70%))); +$background-color-step-750: var(--ion-color-step-750, var(--ion-background-color-step-750, mix($text-color-value, $background-color-value, 75%))); +$background-color-step-800: var(--ion-color-step-800, var(--ion-background-color-step-800, mix($text-color-value, $background-color-value, 80%))); +$background-color-step-850: var(--ion-color-step-850, var(--ion-background-color-step-850, mix($text-color-value, $background-color-value, 85%))); +$background-color-step-900: var(--ion-color-step-900, var(--ion-background-color-step-900, mix($text-color-value, $background-color-value, 90%))); +$background-color-step-950: var(--ion-color-step-950, var(--ion-background-color-step-950, mix($text-color-value, $background-color-value, 95%))); +$text-color-step-50: var(--ion-color-step-950, var(--ion-text-color-step-50, mix($background-color-value, $text-color-value, 5%))); +$text-color-step-100: var(--ion-color-step-900, var(--ion-text-color-step-100, mix($background-color-value, $text-color-value, 10%))); +$text-color-step-150: var(--ion-color-step-850, var(--ion-text-color-step-150, mix($background-color-value, $text-color-value, 15%))); +$text-color-step-200: var(--ion-color-step-800, var(--ion-text-color-step-200, mix($background-color-value, $text-color-value, 20%))); +$text-color-step-250: var(--ion-color-step-750, var(--ion-text-color-step-250, mix($background-color-value, $text-color-value, 25%))); +$text-color-step-300: var(--ion-color-step-700, var(--ion-text-color-step-300, mix($background-color-value, $text-color-value, 30%))); +$text-color-step-350: var(--ion-color-step-650, var(--ion-text-color-step-350, mix($background-color-value, $text-color-value, 35%))); +$text-color-step-400: var(--ion-color-step-600, var(--ion-text-color-step-400, mix($background-color-value, $text-color-value, 40%))); +$text-color-step-450: var(--ion-color-step-550, var(--ion-text-color-step-450, mix($background-color-value, $text-color-value, 45%))); +$text-color-step-500: var(--ion-color-step-500, var(--ion-text-color-step-500, mix($background-color-value, $text-color-value, 50%))); +$text-color-step-550: var(--ion-color-step-450, var(--ion-text-color-step-550, mix($background-color-value, $text-color-value, 55%))); +$text-color-step-600: var(--ion-color-step-400, var(--ion-text-color-step-600, mix($background-color-value, $text-color-value, 60%))); +$text-color-step-650: var(--ion-color-step-350, var(--ion-text-color-step-650, mix($background-color-value, $text-color-value, 65%))); +$text-color-step-700: var(--ion-color-step-300, var(--ion-text-color-step-700, mix($background-color-value, $text-color-value, 70%))); +$text-color-step-750: var(--ion-color-step-250, var(--ion-text-color-step-750, mix($background-color-value, $text-color-value, 75%))); +$text-color-step-800: var(--ion-color-step-200, var(--ion-text-color-step-800, mix($background-color-value, $text-color-value, 80%))); +$text-color-step-850: var(--ion-color-step-150, var(--ion-text-color-step-850, mix($background-color-value, $text-color-value, 85%))); +$text-color-step-900: var(--ion-color-step-100, var(--ion-text-color-step-900, mix($background-color-value, $text-color-value, 90%))); +$text-color-step-950: var(--ion-color-step-50, var(--ion-text-color-step-950, mix($background-color-value, $text-color-value, 95%))); // Default General Colors // -------------------------------------------------- -$placeholder-text-color: var(--ion-placeholder-color, $text-color-step-600) !default; +$placeholder-text-color: var(--ion-placeholder-color, $text-color-step-600);