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);