mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 07:41:51 +08:00
chore(theming): remove Sass default flags (#29401)
Issue number: N/A --------- ## What is the current behavior? Currently, every Sass variable in Ionic has the `!default` flag added to the end. From the [Sass variables documentation](https://sass-lang.com/documentation/variables/): > Normally when you assign a value to a variable, if that variable already had a value, its old value is overwritten. But if you’re writing a Sass library, you might want to allow your users to configure your library’s variables before you use them to generate CSS. > > To make this possible, Sass provides the `!default` flag. This assigns a value to a variable only if that variable isn’t defined or its value is [null](https://sass-lang.com/documentation/values/null). Otherwise, the existing value will be used. In past versions of Ionic Framework, developers wrote Sass variables to rebuild Ionic Framework using their own values. In the latest versions of Ionic Framework, this is not possible. ## What is the new behavior? Removes the `!default` flag from all Sass variables. ## Does this introduce a breaking change? - [ ] Yes - [x] No ------- Co-authored-by: brandyscarney <brandyscarney@users.noreply.github.com>
This commit is contained in:
Liam DeBeasi
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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%);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -4,4 +4,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Text color of the back button
|
||||
$back-button-md-color: currentColor !default;
|
||||
$back-button-md-color: currentColor;
|
||||
|
||||
@ -4,4 +4,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border radius of the badge
|
||||
$badge-ios-border-radius: 10px !default;
|
||||
$badge-ios-border-radius: 10px;
|
||||
|
||||
@ -4,4 +4,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border radius of the badge
|
||||
$badge-md-border-radius: 4px !default;
|
||||
$badge-md-border-radius: 4px;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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));
|
||||
|
||||
@ -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));
|
||||
|
||||
@ -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));
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
$checkbox-item-label-margin-bottom: 10px;
|
||||
@ -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;
|
||||
);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -5,4 +5,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin of the FAB List
|
||||
$fab-list-margin: 10px !default;
|
||||
$fab-list-margin: 10px;
|
||||
|
||||
@ -5,4 +5,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin of the FAB Container
|
||||
$fab-content-margin: 10px !default;
|
||||
$fab-content-margin: 10px;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -4,4 +4,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border radius for the modal
|
||||
$modal-ios-border-radius: 10px !default;
|
||||
$modal-ios-border-radius: 10px;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
$popover-background-color: $background-color;
|
||||
@ -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;
|
||||
|
||||
@ -2,4 +2,4 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Height of the progress bar
|
||||
$progress-bar-md-height: 4px !default;
|
||||
$progress-bar-md-height: 4px;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
$radio-item-label-margin-bottom: 10px;
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user