diff --git a/BREAKING.md b/BREAKING.md index e58a8ad932..0061211fbe 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -11,6 +11,7 @@ A list of the breaking changes introduced in Ionic Angular v4. - [FAB](#fab) - [Fixed Content](#fixed-content) - [Icon](#icon) +- [Input](#Input) - [Item](#item) - [Nav](#nav) - [Option](#option) @@ -273,6 +274,23 @@ If any `CSS` is being overridden for an icon it will need to change to override } ``` +## Input + +The Sass variables were all renamed from having `$text-input` as the prefix to `$input`. + +**Old Usage Example:** + +```css +$text-input-highlight-color-valid: #32db64; +``` + +**New Usage Example:** + +```css +$input-highlight-color-valid: #32db64; +``` + + ## Item ### Markup Changed diff --git a/packages/core/src/components/action-sheet/action-sheet.ios.scss b/packages/core/src/components/action-sheet/action-sheet.ios.scss index 204f69e774..099aa3aba5 100644 --- a/packages/core/src/components/action-sheet/action-sheet.ios.scss +++ b/packages/core/src/components/action-sheet/action-sheet.ios.scss @@ -1,115 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./action-sheet"; +@import "./action-sheet.ios.vars"; // iOS Action Sheet // -------------------------------------------------- -/// @prop - Text align of the action sheet -$action-sheet-ios-text-align: center !default; - -/// @prop - Padding top of the action sheet -$action-sheet-ios-padding-top: 0 !default; - -/// @prop - Padding end of the action sheet -$action-sheet-ios-padding-end: 10px !default; - -/// @prop - Padding bottom of the action sheet -$action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top !default; - -/// @prop - Padding start of the action sheet -$action-sheet-ios-padding-start: $action-sheet-ios-padding-end !default; - -/// @prop - Top margin of the action sheet button group -$action-sheet-ios-group-margin-top: 10px !default; - -/// @prop - Bottom margin of the action sheet button group -$action-sheet-ios-group-margin-bottom: 10px !default; - -/// @prop - Background color of the action sheet -$action-sheet-ios-background: #f9f9f9 !default; - -/// @prop - Border color of the action sheet -$action-sheet-ios-border-color: rgba(0, 0, 0, .1) !default; - -/// @prop - Border radius of the action sheet -$action-sheet-ios-border-radius: 13px !default; - -/// @prop - Padding of the action sheet title -$action-sheet-ios-title-padding: 1.5rem !default; - -/// @prop - Color of the action sheet title -$action-sheet-ios-title-color: #8f8f8f !default; - -/// @prop - Font size of the action sheet title -$action-sheet-ios-title-font-size: 1.3rem !default; - -/// @prop - Font weight of the action sheet title -$action-sheet-ios-title-font-weight: 400 !default; - -/// @prop - Border radius of the action sheet title -$action-sheet-ios-title-border-radius: 0 !default; - -/// @prop - Minimum height of the action sheet button -$action-sheet-ios-button-min-height: 5.6rem !default; - -/// @prop - Padding of the action sheet button -$action-sheet-ios-button-padding: 18px !default; - -/// @prop - Text color of the action sheet button -$action-sheet-ios-button-text-color: #007aff !default; - -/// @prop - Fill color of the action sheet button icon -$action-sheet-ios-button-icon-fill-color: $action-sheet-ios-button-text-color !default; - -/// @prop - Font size of the action sheet button icon -$action-sheet-ios-button-icon-font-size: 1.4em !default; - -/// @prop - Padding right of the action sheet button icon -$action-sheet-ios-button-icon-padding-right: .1em !default; - -/// @prop - Height of the action sheet button icon -$action-sheet-ios-button-icon-height: .7em !default; - -/// @prop - Margin top of the action sheet button icon -$action-sheet-ios-button-icon-margin-top: -10px !default; - -/// @prop - Font size of the action sheet button -$action-sheet-ios-button-font-size: 2rem !default; - -/// @prop - Border width of the action sheet button -$action-sheet-ios-button-border-width: $hairlines-width !default; - -/// @prop - Border style of the action sheet button -$action-sheet-ios-button-border-style: solid !default; - -/// @prop - Border color of the action sheet button -$action-sheet-ios-button-border-color: #d1d3d6 !default; - -/// @prop - Background color of the action sheet button -$action-sheet-ios-button-background: transparent !default; - -/// @prop - Background color of the activated action sheet button -$action-sheet-ios-button-background-activated: rgba(115, 115, 115, .1) !default; - -/// @prop - Destructive text color of the action sheet button -$action-sheet-ios-button-destructive-text-color: #f53d3d !default; - -/// @prop - Destructive fill color of the action sheet button icon -$action-sheet-ios-button-destructive-icon-fill-color: $action-sheet-ios-button-destructive-text-color !default; - -/// @prop - Background color of the action sheet cancel button -$action-sheet-ios-button-cancel-background: #fff !default; - -/// @prop - Font weight of the action sheet cancel button -$action-sheet-ios-button-cancel-font-weight: 600 !default; - -/// @prop - Filter of the translucent action-sheet -$action-sheet-ios-translucent-filter: saturate(180%) blur(20px) !default; - -/// @prop - Opacity of the translucent action-sheet -$action-sheet-ios-translucent-opacity: .88 !default; - - .action-sheet-ios { @include text-align($action-sheet-ios-text-align); } diff --git a/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss b/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss new file mode 100644 index 0000000000..499185762a --- /dev/null +++ b/packages/core/src/components/action-sheet/action-sheet.ios.vars.scss @@ -0,0 +1,109 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Action Sheet +// -------------------------------------------------- + +/// @prop - Text align of the action sheet +$action-sheet-ios-text-align: center !default; + +/// @prop - Padding top of the action sheet +$action-sheet-ios-padding-top: 0 !default; + +/// @prop - Padding end of the action sheet +$action-sheet-ios-padding-end: 10px !default; + +/// @prop - Padding bottom of the action sheet +$action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top !default; + +/// @prop - Padding start of the action sheet +$action-sheet-ios-padding-start: $action-sheet-ios-padding-end !default; + +/// @prop - Top margin of the action sheet button group +$action-sheet-ios-group-margin-top: 10px !default; + +/// @prop - Bottom margin of the action sheet button group +$action-sheet-ios-group-margin-bottom: 10px !default; + +/// @prop - Background color of the action sheet +$action-sheet-ios-background: #f9f9f9 !default; + +/// @prop - Border color of the action sheet +$action-sheet-ios-border-color: rgba(0, 0, 0, .1) !default; + +/// @prop - Border radius of the action sheet +$action-sheet-ios-border-radius: 13px !default; + +/// @prop - Padding of the action sheet title +$action-sheet-ios-title-padding: 1.5rem !default; + +/// @prop - Color of the action sheet title +$action-sheet-ios-title-color: #8f8f8f !default; + +/// @prop - Font size of the action sheet title +$action-sheet-ios-title-font-size: 1.3rem !default; + +/// @prop - Font weight of the action sheet title +$action-sheet-ios-title-font-weight: 400 !default; + +/// @prop - Border radius of the action sheet title +$action-sheet-ios-title-border-radius: 0 !default; + +/// @prop - Minimum height of the action sheet button +$action-sheet-ios-button-min-height: 5.6rem !default; + +/// @prop - Padding of the action sheet button +$action-sheet-ios-button-padding: 18px !default; + +/// @prop - Text color of the action sheet button +$action-sheet-ios-button-text-color: #007aff !default; + +/// @prop - Fill color of the action sheet button icon +$action-sheet-ios-button-icon-fill-color: $action-sheet-ios-button-text-color !default; + +/// @prop - Font size of the action sheet button icon +$action-sheet-ios-button-icon-font-size: 1.4em !default; + +/// @prop - Padding right of the action sheet button icon +$action-sheet-ios-button-icon-padding-right: .1em !default; + +/// @prop - Height of the action sheet button icon +$action-sheet-ios-button-icon-height: .7em !default; + +/// @prop - Margin top of the action sheet button icon +$action-sheet-ios-button-icon-margin-top: -10px !default; + +/// @prop - Font size of the action sheet button +$action-sheet-ios-button-font-size: 2rem !default; + +/// @prop - Border width of the action sheet button +$action-sheet-ios-button-border-width: $hairlines-width !default; + +/// @prop - Border style of the action sheet button +$action-sheet-ios-button-border-style: solid !default; + +/// @prop - Border color of the action sheet button +$action-sheet-ios-button-border-color: #d1d3d6 !default; + +/// @prop - Background color of the action sheet button +$action-sheet-ios-button-background: transparent !default; + +/// @prop - Background color of the activated action sheet button +$action-sheet-ios-button-background-activated: rgba(115, 115, 115, .1) !default; + +/// @prop - Destructive text color of the action sheet button +$action-sheet-ios-button-destructive-text-color: #f53d3d !default; + +/// @prop - Destructive fill color of the action sheet button icon +$action-sheet-ios-button-destructive-icon-fill-color: $action-sheet-ios-button-destructive-text-color !default; + +/// @prop - Background color of the action sheet cancel button +$action-sheet-ios-button-cancel-background: #fff !default; + +/// @prop - Font weight of the action sheet cancel button +$action-sheet-ios-button-cancel-font-weight: 600 !default; + +/// @prop - Filter of the translucent action-sheet +$action-sheet-ios-translucent-filter: saturate(180%) blur(20px) !default; + +/// @prop - Opacity of the translucent action-sheet +$action-sheet-ios-translucent-opacity: .88 !default; diff --git a/packages/core/src/components/action-sheet/action-sheet.md.scss b/packages/core/src/components/action-sheet/action-sheet.md.scss index a9ff1875b2..2cdd18a9b6 100644 --- a/packages/core/src/components/action-sheet/action-sheet.md.scss +++ b/packages/core/src/components/action-sheet/action-sheet.md.scss @@ -1,92 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./action-sheet"; +@import "./action-sheet.md.vars"; // Material Design Action Sheet // -------------------------------------------------- -/// @prop - Text align of the action sheet -$action-sheet-md-text-align: start !default; - -/// @prop - Background color of the action sheet -$action-sheet-md-background: #fafafa !default; - -/// @prop - Padding top of the action sheet -$action-sheet-md-padding-top: .8rem !default; - -/// @prop - Padding bottom of the action sheet -$action-sheet-md-padding-bottom: .8rem !default; - -/// @prop - Color of the action sheet title -$action-sheet-md-title-color: #757575 !default; - -/// @prop - Font size of the action sheet title -$action-sheet-md-title-font-size: 1.6rem !default; - -/// @prop - Padding top of the action sheet title -$action-sheet-md-title-padding-top: 11px !default; - -/// @prop - Padding end of the action sheet title -$action-sheet-md-title-padding-end: 16px !default; - -/// @prop - Padding bottom of the action sheet title -$action-sheet-md-title-padding-bottom: 17px !default; - -/// @prop - Padding start of the action sheet title -$action-sheet-md-title-padding-start: $action-sheet-md-title-padding-end !default; - -/// @prop - Minimum height of the action sheet button -$action-sheet-md-button-min-height: 4.8rem !default; - -/// @prop - Text color of the action sheet button -$action-sheet-md-button-text-color: #222 !default; - -/// @prop - Font size of the action sheet button -$action-sheet-md-button-font-size: 1.6rem !default; - -/// @prop - Padding top of the action sheet button -$action-sheet-md-button-padding-top: 0 !default; - -/// @prop - Padding end of the action sheet button -$action-sheet-md-button-padding-end: 16px !default; - -/// @prop - Padding bottom of the action sheet button -$action-sheet-md-button-padding-bottom: $action-sheet-md-button-padding-top !default; - -/// @prop - Padding start of the action sheet button -$action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end !default; - -/// @prop - Background color of the action sheet button -$action-sheet-md-button-background: transparent !default; - -/// @prop - Background color of the action sheet activated button -$action-sheet-md-button-background-activated: #f1f1f1 !default; - -/// @prop - Font size of the icon in the action sheet button -$action-sheet-md-icon-font-size: 2.4rem !default; - -/// @prop - Width of the icon in the action sheet button -$action-sheet-md-icon-width: 2.3rem !default; - -/// @prop - Text align of the icon in the action sheet button -$action-sheet-md-icon-text-align: center !default; - -/// @prop - Vertical align of the icon in the action sheet button -$action-sheet-md-icon-vertical-align: middle !default; - -/// @prop - Margin top of the icon in the action sheet button -$action-sheet-md-icon-margin-top: 0 !default; - -/// @prop - Margin end of the icon in the action sheet button -$action-sheet-md-icon-margin-end: 32px !default; - -/// @prop - Margin bottom of the icon in the action sheet button -$action-sheet-md-icon-margin-bottom: 0 !default; - -/// @prop - Margin start of the icon in the action sheet button -$action-sheet-md-icon-margin-start: 0 !default; - - - // Material Design Action Sheet Title // ----------------------------------------- diff --git a/packages/core/src/components/action-sheet/action-sheet.md.vars.scss b/packages/core/src/components/action-sheet/action-sheet.md.vars.scss new file mode 100644 index 0000000000..171dd8f3d2 --- /dev/null +++ b/packages/core/src/components/action-sheet/action-sheet.md.vars.scss @@ -0,0 +1,85 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Action Sheet +// -------------------------------------------------- + +/// @prop - Text align of the action sheet +$action-sheet-md-text-align: start !default; + +/// @prop - Background color of the action sheet +$action-sheet-md-background: #fafafa !default; + +/// @prop - Padding top of the action sheet +$action-sheet-md-padding-top: .8rem !default; + +/// @prop - Padding bottom of the action sheet +$action-sheet-md-padding-bottom: .8rem !default; + +/// @prop - Color of the action sheet title +$action-sheet-md-title-color: #757575 !default; + +/// @prop - Font size of the action sheet title +$action-sheet-md-title-font-size: 1.6rem !default; + +/// @prop - Padding top of the action sheet title +$action-sheet-md-title-padding-top: 11px !default; + +/// @prop - Padding end of the action sheet title +$action-sheet-md-title-padding-end: 16px !default; + +/// @prop - Padding bottom of the action sheet title +$action-sheet-md-title-padding-bottom: 17px !default; + +/// @prop - Padding start of the action sheet title +$action-sheet-md-title-padding-start: $action-sheet-md-title-padding-end !default; + +/// @prop - Minimum height of the action sheet button +$action-sheet-md-button-min-height: 4.8rem !default; + +/// @prop - Text color of the action sheet button +$action-sheet-md-button-text-color: #222 !default; + +/// @prop - Font size of the action sheet button +$action-sheet-md-button-font-size: 1.6rem !default; + +/// @prop - Padding top of the action sheet button +$action-sheet-md-button-padding-top: 0 !default; + +/// @prop - Padding end of the action sheet button +$action-sheet-md-button-padding-end: 16px !default; + +/// @prop - Padding bottom of the action sheet button +$action-sheet-md-button-padding-bottom: $action-sheet-md-button-padding-top !default; + +/// @prop - Padding start of the action sheet button +$action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end !default; + +/// @prop - Background color of the action sheet button +$action-sheet-md-button-background: transparent !default; + +/// @prop - Background color of the action sheet activated button +$action-sheet-md-button-background-activated: #f1f1f1 !default; + +/// @prop - Font size of the icon in the action sheet button +$action-sheet-md-icon-font-size: 2.4rem !default; + +/// @prop - Width of the icon in the action sheet button +$action-sheet-md-icon-width: 2.3rem !default; + +/// @prop - Text align of the icon in the action sheet button +$action-sheet-md-icon-text-align: center !default; + +/// @prop - Vertical align of the icon in the action sheet button +$action-sheet-md-icon-vertical-align: middle !default; + +/// @prop - Margin top of the icon in the action sheet button +$action-sheet-md-icon-margin-top: 0 !default; + +/// @prop - Margin end of the icon in the action sheet button +$action-sheet-md-icon-margin-end: 32px !default; + +/// @prop - Margin bottom of the icon in the action sheet button +$action-sheet-md-icon-margin-bottom: 0 !default; + +/// @prop - Margin start of the icon in the action sheet button +$action-sheet-md-icon-margin-start: 0 !default; diff --git a/packages/core/src/components/action-sheet/action-sheet.scss b/packages/core/src/components/action-sheet/action-sheet.scss index e0667f07d4..c0922cc5df 100644 --- a/packages/core/src/components/action-sheet/action-sheet.scss +++ b/packages/core/src/components/action-sheet/action-sheet.scss @@ -1,15 +1,8 @@ -@import "../../themes/ionic.globals"; +@import "./action-sheet.vars"; // Action Sheet // -------------------------------------------------- -/// @prop - Width of the action sheet -$action-sheet-width: 100% !default; - -/// @prop - Maximum width of the action sheet -$action-sheet-max-width: 500px !default; - - ion-action-sheet { @include position(0, null, null, 0); diff --git a/packages/core/src/components/action-sheet/action-sheet.vars.scss b/packages/core/src/components/action-sheet/action-sheet.vars.scss new file mode 100644 index 0000000000..11cb6a28bf --- /dev/null +++ b/packages/core/src/components/action-sheet/action-sheet.vars.scss @@ -0,0 +1,10 @@ +@import "../../themes/ionic.globals"; + +// Action Sheet +// -------------------------------------------------- + +/// @prop - Width of the action sheet +$action-sheet-width: 100% !default; + +/// @prop - Maximum width of the action sheet +$action-sheet-max-width: 500px !default; diff --git a/packages/core/src/components/alert/alert.ios.scss b/packages/core/src/components/alert/alert.ios.scss index 7bfb737d49..dfdc75b6c1 100644 --- a/packages/core/src/components/alert/alert.ios.scss +++ b/packages/core/src/components/alert/alert.ios.scss @@ -1,289 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./alert"; +@import "./alert.ios.vars"; -// iOS Alerts +// iOS Alert // -------------------------------------------------- -/// @prop - Max width of the alert -$alert-ios-max-width: 270px !default; - -/// @prop - Border radius of the alert -$alert-ios-border-radius: 13px !default; - -/// @prop - Background color of the alert -$alert-ios-background: #f8f8f8 !default; - -/// @prop - Box shadow of the alert -$alert-ios-box-shadow: none !default; - -/// @prop - Padding top of the alert head -$alert-ios-head-padding-top: 12px !default; - -/// @prop - Padding end of the alert head -$alert-ios-head-padding-end: 16px !default; - -/// @prop - Padding bottom of the alert head -$alert-ios-head-padding-bottom: 7px !default; - -/// @prop - Padding start of the alert head -$alert-ios-head-padding-start: $alert-ios-head-padding-end !default; - -/// @prop - Text align of the alert head -$alert-ios-head-text-align: center !default; - -/// @prop - Margin top of the alert title -$alert-ios-title-margin-top: 8px !default; - -/// @prop - Font size of the alert title -$alert-ios-title-font-size: 17px !default; - -/// @prop - Font weight of the alert title -$alert-ios-title-font-weight: 600 !default; - -/// @prop - Font size of the alert sub title -$alert-ios-sub-title-font-size: 14px !default; - -/// @prop - Text color of the alert sub title -$alert-ios-sub-title-text-color: #666 !default; - -/// @prop - Padding top of the alert message -$alert-ios-message-padding-top: 0 !default; - -/// @prop - Padding end of the alert message -$alert-ios-message-padding-end: 16px !default; - -/// @prop - Padding bottom of the alert message -$alert-ios-message-padding-bottom: 21px !default; - -/// @prop - Padding start of the alert message -$alert-ios-message-padding-start: $alert-ios-message-padding-end !default; - -/// @prop - Font size of the alert message -$alert-ios-message-font-size: 13px !default; - -/// @prop - Text align of the alert message -$alert-ios-message-text-align: center !default; - -/// @prop - Text color of the alert message -$alert-ios-message-text-color: inherit !default; - -/// @prop - Padding top of the alert empty message -$alert-ios-message-empty-padding-top: 0 !default; - -/// @prop - Padding end of the alert empty message -$alert-ios-message-empty-padding-end: 0 !default; - -/// @prop - Padding bottom of the alert empty message -$alert-ios-message-empty-padding-bottom: 12px !default; - -/// @prop - Padding start of the alert empty message -$alert-ios-message-empty-padding-start: 0 !default; - -/// @prop - Maximum height of the alert content -$alert-ios-content-max-height: 240px !default; - -/// @prop - Margin top of the alert input -$alert-ios-input-margin-top: 10px !default; - -/// @prop - Padding top on the alert input -$alert-ios-input-padding-top: 6px !default; - -/// @prop - Padding end on the alert input -$alert-ios-input-padding-end: $alert-ios-input-padding-top !default; - -/// @prop - Padding bottom on the alert input -$alert-ios-input-padding-bottom: $alert-ios-input-padding-top !default; - -/// @prop - Padding start on the alert input -$alert-ios-input-padding-start: $alert-ios-input-padding-end !default; - -/// @prop - Border color of the alert input -$alert-ios-input-border-color: #ccc !default; - -/// @prop - Border of the alert input -$alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color !default; - -/// @prop - Border radius of the alert input -$alert-ios-input-border-radius: 4px !default; - -/// @prop - Background color of the alert input -$alert-ios-input-background-color: #fff !default; - -/// @prop - Flex wrap of the alert button group -$alert-ios-button-group-flex-wrap: wrap !default; - -/// @prop - Flex of the alert button -$alert-ios-button-flex: 1 1 auto !default; - -/// @prop - Margin of the alert button -$alert-ios-button-margin: 0 !default; - -/// @prop - Min width of the alert button -$alert-ios-button-min-width: 50% !default; - -/// @prop - Minimum height of the alert button -$alert-ios-button-min-height: 44px !default; - -/// @prop - Font size of the alert button -$alert-ios-button-font-size: 17px !default; - -/// @prop - Color of the text in the alert button -$alert-ios-button-text-color: color($colors-ios, primary) !default; - -/// @prop - Background color of the alert button -$alert-ios-button-background-color: transparent !default; - -/// @prop - Background color of the alert activated button -$alert-ios-button-background-color-activated: rgba(115, 115, 115, .1) !default; - -/// @prop - Border width of the alert button -$alert-ios-button-border-width: $hairlines-width !default; - -/// @prop - Border style of the alert button -$alert-ios-button-border-style: solid !default; - -/// @prop - Border color of the alert button -$alert-ios-button-border-color: rgba(0, 0, 0, .1) !default; - -/// @prop - Border radius of the alert button -$alert-ios-button-border-radius: 0 !default; - -/// @prop - Font weight of the main text on the alert button -$alert-ios-button-main-font-weight: bold !default; - -/// @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; - -/// @prop - Padding top on the label for the radio alert -$alert-ios-radio-label-padding-top: 13px !default; - -/// @prop - Padding end on the label for the radio alert -$alert-ios-radio-label-padding-end: $alert-ios-radio-label-padding-top !default; - -/// @prop - Padding bottom on the label for the radio alert -$alert-ios-radio-label-padding-bottom: $alert-ios-radio-label-padding-top !default; - -/// @prop - Padding start on the label for the radio alert -$alert-ios-radio-label-padding-start: $alert-ios-radio-label-padding-end !default; - -/// @prop - Text color of the label for the radio alert -$alert-ios-radio-label-text-color: initial !default; - -/// @prop - Text color of the label for the checked radio alert -$alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color !default; - -/// @prop - Min width of the radio alert -$alert-ios-radio-min-width: 30px !default; - -/// @prop - Top of the icon in the radio alert -$alert-ios-radio-icon-top: -7px !default; - -/// @prop - Start of the icon in the radio alert -$alert-ios-radio-icon-start: 7px !default; - -/// @prop - Width of the icon in the radio alert -$alert-ios-radio-icon-width: 6px !default; - -/// @prop - Height of the icon in the radio alert -$alert-ios-radio-icon-height: 12px !default; - -/// @prop - Border width of the icon in the radio alert -$alert-ios-radio-icon-border-width: 2px !default; - -/// @prop - Border style of the icon in the radio alert -$alert-ios-radio-icon-border-style: solid !default; - -/// @prop - Border color of the icon in the radio alert -$alert-ios-radio-icon-border-color: $alert-ios-button-text-color !default; - -/// @prop - Transform of the icon in the radio alert -$alert-ios-radio-icon-transform: rotate(45deg) !default; - -/// @prop - Padding top of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding-top: 13px !default; - -/// @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; - -/// @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; - -/// @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; - -/// @prop - Text color of the label for the checkbox in the alert -$alert-ios-checkbox-label-text-color: initial !default; - -/// @prop - Text color of the label for the checked checkbox in the alert -$alert-ios-checkbox-label-text-color-checked: initial !default; - -/// @prop - Margin top of the checkbox in the alert -$alert-ios-checkbox-margin-top: 10px !default; - -/// @prop - Margin end of the checkbox in the alert -$alert-ios-checkbox-margin-end: 6px !default; - -/// @prop - Margin bottom of the checkbox in the alert -$alert-ios-checkbox-margin-bottom: 10px !default; - -/// @prop - Margin start of the checkbox in the alert -$alert-ios-checkbox-margin-start: 16px !default; - -/// @prop - Size of the checkbox in the alert -$alert-ios-checkbox-size: 21px !default; - -/// @prop - Border width of the checkbox in the alert -$alert-ios-checkbox-border-width: $hairlines-width !default; - -/// @prop - Border style of the checkbox in the alert -$alert-ios-checkbox-border-style: solid !default; - -/// @prop - Border radius of the checkbox in the alert -$alert-ios-checkbox-border-radius: 50% !default; - -/// @prop - Border color of the checkbox in the alert when off -$alert-ios-checkbox-border-color-off: $list-ios-border-color !default; - -/// @prop - Border color of the checkbox in the alert when on -$alert-ios-checkbox-border-color-on: color($colors-ios, primary) !default; - -/// @prop - Background color of the checkbox in the alert when off -$alert-ios-checkbox-background-color-off: $list-ios-background-color !default; - -/// @prop - Background color of the checkbox in the alert when on -$alert-ios-checkbox-background-color-on: color($colors-ios, primary) !default; - -/// @prop - Top of the icon in the checkbox alert -$alert-ios-checkbox-icon-top: 4px !default; - -/// @prop - Start of the icon in the checkbox alert -$alert-ios-checkbox-icon-start: 7px !default; - -/// @prop - Width of the icon in the checkbox alert -$alert-ios-checkbox-icon-width: 4px !default; - -/// @prop - Height of the icon in the checkbox alert -$alert-ios-checkbox-icon-height: 9px !default; - -/// @prop - Border width of the icon in the checkbox alert -$alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-border-width !default; - -/// @prop - Border style of the icon in the checkbox alert -$alert-ios-checkbox-icon-border-style: $alert-ios-checkbox-border-style !default; - -/// @prop - Border color of the icon in the checkbox alert -$alert-ios-checkbox-icon-border-color: $background-ios-color !default; - -/// @prop - Transform of the icon in the checkbox alert -$alert-ios-checkbox-icon-transform: rotate(45deg) !default; - -/// @prop - Filter of the translucent alert -$alert-ios-translucent-filter: saturate(180%) blur(20px) !default; - -/// @prop - Opacity of the translucent alert -$alert-ios-translucent-opacity: .88 !default; - - .alert-ios .alert-wrapper { @include border-radius($alert-ios-border-radius); diff --git a/packages/core/src/components/alert/alert.ios.vars.scss b/packages/core/src/components/alert/alert.ios.vars.scss new file mode 100644 index 0000000000..2966078d0e --- /dev/null +++ b/packages/core/src/components/alert/alert.ios.vars.scss @@ -0,0 +1,283 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Alert +// -------------------------------------------------- + +/// @prop - Max width of the alert +$alert-ios-max-width: 270px !default; + +/// @prop - Border radius of the alert +$alert-ios-border-radius: 13px !default; + +/// @prop - Background color of the alert +$alert-ios-background: #f8f8f8 !default; + +/// @prop - Box shadow of the alert +$alert-ios-box-shadow: none !default; + +/// @prop - Padding top of the alert head +$alert-ios-head-padding-top: 12px !default; + +/// @prop - Padding end of the alert head +$alert-ios-head-padding-end: 16px !default; + +/// @prop - Padding bottom of the alert head +$alert-ios-head-padding-bottom: 7px !default; + +/// @prop - Padding start of the alert head +$alert-ios-head-padding-start: $alert-ios-head-padding-end !default; + +/// @prop - Text align of the alert head +$alert-ios-head-text-align: center !default; + +/// @prop - Margin top of the alert title +$alert-ios-title-margin-top: 8px !default; + +/// @prop - Font size of the alert title +$alert-ios-title-font-size: 17px !default; + +/// @prop - Font weight of the alert title +$alert-ios-title-font-weight: 600 !default; + +/// @prop - Font size of the alert sub title +$alert-ios-sub-title-font-size: 14px !default; + +/// @prop - Text color of the alert sub title +$alert-ios-sub-title-text-color: #666 !default; + +/// @prop - Padding top of the alert message +$alert-ios-message-padding-top: 0 !default; + +/// @prop - Padding end of the alert message +$alert-ios-message-padding-end: 16px !default; + +/// @prop - Padding bottom of the alert message +$alert-ios-message-padding-bottom: 21px !default; + +/// @prop - Padding start of the alert message +$alert-ios-message-padding-start: $alert-ios-message-padding-end !default; + +/// @prop - Font size of the alert message +$alert-ios-message-font-size: 13px !default; + +/// @prop - Text align of the alert message +$alert-ios-message-text-align: center !default; + +/// @prop - Text color of the alert message +$alert-ios-message-text-color: inherit !default; + +/// @prop - Padding top of the alert empty message +$alert-ios-message-empty-padding-top: 0 !default; + +/// @prop - Padding end of the alert empty message +$alert-ios-message-empty-padding-end: 0 !default; + +/// @prop - Padding bottom of the alert empty message +$alert-ios-message-empty-padding-bottom: 12px !default; + +/// @prop - Padding start of the alert empty message +$alert-ios-message-empty-padding-start: 0 !default; + +/// @prop - Maximum height of the alert content +$alert-ios-content-max-height: 240px !default; + +/// @prop - Margin top of the alert input +$alert-ios-input-margin-top: 10px !default; + +/// @prop - Padding top on the alert input +$alert-ios-input-padding-top: 6px !default; + +/// @prop - Padding end on the alert input +$alert-ios-input-padding-end: $alert-ios-input-padding-top !default; + +/// @prop - Padding bottom on the alert input +$alert-ios-input-padding-bottom: $alert-ios-input-padding-top !default; + +/// @prop - Padding start on the alert input +$alert-ios-input-padding-start: $alert-ios-input-padding-end !default; + +/// @prop - Border color of the alert input +$alert-ios-input-border-color: #ccc !default; + +/// @prop - Border of the alert input +$alert-ios-input-border: $hairlines-width solid $alert-ios-input-border-color !default; + +/// @prop - Border radius of the alert input +$alert-ios-input-border-radius: 4px !default; + +/// @prop - Background color of the alert input +$alert-ios-input-background-color: #fff !default; + +/// @prop - Flex wrap of the alert button group +$alert-ios-button-group-flex-wrap: wrap !default; + +/// @prop - Flex of the alert button +$alert-ios-button-flex: 1 1 auto !default; + +/// @prop - Margin of the alert button +$alert-ios-button-margin: 0 !default; + +/// @prop - Min width of the alert button +$alert-ios-button-min-width: 50% !default; + +/// @prop - Minimum height of the alert button +$alert-ios-button-min-height: 44px !default; + +/// @prop - Font size of the alert button +$alert-ios-button-font-size: 17px !default; + +/// @prop - Color of the text in the alert button +$alert-ios-button-text-color: color($colors-ios, primary) !default; + +/// @prop - Background color of the alert button +$alert-ios-button-background-color: transparent !default; + +/// @prop - Background color of the alert activated button +$alert-ios-button-background-color-activated: rgba(115, 115, 115, .1) !default; + +/// @prop - Border width of the alert button +$alert-ios-button-border-width: $hairlines-width !default; + +/// @prop - Border style of the alert button +$alert-ios-button-border-style: solid !default; + +/// @prop - Border color of the alert button +$alert-ios-button-border-color: rgba(0, 0, 0, .1) !default; + +/// @prop - Border radius of the alert button +$alert-ios-button-border-radius: 0 !default; + +/// @prop - Font weight of the main text on the alert button +$alert-ios-button-main-font-weight: bold !default; + +/// @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; + +/// @prop - Padding top on the label for the radio alert +$alert-ios-radio-label-padding-top: 13px !default; + +/// @prop - Padding end on the label for the radio alert +$alert-ios-radio-label-padding-end: $alert-ios-radio-label-padding-top !default; + +/// @prop - Padding bottom on the label for the radio alert +$alert-ios-radio-label-padding-bottom: $alert-ios-radio-label-padding-top !default; + +/// @prop - Padding start on the label for the radio alert +$alert-ios-radio-label-padding-start: $alert-ios-radio-label-padding-end !default; + +/// @prop - Text color of the label for the radio alert +$alert-ios-radio-label-text-color: initial !default; + +/// @prop - Text color of the label for the checked radio alert +$alert-ios-radio-label-text-color-checked: $alert-ios-button-text-color !default; + +/// @prop - Min width of the radio alert +$alert-ios-radio-min-width: 30px !default; + +/// @prop - Top of the icon in the radio alert +$alert-ios-radio-icon-top: -7px !default; + +/// @prop - Start of the icon in the radio alert +$alert-ios-radio-icon-start: 7px !default; + +/// @prop - Width of the icon in the radio alert +$alert-ios-radio-icon-width: 6px !default; + +/// @prop - Height of the icon in the radio alert +$alert-ios-radio-icon-height: 12px !default; + +/// @prop - Border width of the icon in the radio alert +$alert-ios-radio-icon-border-width: 2px !default; + +/// @prop - Border style of the icon in the radio alert +$alert-ios-radio-icon-border-style: solid !default; + +/// @prop - Border color of the icon in the radio alert +$alert-ios-radio-icon-border-color: $alert-ios-button-text-color !default; + +/// @prop - Transform of the icon in the radio alert +$alert-ios-radio-icon-transform: rotate(45deg) !default; + +/// @prop - Padding top of the label for the checkbox in the alert +$alert-ios-checkbox-label-padding-top: 13px !default; + +/// @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; + +/// @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; + +/// @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; + +/// @prop - Text color of the label for the checkbox in the alert +$alert-ios-checkbox-label-text-color: initial !default; + +/// @prop - Text color of the label for the checked checkbox in the alert +$alert-ios-checkbox-label-text-color-checked: initial !default; + +/// @prop - Margin top of the checkbox in the alert +$alert-ios-checkbox-margin-top: 10px !default; + +/// @prop - Margin end of the checkbox in the alert +$alert-ios-checkbox-margin-end: 6px !default; + +/// @prop - Margin bottom of the checkbox in the alert +$alert-ios-checkbox-margin-bottom: 10px !default; + +/// @prop - Margin start of the checkbox in the alert +$alert-ios-checkbox-margin-start: 16px !default; + +/// @prop - Size of the checkbox in the alert +$alert-ios-checkbox-size: 21px !default; + +/// @prop - Border width of the checkbox in the alert +$alert-ios-checkbox-border-width: $hairlines-width !default; + +/// @prop - Border style of the checkbox in the alert +$alert-ios-checkbox-border-style: solid !default; + +/// @prop - Border radius of the checkbox in the alert +$alert-ios-checkbox-border-radius: 50% !default; + +/// @prop - Border color of the checkbox in the alert when off +$alert-ios-checkbox-border-color-off: $list-ios-border-color !default; + +/// @prop - Border color of the checkbox in the alert when on +$alert-ios-checkbox-border-color-on: color($colors-ios, primary) !default; + +/// @prop - Background color of the checkbox in the alert when off +$alert-ios-checkbox-background-color-off: $list-ios-background-color !default; + +/// @prop - Background color of the checkbox in the alert when on +$alert-ios-checkbox-background-color-on: color($colors-ios, primary) !default; + +/// @prop - Top of the icon in the checkbox alert +$alert-ios-checkbox-icon-top: 4px !default; + +/// @prop - Start of the icon in the checkbox alert +$alert-ios-checkbox-icon-start: 7px !default; + +/// @prop - Width of the icon in the checkbox alert +$alert-ios-checkbox-icon-width: 4px !default; + +/// @prop - Height of the icon in the checkbox alert +$alert-ios-checkbox-icon-height: 9px !default; + +/// @prop - Border width of the icon in the checkbox alert +$alert-ios-checkbox-icon-border-width: $alert-ios-checkbox-border-width !default; + +/// @prop - Border style of the icon in the checkbox alert +$alert-ios-checkbox-icon-border-style: $alert-ios-checkbox-border-style !default; + +/// @prop - Border color of the icon in the checkbox alert +$alert-ios-checkbox-icon-border-color: $background-ios-color !default; + +/// @prop - Transform of the icon in the checkbox alert +$alert-ios-checkbox-icon-transform: rotate(45deg) !default; + +/// @prop - Filter of the translucent alert +$alert-ios-translucent-filter: saturate(180%) blur(20px) !default; + +/// @prop - Opacity of the translucent alert +$alert-ios-translucent-opacity: .88 !default; diff --git a/packages/core/src/components/alert/alert.md.scss b/packages/core/src/components/alert/alert.md.scss index 15b468c02e..927133b11e 100644 --- a/packages/core/src/components/alert/alert.md.scss +++ b/packages/core/src/components/alert/alert.md.scss @@ -1,322 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./alert"; +@import "./alert.md.vars"; -// Material Design Alerts +// Material Design Alert // -------------------------------------------------- -/// @prop - Max width of the alert -$alert-md-max-width: 280px !default; - -/// @prop - Border radius of the alert -$alert-md-border-radius: 2px !default; - -/// @prop - Background color of the alert -$alert-md-background-color: #fafafa !default; - -/// @prop - Box shadow color of the alert -$alert-md-box-shadow-color: rgba(0, 0, 0, .4) !default; - -/// @prop - Box shadow of the alert -$alert-md-box-shadow: 0 16px 20px $alert-md-box-shadow-color !default; - -/// @prop - Padding top of the alert head -$alert-md-head-padding-top: 24px !default; - -/// @prop - Padding end of the alert head -$alert-md-head-padding-end: 24px !default; - -/// @prop - Padding bottom of the alert head -$alert-md-head-padding-bottom: 20px !default; - -/// @prop - Padding start of the alert head -$alert-md-head-padding-start: 24px !default; - - -/// @prop - Text align of the alert head -$alert-md-head-text-align: start !default; - -/// @prop - Font size of the alert title -$alert-md-title-font-size: 22px !default; - -/// @prop - Font size of the alert sub title -$alert-md-sub-title-font-size: 16px !default; - -/// @prop - Padding top of the alert message -$alert-md-message-padding-top: 0 !default; - -/// @prop - Padding end of the alert message -$alert-md-message-padding-end: 24px !default; - -/// @prop - Padding bottom of the alert message -$alert-md-message-padding-bottom: 24px !default; - -/// @prop - Padding start of the alert message -$alert-md-message-padding-start: 24px !default; - -/// @prop - Font size of the alert message -$alert-md-message-font-size: 15px !default; - -/// @prop - Text color of the alert message -$alert-md-message-text-color: rgba(0, 0, 0, .5) !default; - -/// @prop - Padding top of the alert empty message -$alert-md-message-empty-padding-top: 0 !default; - -/// @prop - Padding end of the alert empty message -$alert-md-message-empty-padding-end: $alert-md-message-empty-padding-top !default; - -/// @prop - Padding bottom of the alert empty message -$alert-md-message-empty-padding-bottom: $alert-md-message-empty-padding-top !default; - -/// @prop - Padding start of the alert empty message -$alert-md-message-empty-padding-start: $alert-md-message-empty-padding-end !default; - -/// @prop - Maximum height of the alert content -$alert-md-content-max-height: 240px !default; - -/// @prop - Border width of the alert input -$alert-md-input-border-width: 1px !default; - -/// @prop - Border style of the alert input -$alert-md-input-border-style: solid !default; - -/// @prop - Border color of the alert input -$alert-md-input-border-color: #dedede !default; - -/// @prop - Text color of the alert input -$alert-md-input-text-color: #000 !default; - -/// @prop - Border width of the alert input when focused -$alert-md-input-border-width-focused: 2px !default; - -/// @prop - Border style of the alert input when focused -$alert-md-input-border-style-focused: $alert-md-input-border-style !default; - -/// @prop - Border color of the alert input when focused -$alert-md-input-border-color-focused: color($colors-md, primary) !default; - -/// @prop - Margin top of the alert input -$alert-md-input-margin-top: 5px !default; - -/// @prop - Margin end of the alert input -$alert-md-input-margin-end: 0 !default; - -/// @prop - Margin bottom of the alert input -$alert-md-input-margin-bottom: 5px !default; - -/// @prop - Margin start of the alert input -$alert-md-input-margin-start: 0 !default; - -/// @prop - Flex wrap of the alert button group -$alert-md-button-group-flex-wrap: wrap-reverse !default; - -/// @prop - Padding top of the alert button group -$alert-md-button-group-padding-top: 8px !default; - -/// @prop - Padding end of the alert button group -$alert-md-button-group-padding-end: 8px !default; - -/// @prop - Padding bottom of the alert button group -$alert-md-button-group-padding-bottom: 8px !default; - -/// @prop - Padding start of the alert button group -$alert-md-button-group-padding-start: 24px !default; - -/// @prop - Justify content of the alert button group -$alert-md-button-group-justify-content: flex-end !default; - -/// @prop - Padding top of the alert button -$alert-md-button-padding-top: 10px !default; - -/// @prop - Padding end of the alert button -$alert-md-button-padding-end: $alert-md-button-padding-top !default; - -/// @prop - Padding bottom of the alert button -$alert-md-button-padding-bottom: $alert-md-button-padding-top !default; - -/// @prop - Padding start of the alert button -$alert-md-button-padding-start: $alert-md-button-padding-end !default; - -/// @prop - Margin top of the alert button -$alert-md-button-margin-top: 0 !default; - -/// @prop - Margin end of the alert button -$alert-md-button-margin-end: 8px !default; - -/// @prop - Margin bottom of the alert button -$alert-md-button-margin-bottom: 0 !default; - -/// @prop - Margin start of the alert button -$alert-md-button-margin-start: 0 !default; - -/// @prop - Font weight of the alert button -$alert-md-button-font-weight: 500 !default; - -/// @prop - Text color of the alert button -$alert-md-button-text-color: color($colors-md, primary) !default; - -/// @prop - Background color of the alert button -$alert-md-button-background-color: transparent !default; - -/// @prop - Background color of the alert activated button -$alert-md-button-background-color-activated: rgba(158, 158, 158, .2) !default; - -/// @prop - Border radius of the alert button -$alert-md-button-border-radius: 2px !default; - -/// @prop - Text transform of the alert button -$alert-md-button-text-transform: uppercase !default; - -/// @prop - Text align of the alert button -$alert-md-button-text-align: end !default; - - -/// @prop - Border top of the alert list -$alert-md-list-border-top: 1px solid $alert-md-input-border-color !default; - -/// @prop - Border bottom of the alert list -$alert-md-list-border-bottom: $alert-md-list-border-top !default; - -/// @prop - Padding top on the label for the radio alert -$alert-md-radio-label-padding-top: 13px !default; - -/// @prop - Padding end on the label for the radio alert -$alert-md-radio-label-padding-end: 26px !default; - -/// @prop - Padding bottom on the label for the radio alert -$alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top !default; - -/// @prop - Padding start on the label for the radio alert -$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end !default; - -/// @prop - Text color of the label for the radio alert -$alert-md-radio-label-text-color: initial !default; - -/// @prop - Text color of the label for the checked radio alert -$alert-md-radio-label-text-color-checked: $alert-md-button-text-color !default; - -/// @prop - Top of the alert radio -$alert-md-radio-top: 0 !default; - -/// @prop - Left of the alert radio -$alert-md-radio-left: 13px !default; - -/// @prop - Width of the alert radio -$alert-md-radio-width: 16px !default; - -/// @prop - Height of the alert radio -$alert-md-radio-height: 16px !default; - -/// @prop - Border width of the alert radio -$alert-md-radio-border-width: 2px !default; - -/// @prop - Border style of the alert radio -$alert-md-radio-border-style: solid !default; - -/// @prop - Border radius of the alert radio -$alert-md-radio-border-radius: 50% !default; - -/// @prop - Border color of the alert radio when off -$alert-md-radio-border-color-off: darken($list-md-border-color, 40%) !default; - -/// @prop - Border color of the alert radio when on -$alert-md-radio-border-color-on: $alert-md-button-text-color !default; - -/// @prop - Top of the icon in the alert radio -$alert-md-radio-icon-top: 2px !default; - -/// @prop - Start of the icon in the radio alert -$alert-md-radio-icon-start: 2px !default; - -/// @prop - Width of the icon in the alert radio -$alert-md-radio-icon-width: 8px !default; - -/// @prop - Height of the icon in the alert radio -$alert-md-radio-icon-height: 8px !default; - -/// @prop - Border radius of the icon in the alert radio -$alert-md-radio-icon-border-radius: $alert-md-radio-border-radius !default; - -/// @prop - Transform of the icon in the alert radio when off -$alert-md-radio-icon-transform-off: scale3d(0, 0, 0) !default; - -/// @prop - Transform of the icon in the alert radio when on -$alert-md-radio-icon-transform-on: scale3d(1, 1, 1) !default; - -/// @prop - Transition of the icon in the alert radio -$alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0, .2, 1) !default; - -/// @prop - Padding top of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-top: 13px !default; - -/// @prop - Padding end of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-end: 26px !default; - -/// @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; - -/// @prop - Padding start of the label for the checkbox in the alert -$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end !default; - -/// @prop - Text color of the label for the checkbox in the alert -$alert-md-checkbox-label-text-color: initial !default; - -/// @prop - Text color of the label for the checked checkbox in the alert -$alert-md-checkbox-label-text-color-checked: initial !default; - - -/// @prop - Top of the checkbox in the alert -$alert-md-checkbox-top: 0 !default; - -/// @prop - Left of the checkbox in the alert -$alert-md-checkbox-left: 13px !default; - -/// @prop - Width of the checkbox in the alert -$alert-md-checkbox-width: 16px !default; - -/// @prop - Height of the checkbox in the alert -$alert-md-checkbox-height: 16px !default; - -/// @prop - Border width of the checkbox in the alert -$alert-md-checkbox-border-width: 2px !default; - -/// @prop - Border style of the checkbox in the alert -$alert-md-checkbox-border-style: solid !default; - -/// @prop - Border radius of the checkbox in the alert -$alert-md-checkbox-border-radius: 2px !default; - -/// @prop - Border color of the checkbox in the alert when off -$alert-md-checkbox-border-color-off: darken($list-md-border-color, 40%) !default; - -/// @prop - Border color of the checkbox in the alert when on -$alert-md-checkbox-border-color-on: $alert-md-button-text-color !default; - - -/// @prop - Top of the icon in the checkbox alert -$alert-md-checkbox-icon-top: 0 !default; - -/// @prop - Start of the icon in the checkbox alert -$alert-md-checkbox-icon-start: 3px !default; - -/// @prop - Width of the icon in the checkbox alert -$alert-md-checkbox-icon-width: 6px !default; - -/// @prop - Height of the icon in the checkbox alert -$alert-md-checkbox-icon-height: 10px !default; - -/// @prop - Border width of the icon in the checkbox alert -$alert-md-checkbox-icon-border-width: 2px !default; - -/// @prop - Border style of the icon in the checkbox alert -$alert-md-checkbox-icon-border-style: solid !default; - -/// @prop - Border color of the icon in the checkbox alert -$alert-md-checkbox-icon-border-color: color-contrast($colors-md, $alert-md-checkbox-border-color-on) !default; - -/// @prop - Transform of the icon in the checkbox alert -$alert-md-checkbox-icon-transform: rotate(45deg) !default; - .alert-md .alert-wrapper { @include border-radius($alert-md-border-radius); diff --git a/packages/core/src/components/alert/alert.md.vars.scss b/packages/core/src/components/alert/alert.md.vars.scss new file mode 100644 index 0000000000..a51808aac5 --- /dev/null +++ b/packages/core/src/components/alert/alert.md.vars.scss @@ -0,0 +1,313 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Alert +// -------------------------------------------------- + +/// @prop - Max width of the alert +$alert-md-max-width: 280px !default; + +/// @prop - Border radius of the alert +$alert-md-border-radius: 2px !default; + +/// @prop - Background color of the alert +$alert-md-background-color: #fafafa !default; + +/// @prop - Box shadow color of the alert +$alert-md-box-shadow-color: rgba(0, 0, 0, .4) !default; + +/// @prop - Box shadow of the alert +$alert-md-box-shadow: 0 16px 20px $alert-md-box-shadow-color !default; + +/// @prop - Padding top of the alert head +$alert-md-head-padding-top: 24px !default; + +/// @prop - Padding end of the alert head +$alert-md-head-padding-end: 24px !default; + +/// @prop - Padding bottom of the alert head +$alert-md-head-padding-bottom: 20px !default; + +/// @prop - Padding start of the alert head +$alert-md-head-padding-start: 24px !default; + +/// @prop - Text align of the alert head +$alert-md-head-text-align: start !default; + +/// @prop - Font size of the alert title +$alert-md-title-font-size: 22px !default; + +/// @prop - Font size of the alert sub title +$alert-md-sub-title-font-size: 16px !default; + +/// @prop - Padding top of the alert message +$alert-md-message-padding-top: 0 !default; + +/// @prop - Padding end of the alert message +$alert-md-message-padding-end: 24px !default; + +/// @prop - Padding bottom of the alert message +$alert-md-message-padding-bottom: 24px !default; + +/// @prop - Padding start of the alert message +$alert-md-message-padding-start: 24px !default; + +/// @prop - Font size of the alert message +$alert-md-message-font-size: 15px !default; + +/// @prop - Text color of the alert message +$alert-md-message-text-color: rgba(0, 0, 0, .5) !default; + +/// @prop - Padding top of the alert empty message +$alert-md-message-empty-padding-top: 0 !default; + +/// @prop - Padding end of the alert empty message +$alert-md-message-empty-padding-end: $alert-md-message-empty-padding-top !default; + +/// @prop - Padding bottom of the alert empty message +$alert-md-message-empty-padding-bottom: $alert-md-message-empty-padding-top !default; + +/// @prop - Padding start of the alert empty message +$alert-md-message-empty-padding-start: $alert-md-message-empty-padding-end !default; + +/// @prop - Maximum height of the alert content +$alert-md-content-max-height: 240px !default; + +/// @prop - Border width of the alert input +$alert-md-input-border-width: 1px !default; + +/// @prop - Border style of the alert input +$alert-md-input-border-style: solid !default; + +/// @prop - Border color of the alert input +$alert-md-input-border-color: #dedede !default; + +/// @prop - Text color of the alert input +$alert-md-input-text-color: #000 !default; + +/// @prop - Border width of the alert input when focused +$alert-md-input-border-width-focused: 2px !default; + +/// @prop - Border style of the alert input when focused +$alert-md-input-border-style-focused: $alert-md-input-border-style !default; + +/// @prop - Border color of the alert input when focused +$alert-md-input-border-color-focused: color($colors-md, primary) !default; + +/// @prop - Margin top of the alert input +$alert-md-input-margin-top: 5px !default; + +/// @prop - Margin end of the alert input +$alert-md-input-margin-end: 0 !default; + +/// @prop - Margin bottom of the alert input +$alert-md-input-margin-bottom: 5px !default; + +/// @prop - Margin start of the alert input +$alert-md-input-margin-start: 0 !default; + +/// @prop - Flex wrap of the alert button group +$alert-md-button-group-flex-wrap: wrap-reverse !default; + +/// @prop - Padding top of the alert button group +$alert-md-button-group-padding-top: 8px !default; + +/// @prop - Padding end of the alert button group +$alert-md-button-group-padding-end: 8px !default; + +/// @prop - Padding bottom of the alert button group +$alert-md-button-group-padding-bottom: 8px !default; + +/// @prop - Padding start of the alert button group +$alert-md-button-group-padding-start: 24px !default; + +/// @prop - Justify content of the alert button group +$alert-md-button-group-justify-content: flex-end !default; + +/// @prop - Padding top of the alert button +$alert-md-button-padding-top: 10px !default; + +/// @prop - Padding end of the alert button +$alert-md-button-padding-end: $alert-md-button-padding-top !default; + +/// @prop - Padding bottom of the alert button +$alert-md-button-padding-bottom: $alert-md-button-padding-top !default; + +/// @prop - Padding start of the alert button +$alert-md-button-padding-start: $alert-md-button-padding-end !default; + +/// @prop - Margin top of the alert button +$alert-md-button-margin-top: 0 !default; + +/// @prop - Margin end of the alert button +$alert-md-button-margin-end: 8px !default; + +/// @prop - Margin bottom of the alert button +$alert-md-button-margin-bottom: 0 !default; + +/// @prop - Margin start of the alert button +$alert-md-button-margin-start: 0 !default; + +/// @prop - Font weight of the alert button +$alert-md-button-font-weight: 500 !default; + +/// @prop - Text color of the alert button +$alert-md-button-text-color: color($colors-md, primary) !default; + +/// @prop - Background color of the alert button +$alert-md-button-background-color: transparent !default; + +/// @prop - Background color of the alert activated button +$alert-md-button-background-color-activated: rgba(158, 158, 158, .2) !default; + +/// @prop - Border radius of the alert button +$alert-md-button-border-radius: 2px !default; + +/// @prop - Text transform of the alert button +$alert-md-button-text-transform: uppercase !default; + +/// @prop - Text align of the alert button +$alert-md-button-text-align: end !default; + +/// @prop - Border top of the alert list +$alert-md-list-border-top: 1px solid $alert-md-input-border-color !default; + +/// @prop - Border bottom of the alert list +$alert-md-list-border-bottom: $alert-md-list-border-top !default; + +/// @prop - Padding top on the label for the radio alert +$alert-md-radio-label-padding-top: 13px !default; + +/// @prop - Padding end on the label for the radio alert +$alert-md-radio-label-padding-end: 26px !default; + +/// @prop - Padding bottom on the label for the radio alert +$alert-md-radio-label-padding-bottom: $alert-md-radio-label-padding-top !default; + +/// @prop - Padding start on the label for the radio alert +$alert-md-radio-label-padding-start: $alert-md-radio-label-padding-end !default; + +/// @prop - Text color of the label for the radio alert +$alert-md-radio-label-text-color: initial !default; + +/// @prop - Text color of the label for the checked radio alert +$alert-md-radio-label-text-color-checked: $alert-md-button-text-color !default; + +/// @prop - Top of the alert radio +$alert-md-radio-top: 0 !default; + +/// @prop - Left of the alert radio +$alert-md-radio-left: 13px !default; + +/// @prop - Width of the alert radio +$alert-md-radio-width: 16px !default; + +/// @prop - Height of the alert radio +$alert-md-radio-height: 16px !default; + +/// @prop - Border width of the alert radio +$alert-md-radio-border-width: 2px !default; + +/// @prop - Border style of the alert radio +$alert-md-radio-border-style: solid !default; + +/// @prop - Border radius of the alert radio +$alert-md-radio-border-radius: 50% !default; + +/// @prop - Border color of the alert radio when off +$alert-md-radio-border-color-off: darken($list-md-border-color, 40%) !default; + +/// @prop - Border color of the alert radio when on +$alert-md-radio-border-color-on: $alert-md-button-text-color !default; + +/// @prop - Top of the icon in the alert radio +$alert-md-radio-icon-top: 2px !default; + +/// @prop - Start of the icon in the radio alert +$alert-md-radio-icon-start: 2px !default; + +/// @prop - Width of the icon in the alert radio +$alert-md-radio-icon-width: 8px !default; + +/// @prop - Height of the icon in the alert radio +$alert-md-radio-icon-height: 8px !default; + +/// @prop - Border radius of the icon in the alert radio +$alert-md-radio-icon-border-radius: $alert-md-radio-border-radius !default; + +/// @prop - Transform of the icon in the alert radio when off +$alert-md-radio-icon-transform-off: scale3d(0, 0, 0) !default; + +/// @prop - Transform of the icon in the alert radio when on +$alert-md-radio-icon-transform-on: scale3d(1, 1, 1) !default; + +/// @prop - Transition of the icon in the alert radio +$alert-md-radio-icon-transition: transform 280ms cubic-bezier(.4, 0, .2, 1) !default; + +/// @prop - Padding top of the label for the checkbox in the alert +$alert-md-checkbox-label-padding-top: 13px !default; + +/// @prop - Padding end of the label for the checkbox in the alert +$alert-md-checkbox-label-padding-end: 26px !default; + +/// @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; + +/// @prop - Padding start of the label for the checkbox in the alert +$alert-md-checkbox-label-padding-start: $alert-md-checkbox-label-padding-end !default; + +/// @prop - Text color of the label for the checkbox in the alert +$alert-md-checkbox-label-text-color: initial !default; + +/// @prop - Text color of the label for the checked checkbox in the alert +$alert-md-checkbox-label-text-color-checked: initial !default; + +/// @prop - Top of the checkbox in the alert +$alert-md-checkbox-top: 0 !default; + +/// @prop - Left of the checkbox in the alert +$alert-md-checkbox-left: 13px !default; + +/// @prop - Width of the checkbox in the alert +$alert-md-checkbox-width: 16px !default; + +/// @prop - Height of the checkbox in the alert +$alert-md-checkbox-height: 16px !default; + +/// @prop - Border width of the checkbox in the alert +$alert-md-checkbox-border-width: 2px !default; + +/// @prop - Border style of the checkbox in the alert +$alert-md-checkbox-border-style: solid !default; + +/// @prop - Border radius of the checkbox in the alert +$alert-md-checkbox-border-radius: 2px !default; + +/// @prop - Border color of the checkbox in the alert when off +$alert-md-checkbox-border-color-off: darken($list-md-border-color, 40%) !default; + +/// @prop - Border color of the checkbox in the alert when on +$alert-md-checkbox-border-color-on: $alert-md-button-text-color !default; + +/// @prop - Top of the icon in the checkbox alert +$alert-md-checkbox-icon-top: 0 !default; + +/// @prop - Start of the icon in the checkbox alert +$alert-md-checkbox-icon-start: 3px !default; + +/// @prop - Width of the icon in the checkbox alert +$alert-md-checkbox-icon-width: 6px !default; + +/// @prop - Height of the icon in the checkbox alert +$alert-md-checkbox-icon-height: 10px !default; + +/// @prop - Border width of the icon in the checkbox alert +$alert-md-checkbox-icon-border-width: 2px !default; + +/// @prop - Border style of the icon in the checkbox alert +$alert-md-checkbox-icon-border-style: solid !default; + +/// @prop - Border color of the icon in the checkbox alert +$alert-md-checkbox-icon-border-color: color-contrast($colors-md, $alert-md-checkbox-border-color-on) !default; + +/// @prop - Transform of the icon in the checkbox alert +$alert-md-checkbox-icon-transform: rotate(45deg) !default; diff --git a/packages/core/src/components/alert/alert.scss b/packages/core/src/components/alert/alert.scss index fd995fc9b8..b71c57e9ec 100644 --- a/packages/core/src/components/alert/alert.scss +++ b/packages/core/src/components/alert/alert.scss @@ -1,24 +1,8 @@ -@import "../../themes/ionic.globals"; +@import "./alert.vars"; -// Alerts +// Alert // -------------------------------------------------- -/// @prop - Minimum width of the alert -$alert-min-width: 250px !default; - -/// @prop - Maximum height of the alert -$alert-max-height: 90% !default; - -/// @prop - Line height of the alert button -$alert-button-line-height: 20px !default; - -/// @prop - Font size of the alert button -$alert-button-font-size: 14px !default; - -/// @prop - Color of the alert input placeholder -$alert-input-placeholder-color: #999 !default; - - ion-alert { @include position(0, 0, 0, 0); diff --git a/packages/core/src/components/alert/alert.vars.scss b/packages/core/src/components/alert/alert.vars.scss new file mode 100644 index 0000000000..208d779b4b --- /dev/null +++ b/packages/core/src/components/alert/alert.vars.scss @@ -0,0 +1,19 @@ +@import "../../themes/ionic.globals"; + +// Alert +// -------------------------------------------------- + +/// @prop - Minimum width of the alert +$alert-min-width: 250px !default; + +/// @prop - Maximum height of the alert +$alert-max-height: 90% !default; + +/// @prop - Line height of the alert button +$alert-button-line-height: 20px !default; + +/// @prop - Font size of the alert button +$alert-button-font-size: 14px !default; + +/// @prop - Color of the alert input placeholder +$alert-input-placeholder-color: #999 !default; diff --git a/packages/core/src/components/app/app.ios.scss b/packages/core/src/components/app/app.ios.scss index dc659ae835..5dd3b827b2 100644 --- a/packages/core/src/components/app/app.ios.scss +++ b/packages/core/src/components/app/app.ios.scss @@ -1,13 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./app"; - -@import "../tabs/tabs.ios.vars"; +@import "./app.ios.vars"; // iOS App // -------------------------------------------------- -$app-ios-statusbar-padding: 20px !default; - .app-ios { @include footer-safe-area($toolbar-ios-height, $toolbar-ios-padding, $tabs-ios-tab-height); diff --git a/packages/core/src/components/app/app.ios.vars.scss b/packages/core/src/components/app/app.ios.vars.scss new file mode 100644 index 0000000000..33f31e71cb --- /dev/null +++ b/packages/core/src/components/app/app.ios.vars.scss @@ -0,0 +1,8 @@ +@import "../../themes/ionic.globals.ios"; + +@import "../tabs/tabs.ios.vars"; + +// iOS App +// -------------------------------------------------- + +$app-ios-statusbar-padding: 20px !default; diff --git a/packages/core/src/components/app/app.md.scss b/packages/core/src/components/app/app.md.scss index 2c12cc1944..aa34acd458 100644 --- a/packages/core/src/components/app/app.md.scss +++ b/packages/core/src/components/app/app.md.scss @@ -1,14 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./app"; - -@import "../tabs/tabs.md.vars"; - +@import "./app.md.vars"; // Material Design App // -------------------------------------------------- -$app-md-statusbar-padding: 20px !default; - .app-md { @include footer-safe-area($toolbar-md-height, $toolbar-md-padding, $tabs-md-tab-height); diff --git a/packages/core/src/components/app/app.md.vars.scss b/packages/core/src/components/app/app.md.vars.scss new file mode 100644 index 0000000000..c6cd6b7d3b --- /dev/null +++ b/packages/core/src/components/app/app.md.vars.scss @@ -0,0 +1,9 @@ +@import "../../themes/ionic.globals.md"; + +@import "../tabs/tabs.md.vars"; + + +// Material Design App +// -------------------------------------------------- + +$app-md-statusbar-padding: 20px !default; diff --git a/packages/core/src/components/app/app.scss b/packages/core/src/components/app/app.scss index 6fa5f0a1fa..d727d6675f 100644 --- a/packages/core/src/components/app/app.scss +++ b/packages/core/src/components/app/app.scss @@ -1,8 +1,4 @@ -// Globals -// -------------------------------------------------- -@import "../../themes/ionic.globals"; -@import "../../themes/ionic.mixins"; - +@import "./app.vars"; // Normalize // -------------------------------------------------- @@ -14,71 +10,6 @@ @import "../../themes/util"; -// App -// -------------------------------------------------- -// All font sizes use rem units -// By default, 1rem equals 10px. For example, 1.4rem === 14px -// $font-size-root value, which is on the element -// is what can scale all fonts - -/// @prop - Font size of the root html -$font-size-root: 62.5% !default; - -/// @prop - Font weight of all headings -$headings-font-weight: 500 !default; - -/// @prop - Line height of all headings -$headings-line-height: 1.2 !default; - -/// @prop - Font size of heading level 1 -$h1-font-size: 2.6rem !default; - -/// @prop - Font size of heading level 2 -$h2-font-size: 2.4rem !default; - -/// @prop - Font size of heading level 3 -$h3-font-size: 2.2rem !default; - -/// @prop - Font size of heading level 4 -$h4-font-size: 2rem !default; - -/// @prop - Font size of heading level 5 -$h5-font-size: 1.8rem !default; - -/// @prop - Font size of heading level 6 -$h6-font-size: 1.6rem !default; - - -// Responsive Utilities -// -------------------------------------------------- - -/// @prop - Whether to include all of the responsive utility attributes -$include-responsive-utilities: true !default; - -/// @prop - Whether to include all of the responsive text alignment attributes -$include-text-alignment-utilities: $include-responsive-utilities !default; - -/// @prop - Whether to include all of the responsive text transform attributes -$include-text-transform-utilities: $include-responsive-utilities !default; - -/// @prop - Whether to include all of the responsive float attributes -$include-float-element-utilities: $include-responsive-utilities !default; - - -// Screen Breakpoints -// -------------------------------------------------- - -/// @prop - The minimum dimensions at which your layout will change, -/// adapting to different screen sizes, for use in media queries -$screen-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px -) !default; - - // App Structure // -------------------------------------------------- diff --git a/packages/core/src/components/app/app.vars.scss b/packages/core/src/components/app/app.vars.scss new file mode 100644 index 0000000000..32a0cc4770 --- /dev/null +++ b/packages/core/src/components/app/app.vars.scss @@ -0,0 +1,69 @@ +// Globals +// -------------------------------------------------- +@import "../../themes/ionic.globals"; +@import "../../themes/ionic.mixins"; + + +// App +// -------------------------------------------------- +// All font sizes use rem units +// By default, 1rem equals 10px. For example, 1.4rem === 14px +// $font-size-root value, which is on the element +// is what can scale all fonts + +/// @prop - Font size of the root html +$font-size-root: 62.5% !default; + +/// @prop - Font weight of all headings +$headings-font-weight: 500 !default; + +/// @prop - Line height of all headings +$headings-line-height: 1.2 !default; + +/// @prop - Font size of heading level 1 +$h1-font-size: 2.6rem !default; + +/// @prop - Font size of heading level 2 +$h2-font-size: 2.4rem !default; + +/// @prop - Font size of heading level 3 +$h3-font-size: 2.2rem !default; + +/// @prop - Font size of heading level 4 +$h4-font-size: 2rem !default; + +/// @prop - Font size of heading level 5 +$h5-font-size: 1.8rem !default; + +/// @prop - Font size of heading level 6 +$h6-font-size: 1.6rem !default; + + +// Responsive Utilities +// -------------------------------------------------- + +/// @prop - Whether to include all of the responsive utility attributes +$include-responsive-utilities: true !default; + +/// @prop - Whether to include all of the responsive text alignment attributes +$include-text-alignment-utilities: $include-responsive-utilities !default; + +/// @prop - Whether to include all of the responsive text transform attributes +$include-text-transform-utilities: $include-responsive-utilities !default; + +/// @prop - Whether to include all of the responsive float attributes +$include-float-element-utilities: $include-responsive-utilities !default; + + +// Screen Breakpoints +// -------------------------------------------------- + +/// @prop - The minimum dimensions at which your layout will change, +/// adapting to different screen sizes, for use in media queries +$screen-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px +) !default; diff --git a/packages/core/src/components/avatar/avatar.ios.scss b/packages/core/src/components/avatar/avatar.ios.scss index f5bfb84c7d..233ffb9b7b 100644 --- a/packages/core/src/components/avatar/avatar.ios.scss +++ b/packages/core/src/components/avatar/avatar.ios.scss @@ -1,6 +1,20 @@ -@import "../../themes/ionic.globals.ios"; @import "./avatar"; +@import "./avatar.ios.vars"; // iOS Avatar // -------------------------------------------------- + +.avatar-ios { + @include border-radius($avatar-ios-border-radius); + + width: $avatar-ios-width; + height: $avatar-ios-height; +} + +.avatar-ios ion-img, +.avatar-ios img { + @include border-radius($avatar-ios-border-radius); + + overflow: hidden; +} \ No newline at end of file diff --git a/packages/core/src/components/avatar/avatar.ios.vars.scss b/packages/core/src/components/avatar/avatar.ios.vars.scss new file mode 100644 index 0000000000..4a8a931c7b --- /dev/null +++ b/packages/core/src/components/avatar/avatar.ios.vars.scss @@ -0,0 +1,14 @@ +@import "../../themes/ionic.globals.ios"; + + +// iOS Avatar +// -------------------------------------------------- + +/// @prop - Width of the avatar +$avatar-ios-width: 48px !default; + +/// @prop - Height of the avatar +$avatar-ios-height: $avatar-ios-width !default; + +/// @prop - Border radius of the avatar +$avatar-ios-border-radius: 50% !default; diff --git a/packages/core/src/components/avatar/avatar.md.scss b/packages/core/src/components/avatar/avatar.md.scss index 4bbcd8cde6..251c32ba0d 100644 --- a/packages/core/src/components/avatar/avatar.md.scss +++ b/packages/core/src/components/avatar/avatar.md.scss @@ -1,6 +1,20 @@ -@import "../../themes/ionic.globals.md"; @import "./avatar"; +@import "./avatar.md.vars"; // Material Design Avatar // -------------------------------------------------- + +.avatar-md { + @include border-radius($avatar-md-border-radius); + + width: $avatar-md-width; + height: $avatar-md-height; +} + +.avatar-md ion-img, +.avatar-md img { + @include border-radius($avatar-md-border-radius); + + overflow: hidden; +} \ No newline at end of file diff --git a/packages/core/src/components/avatar/avatar.md.vars.scss b/packages/core/src/components/avatar/avatar.md.vars.scss new file mode 100644 index 0000000000..f397e61c4b --- /dev/null +++ b/packages/core/src/components/avatar/avatar.md.vars.scss @@ -0,0 +1,14 @@ +@import "../../themes/ionic.globals.md"; + + +// Material Design Avatar +// -------------------------------------------------- + +/// @prop - Width of the avatar +$avatar-md-width: 64px !default; + +/// @prop - Height of the avatar +$avatar-md-height: $avatar-md-width !default; + +/// @prop - Border radius of the avatar +$avatar-md-border-radius: 50% !default; diff --git a/packages/core/src/components/avatar/avatar.scss b/packages/core/src/components/avatar/avatar.scss index 951217f2bc..0570a532c0 100644 --- a/packages/core/src/components/avatar/avatar.scss +++ b/packages/core/src/components/avatar/avatar.scss @@ -7,3 +7,8 @@ ion-avatar { display: block; } + +ion-avatar img { + width: 100%; + height: 100%; +} diff --git a/packages/core/src/components/avatar/test/basic/index.html b/packages/core/src/components/avatar/test/basic/index.html new file mode 100644 index 0000000000..c2867761c8 --- /dev/null +++ b/packages/core/src/components/avatar/test/basic/index.html @@ -0,0 +1,43 @@ + + + + + + Avatar - Basic + + + + + + + + + + Avatar - Basic + + + + + + + + + + + + + Chip Avatar + + + + + + + Item Avatar + + + + + + + diff --git a/packages/core/src/components/backdrop/backdrop.scss b/packages/core/src/components/backdrop/backdrop.scss index fef0ea5558..a240f215b0 100644 --- a/packages/core/src/components/backdrop/backdrop.scss +++ b/packages/core/src/components/backdrop/backdrop.scss @@ -1,11 +1,8 @@ -@import "../../themes/ionic.globals"; +@import "./backdrop.vars"; // Backdrop // -------------------------------------------------- -/// @prop - Color of the backdrop -$backdrop-color: #000 !default; - ion-backdrop { @include position(0, null, null, 0); diff --git a/packages/core/src/components/backdrop/backdrop.vars.scss b/packages/core/src/components/backdrop/backdrop.vars.scss new file mode 100644 index 0000000000..809165e27f --- /dev/null +++ b/packages/core/src/components/backdrop/backdrop.vars.scss @@ -0,0 +1,7 @@ +@import "../../themes/ionic.globals"; + +// Backdrop +// -------------------------------------------------- + +/// @prop - Color of the backdrop +$backdrop-color: #000 !default; diff --git a/packages/core/src/components/badge/badge.ios.scss b/packages/core/src/components/badge/badge.ios.scss index 7e9a22b45e..650bb7c1ef 100644 --- a/packages/core/src/components/badge/badge.ios.scss +++ b/packages/core/src/components/badge/badge.ios.scss @@ -1,20 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./badge"; - +@import "./badge.ios.vars"; // iOS Badge // -------------------------------------------------- -/// @prop - Border radius of the badge -$badge-ios-border-radius: 10px !default; - -/// @prop - Background color of the badge -$badge-ios-background-color: color($colors-ios, primary) !default; - -/// @prop - Text color of the badge -$badge-ios-text-color: color-contrast($colors-ios, $badge-ios-background-color) !default; - - .badge-ios { @include border-radius($badge-ios-border-radius); diff --git a/packages/core/src/components/badge/badge.ios.vars.scss b/packages/core/src/components/badge/badge.ios.vars.scss new file mode 100644 index 0000000000..8df2642f3c --- /dev/null +++ b/packages/core/src/components/badge/badge.ios.vars.scss @@ -0,0 +1,13 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Badge +// -------------------------------------------------- + +/// @prop - Border radius of the badge +$badge-ios-border-radius: 10px !default; + +/// @prop - Background color of the badge +$badge-ios-background-color: color($colors-ios, primary) !default; + +/// @prop - Text color of the badge +$badge-ios-text-color: color-contrast($colors-ios, $badge-ios-background-color) !default; diff --git a/packages/core/src/components/badge/badge.md.scss b/packages/core/src/components/badge/badge.md.scss index 49bb3d5eee..6d3ac9335e 100644 --- a/packages/core/src/components/badge/badge.md.scss +++ b/packages/core/src/components/badge/badge.md.scss @@ -1,20 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./badge"; - +@import "./badge.md.vars"; // Material Design Badge // -------------------------------------------------- -/// @prop - Border radius of the badge -$badge-md-border-radius: 4px !default; - -/// @prop - Background color of the badge -$badge-md-background-color: color($colors-md, primary) !default; - -/// @prop - Text color of the badge -$badge-md-text-color: color-contrast($colors-md, $badge-md-background-color) !default; - - .badge-md { @include border-radius($badge-md-border-radius); diff --git a/packages/core/src/components/badge/badge.md.vars.scss b/packages/core/src/components/badge/badge.md.vars.scss new file mode 100644 index 0000000000..4aa7c99f94 --- /dev/null +++ b/packages/core/src/components/badge/badge.md.vars.scss @@ -0,0 +1,13 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Badge +// -------------------------------------------------- + +/// @prop - Border radius of the badge +$badge-md-border-radius: 4px !default; + +/// @prop - Background color of the badge +$badge-md-background-color: color($colors-md, primary) !default; + +/// @prop - Text color of the badge +$badge-md-text-color: color-contrast($colors-md, $badge-md-background-color) !default; diff --git a/packages/core/src/components/badge/badge.scss b/packages/core/src/components/badge/badge.scss index 7df56ff422..bda2bc26a9 100644 --- a/packages/core/src/components/badge/badge.scss +++ b/packages/core/src/components/badge/badge.scss @@ -1,16 +1,8 @@ -@import "../../themes/ionic.globals"; - +@import "./badge.vars"; // Badge // -------------------------------------------------- -/// @prop - Font size of the badge -$badge-font-size: 1.3rem !default; - -/// @prop - Font weight of the badge -$badge-font-weight: bold !default; - - ion-badge { @include padding(3px, 8px); @include text-align(center); diff --git a/packages/core/src/components/badge/badge.vars.scss b/packages/core/src/components/badge/badge.vars.scss new file mode 100644 index 0000000000..36943957e6 --- /dev/null +++ b/packages/core/src/components/badge/badge.vars.scss @@ -0,0 +1,10 @@ +@import "../../themes/ionic.globals"; + +// Badge +// -------------------------------------------------- + +/// @prop - Font size of the badge +$badge-font-size: 1.3rem !default; + +/// @prop - Font weight of the badge +$badge-font-weight: bold !default; diff --git a/packages/core/src/components/button/button-icon.scss b/packages/core/src/components/button/button-icon.scss deleted file mode 100644 index e2bf8ab3aa..0000000000 --- a/packages/core/src/components/button/button-icon.scss +++ /dev/null @@ -1,25 +0,0 @@ -@import "../../themes/ionic.globals"; - - -// Button Icons -// -------------------------------------------------- - -.button ion-icon { - width: 1.4em; - height: 1.4em; - - pointer-events: none; -} - -.button ion-icon[slot="start"] { - margin: 0 0.3em 0 -0.3em; -} - -.button ion-icon[slot="end"] { - margin: 0 -0.2em 0 0.3em; -} - -.button ion-icon[slot="icon-only"] { - width: 1.8em; - height: 1.8em; -} diff --git a/packages/core/src/components/button/button.ios.scss b/packages/core/src/components/button/button.ios.scss index 9015b30de6..1d0facd2ed 100644 --- a/packages/core/src/components/button/button.ios.scss +++ b/packages/core/src/components/button/button.ios.scss @@ -1,188 +1,10 @@ -@import "../../themes/ionic.globals.ios"; @import "./button"; +@import "./button.ios.vars"; // iOS Button // -------------------------------------------------- -/// @prop - Margin top of the button -$button-ios-margin-top: .4rem !default; - -/// @prop - Margin end of the button -$button-ios-margin-end: .2rem !default; - -/// @prop - Margin bottom of the button -$button-ios-margin-bottom: .4rem !default; - -/// @prop - Margin start of the button -$button-ios-margin-start: .2rem !default; - -/// @prop - Padding top of the button -$button-ios-padding-top: 0 !default; - -/// @prop - Padding end of the button -$button-ios-padding-end: 1em !default; - -/// @prop - Padding bottom of the button -$button-ios-padding-bottom: $button-ios-padding-top !default; - -/// @prop - Padding start of the button -$button-ios-padding-start: $button-ios-padding-end !default; - -/// @prop - Height of the button -$button-ios-height: 2.8em !default; - -/// @prop - Border radius of the button -$button-ios-border-radius: 4px !default; - -/// @prop - Font size of the button text -$button-ios-font-size: 1.6rem !default; - -/// @prop - Color of the button icon -$button-ios-icon-fill-color: currentColor !default; - -/// @prop - Background color of the button -$button-ios-background-color: color($colors-ios, primary) !default; - -/// @prop - Text color of the button -$button-ios-text-color: color-contrast($colors-ios, $button-ios-background-color) !default; - -/// @prop - Background color of the activated button -$button-ios-background-color-activated: color-shade($button-ios-background-color) !default; - -/// @prop - Opacity of the activated button -$button-ios-opacity-activated: 1 !default; - -/// @prop - Opacity of the button on hover -$button-ios-opacity-hover: .8 !default; - - -// iOS Large Button -// -------------------------------------------------- - -/// @prop - Padding top of the large button -$button-ios-large-padding-top: 0 !default; - -/// @prop - Padding end of the large button -$button-ios-large-padding-end: 1em !default; - -/// @prop - Padding bottom of the large button -$button-ios-large-padding-bottom: $button-ios-large-padding-top !default; - -/// @prop - Padding start of the large button -$button-ios-large-padding-start: $button-ios-large-padding-end !default; - -/// @prop - Height of the large button -$button-ios-large-height: 2.8em !default; - -/// @prop - Font size of the large button -$button-ios-large-font-size: 2rem !default; - - -// iOS Small Button -// -------------------------------------------------- - -/// @prop - Padding top of the small button -$button-ios-small-padding-top: 0 !default; - -/// @prop - Padding end of the small button -$button-ios-small-padding-end: .9em !default; - -/// @prop - Padding bottom of the small button -$button-ios-small-padding-bottom: $button-ios-small-padding-top !default; - -/// @prop - Padding start of the small button -$button-ios-small-padding-start: $button-ios-small-padding-end !default; - -/// @prop - Height of the small button -$button-ios-small-height: 2.1em !default; - -/// @prop - Font size of the small button -$button-ios-small-font-size: 1.3rem !default; - - -// iOS Outline Button -// -------------------------------------------------- - -/// @prop - Border width of the outline button -$button-ios-outline-border-width: 1px !default; - -/// @prop - Border style of the outline button -$button-ios-outline-border-style: solid !default; - -/// @prop - Border radius of the outline button -$button-ios-outline-border-radius: $button-ios-border-radius !default; - -/// @prop - Border color of the outline button -$button-ios-outline-border-color: $button-ios-background-color !default; - -/// @prop - Text color of the outline button -$button-ios-outline-text-color: $button-ios-background-color !default; - -/// @prop - Background color of the outline button -$button-ios-outline-background-color: transparent !default; - -/// @prop - Text color of the activated outline button -$button-ios-outline-text-color-activated: color-contrast($colors-ios, $button-ios-background-color) !default; - -/// @prop - Background color of the activated outline button -$button-ios-outline-background-color-activated: $button-ios-background-color !default; - -/// @prop - Opacity of the activated outline button -$button-ios-outline-opacity-activated: 1 !default; - - -// iOS Clear Button -// -------------------------------------------------- - -/// @prop - Border color of the clear button -$button-ios-clear-border-color: transparent !default; - -/// @prop - Background color of the clear button -$button-ios-clear-background-color: transparent !default; - -/// @prop - Background color of the activated clear button -$button-ios-clear-background-color-activated: $button-ios-clear-background-color !default; - -/// @prop - Opacity of the activated clear button -$button-ios-clear-opacity-activated: .4 !default; - -/// @prop - Text color of the clear button on hover -$button-ios-clear-text-color-hover: $button-ios-background-color !default; - -/// @prop - Opacity of the clear button on hover -$button-ios-clear-opacity-hover: .6 !default; - - -// iOS Round Button -// -------------------------------------------------- - -/// @prop - Padding top of the round button -$button-ios-round-padding-top: $button-round-padding-top !default; - -/// @prop - Padding end of the round button -$button-ios-round-padding-end: $button-round-padding-end !default; - -/// @prop - Padding bottom of the round button -$button-ios-round-padding-bottom: $button-round-padding-bottom !default; - -/// @prop - Padding start of the round button -$button-ios-round-padding-start: $button-round-padding-start !default; - -/// @prop - Border radius of the round button -$button-ios-round-border-radius: $button-round-border-radius !default; - - -// iOS Decorator Button -// -------------------------------------------------- - -/// @prop - Font weight of the strong button -$button-ios-strong-font-weight: 600 !default; - - -// iOS Default Button -// -------------------------------------------------- - .button-ios { @include border-radius($button-ios-border-radius); diff --git a/packages/core/src/components/button/button.ios.vars.scss b/packages/core/src/components/button/button.ios.vars.scss new file mode 100644 index 0000000000..38a2190ddf --- /dev/null +++ b/packages/core/src/components/button/button.ios.vars.scss @@ -0,0 +1,178 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Button +// -------------------------------------------------- + +/// @prop - Margin top of the button +$button-ios-margin-top: .4rem !default; + +/// @prop - Margin end of the button +$button-ios-margin-end: .2rem !default; + +/// @prop - Margin bottom of the button +$button-ios-margin-bottom: .4rem !default; + +/// @prop - Margin start of the button +$button-ios-margin-start: .2rem !default; + +/// @prop - Padding top of the button +$button-ios-padding-top: 0 !default; + +/// @prop - Padding end of the button +$button-ios-padding-end: 1em !default; + +/// @prop - Padding bottom of the button +$button-ios-padding-bottom: $button-ios-padding-top !default; + +/// @prop - Padding start of the button +$button-ios-padding-start: $button-ios-padding-end !default; + +/// @prop - Height of the button +$button-ios-height: 2.8em !default; + +/// @prop - Border radius of the button +$button-ios-border-radius: 4px !default; + +/// @prop - Font size of the button text +$button-ios-font-size: 1.6rem !default; + +/// @prop - Color of the button icon +$button-ios-icon-fill-color: currentColor !default; + +/// @prop - Background color of the button +$button-ios-background-color: color($colors-ios, primary) !default; + +/// @prop - Text color of the button +$button-ios-text-color: color-contrast($colors-ios, $button-ios-background-color) !default; + +/// @prop - Background color of the activated button +$button-ios-background-color-activated: color-shade($button-ios-background-color) !default; + +/// @prop - Opacity of the activated button +$button-ios-opacity-activated: 1 !default; + +/// @prop - Opacity of the button on hover +$button-ios-opacity-hover: .8 !default; + + +// iOS Large Button +// -------------------------------------------------- + +/// @prop - Padding top of the large button +$button-ios-large-padding-top: 0 !default; + +/// @prop - Padding end of the large button +$button-ios-large-padding-end: 1em !default; + +/// @prop - Padding bottom of the large button +$button-ios-large-padding-bottom: $button-ios-large-padding-top !default; + +/// @prop - Padding start of the large button +$button-ios-large-padding-start: $button-ios-large-padding-end !default; + +/// @prop - Height of the large button +$button-ios-large-height: 2.8em !default; + +/// @prop - Font size of the large button +$button-ios-large-font-size: 2rem !default; + + +// iOS Small Button +// -------------------------------------------------- + +/// @prop - Padding top of the small button +$button-ios-small-padding-top: 0 !default; + +/// @prop - Padding end of the small button +$button-ios-small-padding-end: .9em !default; + +/// @prop - Padding bottom of the small button +$button-ios-small-padding-bottom: $button-ios-small-padding-top !default; + +/// @prop - Padding start of the small button +$button-ios-small-padding-start: $button-ios-small-padding-end !default; + +/// @prop - Height of the small button +$button-ios-small-height: 2.1em !default; + +/// @prop - Font size of the small button +$button-ios-small-font-size: 1.3rem !default; + + +// iOS Outline Button +// -------------------------------------------------- + +/// @prop - Border width of the outline button +$button-ios-outline-border-width: 1px !default; + +/// @prop - Border style of the outline button +$button-ios-outline-border-style: solid !default; + +/// @prop - Border radius of the outline button +$button-ios-outline-border-radius: $button-ios-border-radius !default; + +/// @prop - Border color of the outline button +$button-ios-outline-border-color: $button-ios-background-color !default; + +/// @prop - Text color of the outline button +$button-ios-outline-text-color: $button-ios-background-color !default; + +/// @prop - Background color of the outline button +$button-ios-outline-background-color: transparent !default; + +/// @prop - Text color of the activated outline button +$button-ios-outline-text-color-activated: color-contrast($colors-ios, $button-ios-background-color) !default; + +/// @prop - Background color of the activated outline button +$button-ios-outline-background-color-activated: $button-ios-background-color !default; + +/// @prop - Opacity of the activated outline button +$button-ios-outline-opacity-activated: 1 !default; + + +// iOS Clear Button +// -------------------------------------------------- + +/// @prop - Border color of the clear button +$button-ios-clear-border-color: transparent !default; + +/// @prop - Background color of the clear button +$button-ios-clear-background-color: transparent !default; + +/// @prop - Background color of the activated clear button +$button-ios-clear-background-color-activated: $button-ios-clear-background-color !default; + +/// @prop - Opacity of the activated clear button +$button-ios-clear-opacity-activated: .4 !default; + +/// @prop - Text color of the clear button on hover +$button-ios-clear-text-color-hover: $button-ios-background-color !default; + +/// @prop - Opacity of the clear button on hover +$button-ios-clear-opacity-hover: .6 !default; + + +// iOS Round Button +// -------------------------------------------------- + +/// @prop - Padding top of the round button +$button-ios-round-padding-top: $button-round-padding-top !default; + +/// @prop - Padding end of the round button +$button-ios-round-padding-end: $button-round-padding-end !default; + +/// @prop - Padding bottom of the round button +$button-ios-round-padding-bottom: $button-round-padding-bottom !default; + +/// @prop - Padding start of the round button +$button-ios-round-padding-start: $button-round-padding-start !default; + +/// @prop - Border radius of the round button +$button-ios-round-border-radius: $button-round-border-radius !default; + + +// iOS Decorator Button +// -------------------------------------------------- + +/// @prop - Font weight of the strong button +$button-ios-strong-font-weight: 600 !default; diff --git a/packages/core/src/components/button/button.md.scss b/packages/core/src/components/button/button.md.scss index 4d09b53c59..ff637ce780 100644 --- a/packages/core/src/components/button/button.md.scss +++ b/packages/core/src/components/button/button.md.scss @@ -1,225 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./button"; - +@import "./button.md.vars"; // Material Design Button // -------------------------------------------------- - -/// @prop - Margin top of the button -$button-md-margin-top: .4rem !default; - -/// @prop - Margin end of the button -$button-md-margin-end: .2rem !default; - -/// @prop - Margin bottom of the button -$button-md-margin-bottom: .4rem !default; - -/// @prop - Margin start of the button -$button-md-margin-start: .2rem !default; - -/// @prop - Padding top of the button -$button-md-padding-top: 0 !default; - -/// @prop - Padding end of the button -$button-md-padding-end: 1.1em !default; - -/// @prop - Padding bottom of the button -$button-md-padding-bottom: $button-md-padding-top !default; - -/// @prop - Padding start of the button -$button-md-padding-start: $button-md-padding-end !default; - -/// @prop - Height of the button -$button-md-height: 3.6rem !default; - -/// @prop - Border radius of the button -$button-md-border-radius: 2px !default; - -/// @prop - Font size of the button text -$button-md-font-size: 1.4rem !default; - -/// @prop - Font weight of the button text -$button-md-font-weight: 500 !default; - -/// @prop - Capitalization of the button text -$button-md-text-transform: uppercase !default; - -/// @prop - Color of the button icon -$button-md-icon-fill-color: currentColor !default; - -/// @prop - Background color of the button -$button-md-background-color: color($colors-md, primary) !default; - -/// @prop - Text color of the button -$button-md-text-color: color-contrast($colors-md, $button-md-background-color) !default; - -/// @prop - Box shadow of the button -$button-md-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; - -/// @prop - Duration of the transition of the button -$button-md-transition-duration: 300ms !default; - -/// @prop - Speed curve of the transition of the button -$button-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default; - -/// @prop - Background color of the button on hover -$button-md-background-color-hover: $button-md-background-color !default; - -/// @prop - Background color of the activated button -$button-md-background-color-activated: color-shade($button-md-background-color) !default; - -/// @prop - Opacity of the activated button -$button-md-opacity-activated: 1 !default; - -/// @prop - Box shadow of the activated button -$button-md-box-shadow-activated: 0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21), 0 0 0 0 transparent !default; - -/// @prop - Background color of the ripple on the button -$button-md-ripple-background-color: #555 !default; - - -// Material Design Large Button -// -------------------------------------------------- - -/// @prop - Padding top of the large button -$button-md-large-padding-top: 0 !default; - -/// @prop - Padding end of the large button -$button-md-large-padding-end: 1em !default; - -/// @prop - Padding bottom of the large button -$button-md-large-padding-bottom: $button-md-large-padding-top !default; - -/// @prop - Padding start of the large button -$button-md-large-padding-start: $button-md-large-padding-end !default; - -/// @prop - Height of the large button -$button-md-large-height: 2.8em !default; - -/// @prop - Font size of the large button -$button-md-large-font-size: 2rem !default; - - -// Material Design Small Button -// -------------------------------------------------- - -/// @prop - Padding top of the small button -$button-md-small-padding-top: 0 !default; - -/// @prop - Padding end of the small button -$button-md-small-padding-end: .9em !default; - -/// @prop - Padding bottom of the small button -$button-md-small-padding-bottom: $button-md-small-padding-top !default; - -/// @prop - Padding start of the small button -$button-md-small-padding-start: $button-md-small-padding-end !default; - -/// @prop - Height of the small button -$button-md-small-height: 2.1em !default; - -/// @prop - Font size of the small button -$button-md-small-font-size: 1.3rem !default; - - -// Material Design Outline Button -// -------------------------------------------------- - -/// @prop - Border width of the outline button -$button-md-outline-border-width: 1px !default; - -/// @prop - Border style of the outline button -$button-md-outline-border-style: solid !default; - -/// @prop - Border color of the outline button -$button-md-outline-border-color: $button-md-background-color !default; - -/// @prop - Text color of the outline button -$button-md-outline-text-color: $button-md-background-color !default; - -/// @prop - Background color of the outline button -$button-md-outline-background-color: transparent !default; - -/// @prop - Box shadow of the outline button -$button-md-outline-box-shadow: none !default; - -/// @prop - Background color of the outline button on hover -$button-md-outline-background-color-hover: rgba(158, 158, 158, .1) !default; - -/// @prop - Background color of the activated outline button -$button-md-outline-background-color-activated: transparent !default; - -/// @prop - Box shadow of the activated outline button -$button-md-outline-box-shadow-activated: none !default; - -/// @prop - Opacity of the activated outline button -$button-md-outline-opacity-activated: 1 !default; - -/// @prop - Background color of the ripple on the outline button -$button-md-outline-ripple-background-color: $button-md-background-color !default; - - -// Material Design Clear Button -// -------------------------------------------------- - -/// @prop - Border color of the clear button -$button-md-clear-border-color: transparent !default; - -/// @prop - Text color of the clear button -$button-md-clear-text-color: $button-md-background-color !default; - -/// @prop - Background color of the clear button -$button-md-clear-background-color: transparent !default; - -/// @prop - Box shadow of the clear button -$button-md-clear-box-shadow: none !default; - -/// @prop - Opacity of the clear button -$button-md-clear-opacity: 1 !default; - -/// @prop - Background color of the activated clear button -$button-md-clear-background-color-activated: rgba(158, 158, 158, .2) !default; - -/// @prop - Box shadow of the activated clear button -$button-md-clear-box-shadow-activated: $button-md-clear-box-shadow !default; - -/// @prop - Background color of the clear button on hover -$button-md-clear-background-color-hover: rgba(158, 158, 158, .1) !default; - -/// @prop - Background color of the ripple on the clear button -$button-md-clear-ripple-background-color: #999 !default; - - -// Material Design Round Button -// -------------------------------------------------- - -/// @prop - Padding top of the round button -$button-md-round-padding-top: $button-round-padding-top !default; - -/// @prop - Padding end of the round button -$button-md-round-padding-end: $button-round-padding-end !default; - -/// @prop - Padding bottom of the round button -$button-md-round-padding-bottom: $button-round-padding-bottom !default; - -/// @prop - Padding start of the round button -$button-md-round-padding-start: $button-round-padding-start !default; - -/// @prop - Border radius of the round button -$button-md-round-border-radius: $button-round-border-radius !default; - - -// Material Design Decorator Button -// -------------------------------------------------- - -/// @prop - Font weight of the strong button -$button-md-strong-font-weight: bold !default; - - -// Material Design Default Button -// -------------------------------------------------- - .button-md { @include border-radius($button-md-border-radius); diff --git a/packages/core/src/components/button/button.md.vars.scss b/packages/core/src/components/button/button.md.vars.scss new file mode 100644 index 0000000000..258e128479 --- /dev/null +++ b/packages/core/src/components/button/button.md.vars.scss @@ -0,0 +1,214 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Button +// -------------------------------------------------- + +/// @prop - Margin top of the button +$button-md-margin-top: .4rem !default; + +/// @prop - Margin end of the button +$button-md-margin-end: .2rem !default; + +/// @prop - Margin bottom of the button +$button-md-margin-bottom: .4rem !default; + +/// @prop - Margin start of the button +$button-md-margin-start: .2rem !default; + +/// @prop - Padding top of the button +$button-md-padding-top: 0 !default; + +/// @prop - Padding end of the button +$button-md-padding-end: 1.1em !default; + +/// @prop - Padding bottom of the button +$button-md-padding-bottom: $button-md-padding-top !default; + +/// @prop - Padding start of the button +$button-md-padding-start: $button-md-padding-end !default; + +/// @prop - Height of the button +$button-md-height: 3.6rem !default; + +/// @prop - Border radius of the button +$button-md-border-radius: 2px !default; + +/// @prop - Font size of the button text +$button-md-font-size: 1.4rem !default; + +/// @prop - Font weight of the button text +$button-md-font-weight: 500 !default; + +/// @prop - Capitalization of the button text +$button-md-text-transform: uppercase !default; + +/// @prop - Color of the button icon +$button-md-icon-fill-color: currentColor !default; + +/// @prop - Background color of the button +$button-md-background-color: color($colors-md, primary) !default; + +/// @prop - Text color of the button +$button-md-text-color: color-contrast($colors-md, $button-md-background-color) !default; + +/// @prop - Box shadow of the button +$button-md-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; + +/// @prop - Duration of the transition of the button +$button-md-transition-duration: 300ms !default; + +/// @prop - Speed curve of the transition of the button +$button-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default; + +/// @prop - Background color of the button on hover +$button-md-background-color-hover: $button-md-background-color !default; + +/// @prop - Background color of the activated button +$button-md-background-color-activated: color-shade($button-md-background-color) !default; + +/// @prop - Opacity of the activated button +$button-md-opacity-activated: 1 !default; + +/// @prop - Box shadow of the activated button +$button-md-box-shadow-activated: 0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21), 0 0 0 0 transparent !default; + +/// @prop - Background color of the ripple on the button +$button-md-ripple-background-color: #555 !default; + + +// Material Design Large Button +// -------------------------------------------------- + +/// @prop - Padding top of the large button +$button-md-large-padding-top: 0 !default; + +/// @prop - Padding end of the large button +$button-md-large-padding-end: 1em !default; + +/// @prop - Padding bottom of the large button +$button-md-large-padding-bottom: $button-md-large-padding-top !default; + +/// @prop - Padding start of the large button +$button-md-large-padding-start: $button-md-large-padding-end !default; + +/// @prop - Height of the large button +$button-md-large-height: 2.8em !default; + +/// @prop - Font size of the large button +$button-md-large-font-size: 2rem !default; + + +// Material Design Small Button +// -------------------------------------------------- + +/// @prop - Padding top of the small button +$button-md-small-padding-top: 0 !default; + +/// @prop - Padding end of the small button +$button-md-small-padding-end: .9em !default; + +/// @prop - Padding bottom of the small button +$button-md-small-padding-bottom: $button-md-small-padding-top !default; + +/// @prop - Padding start of the small button +$button-md-small-padding-start: $button-md-small-padding-end !default; + +/// @prop - Height of the small button +$button-md-small-height: 2.1em !default; + +/// @prop - Font size of the small button +$button-md-small-font-size: 1.3rem !default; + + +// Material Design Outline Button +// -------------------------------------------------- + +/// @prop - Border width of the outline button +$button-md-outline-border-width: 1px !default; + +/// @prop - Border style of the outline button +$button-md-outline-border-style: solid !default; + +/// @prop - Border color of the outline button +$button-md-outline-border-color: $button-md-background-color !default; + +/// @prop - Text color of the outline button +$button-md-outline-text-color: $button-md-background-color !default; + +/// @prop - Background color of the outline button +$button-md-outline-background-color: transparent !default; + +/// @prop - Box shadow of the outline button +$button-md-outline-box-shadow: none !default; + +/// @prop - Background color of the outline button on hover +$button-md-outline-background-color-hover: rgba(158, 158, 158, .1) !default; + +/// @prop - Background color of the activated outline button +$button-md-outline-background-color-activated: transparent !default; + +/// @prop - Box shadow of the activated outline button +$button-md-outline-box-shadow-activated: none !default; + +/// @prop - Opacity of the activated outline button +$button-md-outline-opacity-activated: 1 !default; + +/// @prop - Background color of the ripple on the outline button +$button-md-outline-ripple-background-color: $button-md-background-color !default; + + +// Material Design Clear Button +// -------------------------------------------------- + +/// @prop - Border color of the clear button +$button-md-clear-border-color: transparent !default; + +/// @prop - Text color of the clear button +$button-md-clear-text-color: $button-md-background-color !default; + +/// @prop - Background color of the clear button +$button-md-clear-background-color: transparent !default; + +/// @prop - Box shadow of the clear button +$button-md-clear-box-shadow: none !default; + +/// @prop - Opacity of the clear button +$button-md-clear-opacity: 1 !default; + +/// @prop - Background color of the activated clear button +$button-md-clear-background-color-activated: rgba(158, 158, 158, .2) !default; + +/// @prop - Box shadow of the activated clear button +$button-md-clear-box-shadow-activated: $button-md-clear-box-shadow !default; + +/// @prop - Background color of the clear button on hover +$button-md-clear-background-color-hover: rgba(158, 158, 158, .1) !default; + +/// @prop - Background color of the ripple on the clear button +$button-md-clear-ripple-background-color: #999 !default; + + +// Material Design Round Button +// -------------------------------------------------- + +/// @prop - Padding top of the round button +$button-md-round-padding-top: $button-round-padding-top !default; + +/// @prop - Padding end of the round button +$button-md-round-padding-end: $button-round-padding-end !default; + +/// @prop - Padding bottom of the round button +$button-md-round-padding-bottom: $button-round-padding-bottom !default; + +/// @prop - Padding start of the round button +$button-md-round-padding-start: $button-round-padding-start !default; + +/// @prop - Border radius of the round button +$button-md-round-border-radius: $button-round-border-radius !default; + + +// Material Design Decorator Button +// -------------------------------------------------- + +/// @prop - Font weight of the strong button +$button-md-strong-font-weight: bold !default; diff --git a/packages/core/src/components/button/button.scss b/packages/core/src/components/button/button.scss index 79eb88737b..bab13ecfd8 100644 --- a/packages/core/src/components/button/button.scss +++ b/packages/core/src/components/button/button.scss @@ -1,25 +1,8 @@ -@import "../../themes/ionic.globals"; -@import "button-icon"; +@import "./button.vars"; -// Buttons +// Button // -------------------------------------------------- -/// @prop - Padding top of the round button -$button-round-padding-top: 0 !default; - -/// @prop - Padding end of the round button -$button-round-padding-end: 2.6rem !default; - -/// @prop - Padding bottom of the round button -$button-round-padding-bottom: $button-round-padding-top !default; - -/// @prop - Padding start of the round button -$button-round-padding-start: $button-round-padding-end !default; - -/// @prop - Border radius of the round button -$button-round-border-radius: 64px !default; - - .button { @include text-align(center); @include appearance(none); @@ -99,6 +82,7 @@ button[disabled], contain: strict; } + // Full Outline Button // -------------------------------------------------- @@ -108,3 +92,27 @@ button[disabled], border-right-width: 0; border-left-width: 0; } + + +// Button Icons +// -------------------------------------------------- + +.button ion-icon { + width: 1.4em; + height: 1.4em; + + pointer-events: none; +} + +.button ion-icon[slot="start"] { + margin: 0 0.3em 0 -0.3em; +} + +.button ion-icon[slot="end"] { + margin: 0 -0.2em 0 0.3em; +} + +.button ion-icon[slot="icon-only"] { + width: 1.8em; + height: 1.8em; +} \ No newline at end of file diff --git a/packages/core/src/components/button/button.vars.scss b/packages/core/src/components/button/button.vars.scss new file mode 100644 index 0000000000..460f969d8c --- /dev/null +++ b/packages/core/src/components/button/button.vars.scss @@ -0,0 +1,19 @@ +@import "../../themes/ionic.globals"; + +// Button +// -------------------------------------------------- + +/// @prop - Padding top of the round button +$button-round-padding-top: 0 !default; + +/// @prop - Padding end of the round button +$button-round-padding-end: 2.6rem !default; + +/// @prop - Padding bottom of the round button +$button-round-padding-bottom: $button-round-padding-top !default; + +/// @prop - Padding start of the round button +$button-round-padding-start: $button-round-padding-end !default; + +/// @prop - Border radius of the round button +$button-round-border-radius: 64px !default; diff --git a/packages/core/src/components/card-content/card-content.ios.scss b/packages/core/src/components/card-content/card-content.ios.scss index 43168ded82..dda6de45d8 100644 --- a/packages/core/src/components/card-content/card-content.ios.scss +++ b/packages/core/src/components/card-content/card-content.ios.scss @@ -1,26 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./card-content"; - +@import "./card-content.ios.vars"; // iOS Card Header // -------------------------------------------------- -/// @prop - Padding top of the card -$card-ios-padding-top: 20px !default; - -/// @prop - Padding end of the card -$card-ios-padding-end: $card-ios-padding-top !default; - -/// @prop - Padding bottom of the card -$card-ios-padding-bottom: $card-ios-padding-top !default; - -/// @prop - Padding start of the card -$card-ios-padding-start: $card-ios-padding-top !default; - -/// @prop - Font size of the card -$card-ios-font-size: 1.6rem !default; - - .card-content-ios { @include padding($card-ios-padding-top, $card-ios-padding-end, $card-ios-padding-bottom, $card-ios-padding-start); diff --git a/packages/core/src/components/card-content/card-content.ios.vars.scss b/packages/core/src/components/card-content/card-content.ios.vars.scss new file mode 100644 index 0000000000..07cccba546 --- /dev/null +++ b/packages/core/src/components/card-content/card-content.ios.vars.scss @@ -0,0 +1,19 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Card Header +// -------------------------------------------------- + +/// @prop - Padding top of the card +$card-ios-padding-top: 20px !default; + +/// @prop - Padding end of the card +$card-ios-padding-end: $card-ios-padding-top !default; + +/// @prop - Padding bottom of the card +$card-ios-padding-bottom: $card-ios-padding-top !default; + +/// @prop - Padding start of the card +$card-ios-padding-start: $card-ios-padding-top !default; + +/// @prop - Font size of the card +$card-ios-font-size: 1.6rem !default; diff --git a/packages/core/src/components/card-content/card-content.md.scss b/packages/core/src/components/card-content/card-content.md.scss index 2451db44a8..ba3a2bd9c6 100644 --- a/packages/core/src/components/card-content/card-content.md.scss +++ b/packages/core/src/components/card-content/card-content.md.scss @@ -1,29 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./card-content"; - +@import "./card-content.md.vars"; // Material Design Card Content // -------------------------------------------------- -/// @prop - Padding top of the card -$card-md-padding-top: 13px !default; - -/// @prop - Padding right of the card -$card-md-padding-end: 16px !default; - -/// @prop - Padding bottom of the card -$card-md-padding-bottom: 13px !default; - -/// @prop - Padding start of the card -$card-md-padding-start: 16px !default; - -/// @prop - Font size of the card -$card-md-font-size: 1.4rem !default; - -/// @prop - Line height of the card -$card-md-line-height: 1.5 !default; - - .card-content-md { @include padding($card-md-padding-top, $card-md-padding-end, $card-md-padding-bottom, $card-md-padding-start); diff --git a/packages/core/src/components/card-content/card-content.md.vars.scss b/packages/core/src/components/card-content/card-content.md.vars.scss new file mode 100644 index 0000000000..9892036ddf --- /dev/null +++ b/packages/core/src/components/card-content/card-content.md.vars.scss @@ -0,0 +1,22 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Card Content +// -------------------------------------------------- + +/// @prop - Padding top of the card +$card-md-padding-top: 13px !default; + +/// @prop - Padding right of the card +$card-md-padding-end: 16px !default; + +/// @prop - Padding bottom of the card +$card-md-padding-bottom: 13px !default; + +/// @prop - Padding start of the card +$card-md-padding-start: 16px !default; + +/// @prop - Font size of the card +$card-md-font-size: 1.4rem !default; + +/// @prop - Line height of the card +$card-md-line-height: 1.5 !default; diff --git a/packages/core/src/components/card-content/card-content.scss b/packages/core/src/components/card-content/card-content.scss index 4256f79615..4e4187270a 100644 --- a/packages/core/src/components/card-content/card-content.scss +++ b/packages/core/src/components/card-content/card-content.scss @@ -1,6 +1,5 @@ @import "../../themes/ionic.globals"; - // Card Content // -------------------------------------------------- diff --git a/packages/core/src/components/card-header/card-header.ios.scss b/packages/core/src/components/card-header/card-header.ios.scss index e8421a885b..33decbf736 100644 --- a/packages/core/src/components/card-header/card-header.ios.scss +++ b/packages/core/src/components/card-header/card-header.ios.scss @@ -1,32 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./card-header"; - +@import "./card-header.ios.vars"; // iOS Card Header // -------------------------------------------------- -/// @prop - Padding top of the card header -$card-ios-header-padding-top: 20px !default; - -/// @prop - Padding end of the card header -$card-ios-header-padding-end: $card-ios-header-padding-top !default; - -/// @prop - Padding bottom of the card header -$card-ios-header-padding-bottom: 16px !default; - -/// @prop - Padding start of the card header -$card-ios-header-padding-start: $card-ios-header-padding-end !default; - -/// @prop - Filter of the translucent card header -$card-ios-header-translucent-background: #fff !default; - -/// @prop - Filter of the translucent card header -$card-ios-header-translucent-filter: saturate(180%) blur(30px) !default; - -/// @prop - Opacity of the translucent cardheader -$card-ios-header-translucent-opacity: .88 !default; - - .card-header-ios { @include padding($card-ios-header-padding-top, $card-ios-header-padding-end, $card-ios-header-padding-bottom, $card-ios-header-padding-start); } diff --git a/packages/core/src/components/card-header/card-header.ios.vars.scss b/packages/core/src/components/card-header/card-header.ios.vars.scss new file mode 100644 index 0000000000..33cf50c54b --- /dev/null +++ b/packages/core/src/components/card-header/card-header.ios.vars.scss @@ -0,0 +1,25 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Card Header +// -------------------------------------------------- + +/// @prop - Padding top of the card header +$card-ios-header-padding-top: 20px !default; + +/// @prop - Padding end of the card header +$card-ios-header-padding-end: $card-ios-header-padding-top !default; + +/// @prop - Padding bottom of the card header +$card-ios-header-padding-bottom: 16px !default; + +/// @prop - Padding start of the card header +$card-ios-header-padding-start: $card-ios-header-padding-end !default; + +/// @prop - Filter of the translucent card header +$card-ios-header-translucent-background: #fff !default; + +/// @prop - Filter of the translucent card header +$card-ios-header-translucent-filter: saturate(180%) blur(30px) !default; + +/// @prop - Opacity of the translucent cardheader +$card-ios-header-translucent-opacity: .88 !default; diff --git a/packages/core/src/components/card-header/card-header.md.scss b/packages/core/src/components/card-header/card-header.md.scss index 2c9b917d9c..291209936e 100644 --- a/packages/core/src/components/card-header/card-header.md.scss +++ b/packages/core/src/components/card-header/card-header.md.scss @@ -1,23 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./card-header"; - +@import "./card-header.md.vars"; // Material Design Card Header // -------------------------------------------------- -/// @prop - Padding top of the card header -$card-md-header-padding-top: 16px !default; - -/// @prop - Padding end of the card header -$card-md-header-padding-end: $card-md-header-padding-top !default; - -/// @prop - Padding bottom of the card header -$card-md-header-padding-bottom: $card-md-header-padding-top !default; - -/// @prop - Padding start of the card header -$card-md-header-padding-start: $card-md-header-padding-end !default; - - .card-header-md { @include padding($card-md-header-padding-top, $card-md-header-padding-end, $card-md-header-padding-bottom, $card-md-header-padding-start); } \ No newline at end of file diff --git a/packages/core/src/components/card-header/card-header.md.vars.scss b/packages/core/src/components/card-header/card-header.md.vars.scss new file mode 100644 index 0000000000..e64451a202 --- /dev/null +++ b/packages/core/src/components/card-header/card-header.md.vars.scss @@ -0,0 +1,16 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Card Header +// -------------------------------------------------- + +/// @prop - Padding top of the card header +$card-md-header-padding-top: 16px !default; + +/// @prop - Padding end of the card header +$card-md-header-padding-end: $card-md-header-padding-top !default; + +/// @prop - Padding bottom of the card header +$card-md-header-padding-bottom: $card-md-header-padding-top !default; + +/// @prop - Padding start of the card header +$card-md-header-padding-start: $card-md-header-padding-end !default; diff --git a/packages/core/src/components/card-header/card-header.scss b/packages/core/src/components/card-header/card-header.scss index d86bbb7b67..bf144d4a65 100644 --- a/packages/core/src/components/card-header/card-header.scss +++ b/packages/core/src/components/card-header/card-header.scss @@ -1,10 +1,8 @@ @import "../../themes/ionic.globals"; - // Card Header // -------------------------------------------------- - ion-card-header { position: relative; display: block; diff --git a/packages/core/src/components/card-subtitle/card-subtitle.ios.scss b/packages/core/src/components/card-subtitle/card-subtitle.ios.scss index 1f16c42b89..ee3e2657ea 100644 --- a/packages/core/src/components/card-subtitle/card-subtitle.ios.scss +++ b/packages/core/src/components/card-subtitle/card-subtitle.ios.scss @@ -1,39 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./card-subtitle"; - +@import "./card-subtitle.ios.vars"; // iOS Card Subtitle // -------------------------------------------------- -/// @prop - Font size of the card subtitle -$card-ios-subtitle-font-size: 1.6rem !default; - -/// @prop - Font weight of the card subtitle -$card-ios-subtitle-font-weight: 700 !default; - -/// @prop - Font weight of the card subtitle -$card-ios-subtitle-text-transform: uppercase !default; - -/// @prop - Letter spacing of the card subtitle -$card-ios-subtitle-letter-spacing: .06rem !default; - -/// @prop - Padding top of the card subtitle -$card-ios-subtitle-padding-top: 0 !default; - -/// @prop - Padding end of the card subtitle -$card-ios-subtitle-padding-end: $card-ios-subtitle-padding-top !default; - -/// @prop - Padding bottom of the card subtitle -$card-ios-subtitle-padding-bottom: $card-ios-subtitle-padding-top !default; - -/// @prop - Padding start of the card subtitle -$card-ios-subtitle-padding-start: $card-ios-subtitle-padding-end !default; - -/// @prop - Color of the card subtitle -$card-ios-subtitle-color: rgba(0, 0, 0, 0.4) !default; - - - .card-subtitle-ios { @include padding($card-ios-subtitle-padding-top, $card-ios-subtitle-padding-end, $card-ios-subtitle-padding-bottom, $card-ios-subtitle-padding-start); diff --git a/packages/core/src/components/card-subtitle/card-subtitle.ios.vars.scss b/packages/core/src/components/card-subtitle/card-subtitle.ios.vars.scss new file mode 100644 index 0000000000..88ff54c88d --- /dev/null +++ b/packages/core/src/components/card-subtitle/card-subtitle.ios.vars.scss @@ -0,0 +1,31 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Card Subtitle +// -------------------------------------------------- + +/// @prop - Font size of the card subtitle +$card-ios-subtitle-font-size: 1.6rem !default; + +/// @prop - Font weight of the card subtitle +$card-ios-subtitle-font-weight: 700 !default; + +/// @prop - Font weight of the card subtitle +$card-ios-subtitle-text-transform: uppercase !default; + +/// @prop - Letter spacing of the card subtitle +$card-ios-subtitle-letter-spacing: .06rem !default; + +/// @prop - Padding top of the card subtitle +$card-ios-subtitle-padding-top: 0 !default; + +/// @prop - Padding end of the card subtitle +$card-ios-subtitle-padding-end: $card-ios-subtitle-padding-top !default; + +/// @prop - Padding bottom of the card subtitle +$card-ios-subtitle-padding-bottom: $card-ios-subtitle-padding-top !default; + +/// @prop - Padding start of the card subtitle +$card-ios-subtitle-padding-start: $card-ios-subtitle-padding-end !default; + +/// @prop - Color of the card subtitle +$card-ios-subtitle-color: rgba(0, 0, 0, 0.4) !default; diff --git a/packages/core/src/components/card-subtitle/card-subtitle.md.scss b/packages/core/src/components/card-subtitle/card-subtitle.md.scss index b07469d3f1..377e0e7aa1 100644 --- a/packages/core/src/components/card-subtitle/card-subtitle.md.scss +++ b/packages/core/src/components/card-subtitle/card-subtitle.md.scss @@ -1,29 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./card-subtitle"; - +@import "./card-subtitle.md.vars"; // Material Design Card Subtitle // -------------------------------------------------- -/// @prop - Font size of the card subtitle -$card-md-subtitle-font-size: 1.6rem !default; - -/// @prop - Padding top of the card subtitle -$card-md-subtitle-padding-top: 0 !default; - -/// @prop - Padding end of the card subtitle -$card-md-subtitle-padding-end: $card-md-subtitle-padding-top !default; - -/// @prop - Padding bottom of the card subtitle -$card-md-subtitle-padding-bottom: $card-md-subtitle-padding-top !default; - -/// @prop - Padding start of the card subtitle -$card-md-subtitle-padding-start: $card-md-subtitle-padding-end !default; - -/// @prop - Color of the card subtitle -$card-md-subtitle-color: #222 !default; - - .card-subtitle-md { @include padding($card-md-subtitle-padding-top, $card-md-subtitle-padding-end, $card-md-subtitle-padding-bottom, $card-md-subtitle-padding-start); diff --git a/packages/core/src/components/card-subtitle/card-subtitle.md.vars.scss b/packages/core/src/components/card-subtitle/card-subtitle.md.vars.scss new file mode 100644 index 0000000000..a2e6a1a2ca --- /dev/null +++ b/packages/core/src/components/card-subtitle/card-subtitle.md.vars.scss @@ -0,0 +1,22 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Card Subtitle +// -------------------------------------------------- + +/// @prop - Font size of the card subtitle +$card-md-subtitle-font-size: 1.6rem !default; + +/// @prop - Padding top of the card subtitle +$card-md-subtitle-padding-top: 0 !default; + +/// @prop - Padding end of the card subtitle +$card-md-subtitle-padding-end: $card-md-subtitle-padding-top !default; + +/// @prop - Padding bottom of the card subtitle +$card-md-subtitle-padding-bottom: $card-md-subtitle-padding-top !default; + +/// @prop - Padding start of the card subtitle +$card-md-subtitle-padding-start: $card-md-subtitle-padding-end !default; + +/// @prop - Color of the card subtitle +$card-md-subtitle-color: #222 !default; diff --git a/packages/core/src/components/card-subtitle/card-subtitle.scss b/packages/core/src/components/card-subtitle/card-subtitle.scss index 7ca1e58b0b..805a651342 100644 --- a/packages/core/src/components/card-subtitle/card-subtitle.scss +++ b/packages/core/src/components/card-subtitle/card-subtitle.scss @@ -1,6 +1,5 @@ @import "../../themes/ionic.globals"; - // Card Subtitle // -------------------------------------------------- diff --git a/packages/core/src/components/card-title/card-title.ios.scss b/packages/core/src/components/card-title/card-title.ios.scss index 3fba445f37..fb9309c7e6 100644 --- a/packages/core/src/components/card-title/card-title.ios.scss +++ b/packages/core/src/components/card-title/card-title.ios.scss @@ -1,44 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./card-title"; - +@import "./card-title.ios.vars"; // iOS Card Title // -------------------------------------------------- -/// @prop - Font size of the card title -$card-ios-title-font-size: 2.8rem !default; - -/// @prop - Font weight of the card title -$card-ios-title-font-weight: 700 !default; - -/// @prop - Padding top of the card title -$card-ios-title-padding-top: 0 !default; - -/// @prop - Padding end of the card title -$card-ios-title-padding-end: $card-ios-title-padding-top !default; - -/// @prop - Padding bottom of the card title -$card-ios-title-padding-bottom: $card-ios-title-padding-top !default; - -/// @prop - Padding start of the card title -$card-ios-title-padding-start: $card-ios-title-padding-top !default; - -/// @prop - Margin top of the card title -$card-ios-title-margin-top: 0 !default; - -/// @prop - Margin end of the card title -$card-ios-title-margin-end: $card-ios-title-margin-top !default; - -/// @prop - Margin bottom of the card title -$card-ios-title-margin-bottom: $card-ios-title-margin-top !default; - -/// @prop - Margin start of the card title -$card-ios-title-margin-start: $card-ios-title-margin-top !default; - -/// @prop - Color of the card title -$card-ios-title-text-color: #000 !default; - - .card-title-ios { @include margin($card-ios-title-margin-top, $card-ios-title-margin-end, $card-ios-title-margin-bottom, $card-ios-title-margin-start); diff --git a/packages/core/src/components/card-title/card-title.ios.vars.scss b/packages/core/src/components/card-title/card-title.ios.vars.scss new file mode 100644 index 0000000000..ba9c7fbc39 --- /dev/null +++ b/packages/core/src/components/card-title/card-title.ios.vars.scss @@ -0,0 +1,37 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Card Title +// -------------------------------------------------- + +/// @prop - Font size of the card title +$card-ios-title-font-size: 2.8rem !default; + +/// @prop - Font weight of the card title +$card-ios-title-font-weight: 700 !default; + +/// @prop - Padding top of the card title +$card-ios-title-padding-top: 0 !default; + +/// @prop - Padding end of the card title +$card-ios-title-padding-end: $card-ios-title-padding-top !default; + +/// @prop - Padding bottom of the card title +$card-ios-title-padding-bottom: $card-ios-title-padding-top !default; + +/// @prop - Padding start of the card title +$card-ios-title-padding-start: $card-ios-title-padding-top !default; + +/// @prop - Margin top of the card title +$card-ios-title-margin-top: 0 !default; + +/// @prop - Margin end of the card title +$card-ios-title-margin-end: $card-ios-title-margin-top !default; + +/// @prop - Margin bottom of the card title +$card-ios-title-margin-bottom: $card-ios-title-margin-top !default; + +/// @prop - Margin start of the card title +$card-ios-title-margin-start: $card-ios-title-margin-top !default; + +/// @prop - Color of the card title +$card-ios-title-text-color: #000 !default; diff --git a/packages/core/src/components/card-title/card-title.md.scss b/packages/core/src/components/card-title/card-title.md.scss index 4ec7ef442f..8a3109bf91 100644 --- a/packages/core/src/components/card-title/card-title.md.scss +++ b/packages/core/src/components/card-title/card-title.md.scss @@ -1,41 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./card-title"; - +@import "./card-title.md.vars"; // Material Design Card Title // -------------------------------------------------- -/// @prop - Font size of the card title -$card-md-title-font-size: 2.4rem !default; - -/// @prop - Padding top of the card title -$card-md-title-padding-top: 0 !default; - -/// @prop - Padding end of the card title -$card-md-title-padding-end: $card-md-title-padding-top !default; - -/// @prop - Padding bottom of the card title -$card-md-title-padding-bottom: $card-md-title-padding-top !default; - -/// @prop - Padding start of the card title -$card-md-title-padding-start: $card-md-title-padding-end !default; - -/// @prop - Margin top of the card title -$card-md-title-margin-top: 0 !default; - -/// @prop - Margin end of the card title -$card-md-title-margin-end: $card-md-title-margin-top !default; - -/// @prop - Margin bottom of the card title -$card-md-title-margin-bottom: $card-md-title-margin-top !default; - -/// @prop - Margin start of the card title -$card-md-title-margin-start: $card-md-title-margin-end !default; - -/// @prop - Color of the card title -$card-md-title-text-color: #222 !default; - - .card-title-md { @include margin($card-md-title-margin-top, $card-md-title-margin-end, $card-md-title-margin-bottom, $card-md-title-margin-start); diff --git a/packages/core/src/components/card-title/card-title.md.vars.scss b/packages/core/src/components/card-title/card-title.md.vars.scss new file mode 100644 index 0000000000..20615613b3 --- /dev/null +++ b/packages/core/src/components/card-title/card-title.md.vars.scss @@ -0,0 +1,34 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Card Title +// -------------------------------------------------- + +/// @prop - Font size of the card title +$card-md-title-font-size: 2.4rem !default; + +/// @prop - Padding top of the card title +$card-md-title-padding-top: 0 !default; + +/// @prop - Padding end of the card title +$card-md-title-padding-end: $card-md-title-padding-top !default; + +/// @prop - Padding bottom of the card title +$card-md-title-padding-bottom: $card-md-title-padding-top !default; + +/// @prop - Padding start of the card title +$card-md-title-padding-start: $card-md-title-padding-end !default; + +/// @prop - Margin top of the card title +$card-md-title-margin-top: 0 !default; + +/// @prop - Margin end of the card title +$card-md-title-margin-end: $card-md-title-margin-top !default; + +/// @prop - Margin bottom of the card title +$card-md-title-margin-bottom: $card-md-title-margin-top !default; + +/// @prop - Margin start of the card title +$card-md-title-margin-start: $card-md-title-margin-end !default; + +/// @prop - Color of the card title +$card-md-title-text-color: #222 !default; diff --git a/packages/core/src/components/card/card.ios.scss b/packages/core/src/components/card/card.ios.scss index 554a8b9c9b..4eb120c477 100755 --- a/packages/core/src/components/card/card.ios.scss +++ b/packages/core/src/components/card/card.ios.scss @@ -1,47 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./card"; - +@import "./card.ios.vars"; // iOS Card // -------------------------------------------------- -/// @prop - Margin top of the card -$card-ios-margin-top: 30px !default; - -/// @prop - Margin end of the card -$card-ios-margin-end: 20px !default; - -/// @prop - Margin bottom of the card -$card-ios-margin-bottom: 30px !default; - -/// @prop - Margin start of the card -$card-ios-margin-start: 20px !default; - -/// @prop - Padding top of the media on the card -$card-ios-padding-media-top: 10px !default; - -/// @prop - Padding bottom of the media on the card -$card-ios-padding-media-bottom: 9px !default; - -/// @prop - Background color of the card -$card-ios-background-color: $list-ios-background-color !default; - -/// @prop - Box shadow color of the card -$card-ios-box-shadow-color: rgba(0, 0, 0, .18) !default; - -/// @prop - Box shadow of the card -$card-ios-box-shadow: 0 16px 42px $card-ios-box-shadow-color !default; - -/// @prop - Border radius of the card -$card-ios-border-radius: 14px !default; - -/// @prop - Font size of the card -$card-ios-font-size: 1.4rem !default; - -/// @prop - Color of the card text -$card-ios-text-color: #666 !default; - - .card-ios { @include margin($card-ios-margin-top, $card-ios-margin-end, $card-ios-margin-bottom, $card-ios-margin-start); @include border-radius($card-ios-border-radius); diff --git a/packages/core/src/components/card/card.ios.vars.scss b/packages/core/src/components/card/card.ios.vars.scss new file mode 100755 index 0000000000..4d9aa029b1 --- /dev/null +++ b/packages/core/src/components/card/card.ios.vars.scss @@ -0,0 +1,40 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Card +// -------------------------------------------------- + +/// @prop - Margin top of the card +$card-ios-margin-top: 30px !default; + +/// @prop - Margin end of the card +$card-ios-margin-end: 20px !default; + +/// @prop - Margin bottom of the card +$card-ios-margin-bottom: 30px !default; + +/// @prop - Margin start of the card +$card-ios-margin-start: 20px !default; + +/// @prop - Padding top of the media on the card +$card-ios-padding-media-top: 10px !default; + +/// @prop - Padding bottom of the media on the card +$card-ios-padding-media-bottom: 9px !default; + +/// @prop - Background color of the card +$card-ios-background-color: $list-ios-background-color !default; + +/// @prop - Box shadow color of the card +$card-ios-box-shadow-color: rgba(0, 0, 0, .18) !default; + +/// @prop - Box shadow of the card +$card-ios-box-shadow: 0 16px 42px $card-ios-box-shadow-color !default; + +/// @prop - Border radius of the card +$card-ios-border-radius: 14px !default; + +/// @prop - Font size of the card +$card-ios-font-size: 1.4rem !default; + +/// @prop - Color of the card text +$card-ios-text-color: #666 !default; diff --git a/packages/core/src/components/card/card.md.scss b/packages/core/src/components/card/card.md.scss index 290a13fba3..fe8ffac75f 100755 --- a/packages/core/src/components/card/card.md.scss +++ b/packages/core/src/components/card/card.md.scss @@ -1,53 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./card"; - +@import "./card.md.vars"; // Material Design Card // -------------------------------------------------- -/// @prop - Margin top of the card -$card-md-margin-top: 10px !default; - -/// @prop - Margin end of the card -$card-md-margin-end: 10px !default; - -/// @prop - Margin bottom of the card -$card-md-margin-bottom: 10px !default; - -/// @prop - Margin start of the card -$card-md-margin-start: 10px !default; - -/// @prop - Padding top of the media on the card -$card-md-padding-media-top: 10px !default; - -/// @prop - Padding bottom of the media on the card -$card-md-padding-media-bottom: 10px !default; - -/// @prop - Size of the card avatar -$card-md-avatar-size: 4rem !default; - -/// @prop - Size of the card thumbnail -$card-md-thumbnail-size: 8rem !default; - -/// @prop - Background color of the card -$card-md-background-color: $list-md-background-color !default; - -/// @prop - Box shadow of the card -$card-md-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; - -/// @prop - Border radius of the card -$card-md-border-radius: 2px !default; - -/// @prop - Font size of the card -$card-md-font-size: 1.4rem !default; - -/// @prop - Line height of the card -$card-md-line-height: 1.5 !default; - -/// @prop - Color of the card text -$card-md-text-color: #222 !default; - - .card-md { @include margin($card-md-margin-top, $card-md-margin-end, $card-md-margin-bottom, $card-md-margin-start); @include border-radius($card-md-border-radius); diff --git a/packages/core/src/components/card/card.md.vars.scss b/packages/core/src/components/card/card.md.vars.scss new file mode 100755 index 0000000000..cfb1951ce2 --- /dev/null +++ b/packages/core/src/components/card/card.md.vars.scss @@ -0,0 +1,46 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Card +// -------------------------------------------------- + +/// @prop - Margin top of the card +$card-md-margin-top: 10px !default; + +/// @prop - Margin end of the card +$card-md-margin-end: 10px !default; + +/// @prop - Margin bottom of the card +$card-md-margin-bottom: 10px !default; + +/// @prop - Margin start of the card +$card-md-margin-start: 10px !default; + +/// @prop - Padding top of the media on the card +$card-md-padding-media-top: 10px !default; + +/// @prop - Padding bottom of the media on the card +$card-md-padding-media-bottom: 10px !default; + +/// @prop - Size of the card avatar +$card-md-avatar-size: 4rem !default; + +/// @prop - Size of the card thumbnail +$card-md-thumbnail-size: 8rem !default; + +/// @prop - Background color of the card +$card-md-background-color: $list-md-background-color !default; + +/// @prop - Box shadow of the card +$card-md-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; + +/// @prop - Border radius of the card +$card-md-border-radius: 2px !default; + +/// @prop - Font size of the card +$card-md-font-size: 1.4rem !default; + +/// @prop - Line height of the card +$card-md-line-height: 1.5 !default; + +/// @prop - Color of the card text +$card-md-text-color: #222 !default; diff --git a/packages/core/src/components/card/card.scss b/packages/core/src/components/card/card.scss index 84c01a5949..c71edd1282 100755 --- a/packages/core/src/components/card/card.scss +++ b/packages/core/src/components/card/card.scss @@ -3,7 +3,6 @@ // Card // -------------------------------------------------- - ion-card { position: relative; display: block; diff --git a/packages/core/src/components/checkbox/checkbox.ios.scss b/packages/core/src/components/checkbox/checkbox.ios.scss index ef95d4cd96..58d008b8c2 100644 --- a/packages/core/src/components/checkbox/checkbox.ios.scss +++ b/packages/core/src/components/checkbox/checkbox.ios.scss @@ -1,70 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./checkbox"; +@import "./checkbox.ios.vars"; // iOS Checkbox // -------------------------------------------------- -/// @prop - Background color of the checkbox when off -$checkbox-ios-background-color-off: $list-ios-background-color !default; - -/// @prop - Background color of the checkbox when on -$checkbox-ios-background-color-on: color($colors-ios, primary) !default; - -/// @prop - Size of the checkbox icon -$checkbox-ios-icon-size: 21px !default; - -/// @prop - Border color of the checkbox icon when off -$checkbox-ios-icon-border-color-off: $list-ios-border-color !default; - -/// @prop - Border color of the checkbox icon when on -$checkbox-ios-icon-border-color-on: $checkbox-ios-background-color-on !default; - -/// @prop - Border width of the checkbox icon -$checkbox-ios-icon-border-width: 1px !default; - -/// @prop - Border style of the checkbox icon -$checkbox-ios-icon-border-style: solid !default; - -/// @prop - Border radius of the checkbox icon -$checkbox-ios-icon-border-radius: 50% !default; - -/// @prop - Width of the checkbox icon checkmark -$checkbox-ios-icon-checkmark-width: 1px !default; - -/// @prop - Style of the checkbox icon checkmark -$checkbox-ios-icon-checkmark-style: solid !default; - -/// @prop - Color of the checkbox icon checkmark -$checkbox-ios-icon-checkmark-color: color-contrast($colors-ios, $checkbox-ios-background-color-on) !default; - -/// @prop - Opacity of the disabled checkbox -$checkbox-ios-disabled-opacity: .3 !default; - -/// @prop - Margin top of the left checkbox item -$checkbox-ios-item-start-margin-top: $item-ios-padding-media-top !default; - -/// @prop - Margin end of the left checkbox item -$checkbox-ios-item-start-margin-end: $item-ios-padding-end !default; - -/// @prop - Margin bottom of the left checkbox item -$checkbox-ios-item-start-margin-bottom: $item-ios-padding-media-bottom !default; - -/// @prop - Margin start of the left checkbox item -$checkbox-ios-item-start-margin-start: 2px !default; - -/// @prop - Margin top of the right checkbox item -$checkbox-ios-item-end-margin-top: 10px !default; - -/// @prop - Margin end of the right checkbox item -$checkbox-ios-item-end-margin-end: 8px !default; - -/// @prop - Margin bottom of the right checkbox item -$checkbox-ios-item-end-margin-bottom: 9px !default; - -/// @prop - Margin start of the right checkbox item -$checkbox-ios-item-end-margin-start: 0 !default; - - // iOS Checkbox Outer Circle: Unchecked // ----------------------------------------- diff --git a/packages/core/src/components/checkbox/checkbox.ios.vars.scss b/packages/core/src/components/checkbox/checkbox.ios.vars.scss new file mode 100644 index 0000000000..a85fbaa2a5 --- /dev/null +++ b/packages/core/src/components/checkbox/checkbox.ios.vars.scss @@ -0,0 +1,64 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Checkbox +// -------------------------------------------------- + +/// @prop - Background color of the checkbox when off +$checkbox-ios-background-color-off: $list-ios-background-color !default; + +/// @prop - Background color of the checkbox when on +$checkbox-ios-background-color-on: color($colors-ios, primary) !default; + +/// @prop - Size of the checkbox icon +$checkbox-ios-icon-size: 21px !default; + +/// @prop - Border color of the checkbox icon when off +$checkbox-ios-icon-border-color-off: $list-ios-border-color !default; + +/// @prop - Border color of the checkbox icon when on +$checkbox-ios-icon-border-color-on: $checkbox-ios-background-color-on !default; + +/// @prop - Border width of the checkbox icon +$checkbox-ios-icon-border-width: 1px !default; + +/// @prop - Border style of the checkbox icon +$checkbox-ios-icon-border-style: solid !default; + +/// @prop - Border radius of the checkbox icon +$checkbox-ios-icon-border-radius: 50% !default; + +/// @prop - Width of the checkbox icon checkmark +$checkbox-ios-icon-checkmark-width: 1px !default; + +/// @prop - Style of the checkbox icon checkmark +$checkbox-ios-icon-checkmark-style: solid !default; + +/// @prop - Color of the checkbox icon checkmark +$checkbox-ios-icon-checkmark-color: color-contrast($colors-ios, $checkbox-ios-background-color-on) !default; + +/// @prop - Opacity of the disabled checkbox +$checkbox-ios-disabled-opacity: .3 !default; + +/// @prop - Margin top of the left checkbox item +$checkbox-ios-item-start-margin-top: $item-ios-padding-media-top !default; + +/// @prop - Margin end of the left checkbox item +$checkbox-ios-item-start-margin-end: $item-ios-padding-end !default; + +/// @prop - Margin bottom of the left checkbox item +$checkbox-ios-item-start-margin-bottom: $item-ios-padding-media-bottom !default; + +/// @prop - Margin start of the left checkbox item +$checkbox-ios-item-start-margin-start: 2px !default; + +/// @prop - Margin top of the right checkbox item +$checkbox-ios-item-end-margin-top: 10px !default; + +/// @prop - Margin end of the right checkbox item +$checkbox-ios-item-end-margin-end: 8px !default; + +/// @prop - Margin bottom of the right checkbox item +$checkbox-ios-item-end-margin-bottom: 9px !default; + +/// @prop - Margin start of the right checkbox item +$checkbox-ios-item-end-margin-start: 0 !default; diff --git a/packages/core/src/components/checkbox/checkbox.md.scss b/packages/core/src/components/checkbox/checkbox.md.scss index a4e0b24fd4..858d0f6729 100644 --- a/packages/core/src/components/checkbox/checkbox.md.scss +++ b/packages/core/src/components/checkbox/checkbox.md.scss @@ -1,85 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./checkbox"; +@import "./checkbox.md.vars"; // Material Design Checkbox // -------------------------------------------------- -/// @prop - Border bottom width of the checkbox -$checkbox-md-border-bottom-width: 1px !default; - -/// @prop - Border bottom style of the checkbox -$checkbox-md-border-bottom-style: solid !default; - -/// @prop - Border bottom color of the checkbox -$checkbox-md-border-bottom-color: $list-md-border-color !default; - -/// @prop - Opacity of the disabled checkbox -$checkbox-md-disabled-opacity: .3 !default; - -/// @prop - Background color of the checkbox icon when off -$checkbox-md-icon-background-color-off: $list-md-background-color !default; - -/// @prop - Background color of the checkbox icon when on -$checkbox-md-icon-background-color-on: color($colors-md, primary) !default; - -/// @prop - Size of the checkbox icon -$checkbox-md-icon-size: 16px !default; - -/// @prop - Width of the checkbox icon checkmark -$checkbox-md-icon-checkmark-width: 2px !default; - -/// @prop - Style of the checkbox icon checkmark -$checkbox-md-icon-checkmark-style: solid !default; - -/// @prop - Color of the checkbox icon checkmark -$checkbox-md-icon-checkmark-color: color-contrast($colors-md, $checkbox-md-icon-background-color-on) !default; - -/// @prop - Border width of the checkbox icon -$checkbox-md-icon-border-width: 2px !default; - -/// @prop - Border style of the checkbox icon -$checkbox-md-icon-border-style: solid !default; - -/// @prop - Border radius of the checkbox icon -$checkbox-md-icon-border-radius: 2px !default; - -/// @prop - Border color of the checkbox icon when off -$checkbox-md-icon-border-color-off: darken($list-md-border-color, 40%) !default; - -/// @prop - Border color of the checkbox icon when on -$checkbox-md-icon-border-color-on: color($colors-md, primary) !default; - -/// @prop - Transition duration of the checkbox -$checkbox-md-transition-duration: 280ms !default; - -/// @prop - Transition easing of the checkbox -$checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; - -/// @prop - Margin top of the start checkbox item -$checkbox-md-item-start-margin-top: $item-md-padding-media-top !default; - -/// @prop - Margin end of the start checkbox item -$checkbox-md-item-start-margin-end: 36px !default; - -/// @prop - Margin bottom of the start checkbox item -$checkbox-md-item-start-margin-bottom: $item-md-padding-media-bottom !default; - -/// @prop - Margin start of the start checkbox item -$checkbox-md-item-start-margin-start: 4px !default; - -/// @prop - Margin top of the end checkbox item -$checkbox-md-item-end-margin-top: 11px !default; - -/// @prop - Margin end of the end checkbox item -$checkbox-md-item-end-margin-end: 10px !default; - -/// @prop - Margin bottom of the end checkbox item -$checkbox-md-item-end-margin-bottom: 10px !default; - -/// @prop - Margin start of the end checkbox item -$checkbox-md-item-end-margin-start: 0 !default; - - // Material Design Checkbox Outer Square: Unchecked // ----------------------------------------- diff --git a/packages/core/src/components/checkbox/checkbox.md.vars.scss b/packages/core/src/components/checkbox/checkbox.md.vars.scss new file mode 100644 index 0000000000..98c1465a8c --- /dev/null +++ b/packages/core/src/components/checkbox/checkbox.md.vars.scss @@ -0,0 +1,79 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Checkbox +// -------------------------------------------------- + +/// @prop - Border bottom width of the checkbox +$checkbox-md-border-bottom-width: 1px !default; + +/// @prop - Border bottom style of the checkbox +$checkbox-md-border-bottom-style: solid !default; + +/// @prop - Border bottom color of the checkbox +$checkbox-md-border-bottom-color: $list-md-border-color !default; + +/// @prop - Opacity of the disabled checkbox +$checkbox-md-disabled-opacity: .3 !default; + +/// @prop - Background color of the checkbox icon when off +$checkbox-md-icon-background-color-off: $list-md-background-color !default; + +/// @prop - Background color of the checkbox icon when on +$checkbox-md-icon-background-color-on: color($colors-md, primary) !default; + +/// @prop - Size of the checkbox icon +$checkbox-md-icon-size: 16px !default; + +/// @prop - Width of the checkbox icon checkmark +$checkbox-md-icon-checkmark-width: 2px !default; + +/// @prop - Style of the checkbox icon checkmark +$checkbox-md-icon-checkmark-style: solid !default; + +/// @prop - Color of the checkbox icon checkmark +$checkbox-md-icon-checkmark-color: color-contrast($colors-md, $checkbox-md-icon-background-color-on) !default; + +/// @prop - Border width of the checkbox icon +$checkbox-md-icon-border-width: 2px !default; + +/// @prop - Border style of the checkbox icon +$checkbox-md-icon-border-style: solid !default; + +/// @prop - Border radius of the checkbox icon +$checkbox-md-icon-border-radius: 2px !default; + +/// @prop - Border color of the checkbox icon when off +$checkbox-md-icon-border-color-off: darken($list-md-border-color, 40%) !default; + +/// @prop - Border color of the checkbox icon when on +$checkbox-md-icon-border-color-on: color($colors-md, primary) !default; + +/// @prop - Transition duration of the checkbox +$checkbox-md-transition-duration: 280ms !default; + +/// @prop - Transition easing of the checkbox +$checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; + +/// @prop - Margin top of the start checkbox item +$checkbox-md-item-start-margin-top: $item-md-padding-media-top !default; + +/// @prop - Margin end of the start checkbox item +$checkbox-md-item-start-margin-end: 36px !default; + +/// @prop - Margin bottom of the start checkbox item +$checkbox-md-item-start-margin-bottom: $item-md-padding-media-bottom !default; + +/// @prop - Margin start of the start checkbox item +$checkbox-md-item-start-margin-start: 4px !default; + +/// @prop - Margin top of the end checkbox item +$checkbox-md-item-end-margin-top: 11px !default; + +/// @prop - Margin end of the end checkbox item +$checkbox-md-item-end-margin-end: 10px !default; + +/// @prop - Margin bottom of the end checkbox item +$checkbox-md-item-end-margin-bottom: 10px !default; + +/// @prop - Margin start of the end checkbox item +$checkbox-md-item-end-margin-start: 0 !default; diff --git a/packages/core/src/components/checkbox/checkbox.scss b/packages/core/src/components/checkbox/checkbox.scss index 4d81627698..0b9b2af230 100644 --- a/packages/core/src/components/checkbox/checkbox.scss +++ b/packages/core/src/components/checkbox/checkbox.scss @@ -3,7 +3,6 @@ // Checkbox // -------------------------------------------------- - ion-checkbox { position: relative; display: inline-block; diff --git a/packages/core/src/components/chip-button/chip-button.ios.scss b/packages/core/src/components/chip-button/chip-button.ios.scss index b18ec04edb..d310a84b1a 100644 --- a/packages/core/src/components/chip-button/chip-button.ios.scss +++ b/packages/core/src/components/chip-button/chip-button.ios.scss @@ -1,25 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./chip-button"; +@import "./chip-button.ios.vars"; // iOS Chip Button // -------------------------------------------------- -/// @prop - Background color of the chip button -$chip-button-ios-background-color: color($colors-ios, primary) !default; - -/// @prop - Fill color of the icon in the chip button -$chip-button-ios-icon-fill-color: color-contrast($colors-ios, $chip-button-ios-background-color) !default; - -/// @prop - Background color of the clear chip button -$chip-button-ios-clear-background-color: transparent !default; - -/// @prop - Text color of the clear chip button -$chip-button-ios-clear-text-color: color($colors-ios, primary) !default; - -/// @prop - Fill color of the icon in the clear chip button -$chip-button-ios-clear-icon-fill-color: color($colors-ios, primary) !default; - - .chip-button-ios { background-color: $chip-button-ios-background-color; } diff --git a/packages/core/src/components/chip-button/chip-button.ios.vars.scss b/packages/core/src/components/chip-button/chip-button.ios.vars.scss new file mode 100644 index 0000000000..7a60940cb7 --- /dev/null +++ b/packages/core/src/components/chip-button/chip-button.ios.vars.scss @@ -0,0 +1,19 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Chip Button +// -------------------------------------------------- + +/// @prop - Background color of the chip button +$chip-button-ios-background-color: color($colors-ios, primary) !default; + +/// @prop - Fill color of the icon in the chip button +$chip-button-ios-icon-fill-color: color-contrast($colors-ios, $chip-button-ios-background-color) !default; + +/// @prop - Background color of the clear chip button +$chip-button-ios-clear-background-color: transparent !default; + +/// @prop - Text color of the clear chip button +$chip-button-ios-clear-text-color: color($colors-ios, primary) !default; + +/// @prop - Fill color of the icon in the clear chip button +$chip-button-ios-clear-icon-fill-color: color($colors-ios, primary) !default; diff --git a/packages/core/src/components/chip-button/chip-button.md.scss b/packages/core/src/components/chip-button/chip-button.md.scss index 27d9d7e937..10cac697f4 100644 --- a/packages/core/src/components/chip-button/chip-button.md.scss +++ b/packages/core/src/components/chip-button/chip-button.md.scss @@ -1,25 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./chip-button"; +@import "./chip-button.md.vars"; // Material Design Chip Button // -------------------------------------------------- -/// @prop - Background color of the chip button -$chip-button-md-background-color: color($colors-md, primary) !default; - -/// @prop - Fill color of the icon in the chip button -$chip-button-md-icon-fill-color: color-contrast($colors-md, $chip-button-md-background-color) !default; - -/// @prop - Background color of the clear chip button -$chip-button-md-clear-background-color: transparent !default; - -/// @prop - Text color of the clear chip button -$chip-button-md-clear-text-color: color($colors-md, primary) !default; - -/// @prop - Fill color of the icon in the clear chip button -$chip-button-md-clear-icon-fill-color: color($colors-md, primary) !default; - - .chip-button-md { background-color: $chip-button-md-background-color; } diff --git a/packages/core/src/components/chip-button/chip-button.md.vars.scss b/packages/core/src/components/chip-button/chip-button.md.vars.scss new file mode 100644 index 0000000000..288f98c5a4 --- /dev/null +++ b/packages/core/src/components/chip-button/chip-button.md.vars.scss @@ -0,0 +1,19 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Chip Button +// -------------------------------------------------- + +/// @prop - Background color of the chip button +$chip-button-md-background-color: color($colors-md, primary) !default; + +/// @prop - Fill color of the icon in the chip button +$chip-button-md-icon-fill-color: color-contrast($colors-md, $chip-button-md-background-color) !default; + +/// @prop - Background color of the clear chip button +$chip-button-md-clear-background-color: transparent !default; + +/// @prop - Text color of the clear chip button +$chip-button-md-clear-text-color: color($colors-md, primary) !default; + +/// @prop - Fill color of the icon in the clear chip button +$chip-button-md-clear-icon-fill-color: color($colors-md, primary) !default; diff --git a/packages/core/src/components/chip-button/chip-button.scss b/packages/core/src/components/chip-button/chip-button.scss index df5f8e647e..df9e78caf0 100644 --- a/packages/core/src/components/chip-button/chip-button.scss +++ b/packages/core/src/components/chip-button/chip-button.scss @@ -1,27 +1,8 @@ -@import "../../themes/ionic.globals"; +@import "./chip-button.vars"; // Chip Button // -------------------------------------------------- -/// @prop - Border radius of the button in the chip -$chip-button-border-radius: 50% !default; - -/// @prop - Margin top of the button in the chip -$chip-button-margin-top: 0 !default; - -/// @prop - Margin end of the button in the chip -$chip-button-margin-end: $chip-button-margin-top !default; - -/// @prop - Margin bottom of the button in the chip -$chip-button-margin-bottom: $chip-button-margin-top !default; - -/// @prop - Margin start of the button in the chip -$chip-button-margin-start: $chip-button-margin-end !default; - -/// @prop - Width and height of the button in the chip -$chip-button-size: 32px !default; - - .chip-button { @include border-radius($chip-button-border-radius); @include margin($chip-button-margin-top, $chip-button-margin-end, $chip-button-margin-bottom, $chip-button-margin-start); diff --git a/packages/core/src/components/chip-button/chip-button.vars.scss b/packages/core/src/components/chip-button/chip-button.vars.scss new file mode 100644 index 0000000000..3c16b11821 --- /dev/null +++ b/packages/core/src/components/chip-button/chip-button.vars.scss @@ -0,0 +1,22 @@ +@import "../../themes/ionic.globals"; + +// Chip Button +// -------------------------------------------------- + +/// @prop - Border radius of the button in the chip +$chip-button-border-radius: 50% !default; + +/// @prop - Margin top of the button in the chip +$chip-button-margin-top: 0 !default; + +/// @prop - Margin end of the button in the chip +$chip-button-margin-end: $chip-button-margin-top !default; + +/// @prop - Margin bottom of the button in the chip +$chip-button-margin-bottom: $chip-button-margin-top !default; + +/// @prop - Margin start of the button in the chip +$chip-button-margin-start: $chip-button-margin-end !default; + +/// @prop - Width and height of the button in the chip +$chip-button-size: 32px !default; diff --git a/packages/core/src/components/chip/chip.ios.scss b/packages/core/src/components/chip/chip.ios.scss index f1743e64a7..6f5d6a2a84 100644 --- a/packages/core/src/components/chip/chip.ios.scss +++ b/packages/core/src/components/chip/chip.ios.scss @@ -1,55 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./chip"; +@import "./chip.ios.vars"; // iOS Chip // -------------------------------------------------- -/// @prop - Margin top of the chip -$chip-ios-margin-top: 2px !default; - -/// @prop - Margin end of the chip -$chip-ios-margin-end: 0 !default; - -/// @prop - Margin bottom of the chip -$chip-ios-margin-bottom: $chip-ios-margin-top !default; - -/// @prop - Margin start of the chip -$chip-ios-margin-start: $chip-ios-margin-end !default; - -/// @prop - Height of the chip -$chip-ios-height: 32px !default; - -/// @prop - Border radius of the chip -$chip-ios-border-radius: 16px !default; - -/// @prop - Font size of the chip -$chip-ios-font-size: 13px !default; - -/// @prop - Text color of the chip -$chip-ios-text-color: rgba(0, 0, 0, .87) !default; - -/// @prop - Background color of the chip -$chip-ios-background-color: rgba(0, 0, 0, .12) !default; - -/// @prop - Margin top of the label in the chip -$chip-ios-label-margin-top: 0 !default; - -/// @prop - Margin end of the label in the chip -$chip-ios-label-margin-end: 10px !default; - -/// @prop - Margin bottom of the label in the chip -$chip-ios-label-margin-bottom: $chip-ios-label-margin-top !default; - -/// @prop - Margin start of the label in the chip -$chip-ios-label-margin-start: $chip-ios-label-margin-end !default; - -/// @prop - Background color of the icon in the chip -$chip-ios-icon-background-color: color($colors-ios, primary) !default; - -/// @prop - Fill color of the icon in the chip -$chip-ios-icon-fill-color: color-contrast($colors-ios, $chip-ios-icon-background-color) !default; - - .chip-ios { @include border-radius($chip-ios-border-radius); @@ -73,6 +27,11 @@ $chip-ios-icon-fill-color: color-contrast($colors-ios, $chip-io fill: $chip-ios-icon-fill-color; } +.chip-ios ion-avatar { + width: $chip-ios-avatar-width; + height: $chip-ios-avatar-height; +} + // Generate iOS Chip Colors // -------------------------------------------------- diff --git a/packages/core/src/components/chip/chip.ios.vars.scss b/packages/core/src/components/chip/chip.ios.vars.scss new file mode 100644 index 0000000000..77e0ce979d --- /dev/null +++ b/packages/core/src/components/chip/chip.ios.vars.scss @@ -0,0 +1,55 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Chip +// -------------------------------------------------- + +/// @prop - Margin top of the chip +$chip-ios-margin-top: 2px !default; + +/// @prop - Margin end of the chip +$chip-ios-margin-end: 0 !default; + +/// @prop - Margin bottom of the chip +$chip-ios-margin-bottom: $chip-ios-margin-top !default; + +/// @prop - Margin start of the chip +$chip-ios-margin-start: $chip-ios-margin-end !default; + +/// @prop - Height of the chip +$chip-ios-height: 32px !default; + +/// @prop - Border radius of the chip +$chip-ios-border-radius: 16px !default; + +/// @prop - Font size of the chip +$chip-ios-font-size: 13px !default; + +/// @prop - Text color of the chip +$chip-ios-text-color: rgba(0, 0, 0, .87) !default; + +/// @prop - Background color of the chip +$chip-ios-background-color: rgba(0, 0, 0, .12) !default; + +/// @prop - Margin top of the label in the chip +$chip-ios-label-margin-top: 0 !default; + +/// @prop - Margin end of the label in the chip +$chip-ios-label-margin-end: 10px !default; + +/// @prop - Margin bottom of the label in the chip +$chip-ios-label-margin-bottom: $chip-ios-label-margin-top !default; + +/// @prop - Margin start of the label in the chip +$chip-ios-label-margin-start: $chip-ios-label-margin-end !default; + +/// @prop - Background color of the icon in the chip +$chip-ios-icon-background-color: color($colors-ios, primary) !default; + +/// @prop - Fill color of the icon in the chip +$chip-ios-icon-fill-color: color-contrast($colors-ios, $chip-ios-icon-background-color) !default; + +/// @prop - Width of the avatar in the chip +$chip-ios-avatar-width: 32px !default; + +/// @prop - Height of the avatar in the chip +$chip-ios-avatar-height: $chip-ios-avatar-width !default; diff --git a/packages/core/src/components/chip/chip.md.scss b/packages/core/src/components/chip/chip.md.scss index 4c5ffaaccc..91f156017d 100644 --- a/packages/core/src/components/chip/chip.md.scss +++ b/packages/core/src/components/chip/chip.md.scss @@ -1,55 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./chip"; +@import "./chip.md.vars"; // Material Design Chip // -------------------------------------------------- -/// @prop - Margin top of the chip -$chip-md-margin-top: 2px !default; - -/// @prop - Margin end of the chip -$chip-md-margin-end: 0 !default; - -/// @prop - Margin bottom of the chip -$chip-md-margin-bottom: $chip-md-margin-top !default; - -/// @prop - Margin start of the chip -$chip-md-margin-start: $chip-md-margin-end !default; - -/// @prop - Height of the chip -$chip-md-height: 32px !default; - -/// @prop - Border radius of the chip -$chip-md-border-radius: 16px !default; - -/// @prop - Font size of the chip -$chip-md-font-size: 13px !default; - -/// @prop - Text color of the chip -$chip-md-text-color: rgba(0, 0, 0, .87) !default; - -/// @prop - Background color of the chip -$chip-md-background-color: rgba(0, 0, 0, .12) !default; - -/// @prop - Margin top of the label in the chip -$chip-md-label-margin-top: 0 !default; - -/// @prop - Margin end of the label in the chip -$chip-md-label-margin-end: 10px !default; - -/// @prop - Margin bottom of the label in the chip -$chip-md-label-margin-bottom: $chip-md-label-margin-top !default; - -/// @prop - Margin start of the label in the chip -$chip-md-label-margin-start: $chip-md-label-margin-end !default; - -/// @prop - Background color of the icon in the chip -$chip-md-icon-background-color: color($colors-md, primary) !default; - -/// @prop - Fill color of the icon in the chip -$chip-md-icon-fill-color: color-contrast($colors-md, $chip-md-icon-background-color) !default; - - .chip-md { @include border-radius($chip-md-border-radius); @@ -73,6 +27,11 @@ $chip-md-icon-fill-color: color-contrast($colors-md, $chip-md-i fill: $chip-md-icon-fill-color; } +.chip-md ion-avatar { + width: $chip-md-avatar-width; + height: $chip-md-avatar-height; +} + // Generate Material Design Chip Colors // -------------------------------------------------- diff --git a/packages/core/src/components/chip/chip.md.vars.scss b/packages/core/src/components/chip/chip.md.vars.scss new file mode 100644 index 0000000000..9d036b44ae --- /dev/null +++ b/packages/core/src/components/chip/chip.md.vars.scss @@ -0,0 +1,55 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Chip +// -------------------------------------------------- + +/// @prop - Margin top of the chip +$chip-md-margin-top: 2px !default; + +/// @prop - Margin end of the chip +$chip-md-margin-end: 0 !default; + +/// @prop - Margin bottom of the chip +$chip-md-margin-bottom: $chip-md-margin-top !default; + +/// @prop - Margin start of the chip +$chip-md-margin-start: $chip-md-margin-end !default; + +/// @prop - Height of the chip +$chip-md-height: 32px !default; + +/// @prop - Border radius of the chip +$chip-md-border-radius: 16px !default; + +/// @prop - Font size of the chip +$chip-md-font-size: 13px !default; + +/// @prop - Text color of the chip +$chip-md-text-color: rgba(0, 0, 0, .87) !default; + +/// @prop - Background color of the chip +$chip-md-background-color: rgba(0, 0, 0, .12) !default; + +/// @prop - Margin top of the label in the chip +$chip-md-label-margin-top: 0 !default; + +/// @prop - Margin end of the label in the chip +$chip-md-label-margin-end: 10px !default; + +/// @prop - Margin bottom of the label in the chip +$chip-md-label-margin-bottom: $chip-md-label-margin-top !default; + +/// @prop - Margin start of the label in the chip +$chip-md-label-margin-start: $chip-md-label-margin-end !default; + +/// @prop - Background color of the icon in the chip +$chip-md-icon-background-color: color($colors-md, primary) !default; + +/// @prop - Fill color of the icon in the chip +$chip-md-icon-fill-color: color-contrast($colors-md, $chip-md-icon-background-color) !default; + +/// @prop - Width of the avatar in the chip +$chip-md-avatar-width: 32px !default; + +/// @prop - Height of the avatar in the chip +$chip-md-avatar-height: $chip-md-avatar-width !default; diff --git a/packages/core/src/components/chip/chip.scss b/packages/core/src/components/chip/chip.scss index 86c2ccf65d..b5d699a8c9 100644 --- a/packages/core/src/components/chip/chip.scss +++ b/packages/core/src/components/chip/chip.scss @@ -1,30 +1,8 @@ -@import "../../themes/ionic.globals"; +@import "./chip.vars"; // Chip // -------------------------------------------------- -/// @prop - Border radius of the icon in the chip -$chip-icon-border-radius: 50% !default; - -/// @prop - Text alignment of the icon in the chip -$chip-icon-text-align: center !default; - -/// @prop - Width and height of the icon in the chip -$chip-icon-size: 32px !default; - -/// @prop - Font size of the icon in the chip -$chip-icon-font-size: 18px !default; - -/// @prop - Line height of the icon in the chip -$chip-icon-line-height: 36px !default; - -/// @prop - Width and height of the avatar in the chip -$chip-avatar-size: 32px !default; - -/// @prop - Border radius of the avatar in the chip -$chip-avatar-border-radius: 50% !default; - - ion-chip { display: inline-flex; @@ -45,24 +23,4 @@ ion-chip ion-icon { font-size: $chip-icon-font-size; line-height: $chip-icon-line-height; -} - -ion-chip ion-avatar { - @include border-radius($chip-avatar-border-radius); - - width: $chip-avatar-size; - min-width: $chip-avatar-size; - height: $chip-avatar-size; - min-height: $chip-avatar-size; -} - -ion-chip ion-avatar img { - @include border-radius($chip-avatar-border-radius); - - display: block; - - width: 100%; - max-width: 100%; - height: 100%; - max-height: 100%; -} +} \ No newline at end of file diff --git a/packages/core/src/components/chip/chip.vars.scss b/packages/core/src/components/chip/chip.vars.scss new file mode 100644 index 0000000000..886543d653 --- /dev/null +++ b/packages/core/src/components/chip/chip.vars.scss @@ -0,0 +1,19 @@ +@import "../../themes/ionic.globals"; + +// Chip +// -------------------------------------------------- + +/// @prop - Border radius of the icon in the chip +$chip-icon-border-radius: 50% !default; + +/// @prop - Text alignment of the icon in the chip +$chip-icon-text-align: center !default; + +/// @prop - Width and height of the icon in the chip +$chip-icon-size: 32px !default; + +/// @prop - Font size of the icon in the chip +$chip-icon-font-size: 18px !default; + +/// @prop - Line height of the icon in the chip +$chip-icon-line-height: 36px !default; diff --git a/packages/core/src/components/content/content.ios.scss b/packages/core/src/components/content/content.ios.scss index 01f510b671..5856acd66e 100644 --- a/packages/core/src/components/content/content.ios.scss +++ b/packages/core/src/components/content/content.ios.scss @@ -1,17 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./content"; - +@import "./content.ios.vars"; // iOS Content // -------------------------------------------------- -/// @prop - Background color of the outer content -$content-ios-outer-background: #efeff4 !default; - -/// @prop - Background color of the content when making transition -$content-ios-transition-background: #000 !default; - - .content-ios { color: $text-ios-color; background-color: $background-ios-color; diff --git a/packages/core/src/components/content/content.ios.vars.scss b/packages/core/src/components/content/content.ios.vars.scss new file mode 100644 index 0000000000..c0aa2f9854 --- /dev/null +++ b/packages/core/src/components/content/content.ios.vars.scss @@ -0,0 +1,10 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Content +// -------------------------------------------------- + +/// @prop - Background color of the outer content +$content-ios-outer-background: #efeff4 !default; + +/// @prop - Background color of the content when making transition +$content-ios-transition-background: #000 !default; diff --git a/packages/core/src/components/content/content.md.scss b/packages/core/src/components/content/content.md.scss index 3e07172ef7..f524b08e0a 100644 --- a/packages/core/src/components/content/content.md.scss +++ b/packages/core/src/components/content/content.md.scss @@ -1,6 +1,5 @@ -@import "../../themes/ionic.globals.md"; @import "./content"; - +@import "./content.md.vars"; // Material Design Content // -------------------------------------------------- diff --git a/packages/core/src/components/content/content.md.vars.scss b/packages/core/src/components/content/content.md.vars.scss new file mode 100644 index 0000000000..b928a3583d --- /dev/null +++ b/packages/core/src/components/content/content.md.vars.scss @@ -0,0 +1,4 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Content +// -------------------------------------------------- diff --git a/packages/core/src/components/content/content.scss b/packages/core/src/components/content/content.scss index 322c4f3ae1..355a3cb55d 100644 --- a/packages/core/src/components/content/content.scss +++ b/packages/core/src/components/content/content.scss @@ -17,7 +17,8 @@ ion-content { } a { - color: $link-color; + // TODO + // color: $link-color; } diff --git a/packages/core/src/components/datetime/datetime.ios.scss b/packages/core/src/components/datetime/datetime.ios.scss index 4abb5bfc1f..fe2728aa73 100644 --- a/packages/core/src/components/datetime/datetime.ios.scss +++ b/packages/core/src/components/datetime/datetime.ios.scss @@ -1,25 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./datetime"; +@import "./datetime.ios.vars"; // iOS Datetime // -------------------------------------------------- -/// @prop - Padding top of the Datetime component -$datetime-ios-padding-top: $item-ios-padding-top !default; - -/// @prop - Padding end of the Datetime component -$datetime-ios-padding-end: ($item-ios-padding-end / 2) !default; - -/// @prop - Padding bottom of the Datetime component -$datetime-ios-padding-bottom: $item-ios-padding-bottom !default; - -/// @prop - Padding start of the Datetime component -$datetime-ios-padding-start: $item-ios-padding-start !default; - -/// @prop - Color of the Datetime placeholder -$datetime-ios-placeholder-color: #999 !default; - - .datetime-ios { @include padding($datetime-ios-padding-top, $datetime-ios-padding-end, $datetime-ios-padding-bottom, $datetime-ios-padding-start); } diff --git a/packages/core/src/components/datetime/datetime.ios.vars.scss b/packages/core/src/components/datetime/datetime.ios.vars.scss new file mode 100644 index 0000000000..01f3239e71 --- /dev/null +++ b/packages/core/src/components/datetime/datetime.ios.vars.scss @@ -0,0 +1,19 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Datetime +// -------------------------------------------------- + +/// @prop - Padding top of the Datetime component +$datetime-ios-padding-top: $item-ios-padding-top !default; + +/// @prop - Padding end of the Datetime component +$datetime-ios-padding-end: ($item-ios-padding-end / 2) !default; + +/// @prop - Padding bottom of the Datetime component +$datetime-ios-padding-bottom: $item-ios-padding-bottom !default; + +/// @prop - Padding start of the Datetime component +$datetime-ios-padding-start: $item-ios-padding-start !default; + +/// @prop - Color of the Datetime placeholder +$datetime-ios-placeholder-color: #999 !default; diff --git a/packages/core/src/components/datetime/datetime.md.scss b/packages/core/src/components/datetime/datetime.md.scss index f29e269873..284aa02a86 100644 --- a/packages/core/src/components/datetime/datetime.md.scss +++ b/packages/core/src/components/datetime/datetime.md.scss @@ -1,25 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./datetime"; +@import "./datetime.md.vars"; // Material Design Datetime // -------------------------------------------------- -/// @prop - Padding top of the Datetime component -$datetime-md-padding-top: $item-md-padding-top !default; - -/// @prop - Padding end of the Datetime component -$datetime-md-padding-end: ($item-md-padding-end / 2) !default; - -/// @prop - Padding bottom of the Datetime component -$datetime-md-padding-bottom: $item-md-padding-bottom !default; - -/// @prop - Padding start of the Datetime component -$datetime-md-padding-start: $item-md-padding-start !default; - -/// @prop - Color of the Datetime placeholder -$datetime-md-placeholder-color: #999 !default; - - .datetime-md { @include padding($datetime-md-padding-top, $datetime-md-padding-end, $datetime-md-padding-bottom, $datetime-md-padding-start); } diff --git a/packages/core/src/components/datetime/datetime.md.vars.scss b/packages/core/src/components/datetime/datetime.md.vars.scss new file mode 100644 index 0000000000..4994b281da --- /dev/null +++ b/packages/core/src/components/datetime/datetime.md.vars.scss @@ -0,0 +1,19 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Datetime +// -------------------------------------------------- + +/// @prop - Padding top of the Datetime component +$datetime-md-padding-top: $item-md-padding-top !default; + +/// @prop - Padding end of the Datetime component +$datetime-md-padding-end: ($item-md-padding-end / 2) !default; + +/// @prop - Padding bottom of the Datetime component +$datetime-md-padding-bottom: $item-md-padding-bottom !default; + +/// @prop - Padding start of the Datetime component +$datetime-md-padding-start: $item-md-padding-start !default; + +/// @prop - Color of the Datetime placeholder +$datetime-md-placeholder-color: #999 !default; diff --git a/packages/core/src/components/fab/fab.ios.scss b/packages/core/src/components/fab/fab.ios.scss index 41c4ac6bbc..9340a5f3a3 100755 --- a/packages/core/src/components/fab/fab.ios.scss +++ b/packages/core/src/components/fab/fab.ios.scss @@ -1,49 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./fab"; +@import "./fab.ios.vars"; // iOS FAB Button // -------------------------------------------------- -/// @prop - Background color of the button -$fab-ios-background-color: color($colors-ios, primary) !default; - -/// @prop - Text color of the button -$fab-ios-text-color: color-contrast($colors-ios, $fab-ios-background-color) !default; - -/// @prop - Color of the button icon -$fab-ios-icon-fill-color: $fab-ios-text-color !default; - -/// @prop - Background color of the activated button -$fab-ios-background-color-activated: color-shade($fab-ios-background-color) !default; - -/// @prop - Background color of the button in a list -$fab-ios-list-button-background-color: $fab-list-button-background-color !default; - -/// @prop - Text color of the button in a list -$fab-ios-list-button-text-color: color-contrast($colors-ios, $fab-ios-list-button-background-color) !default; - -/// @prop - Color of the button icon in a list -$fab-ios-list-button-icon-fill-color: $fab-ios-list-button-text-color !default; - -/// @prop - Background color of the activated button in a list -$fab-ios-list-button-background-color-activated: color-shade($fab-ios-list-button-background-color) !default; - -/// @prop - Transition duration of the transform and opacity of the button in a list -$fab-ios-list-button-transition-duration: 200ms !default; - -/// @prop - Speed curve of the transition of the transform and opacity of the button in a list -$fab-ios-list-button-transition-timing-function: ease !default; - -/// @prop - Transition delay of the transform and opacity of the button in a list -$fab-ios-list-button-transition-delay: 10ms !default; - -/// @prop - Filter of the translucent fab -$fab-ios-translucent-filter: saturate(180%) blur(20px) !default; - -/// @prop - Opacity of the translucent fab -$fab-ios-translucent-opacity: .88 !default; - - .fab-ios { color: $fab-ios-text-color; background-color: $fab-ios-background-color; diff --git a/packages/core/src/components/fab/fab.ios.vars.scss b/packages/core/src/components/fab/fab.ios.vars.scss new file mode 100755 index 0000000000..1ae85d0b64 --- /dev/null +++ b/packages/core/src/components/fab/fab.ios.vars.scss @@ -0,0 +1,43 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS FAB Button +// -------------------------------------------------- + +/// @prop - Background color of the button +$fab-ios-background-color: color($colors-ios, primary) !default; + +/// @prop - Text color of the button +$fab-ios-text-color: color-contrast($colors-ios, $fab-ios-background-color) !default; + +/// @prop - Color of the button icon +$fab-ios-icon-fill-color: $fab-ios-text-color !default; + +/// @prop - Background color of the activated button +$fab-ios-background-color-activated: color-shade($fab-ios-background-color) !default; + +/// @prop - Background color of the button in a list +$fab-ios-list-button-background-color: $fab-list-button-background-color !default; + +/// @prop - Text color of the button in a list +$fab-ios-list-button-text-color: color-contrast($colors-ios, $fab-ios-list-button-background-color) !default; + +/// @prop - Color of the button icon in a list +$fab-ios-list-button-icon-fill-color: $fab-ios-list-button-text-color !default; + +/// @prop - Background color of the activated button in a list +$fab-ios-list-button-background-color-activated: color-shade($fab-ios-list-button-background-color) !default; + +/// @prop - Transition duration of the transform and opacity of the button in a list +$fab-ios-list-button-transition-duration: 200ms !default; + +/// @prop - Speed curve of the transition of the transform and opacity of the button in a list +$fab-ios-list-button-transition-timing-function: ease !default; + +/// @prop - Transition delay of the transform and opacity of the button in a list +$fab-ios-list-button-transition-delay: 10ms !default; + +/// @prop - Filter of the translucent fab +$fab-ios-translucent-filter: saturate(180%) blur(20px) !default; + +/// @prop - Opacity of the translucent fab +$fab-ios-translucent-opacity: .88 !default; diff --git a/packages/core/src/components/fab/fab.md.scss b/packages/core/src/components/fab/fab.md.scss index 8c5515c1eb..40286faff6 100755 --- a/packages/core/src/components/fab/fab.md.scss +++ b/packages/core/src/components/fab/fab.md.scss @@ -1,55 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./fab"; +@import "./fab.md.vars"; // Material Design FAB Button // -------------------------------------------------- -/// @prop - Box shadow of the FAB button -$fab-md-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default; - -/// @prop - Box shadow of the activated FAB button -$fab-md-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default; - -/// @prop - Background color of the button -$fab-md-background-color: color($colors-md, primary) !default; - -/// @prop - Text color of the button -$fab-md-text-color: color-contrast($colors-md, $fab-md-background-color) !default; - -/// @prop - Color of the button icon -$fab-md-icon-fill-color: $fab-md-text-color !default; - -/// @prop - Background color of the activated button -$fab-md-background-color-activated: color-shade($fab-md-background-color) !default; - -/// @prop - Background color of the button in a list -$fab-md-list-button-background-color: $fab-list-button-background-color !default; - -/// @prop - Text color of the button in a list -$fab-md-list-button-text-color: color-contrast($colors-md, $fab-md-list-button-background-color) !default; - -/// @prop - Color of the button icon in a list -$fab-md-list-button-icon-fill-color: $fab-md-list-button-text-color !default; - -/// @prop - Background color of the activated button in a list -$fab-md-list-button-background-color-activated: color-shade($fab-md-list-button-background-color) !default; - -/// @prop - Transition duration of the transform and opacity of the button in a list -$fab-md-list-button-transition-duration: 200ms !default; - -/// @prop - Speed curve of the transition of the transform and opacity of the button in a list -$fab-md-list-button-transition-timing-function: ease !default; - -/// @prop - Transition delay of the transform and opacity of the button in a list -$fab-md-list-button-transition-delay: 10ms !default; - -/// @prop - Transition duration of the box-shadow and background-color of the button -$fab-button-md-transition-duration: 300ms !default; - -/// @prop - Speed curve of the transition of the box-shadow and background-color of the button -$fab-button-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default; - - .fab-md { color: $fab-md-text-color; background-color: $fab-md-background-color; diff --git a/packages/core/src/components/fab/fab.md.vars.scss b/packages/core/src/components/fab/fab.md.vars.scss new file mode 100755 index 0000000000..4dfd4dda54 --- /dev/null +++ b/packages/core/src/components/fab/fab.md.vars.scss @@ -0,0 +1,49 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design FAB Button +// -------------------------------------------------- + +/// @prop - Box shadow of the FAB button +$fab-md-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default; + +/// @prop - Box shadow of the activated FAB button +$fab-md-box-shadow-activated: 0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default; + +/// @prop - Background color of the button +$fab-md-background-color: color($colors-md, primary) !default; + +/// @prop - Text color of the button +$fab-md-text-color: color-contrast($colors-md, $fab-md-background-color) !default; + +/// @prop - Color of the button icon +$fab-md-icon-fill-color: $fab-md-text-color !default; + +/// @prop - Background color of the activated button +$fab-md-background-color-activated: color-shade($fab-md-background-color) !default; + +/// @prop - Background color of the button in a list +$fab-md-list-button-background-color: $fab-list-button-background-color !default; + +/// @prop - Text color of the button in a list +$fab-md-list-button-text-color: color-contrast($colors-md, $fab-md-list-button-background-color) !default; + +/// @prop - Color of the button icon in a list +$fab-md-list-button-icon-fill-color: $fab-md-list-button-text-color !default; + +/// @prop - Background color of the activated button in a list +$fab-md-list-button-background-color-activated: color-shade($fab-md-list-button-background-color) !default; + +/// @prop - Transition duration of the transform and opacity of the button in a list +$fab-md-list-button-transition-duration: 200ms !default; + +/// @prop - Speed curve of the transition of the transform and opacity of the button in a list +$fab-md-list-button-transition-timing-function: ease !default; + +/// @prop - Transition delay of the transform and opacity of the button in a list +$fab-md-list-button-transition-delay: 10ms !default; + +/// @prop - Transition duration of the box-shadow and background-color of the button +$fab-button-md-transition-duration: 300ms !default; + +/// @prop - Speed curve of the transition of the box-shadow and background-color of the button +$fab-button-md-transition-timing-function: cubic-bezier(.4, 0, .2, 1) !default; diff --git a/packages/core/src/components/fab/fab.scss b/packages/core/src/components/fab/fab.scss index a2b4430fd1..b223ec3c36 100755 --- a/packages/core/src/components/fab/fab.scss +++ b/packages/core/src/components/fab/fab.scss @@ -1,24 +1,8 @@ -@import "../../themes/ionic.globals"; +@import "./fab.vars"; // Floating Action Buttons // -------------------------------------------------- -/// @prop - Width and height of the FAB button -$fab-size: 56px !default; - -/// @prop - Width and height of the mini FAB button -$fab-mini-size: 40px !default; - -/// @prop - Margin of the FAB Container -$fab-content-margin: 10px !default; - -/// @prop - Margin of the FAB List -$fab-list-margin: 10px !default; - -/// @prop - Background color of the button in a list -$fab-list-button-background-color: #f4f4f4 !default; - - .fab { @include text-align(center); @include appearance(none); diff --git a/packages/core/src/components/fab/fab.vars.scss b/packages/core/src/components/fab/fab.vars.scss new file mode 100755 index 0000000000..1569c08319 --- /dev/null +++ b/packages/core/src/components/fab/fab.vars.scss @@ -0,0 +1,19 @@ +@import "../../themes/ionic.globals"; + +// Floating Action Buttons +// -------------------------------------------------- + +/// @prop - Width and height of the FAB button +$fab-size: 56px !default; + +/// @prop - Width and height of the mini FAB button +$fab-mini-size: 40px !default; + +/// @prop - Margin of the FAB Container +$fab-content-margin: 10px !default; + +/// @prop - Margin of the FAB List +$fab-list-margin: 10px !default; + +/// @prop - Background color of the button in a list +$fab-list-button-background-color: #f4f4f4 !default; diff --git a/packages/core/src/components/footer/footer.ios.scss b/packages/core/src/components/footer/footer.ios.scss index 5dc09168b6..77f55a640a 100644 --- a/packages/core/src/components/footer/footer.ios.scss +++ b/packages/core/src/components/footer/footer.ios.scss @@ -1,10 +1,8 @@ -@import "../../themes/ionic.globals.ios"; +@import "./footer.ios.vars"; // iOS Footer // -------------------------------------------------- -$footer-ios-translucent-filter: saturate(180%) blur(20px) !default; - .footer-translucent-ios { -webkit-backdrop-filter: $footer-ios-translucent-filter; backdrop-filter: $footer-ios-translucent-filter; diff --git a/packages/core/src/components/footer/footer.ios.vars.scss b/packages/core/src/components/footer/footer.ios.vars.scss new file mode 100644 index 0000000000..a34dd6ff1b --- /dev/null +++ b/packages/core/src/components/footer/footer.ios.vars.scss @@ -0,0 +1,7 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Footer +// -------------------------------------------------- + +$footer-ios-translucent-filter: saturate(180%) blur(20px) !default; + diff --git a/packages/core/src/components/grid/grid.scss b/packages/core/src/components/grid/grid.scss index 30a2c03f5e..3b422e1098 100644 --- a/packages/core/src/components/grid/grid.scss +++ b/packages/core/src/components/grid/grid.scss @@ -1,68 +1,4 @@ -@import "../../themes/ionic.globals"; - -@import "./grid.mixins"; - -// Grid -// -------------------------------------------------- -// Using flexbox for the grid, originally inspired by Philip Walton: -// http://philipwalton.github.io/solved-by-flexbox/demos/grids/ -// Column layout based on the Bootstrap grid system: -// http://v4-alpha.getbootstrap.com/layout/grid/ - - -// Grid Breakpoints -// -------------------------------------------------- - -/// @prop - The minimum dimensions at which your layout will change, -/// adapting to different screen sizes, for use in media queries -$grid-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px -) !default; - - -// Grid Containers -// -------------------------------------------------- - -/// @prop - Maximum width of the grid for different screen sizes -$grid-max-widths: ( - sm: 540px, - md: 720px, - lg: 960px, - xl: 1140px -) !default; - - -// Grid Columns -// -------------------------------------------------- - -/// @prop - Number of columns for the grid -$grid-columns: 12 !default; - -/// @prop - Total width of the padding for the grid -$grid-padding-width: 10px !default; - -/// @prop - Padding for the columns for different screen sizes -$grid-padding-widths: ( - xs: $grid-padding-width, - sm: $grid-padding-width, - md: $grid-padding-width, - lg: $grid-padding-width, - xl: $grid-padding-width -) !default; - - -// Check that the Sass maps are declared correctly -// -------------------------------------------------- - -@include assert-ascending($grid-breakpoints, "$grid-breakpoints"); -@include assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints"); - -@include assert-ascending($grid-max-widths, "$grid-max-widths"); - +@import "./grid.vars"; // Grid // -------------------------------------------------- diff --git a/packages/core/src/components/grid/grid.vars.scss b/packages/core/src/components/grid/grid.vars.scss new file mode 100644 index 0000000000..6ce2376ef7 --- /dev/null +++ b/packages/core/src/components/grid/grid.vars.scss @@ -0,0 +1,64 @@ +@import "../../themes/ionic.globals"; + +@import "./grid.mixins"; + +// Grid +// -------------------------------------------------- +// Using flexbox for the grid, originally inspired by Philip Walton: +// http://philipwalton.github.io/solved-by-flexbox/demos/grids/ +// Column layout based on the Bootstrap grid system: +// http://v4-alpha.getbootstrap.com/layout/grid/ + + +// Grid Breakpoints +// -------------------------------------------------- + +/// @prop - The minimum dimensions at which your layout will change, +/// adapting to different screen sizes, for use in media queries +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px +) !default; + + +// Grid Containers +// -------------------------------------------------- + +/// @prop - Maximum width of the grid for different screen sizes +$grid-max-widths: ( + sm: 540px, + md: 720px, + lg: 960px, + xl: 1140px +) !default; + + +// Grid Columns +// -------------------------------------------------- + +/// @prop - Number of columns for the grid +$grid-columns: 12 !default; + +/// @prop - Total width of the padding for the grid +$grid-padding-width: 10px !default; + +/// @prop - Padding for the columns for different screen sizes +$grid-padding-widths: ( + xs: $grid-padding-width, + sm: $grid-padding-width, + md: $grid-padding-width, + lg: $grid-padding-width, + xl: $grid-padding-width +) !default; + + +// Check that the Sass maps are declared correctly +// -------------------------------------------------- + +@include assert-ascending($grid-breakpoints, "$grid-breakpoints"); +@include assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints"); + +@include assert-ascending($grid-max-widths, "$grid-max-widths"); diff --git a/packages/core/src/components/header/header.ios.scss b/packages/core/src/components/header/header.ios.scss index bf28ce482e..2065f2ff0c 100644 --- a/packages/core/src/components/header/header.ios.scss +++ b/packages/core/src/components/header/header.ios.scss @@ -1,10 +1,8 @@ -@import "../../themes/ionic.globals.ios"; +@import "./header.ios.vars"; // iOS Header // -------------------------------------------------- -$header-ios-translucent-filter: saturate(180%) blur(20px) !default; - .header-translucent-ios { -webkit-backdrop-filter: $header-ios-translucent-filter; backdrop-filter: $header-ios-translucent-filter; diff --git a/packages/core/src/components/header/header.ios.vars.scss b/packages/core/src/components/header/header.ios.vars.scss new file mode 100644 index 0000000000..814653f2f6 --- /dev/null +++ b/packages/core/src/components/header/header.ios.vars.scss @@ -0,0 +1,7 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Header +// -------------------------------------------------- + +$header-ios-translucent-filter: saturate(180%) blur(20px) !default; + diff --git a/packages/core/src/components/infinite-scroll/infinite-scroll.scss b/packages/core/src/components/infinite-scroll/infinite-scroll.scss index 5c6b5f6d72..6412ffab26 100644 --- a/packages/core/src/components/infinite-scroll/infinite-scroll.scss +++ b/packages/core/src/components/infinite-scroll/infinite-scroll.scss @@ -1,47 +1,8 @@ -@import "../../themes/ionic.globals"; +@import "./infinite-scroll.vars"; // Infinite Scroll // -------------------------------------------------- -// deprecated -$infinite-scroll-loading-margin: null !default; - -/// @prop - Minimun height of ion-infinite-scroll-content -$infinite-scroll-content-min-height: 84px !default; - -/// @prop - Margin top of the infinite scroll loading icon -$infinite-scroll-loading-margin-top: 0 !default; - -/// @prop - Margin end of the infinite scroll loading icon -$infinite-scroll-loading-margin-end: 0 !default; - -/// @prop - Margin bottom of the infinite scroll loading icon -$infinite-scroll-loading-margin-bottom: 32px !default; - -/// @prop - Margin start of the infinite scroll loading icon -$infinite-scroll-loading-margin-start: 0 !default; - -/// @prop - Color of the infinite scroll loading indicator -$infinite-scroll-loading-color: #666 !default; - -/// @prop - Text color of the infinite scroll loading indicator -$infinite-scroll-loading-text-color: $infinite-scroll-loading-color !default; - -// deprecated -$infinite-scroll-loading-text-margin: null !default; - -/// @prop - Margin top of the infinite scroll loading text -$infinite-scroll-loading-text-margin-top: 4px !default; - -/// @prop - Margin end of the infinite scroll loading text -$infinite-scroll-loading-text-margin-end: 32px !default; - -/// @prop - Margin bottom of the infinite scroll loading text -$infinite-scroll-loading-text-margin-bottom:0 !default; - -/// @prop - Margin start of the infinite scroll loading text -$infinite-scroll-loading-text-margin-start: 32px !default; - ion-infinite-scroll { display: none; @@ -68,22 +29,18 @@ ion-infinite-scroll-content { } .infinite-loading { + @include margin($infinite-scroll-loading-margin-top, $infinite-scroll-loading-margin-end, $infinite-scroll-loading-margin-bottom, $infinite-scroll-loading-margin-start); + display: none; width: 100%; - - @include deprecated-variable(margin, $infinite-scroll-loading-margin) { - @include margin($infinite-scroll-loading-margin-top, $infinite-scroll-loading-margin-end, $infinite-scroll-loading-margin-bottom, $infinite-scroll-loading-margin-start); - } } .infinite-loading-text { - color: $infinite-scroll-loading-text-color; + @include margin($infinite-scroll-loading-text-margin-top, $infinite-scroll-loading-text-margin-end, $infinite-scroll-loading-text-margin-bottom, $infinite-scroll-loading-text-margin-start); - @include deprecated-variable(margin, $infinite-scroll-loading-text-margin) { - @include margin($infinite-scroll-loading-text-margin-top, $infinite-scroll-loading-text-margin-end, $infinite-scroll-loading-text-margin-bottom, $infinite-scroll-loading-text-margin-start); - } + color: $infinite-scroll-loading-text-color; } .infinite-loading-spinner .spinner-ios line, diff --git a/packages/core/src/components/infinite-scroll/infinite-scroll.vars.scss b/packages/core/src/components/infinite-scroll/infinite-scroll.vars.scss new file mode 100644 index 0000000000..9e11dababb --- /dev/null +++ b/packages/core/src/components/infinite-scroll/infinite-scroll.vars.scss @@ -0,0 +1,37 @@ +@import "../../themes/ionic.globals"; + +// Infinite Scroll +// -------------------------------------------------- + +/// @prop - Minimum height of the infinite scroll content +$infinite-scroll-content-min-height: 84px !default; + +/// @prop - Margin top of the infinite scroll loading icon +$infinite-scroll-loading-margin-top: 0 !default; + +/// @prop - Margin end of the infinite scroll loading icon +$infinite-scroll-loading-margin-end: 0 !default; + +/// @prop - Margin bottom of the infinite scroll loading icon +$infinite-scroll-loading-margin-bottom: 32px !default; + +/// @prop - Margin start of the infinite scroll loading icon +$infinite-scroll-loading-margin-start: $infinite-scroll-loading-margin-end !default; + +/// @prop - Color of the infinite scroll loading indicator +$infinite-scroll-loading-color: #666 !default; + +/// @prop - Text color of the infinite scroll loading indicator +$infinite-scroll-loading-text-color: $infinite-scroll-loading-color !default; + +/// @prop - Margin top of the infinite scroll loading text +$infinite-scroll-loading-text-margin-top: 4px !default; + +/// @prop - Margin end of the infinite scroll loading text +$infinite-scroll-loading-text-margin-end: 32px !default; + +/// @prop - Margin bottom of the infinite scroll loading text +$infinite-scroll-loading-text-margin-bottom: 0 !default; + +/// @prop - Margin start of the infinite scroll loading text +$infinite-scroll-loading-text-margin-start: $infinite-scroll-loading-text-margin-end !default; diff --git a/packages/core/src/components/input/input.ios.scss b/packages/core/src/components/input/input.ios.scss index 477a6d2178..86422e5cc2 100644 --- a/packages/core/src/components/input/input.ios.scss +++ b/packages/core/src/components/input/input.ios.scss @@ -1,64 +1,14 @@ -@import "../../themes/ionic.globals.ios"; @import "./input"; - +@import "./input.ios.vars"; // iOS Input // -------------------------------------------------- -/// @prop - Background color of the input -$text-input-ios-background-color: $list-ios-background-color !default; - -/// @prop - Margin top of the input -$text-input-ios-margin-top: $item-ios-padding-top !default; - -/// @prop - Margin end of the input -$text-input-ios-margin-end: ($item-ios-padding-end / 2) !default; - -/// @prop - Margin bottom of the input -$text-input-ios-margin-bottom: $item-ios-padding-bottom !default; - -/// @prop - Margin start of the input -$text-input-ios-margin-start: 0 !default; - -/// @prop - Width of the icon used to clear the input -$text-input-ios-input-clear-icon-width: 30px !default; - -/// @prop - Color of the icon used to clear the input -$text-input-ios-input-clear-icon-color: rgba(0, 0, 0, .5) !default; - -/// @prop - Icon used to clear the input -$text-input-ios-input-clear-icon-svg: "" !default; - -/// @prop - Size of the icon used to clear the input -$text-input-ios-input-clear-icon-size: 18px !default; - -/// @prop - Show the focus highlight when the input has focus -$text-input-ios-show-focus-highlight: false !default; - -/// @prop - Show the valid highlight when it is valid and has a value -$text-input-ios-show-valid-highlight: $text-input-ios-show-focus-highlight !default; - -/// @prop - Show the invalid highlight when it is invalid and has value -$text-input-ios-show-invalid-highlight: $text-input-ios-show-focus-highlight !default; - -/// @prop - Color of the input highlight -$text-input-ios-highlight-color: color($colors-ios, primary) !default; - -/// @prop - Color of the input highlight when valid -$text-input-ios-highlight-color-valid: $text-input-highlight-color-valid !default; - -/// @prop - Color of the input highlight when invalid -$text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid !default; - - -// iOS Default Input -// -------------------------------------------------- - .text-input-ios { - @include margin($text-input-ios-margin-top, $text-input-ios-margin-end, $text-input-ios-margin-bottom, $text-input-ios-margin-start); + @include margin($input-ios-margin-top, $input-ios-margin-end, $input-ios-margin-bottom, $input-ios-margin-start); @include padding(0); - width: calc(100% - #{($text-input-ios-margin-end + $text-input-ios-margin-start)}); + width: calc(100% - #{($input-ios-margin-end + $input-ios-margin-start)}); } @@ -80,7 +30,7 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid ! } // Show the focus highlight when the input has focus -@if ($text-input-ios-show-focus-highlight) { +@if ($input-ios-show-focus-highlight) { // In order to get a 2px border we need to add an inset // box-shadow 1px (this is to avoid the div resizing) @@ -88,14 +38,14 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid ! // TODO remove all uses of input-has-value in v4 .item-ios.item-input.item-input-has-focus .item-inner, .item-ios.item-input.input-has-focus .item-inner { - @include ios-input-highlight($text-input-ios-highlight-color); + @include ios-input-highlight($input-ios-highlight-color); } // The last item in a list has a border on the item, not the // inner item, so add it to the item itself .list-ios .item-input.item-input-has-focus:last-child, .list-ios .item-input.input-has-focus:last-child { - @include ios-input-highlight($text-input-ios-highlight-color); + @include ios-input-highlight($input-ios-highlight-color); .item-inner { box-shadow: none; @@ -104,15 +54,15 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid ! } // Show the valid highlight when it has the .ng-valid class and a value -@if ($text-input-ios-show-valid-highlight) { +@if ($input-ios-show-valid-highlight) { .item-ios.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner, .item-ios.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner { - @include ios-input-highlight($text-input-ios-highlight-color-valid); + @include ios-input-highlight($input-ios-highlight-color-valid); } .list-ios .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child, .list-ios .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child { - @include ios-input-highlight($text-input-ios-highlight-color-valid); + @include ios-input-highlight($input-ios-highlight-color-valid); .item-inner { box-shadow: none; @@ -121,13 +71,13 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid ! } // Show the invalid highlight when it has the invalid class and has been touched -@if ($text-input-ios-show-invalid-highlight) { +@if ($input-ios-show-invalid-highlight) { .item-ios.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner { - @include ios-input-highlight($text-input-ios-highlight-color-invalid); + @include ios-input-highlight($input-ios-highlight-color-invalid); } .list-ios .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child { - @include ios-input-highlight($text-input-ios-highlight-color-invalid); + @include ios-input-highlight($input-ios-highlight-color-invalid); .item-inner { box-shadow: none; @@ -143,7 +93,7 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid ! .item-ios.item-label-floating .text-input { @include margin(8px, null, 8px, 0); - width: calc(100% - #{$text-input-ios-margin-end}); + width: calc(100% - #{$input-ios-margin-end}); } .item-ios.item-label-stacked .label-ios + .input + .cloned-input, @@ -165,15 +115,15 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid ! } .input-ios[clearInput] .text-input { - @include padding-horizontal(null, $text-input-ios-input-clear-icon-width); + @include padding-horizontal(null, $input-ios-input-clear-icon-width); } .input-ios .text-input-clear-icon { @include position-horizontal(null, ($item-ios-padding-end / 2)); - @include svg-background-image($text-input-ios-input-clear-icon-svg); + @include svg-background-image($input-ios-input-clear-icon-svg); - width: $text-input-ios-input-clear-icon-width; + width: $input-ios-input-clear-icon-width; background-color: transparent; - background-size: $text-input-ios-input-clear-icon-size; + background-size: $input-ios-input-clear-icon-size; } diff --git a/packages/core/src/components/input/input.ios.vars.scss b/packages/core/src/components/input/input.ios.vars.scss new file mode 100644 index 0000000000..b359a1e087 --- /dev/null +++ b/packages/core/src/components/input/input.ios.vars.scss @@ -0,0 +1,49 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Input +// -------------------------------------------------- + +/// @prop - Background color of the input +$input-ios-background-color: $list-ios-background-color !default; + +/// @prop - Margin top of the input +$input-ios-margin-top: $item-ios-padding-top !default; + +/// @prop - Margin end of the input +$input-ios-margin-end: ($item-ios-padding-end / 2) !default; + +/// @prop - Margin bottom of the input +$input-ios-margin-bottom: $item-ios-padding-bottom !default; + +/// @prop - Margin start of the input +$input-ios-margin-start: 0 !default; + +/// @prop - Width of the icon used to clear the input +$input-ios-input-clear-icon-width: 30px !default; + +/// @prop - Color of the icon used to clear the input +$input-ios-input-clear-icon-color: rgba(0, 0, 0, .5) !default; + +/// @prop - Icon used to clear the input +$input-ios-input-clear-icon-svg: "" !default; + +/// @prop - Size of the icon used to clear the input +$input-ios-input-clear-icon-size: 18px !default; + +/// @prop - Show the focus highlight when the input has focus +$input-ios-show-focus-highlight: false !default; + +/// @prop - Show the valid highlight when it is valid and has a value +$input-ios-show-valid-highlight: $input-ios-show-focus-highlight !default; + +/// @prop - Show the invalid highlight when it is invalid and has value +$input-ios-show-invalid-highlight: $input-ios-show-focus-highlight !default; + +/// @prop - Color of the input highlight +$input-ios-highlight-color: color($colors-ios, primary) !default; + +/// @prop - Color of the input highlight when valid +$input-ios-highlight-color-valid: $input-highlight-color-valid !default; + +/// @prop - Color of the input highlight when invalid +$input-ios-highlight-color-invalid: $input-highlight-color-invalid !default; diff --git a/packages/core/src/components/input/input.md.scss b/packages/core/src/components/input/input.md.scss index fe360fe8da..3ae21ac27c 100644 --- a/packages/core/src/components/input/input.md.scss +++ b/packages/core/src/components/input/input.md.scss @@ -1,64 +1,14 @@ -@import "../../themes/ionic.globals.md"; @import "./input"; - +@import "./input.md.vars"; // Material Design Input // -------------------------------------------------- -/// @prop - Background color of the input -$text-input-md-background-color: $list-md-background-color !default; - -/// @prop - Margin top of the input -$text-input-md-margin-top: $item-md-padding-top !default; - -/// @prop - Margin end of the input -$text-input-md-margin-end: ($item-md-padding-end / 2) !default; - -/// @prop - Margin bottom of the input -$text-input-md-margin-bottom: $item-md-padding-bottom !default; - -/// @prop - Margin start of the input -$text-input-md-margin-start: ($item-md-padding-start / 2) !default; - -/// @prop - Width of the icon used to clear the input -$text-input-md-input-clear-icon-width: 30px !default; - -/// @prop - Color of the icon used to clear the input -$text-input-md-input-clear-icon-color: #5b5b5b !default; - -/// @prop - Icon used to clear the input -$text-input-md-input-clear-icon-svg: "" !default; - -/// @prop - Size of the icon used to clear the input -$text-input-md-input-clear-icon-size: 22px !default; - -/// @prop - Show the focus highlight when the input has focus -$text-input-md-show-focus-highlight: true !default; - -/// @prop - Show the valid highlight when it is valid and has a value -$text-input-md-show-valid-highlight: $text-input-md-show-focus-highlight !default; - -/// @prop - Show the invalid highlight when it is invalid and has value -$text-input-md-show-invalid-highlight: $text-input-md-show-focus-highlight !default; - -/// @prop - Color of the input highlight -$text-input-md-highlight-color: color($colors-md, primary) !default; - -/// @prop - Color of the input highlight when valid -$text-input-md-highlight-color-valid: $text-input-highlight-color-valid !default; - -/// @prop - Color of the input highlight when invalid -$text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid !default; - - -// Material Design Default Input -// -------------------------------------------------- - .text-input-md { - @include margin($text-input-md-margin-top, $text-input-md-margin-end, $text-input-md-margin-bottom, $text-input-md-margin-start); + @include margin($input-md-margin-top, $input-md-margin-end, $input-md-margin-bottom, $input-md-margin-start); @include padding(0); - width: calc(100% - #{$text-input-md-margin-end} - #{$text-input-md-margin-start}); + width: calc(100% - #{$input-md-margin-end} - #{$input-md-margin-start}); } @@ -81,21 +31,21 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid } // Show the focus highlight when the input has focus -@if ($text-input-md-show-focus-highlight) { +@if ($input-md-show-focus-highlight) { // In order to get a 2px border we need to add an inset // box-shadow 1px (this is to avoid the div resizing) // TODO remove all uses of input-has-focus in v4 .item-md.item-input.item-input-has-focus .item-inner, .item-md.item-input.input-has-focus .item-inner { - @include md-input-highlight($text-input-md-highlight-color); + @include md-input-highlight($input-md-highlight-color); } // The last item in a list has a border on the item, not the // inner item, so add it to the item itself .list-md .item-input.item-input-has-focus:last-child, .list-md .item-input.input-has-focus:last-child { - @include md-input-highlight($text-input-md-highlight-color); + @include md-input-highlight($input-md-highlight-color); .item-inner { box-shadow: none; @@ -104,17 +54,17 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid } // Show the valid highlight when it has the .ng-valid class and a value -@if ($text-input-md-show-valid-highlight) { +@if ($input-md-show-valid-highlight) { // TODO remove all uses of input-has-focus in v4 // TODO remove all uses of input-has-value in v4 .item-md.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner, .item-md.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner { - @include md-input-highlight($text-input-md-highlight-color-valid); + @include md-input-highlight($input-md-highlight-color-valid); } .list-md .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child, .list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child { - @include md-input-highlight($text-input-md-highlight-color-valid); + @include md-input-highlight($input-md-highlight-color-valid); .item-inner { box-shadow: none; @@ -123,13 +73,13 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid } // Show the invalid highlight when it has the invalid class and has been touched -@if ($text-input-md-show-invalid-highlight) { +@if ($input-md-show-invalid-highlight) { .item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner { - @include md-input-highlight($text-input-md-highlight-color-invalid); + @include md-input-highlight($input-md-highlight-color-invalid); } .list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child { - @include md-input-highlight($text-input-md-highlight-color-invalid); + @include md-input-highlight($input-md-highlight-color-invalid); .item-inner { box-shadow: none; @@ -145,7 +95,7 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid .item-label-floating .text-input-md { @include margin(8px, null, 8px, 0); - width: calc(100% - #{$text-input-md-margin-end}); + width: calc(100% - #{$input-md-margin-end}); } .item-label-stacked .select-md, @@ -162,15 +112,15 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid } .input-md[clearInput] .text-input { - @include padding-horizontal(null, $text-input-md-input-clear-icon-width); + @include padding-horizontal(null, $input-md-input-clear-icon-width); } .input-md .text-input-clear-icon { @include position-horizontal(null, ($item-md-padding-end / 2)); - @include svg-background-image($text-input-md-input-clear-icon-svg); + @include svg-background-image($input-md-input-clear-icon-svg); - width: $text-input-md-input-clear-icon-width; + width: $input-md-input-clear-icon-width; background-color: transparent; - background-size: $text-input-md-input-clear-icon-size; + background-size: $input-md-input-clear-icon-size; } diff --git a/packages/core/src/components/input/input.md.vars.scss b/packages/core/src/components/input/input.md.vars.scss new file mode 100644 index 0000000000..db243c7407 --- /dev/null +++ b/packages/core/src/components/input/input.md.vars.scss @@ -0,0 +1,49 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Input +// -------------------------------------------------- + +/// @prop - Background color of the input +$input-md-background-color: $list-md-background-color !default; + +/// @prop - Margin top of the input +$input-md-margin-top: $item-md-padding-top !default; + +/// @prop - Margin end of the input +$input-md-margin-end: ($item-md-padding-end / 2) !default; + +/// @prop - Margin bottom of the input +$input-md-margin-bottom: $item-md-padding-bottom !default; + +/// @prop - Margin start of the input +$input-md-margin-start: ($item-md-padding-start / 2) !default; + +/// @prop - Width of the icon used to clear the input +$input-md-input-clear-icon-width: 30px !default; + +/// @prop - Color of the icon used to clear the input +$input-md-input-clear-icon-color: #5b5b5b !default; + +/// @prop - Icon used to clear the input +$input-md-input-clear-icon-svg: "" !default; + +/// @prop - Size of the icon used to clear the input +$input-md-input-clear-icon-size: 22px !default; + +/// @prop - Show the focus highlight when the input has focus +$input-md-show-focus-highlight: true !default; + +/// @prop - Show the valid highlight when it is valid and has a value +$input-md-show-valid-highlight: $input-md-show-focus-highlight !default; + +/// @prop - Show the invalid highlight when it is invalid and has value +$input-md-show-invalid-highlight: $input-md-show-focus-highlight !default; + +/// @prop - Color of the input highlight +$input-md-highlight-color: color($colors-md, primary) !default; + +/// @prop - Color of the input highlight when valid +$input-md-highlight-color-valid: $input-highlight-color-valid !default; + +/// @prop - Color of the input highlight when invalid +$input-md-highlight-color-invalid: $input-highlight-color-invalid !default; diff --git a/packages/core/src/components/input/input.scss b/packages/core/src/components/input/input.scss index bc284ab90c..bb5441c495 100644 --- a/packages/core/src/components/input/input.scss +++ b/packages/core/src/components/input/input.scss @@ -1,21 +1,8 @@ -@import "../../themes/ionic.globals"; +@import "./input.vars"; // Input // -------------------------------------------------- -/// @prop - Color of the input highlight when valid -$text-input-highlight-color-valid: #32db64 !default; - -/// @prop - Color of the input highlight when invalid -$text-input-highlight-color-invalid: #f53d3d !default; - -/// @prop - Color of the input placeholder -$text-input-placeholder-color: #999 !default; - - -// Input/Textarea Wrapper -// -------------------------------------------------- - ion-input, ion-textarea { position: relative; @@ -44,7 +31,7 @@ ion-textarea { // -------------------------------------------------- .text-input { - @include placeholder($text-input-placeholder-color); + @include placeholder($input-placeholder-color); @include appearance(none); @include border-radius(0); diff --git a/packages/core/src/components/input/input.vars.scss b/packages/core/src/components/input/input.vars.scss new file mode 100644 index 0000000000..bf6d175a09 --- /dev/null +++ b/packages/core/src/components/input/input.vars.scss @@ -0,0 +1,13 @@ +@import "../../themes/ionic.globals"; + +// Input +// -------------------------------------------------- + +/// @prop - Color of the input highlight when valid +$input-highlight-color-valid: #32db64 !default; + +/// @prop - Color of the input highlight when invalid +$input-highlight-color-invalid: #f53d3d !default; + +/// @prop - Color of the input placeholder +$input-placeholder-color: #999 !default; diff --git a/packages/core/src/components/item-divider/item-divider.ios.scss b/packages/core/src/components/item-divider/item-divider.ios.scss index 21e3392c5f..ba26ad236f 100644 --- a/packages/core/src/components/item-divider/item-divider.ios.scss +++ b/packages/core/src/components/item-divider/item-divider.ios.scss @@ -1,18 +1,5 @@ -@import "../../themes/ionic.globals.ios"; @import "./item-divider"; - -// iOS Item Divider -// -------------------------------------------------- - -/// @prop - Background for the divider -$item-ios-divider-background: #f7f7f7 !default; - -/// @prop - Color for the divider -$item-ios-divider-color: #222 !default; - -/// @prop - Padding start for the divider -$item-ios-divider-padding-start: $item-ios-padding-start !default; - +@import "./item-divider.ios.vars"; // iOS Item Divider // -------------------------------------------------- diff --git a/packages/core/src/components/item-divider/item-divider.ios.vars.scss b/packages/core/src/components/item-divider/item-divider.ios.vars.scss new file mode 100644 index 0000000000..204b5c0623 --- /dev/null +++ b/packages/core/src/components/item-divider/item-divider.ios.vars.scss @@ -0,0 +1,13 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Item Divider +// -------------------------------------------------- + +/// @prop - Background for the divider +$item-ios-divider-background: #f7f7f7 !default; + +/// @prop - Color for the divider +$item-ios-divider-color: #222 !default; + +/// @prop - Padding start for the divider +$item-ios-divider-padding-start: $item-ios-padding-start !default; diff --git a/packages/core/src/components/item-divider/item-divider.md.scss b/packages/core/src/components/item-divider/item-divider.md.scss index 8d2947f330..164f2a2f33 100644 --- a/packages/core/src/components/item-divider/item-divider.md.scss +++ b/packages/core/src/components/item-divider/item-divider.md.scss @@ -1,24 +1,5 @@ -@import "../../themes/ionic.globals.md"; @import "./item-divider"; - -// Material Design Item Divider -// -------------------------------------------------- - -/// @prop - Color for the divider -$item-md-divider-color: #858585 !default; - -/// @prop - Background for the divider -$item-md-divider-background: #fff !default; - -/// @prop - Font size for the divider -$item-md-divider-font-size: 1.4rem !default; - -/// @prop - Border bottom for the divider -$item-md-divider-border-bottom: 1px solid $list-md-border-color !default; - -/// @prop - Padding start for the divider -$item-md-divider-padding-start: $item-md-padding-start !default; - +@import "./item-divider.md.vars"; // Material Design Item Divider // -------------------------------------------------- diff --git a/packages/core/src/components/item-divider/item-divider.md.vars.scss b/packages/core/src/components/item-divider/item-divider.md.vars.scss new file mode 100644 index 0000000000..7a1eb89e73 --- /dev/null +++ b/packages/core/src/components/item-divider/item-divider.md.vars.scss @@ -0,0 +1,19 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Item Divider +// -------------------------------------------------- + +/// @prop - Color for the divider +$item-md-divider-color: #858585 !default; + +/// @prop - Background for the divider +$item-md-divider-background: #fff !default; + +/// @prop - Font size for the divider +$item-md-divider-font-size: 1.4rem !default; + +/// @prop - Border bottom for the divider +$item-md-divider-border-bottom: 1px solid $list-md-border-color !default; + +/// @prop - Padding start for the divider +$item-md-divider-padding-start: $item-md-padding-start !default; diff --git a/packages/core/src/components/item-sliding/item-sliding.ios.scss b/packages/core/src/components/item-sliding/item-sliding.ios.scss index 68eff0f6ee..712cb9cada 100644 --- a/packages/core/src/components/item-sliding/item-sliding.ios.scss +++ b/packages/core/src/components/item-sliding/item-sliding.ios.scss @@ -1,26 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./item-sliding"; - +@import "./item-sliding.ios.vars"; // iOS Item Sliding // -------------------------------------------------- -/// @prop - Background for the sliding content -$item-ios-sliding-content-background: $list-ios-background-color !default; - -/// @prop - Font size of the sliding option button -$item-ios-sliding-button-font-size: 1.6rem !default; - -/// @prop - Background color of the sliding option button -$item-ios-sliding-button-background-color: color($colors-ios, primary) !default; - -/// @prop - Text color of the sliding option button -$item-ios-sliding-button-text-color: color-contrast($colors-ios, $item-ios-sliding-button-background-color) !default; - -/// @prop - color of the sliding option button icon -$item-ios-sliding-button-icon-color: color-contrast($colors-ios, $item-ios-sliding-button-background-color) !default; - - .list-ios ion-item-sliding { background-color: $item-ios-sliding-content-background; } diff --git a/packages/core/src/components/item-sliding/item-sliding.ios.vars.scss b/packages/core/src/components/item-sliding/item-sliding.ios.vars.scss new file mode 100644 index 0000000000..4ded073c3a --- /dev/null +++ b/packages/core/src/components/item-sliding/item-sliding.ios.vars.scss @@ -0,0 +1,19 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Item Sliding +// -------------------------------------------------- + +/// @prop - Background for the sliding content +$item-ios-sliding-content-background: $list-ios-background-color !default; + +/// @prop - Font size of the sliding option button +$item-ios-sliding-button-font-size: 1.6rem !default; + +/// @prop - Background color of the sliding option button +$item-ios-sliding-button-background-color: color($colors-ios, primary) !default; + +/// @prop - Text color of the sliding option button +$item-ios-sliding-button-text-color: color-contrast($colors-ios, $item-ios-sliding-button-background-color) !default; + +/// @prop - color of the sliding option button icon +$item-ios-sliding-button-icon-color: color-contrast($colors-ios, $item-ios-sliding-button-background-color) !default; diff --git a/packages/core/src/components/item-sliding/item-sliding.md.scss b/packages/core/src/components/item-sliding/item-sliding.md.scss index 7e3693f684..ca6362a5cf 100644 --- a/packages/core/src/components/item-sliding/item-sliding.md.scss +++ b/packages/core/src/components/item-sliding/item-sliding.md.scss @@ -1,26 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./item-sliding"; - +@import "./item-sliding.md.vars"; // Material Design Item Sliding // -------------------------------------------------- -/// @prop - Background for the sliding content -$item-md-sliding-content-background: $list-md-background-color !default; - -/// @prop - Font size of the sliding option button -$item-md-sliding-button-font-size: 1.4rem !default; - -/// @prop - Background color of the sliding option button -$item-md-sliding-button-background-color: color($colors-md, primary) !default; - -/// @prop - Text color of the sliding option button -$item-md-sliding-button-text-color: color-contrast($colors-md, $item-md-sliding-button-background-color) !default; - -/// @prop - color of the sliding option button icon -$item-md-sliding-button-icon-color: color-contrast($colors-md, $item-md-sliding-button-background-color) !default; - - .list-md ion-item-sliding { background-color: $item-md-sliding-content-background; } diff --git a/packages/core/src/components/item-sliding/item-sliding.md.vars.scss b/packages/core/src/components/item-sliding/item-sliding.md.vars.scss new file mode 100644 index 0000000000..5774293146 --- /dev/null +++ b/packages/core/src/components/item-sliding/item-sliding.md.vars.scss @@ -0,0 +1,19 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Item Sliding +// -------------------------------------------------- + +/// @prop - Background for the sliding content +$item-md-sliding-content-background: $list-md-background-color !default; + +/// @prop - Font size of the sliding option button +$item-md-sliding-button-font-size: 1.4rem !default; + +/// @prop - Background color of the sliding option button +$item-md-sliding-button-background-color: color($colors-md, primary) !default; + +/// @prop - Text color of the sliding option button +$item-md-sliding-button-text-color: color-contrast($colors-md, $item-md-sliding-button-background-color) !default; + +/// @prop - color of the sliding option button icon +$item-md-sliding-button-icon-color: color-contrast($colors-md, $item-md-sliding-button-background-color) !default; diff --git a/packages/core/src/components/item/item.ios.scss b/packages/core/src/components/item/item.ios.scss index 7ef94e0c91..164246db46 100644 --- a/packages/core/src/components/item/item.ios.scss +++ b/packages/core/src/components/item/item.ios.scss @@ -1,49 +1,5 @@ -@import "../../themes/ionic.globals.ios"; @import "./item"; - - -// iOS Item -// -------------------------------------------------- - -/// @prop - Font size of the item text -$item-ios-body-text-font-size: 1.7rem !default; - -/// @prop - Margin top of the item paragraph -$item-ios-paragraph-margin-top: 0 !default; - -/// @prop - Margin end of the item paragraph -$item-ios-paragraph-margin-end: 0 !default; - -/// @prop - Margin bottom of the item paragraph -$item-ios-paragraph-margin-bottom: 2px !default; - -/// @prop - Margin start of the item paragraph -$item-ios-paragraph-margin-start: $item-ios-paragraph-margin-end !default; - -/// @prop - Font size of the item paragraph -$item-ios-paragraph-font-size: 1.4rem !default; - -/// @prop - Color of the item paragraph -$item-ios-paragraph-text-color: #8e9093 !default; - -/// @prop - Size of the avatar in the item -$item-ios-avatar-size: 36px !default; - -/// @prop - Border radius of the avatar in the item -$item-ios-avatar-border-radius: 50% !default; - -/// @prop - Size of the thumbnail in the item -$item-ios-thumbnail-size: 56px !default; - -/// @prop - Shows the detail arrow icon on an item -$item-ios-detail-push-show: true !default; - -/// @prop - Color of the detail arrow icon -$item-ios-detail-push-color: $list-ios-border-color !default; - -/// @prop - Icon for the detail arrow -$item-ios-detail-push-svg: "" !default; - +@import "./item.ios.vars"; // iOS Item // -------------------------------------------------- @@ -166,21 +122,10 @@ $item-ios-detail-push-svg: "" !default; diff --git a/packages/core/src/components/item/item.md.scss b/packages/core/src/components/item/item.md.scss index 3dadbc067b..aba37a7043 100644 --- a/packages/core/src/components/item/item.md.scss +++ b/packages/core/src/components/item/item.md.scss @@ -1,41 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./item"; - +@import "./item.md.vars"; // Material Design Item // -------------------------------------------------- -/// @prop - Font size of the item text -$item-md-body-text-font-size: 1.4rem !default; - -/// @prop - line height of the item text -$item-md-body-text-line-height: 1.5 !default; - -/// @prop - Color of the item paragraph -$item-md-paragraph-text-color: #666 !default; - -/// @prop - Font size of the item -$item-md-font-size: 1.6rem !default; - -/// @prop - Size of the avatar in the item -$item-md-avatar-size: 40px !default; - -/// @prop - Border radius of the avatar in the item -$item-md-avatar-border-radius: 50% !default; - -/// @prop - Size of the thumbnail in the item -$item-md-thumbnail-size: 80px !default; - -/// @prop - Shows the detail arrow icon on an item -$item-md-detail-push-show: false !default; - -/// @prop - Color of the detail arrow icon -$item-md-detail-push-color: $list-md-border-color !default; - -/// @prop - Icon for the detail arrow -$item-md-detail-push-svg: "" !default; - - .item-md { @include padding-horizontal($item-md-padding-start, 0); @@ -165,18 +133,8 @@ $item-md-detail-push-svg: "" !default; diff --git a/packages/core/src/components/label/label.ios.scss b/packages/core/src/components/label/label.ios.scss index bfb61c4f1f..22ad5cd961 100644 --- a/packages/core/src/components/label/label.ios.scss +++ b/packages/core/src/components/label/label.ios.scss @@ -1,32 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./label"; - +@import "./label.ios.vars"; // iOS Label // -------------------------------------------------- -/// @prop - Text color of the label by an input, select, or datetime -$label-ios-text-color: null !default; - -/// @prop - Text color of the stacked/floating label when it is focused -$label-ios-text-color-focused: null !default; - -/// @prop - Margin top of the label -$label-ios-margin-top: $item-ios-padding-top !default; - -/// @prop - Margin end of the label -$label-ios-margin-end: ($item-ios-padding-end / 2) !default; - -/// @prop - Margin bottom of the label -$label-ios-margin-bottom: $item-ios-padding-bottom !default; - -/// @prop - Margin start of the label -$label-ios-margin-start: 0 !default; - - -// iOS Default Label -// -------------------------------------------------- - .label-ios { @include margin($label-ios-margin-top, $label-ios-margin-end, $label-ios-margin-bottom, $label-ios-margin-start); } diff --git a/packages/core/src/components/label/label.ios.vars.scss b/packages/core/src/components/label/label.ios.vars.scss new file mode 100644 index 0000000000..2cfb0acf30 --- /dev/null +++ b/packages/core/src/components/label/label.ios.vars.scss @@ -0,0 +1,22 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Label +// -------------------------------------------------- + +/// @prop - Text color of the label by an input, select, or datetime +$label-ios-text-color: null !default; + +/// @prop - Text color of the stacked/floating label when it is focused +$label-ios-text-color-focused: null !default; + +/// @prop - Margin top of the label +$label-ios-margin-top: $item-ios-padding-top !default; + +/// @prop - Margin end of the label +$label-ios-margin-end: ($item-ios-padding-end / 2) !default; + +/// @prop - Margin bottom of the label +$label-ios-margin-bottom: $item-ios-padding-bottom !default; + +/// @prop - Margin start of the label +$label-ios-margin-start: 0 !default; diff --git a/packages/core/src/components/label/label.md.scss b/packages/core/src/components/label/label.md.scss index 598f628013..b002ea72b6 100644 --- a/packages/core/src/components/label/label.md.scss +++ b/packages/core/src/components/label/label.md.scss @@ -1,32 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./label"; - +@import "./label.md.vars"; // Material Design Label // -------------------------------------------------- -/// @prop - Text color of the label by an input, select, or datetime -$label-md-text-color: #999 !default; - -/// @prop - Text color of the stacked/floating label when it is focused -$label-md-text-color-focused: color($colors-md, primary) !default; - -/// @prop - Margin top of the label -$label-md-margin-top: $item-md-padding-top !default; - -/// @prop - Margin end of the label -$label-md-margin-end: ($item-md-padding-end / 2) !default; - -/// @prop - Margin bottom of the label -$label-md-margin-bottom: $item-md-padding-bottom !default; - -/// @prop - Margin start of the label -$label-md-margin-start: 0 !default; - - -// Material Design Default Label -// -------------------------------------------------- - .label-md { @include margin($label-md-margin-top, $label-md-margin-end, $label-md-margin-bottom, $label-md-margin-start); } diff --git a/packages/core/src/components/label/label.md.vars.scss b/packages/core/src/components/label/label.md.vars.scss new file mode 100644 index 0000000000..a88b8a18f2 --- /dev/null +++ b/packages/core/src/components/label/label.md.vars.scss @@ -0,0 +1,22 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Label +// -------------------------------------------------- + +/// @prop - Text color of the label by an input, select, or datetime +$label-md-text-color: #999 !default; + +/// @prop - Text color of the stacked/floating label when it is focused +$label-md-text-color-focused: color($colors-md, primary) !default; + +/// @prop - Margin top of the label +$label-md-margin-top: $item-md-padding-top !default; + +/// @prop - Margin end of the label +$label-md-margin-end: ($item-md-padding-end / 2) !default; + +/// @prop - Margin bottom of the label +$label-md-margin-bottom: $item-md-padding-bottom !default; + +/// @prop - Margin start of the label +$label-md-margin-start: 0 !default; diff --git a/packages/core/src/components/list-header/list-header.ios.scss b/packages/core/src/components/list-header/list-header.ios.scss index 902fd8900a..0dbfaf2856 100644 --- a/packages/core/src/components/list-header/list-header.ios.scss +++ b/packages/core/src/components/list-header/list-header.ios.scss @@ -1,35 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./list-header"; - +@import "./list-header.ios.vars"; // iOS List Header // -------------------------------------------------- -/// @prop - Padding start of the header in a list -$list-ios-header-padding-start: $item-ios-padding-start !default; - -/// @prop - Border bottom of the header in a list -$list-ios-header-border-bottom: $hairlines-width solid $list-ios-border-color !default; - -/// @prop - Font size of the header in a list -$list-ios-header-font-size: 1.2rem !default; - -/// @prop - Font weight of the header in a list -$list-ios-header-font-weight: 500 !default; - -/// @prop - Letter spacing of the header in a list -$list-ios-header-letter-spacing: .1rem !default; - -/// @prop - Text transform of the header in a list -$list-ios-header-text-transform: uppercase !default; - -/// @prop - Text color of the header in a list -$list-ios-header-color: #333 !default; - -/// @prop - Background color of the header in a list -$list-ios-header-background-color: transparent !default; - - .list-header-ios { @include padding-horizontal($list-ios-header-padding-start, null); diff --git a/packages/core/src/components/list-header/list-header.ios.vars.scss b/packages/core/src/components/list-header/list-header.ios.vars.scss new file mode 100644 index 0000000000..9c07a397bd --- /dev/null +++ b/packages/core/src/components/list-header/list-header.ios.vars.scss @@ -0,0 +1,28 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS List Header +// -------------------------------------------------- + +/// @prop - Padding start of the header in a list +$list-ios-header-padding-start: $item-ios-padding-start !default; + +/// @prop - Border bottom of the header in a list +$list-ios-header-border-bottom: $hairlines-width solid $list-ios-border-color !default; + +/// @prop - Font size of the header in a list +$list-ios-header-font-size: 1.2rem !default; + +/// @prop - Font weight of the header in a list +$list-ios-header-font-weight: 500 !default; + +/// @prop - Letter spacing of the header in a list +$list-ios-header-letter-spacing: .1rem !default; + +/// @prop - Text transform of the header in a list +$list-ios-header-text-transform: uppercase !default; + +/// @prop - Text color of the header in a list +$list-ios-header-color: #333 !default; + +/// @prop - Background color of the header in a list +$list-ios-header-background-color: transparent !default; diff --git a/packages/core/src/components/list-header/list-header.md.scss b/packages/core/src/components/list-header/list-header.md.scss index e79862bff8..74aced900c 100644 --- a/packages/core/src/components/list-header/list-header.md.scss +++ b/packages/core/src/components/list-header/list-header.md.scss @@ -1,28 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./list-header"; +@import "./list-header.md.vars"; // Material Design List Header // -------------------------------------------------- -/// @prop - Margin bottom of the header in a list -$list-md-header-margin-bottom: 13px !default; - -/// @prop - Padding start of the header in a list -$list-md-header-padding-start: $item-md-padding-start !default; - -/// @prop - Minimum height of the header in a list -$list-md-header-min-height: 4.5rem !default; - -/// @prop - Border top of the header in a list -$list-md-header-border-top: 1px solid $list-md-border-color !default; - -/// @prop - Font size of the header in a list -$list-md-header-font-size: 1.4rem !default; - -/// @prop - Text color of the header in a list -$list-md-header-color: #757575 !default; - - .list-header-md { @include padding-horizontal($list-md-header-padding-start, null); @include margin(null, null, $list-md-header-margin-bottom, null); diff --git a/packages/core/src/components/list-header/list-header.md.vars.scss b/packages/core/src/components/list-header/list-header.md.vars.scss new file mode 100644 index 0000000000..9a47ef5424 --- /dev/null +++ b/packages/core/src/components/list-header/list-header.md.vars.scss @@ -0,0 +1,22 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design List Header +// -------------------------------------------------- + +/// @prop - Margin bottom of the header in a list +$list-md-header-margin-bottom: 13px !default; + +/// @prop - Padding start of the header in a list +$list-md-header-padding-start: $item-md-padding-start !default; + +/// @prop - Minimum height of the header in a list +$list-md-header-min-height: 4.5rem !default; + +/// @prop - Border top of the header in a list +$list-md-header-border-top: 1px solid $list-md-border-color !default; + +/// @prop - Font size of the header in a list +$list-md-header-font-size: 1.4rem !default; + +/// @prop - Text color of the header in a list +$list-md-header-color: #757575 !default; diff --git a/packages/core/src/components/list/list.ios.scss b/packages/core/src/components/list/list.ios.scss index 79493148b1..cca4aa95c1 100644 --- a/packages/core/src/components/list/list.ios.scss +++ b/packages/core/src/components/list/list.ios.scss @@ -1,41 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./list"; - +@import "./list.ios.vars"; // iOS List // -------------------------------------------------- -/// @prop - Margin top of the list -$list-ios-margin-top: 10px !default; - -/// @prop - Margin end of the list -$list-ios-margin-end: 0 !default; - -/// @prop - Margin bottom of the list -$list-ios-margin-bottom: 32px !default; - -/// @prop - Margin start of the list -$list-ios-margin-start: 0 !default; - -/// @prop - Margin top of the inset list -$list-inset-ios-margin-top: 16px !default; - -/// @prop - Margin end of the inset list -$list-inset-ios-margin-end: 16px !default; - -/// @prop - Margin bottom of the inset list -$list-inset-ios-margin-bottom: 16px !default; - -/// @prop - Margin start of the inset list -$list-inset-ios-margin-start: 16px !default; - -/// @prop - Border radius of the inset list -$list-inset-ios-border-radius: 4px !default; - - -// iOS Default List -// -------------------------------------------------- - .list-ios { @include margin(-1px, $list-ios-margin-end, $list-ios-margin-bottom, $list-ios-margin-start); } diff --git a/packages/core/src/components/list/list.ios.vars.scss b/packages/core/src/components/list/list.ios.vars.scss new file mode 100644 index 0000000000..48d4c1cba9 --- /dev/null +++ b/packages/core/src/components/list/list.ios.vars.scss @@ -0,0 +1,31 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS List +// -------------------------------------------------- + +/// @prop - Margin top of the list +$list-ios-margin-top: 10px !default; + +/// @prop - Margin end of the list +$list-ios-margin-end: 0 !default; + +/// @prop - Margin bottom of the list +$list-ios-margin-bottom: 32px !default; + +/// @prop - Margin start of the list +$list-ios-margin-start: 0 !default; + +/// @prop - Margin top of the inset list +$list-inset-ios-margin-top: 16px !default; + +/// @prop - Margin end of the inset list +$list-inset-ios-margin-end: 16px !default; + +/// @prop - Margin bottom of the inset list +$list-inset-ios-margin-bottom: 16px !default; + +/// @prop - Margin start of the inset list +$list-inset-ios-margin-start: 16px !default; + +/// @prop - Border radius of the inset list +$list-inset-ios-border-radius: 4px !default; diff --git a/packages/core/src/components/list/list.md.scss b/packages/core/src/components/list/list.md.scss index 96161f6861..a439f2be81 100644 --- a/packages/core/src/components/list/list.md.scss +++ b/packages/core/src/components/list/list.md.scss @@ -1,41 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./list"; - +@import "./list.md.vars"; // Material Design List // -------------------------------------------------- -/// @prop - Margin top of the list -$list-md-margin-top: 16px !default; - -/// @prop - Margin end of the list -$list-md-margin-end: 0 !default; - -/// @prop - Margin bottom of the list -$list-md-margin-bottom: 16px !default; - -/// @prop - Margin start of the list -$list-md-margin-start: 0 !default; - -/// @prop - Margin top of the inset list -$list-inset-md-margin-top: 16px !default; - -/// @prop - Margin end of the inset list -$list-inset-md-margin-end: 16px !default; - -/// @prop - Margin bottom of the inset list -$list-inset-md-margin-bottom: 16px !default; - -/// @prop - Margin start of the inset list -$list-inset-md-margin-start: 16px !default; - -/// @prop - Border radius of the inset list -$list-inset-md-border-radius: 2px !default; - - -// Material Design Default List -// -------------------------------------------------- - .list-md { @include margin(-1px, $list-md-margin-end, $list-md-margin-bottom, $list-md-margin-start); } diff --git a/packages/core/src/components/list/list.md.vars.scss b/packages/core/src/components/list/list.md.vars.scss new file mode 100644 index 0000000000..d238ebaccf --- /dev/null +++ b/packages/core/src/components/list/list.md.vars.scss @@ -0,0 +1,31 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design List +// -------------------------------------------------- + +/// @prop - Margin top of the list +$list-md-margin-top: 16px !default; + +/// @prop - Margin end of the list +$list-md-margin-end: 0 !default; + +/// @prop - Margin bottom of the list +$list-md-margin-bottom: 16px !default; + +/// @prop - Margin start of the list +$list-md-margin-start: 0 !default; + +/// @prop - Margin top of the inset list +$list-inset-md-margin-top: 16px !default; + +/// @prop - Margin end of the inset list +$list-inset-md-margin-end: 16px !default; + +/// @prop - Margin bottom of the inset list +$list-inset-md-margin-bottom: 16px !default; + +/// @prop - Margin start of the inset list +$list-inset-md-margin-start: 16px !default; + +/// @prop - Border radius of the inset list +$list-inset-md-border-radius: 2px !default; diff --git a/packages/core/src/components/loading/loading.ios.scss b/packages/core/src/components/loading/loading.ios.scss index cc113904b3..e666ed0139 100644 --- a/packages/core/src/components/loading/loading.ios.scss +++ b/packages/core/src/components/loading/loading.ios.scss @@ -1,65 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./loading"; - +@import "./loading.ios.vars"; // iOS Loading Indicator // -------------------------------------------------- -/// @prop - Padding top of the loading wrapper -$loading-ios-padding-top: 24px !default; - -/// @prop - Padding end of the loading wrapper -$loading-ios-padding-end: 34px !default; - -/// @prop - Padding bottom of the loading wrapper -$loading-ios-padding-bottom: $loading-ios-padding-top !default; - -/// @prop - Padding start of the loading wrapper -$loading-ios-padding-start: $loading-ios-padding-end !default; - -/// @prop - Max width of the loading wrapper -$loading-ios-max-width: 270px !default; - -/// @prop - Maximum height of the loading wrapper -$loading-ios-max-height: 90% !default; - -/// @prop - Border radius of the loading wrapper -$loading-ios-border-radius: 8px !default; - -/// @prop - Text color of the loading wrapper -$loading-ios-text-color: #000 !default; - -/// @prop - Background of the loading wrapper -$loading-ios-background: #f8f8f8 !default; - -/// @prop - Font weight of the loading content -$loading-ios-content-font-weight: bold !default; - -/// @prop - Color of the loading spinner -$loading-ios-spinner-color: #69717d !default; - -/// @prop - Color of the ios loading spinner -$loading-ios-spinner-ios-color: $loading-ios-spinner-color !default; - -/// @prop - Color of the bubbles loading spinner -$loading-ios-spinner-bubbles-color: $loading-ios-spinner-color !default; - -/// @prop - Color of the circles loading spinner -$loading-ios-spinner-circles-color: $loading-ios-spinner-color !default; - -/// @prop - Color of the crescent loading spinner -$loading-ios-spinner-crescent-color: $loading-ios-spinner-color !default; - -/// @prop - Color of the dots loading spinner -$loading-ios-spinner-dots-color: $loading-ios-spinner-color !default; - -/// @prop - Filter of the translucent loading -$loading-ios-translucent-filter: saturate(180%) blur(20px) !default; - -/// @prop - Opacity of the translucent loading -$loading-ios-translucent-opacity: .88 !default; - - .loading-ios .loading-wrapper { @include border-radius($loading-ios-border-radius); diff --git a/packages/core/src/components/loading/loading.ios.vars.scss b/packages/core/src/components/loading/loading.ios.vars.scss new file mode 100644 index 0000000000..dda6a6a83e --- /dev/null +++ b/packages/core/src/components/loading/loading.ios.vars.scss @@ -0,0 +1,58 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Loading Indicator +// -------------------------------------------------- + +/// @prop - Padding top of the loading wrapper +$loading-ios-padding-top: 24px !default; + +/// @prop - Padding end of the loading wrapper +$loading-ios-padding-end: 34px !default; + +/// @prop - Padding bottom of the loading wrapper +$loading-ios-padding-bottom: $loading-ios-padding-top !default; + +/// @prop - Padding start of the loading wrapper +$loading-ios-padding-start: $loading-ios-padding-end !default; + +/// @prop - Max width of the loading wrapper +$loading-ios-max-width: 270px !default; + +/// @prop - Maximum height of the loading wrapper +$loading-ios-max-height: 90% !default; + +/// @prop - Border radius of the loading wrapper +$loading-ios-border-radius: 8px !default; + +/// @prop - Text color of the loading wrapper +$loading-ios-text-color: #000 !default; + +/// @prop - Background of the loading wrapper +$loading-ios-background: #f8f8f8 !default; + +/// @prop - Font weight of the loading content +$loading-ios-content-font-weight: bold !default; + +/// @prop - Color of the loading spinner +$loading-ios-spinner-color: #69717d !default; + +/// @prop - Color of the ios loading spinner +$loading-ios-spinner-ios-color: $loading-ios-spinner-color !default; + +/// @prop - Color of the bubbles loading spinner +$loading-ios-spinner-bubbles-color: $loading-ios-spinner-color !default; + +/// @prop - Color of the circles loading spinner +$loading-ios-spinner-circles-color: $loading-ios-spinner-color !default; + +/// @prop - Color of the crescent loading spinner +$loading-ios-spinner-crescent-color: $loading-ios-spinner-color !default; + +/// @prop - Color of the dots loading spinner +$loading-ios-spinner-dots-color: $loading-ios-spinner-color !default; + +/// @prop - Filter of the translucent loading +$loading-ios-translucent-filter: saturate(180%) blur(20px) !default; + +/// @prop - Opacity of the translucent loading +$loading-ios-translucent-opacity: .88 !default; diff --git a/packages/core/src/components/loading/loading.md.scss b/packages/core/src/components/loading/loading.md.scss index 993df8b61a..23451b4296 100644 --- a/packages/core/src/components/loading/loading.md.scss +++ b/packages/core/src/components/loading/loading.md.scss @@ -1,62 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./loading"; - +@import "./loading.md.vars"; // Material Design Loading Indicator // -------------------------------------------------- -/// @prop - Padding top of the loading wrapper -$loading-md-padding-top: 24px !default; - -/// @prop - Padding end of the loading wrapper -$loading-md-padding-end: $loading-md-padding-top !default; - -/// @prop - Padding bottom of the loading wrapper -$loading-md-padding-bottom: $loading-md-padding-top !default; - -/// @prop - Padding start of the loading wrapper -$loading-md-padding-start: $loading-md-padding-end !default; - -/// @prop - Max width of the loading wrapper -$loading-md-max-width: 280px !default; - -/// @prop - Maximum height of the loading wrapper -$loading-md-max-height: 90% !default; - -/// @prop - Border radius of the loading wrapper -$loading-md-border-radius: 2px !default; - -/// @prop - Text color of the loading wrapper -$loading-md-text-color: rgba(0, 0, 0, .5) !default; - -/// @prop - Background of the loading wrapper -$loading-md-background: #fafafa !default; - -/// @prop - Box shadow color of the loading wrapper -$loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default; - -/// @prop - Box shadow of the loading wrapper -$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color !default; - -/// @prop - Color of the loading spinner -$loading-md-spinner-color: color($colors-md, primary) !default; - -/// @prop - Color of the ios loading spinner -$loading-md-spinner-ios-color: $loading-md-spinner-color !default; - -/// @prop - Color of the bubbles loading spinner -$loading-md-spinner-bubbles-color: $loading-md-spinner-color !default; - -/// @prop - Color of the circles loading spinner -$loading-md-spinner-circles-color: $loading-md-spinner-color !default; - -/// @prop - Color of the crescent loading spinner -$loading-md-spinner-crescent-color: $loading-md-spinner-color !default; - -/// @prop - Color of the dots loading spinner -$loading-md-spinner-dots-color: $loading-md-spinner-color !default; - - .loading-md .loading-wrapper { @include border-radius($loading-md-border-radius); diff --git a/packages/core/src/components/loading/loading.md.vars.scss b/packages/core/src/components/loading/loading.md.vars.scss new file mode 100644 index 0000000000..089f89af82 --- /dev/null +++ b/packages/core/src/components/loading/loading.md.vars.scss @@ -0,0 +1,55 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Loading Indicator +// -------------------------------------------------- + +/// @prop - Padding top of the loading wrapper +$loading-md-padding-top: 24px !default; + +/// @prop - Padding end of the loading wrapper +$loading-md-padding-end: $loading-md-padding-top !default; + +/// @prop - Padding bottom of the loading wrapper +$loading-md-padding-bottom: $loading-md-padding-top !default; + +/// @prop - Padding start of the loading wrapper +$loading-md-padding-start: $loading-md-padding-end !default; + +/// @prop - Max width of the loading wrapper +$loading-md-max-width: 280px !default; + +/// @prop - Maximum height of the loading wrapper +$loading-md-max-height: 90% !default; + +/// @prop - Border radius of the loading wrapper +$loading-md-border-radius: 2px !default; + +/// @prop - Text color of the loading wrapper +$loading-md-text-color: rgba(0, 0, 0, .5) !default; + +/// @prop - Background of the loading wrapper +$loading-md-background: #fafafa !default; + +/// @prop - Box shadow color of the loading wrapper +$loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default; + +/// @prop - Box shadow of the loading wrapper +$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color !default; + +/// @prop - Color of the loading spinner +$loading-md-spinner-color: color($colors-md, primary) !default; + +/// @prop - Color of the ios loading spinner +$loading-md-spinner-ios-color: $loading-md-spinner-color !default; + +/// @prop - Color of the bubbles loading spinner +$loading-md-spinner-bubbles-color: $loading-md-spinner-color !default; + +/// @prop - Color of the circles loading spinner +$loading-md-spinner-circles-color: $loading-md-spinner-color !default; + +/// @prop - Color of the crescent loading spinner +$loading-md-spinner-crescent-color: $loading-md-spinner-color !default; + +/// @prop - Color of the dots loading spinner +$loading-md-spinner-dots-color: $loading-md-spinner-color !default; diff --git a/packages/core/src/components/loading/loading.scss b/packages/core/src/components/loading/loading.scss index 12c4b946cb..62687f357e 100644 --- a/packages/core/src/components/loading/loading.scss +++ b/packages/core/src/components/loading/loading.scss @@ -1,13 +1,8 @@ -@import "../../themes/ionic.globals"; - +@import "./loading.vars"; // Loading // -------------------------------------------------- -/// @prop - Color of the backdrop -$loading-backdrop-color: #000 !default; - - ion-loading { @include position(0, 0, 0, 0); diff --git a/packages/core/src/components/loading/loading.vars.scss b/packages/core/src/components/loading/loading.vars.scss new file mode 100644 index 0000000000..d67c19b000 --- /dev/null +++ b/packages/core/src/components/loading/loading.vars.scss @@ -0,0 +1,7 @@ +@import "../../themes/ionic.globals"; + +// Loading +// -------------------------------------------------- + +/// @prop - Color of the backdrop +$loading-backdrop-color: #000 !default; diff --git a/packages/core/src/components/menu/menu.ios.scss b/packages/core/src/components/menu/menu.ios.scss index 97a29fb466..e02da274d3 100644 --- a/packages/core/src/components/menu/menu.ios.scss +++ b/packages/core/src/components/menu/menu.ios.scss @@ -1,29 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./menu"; - +@import "./menu.ios.vars"; // iOS Menu // -------------------------------------------------- -/// @prop - Background of the menu -$menu-ios-background: $background-ios-color !default; - -/// @prop - Box shadow color of the menu -$menu-ios-box-shadow-color: rgba(0, 0, 0, .08) !default; - -/// @prop - Box shadow of the menu -$menu-ios-box-shadow: -8px 0px 42px $menu-ios-box-shadow-color !default; - -/// @prop - Box shadow of the reveal menu -$menu-ios-box-shadow-reveal: $menu-ios-box-shadow !default; - -/// @prop - Box shadow of the push menu -$menu-ios-box-shadow-push: null !default; - -/// @prop - Box shadow of the overlay menu -$menu-ios-box-shadow-overlay: null !default; - - .menu-ios .menu-inner { background: $menu-ios-background; } diff --git a/packages/core/src/components/menu/menu.ios.vars.scss b/packages/core/src/components/menu/menu.ios.vars.scss new file mode 100644 index 0000000000..12bd79bf1b --- /dev/null +++ b/packages/core/src/components/menu/menu.ios.vars.scss @@ -0,0 +1,22 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Menu +// -------------------------------------------------- + +/// @prop - Background of the menu +$menu-ios-background: $background-ios-color !default; + +/// @prop - Box shadow color of the menu +$menu-ios-box-shadow-color: rgba(0, 0, 0, .08) !default; + +/// @prop - Box shadow of the menu +$menu-ios-box-shadow: -8px 0px 42px $menu-ios-box-shadow-color !default; + +/// @prop - Box shadow of the reveal menu +$menu-ios-box-shadow-reveal: $menu-ios-box-shadow !default; + +/// @prop - Box shadow of the push menu +$menu-ios-box-shadow-push: null !default; + +/// @prop - Box shadow of the overlay menu +$menu-ios-box-shadow-overlay: null !default; diff --git a/packages/core/src/components/menu/menu.md.scss b/packages/core/src/components/menu/menu.md.scss index 1c2f4baa0c..29160dc4c5 100644 --- a/packages/core/src/components/menu/menu.md.scss +++ b/packages/core/src/components/menu/menu.md.scss @@ -1,20 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./menu"; - +@import "./menu.md.vars"; // Material Design Menu // -------------------------------------------------- -/// @prop - Background of the menu -$menu-md-background: $background-md-color !default; - -/// @prop - Box shadow color of the menu -$menu-md-box-shadow-color: rgba(0, 0, 0, .25) !default; - -/// @prop - Box shadow of the menu -$menu-md-box-shadow: 0 0 10px $menu-md-box-shadow-color !default; - - .menu-md .menu-inner { background: $menu-md-background; } diff --git a/packages/core/src/components/menu/menu.md.vars.scss b/packages/core/src/components/menu/menu.md.vars.scss new file mode 100644 index 0000000000..fe6b18314a --- /dev/null +++ b/packages/core/src/components/menu/menu.md.vars.scss @@ -0,0 +1,13 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Menu +// -------------------------------------------------- + +/// @prop - Background of the menu +$menu-md-background: $background-md-color !default; + +/// @prop - Box shadow color of the menu +$menu-md-box-shadow-color: rgba(0, 0, 0, .25) !default; + +/// @prop - Box shadow of the menu +$menu-md-box-shadow: 0 0 10px $menu-md-box-shadow-color !default; diff --git a/packages/core/src/components/menu/menu.scss b/packages/core/src/components/menu/menu.scss index cccc65a345..a2609acabb 100644 --- a/packages/core/src/components/menu/menu.scss +++ b/packages/core/src/components/menu/menu.scss @@ -1,16 +1,8 @@ -@import "../../themes/ionic.globals"; - +@import "./menu.vars"; // Menu // -------------------------------------------------- -/// @prop - Width of the menu -$menu-width: 304px !default; - -/// @prop - Width of the menu on small devices (under 340px) -$menu-small-width: $menu-width - 40px !default; - - ion-menu { @include position(0, 0, 0, 0); diff --git a/packages/core/src/components/menu/menu.vars.scss b/packages/core/src/components/menu/menu.vars.scss new file mode 100644 index 0000000000..236417c136 --- /dev/null +++ b/packages/core/src/components/menu/menu.vars.scss @@ -0,0 +1,10 @@ +@import "../../themes/ionic.globals"; + +// Menu +// -------------------------------------------------- + +/// @prop - Width of the menu +$menu-width: 304px !default; + +/// @prop - Width of the menu on small devices (under 340px) +$menu-small-width: $menu-width - 40px !default; diff --git a/packages/core/src/components/modal/modal.ios.scss b/packages/core/src/components/modal/modal.ios.scss index 30a48e7da9..3222fec1c1 100644 --- a/packages/core/src/components/modal/modal.ios.scss +++ b/packages/core/src/components/modal/modal.ios.scss @@ -1,17 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./modal"; - +@import "./modal.ios.vars"; // iOS Modals // -------------------------------------------------- -/// @prop - Background color for the modal -$modal-ios-background-color: $background-ios-color !default; - -/// @prop - Border radius for the modal -$modal-ios-border-radius: 10px !default; - - .modal-wrapper-ios { // hidden by default to prevent flickers, the animation will show it @include transform(translate3d(0, 100%, 0)); diff --git a/packages/core/src/components/modal/modal.ios.vars.scss b/packages/core/src/components/modal/modal.ios.vars.scss new file mode 100644 index 0000000000..b6dcd56489 --- /dev/null +++ b/packages/core/src/components/modal/modal.ios.vars.scss @@ -0,0 +1,10 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Modals +// -------------------------------------------------- + +/// @prop - Background color for the modal +$modal-ios-background-color: $background-ios-color !default; + +/// @prop - Border radius for the modal +$modal-ios-border-radius: 10px !default; diff --git a/packages/core/src/components/modal/modal.md.scss b/packages/core/src/components/modal/modal.md.scss index bc90356d79..e041129c3b 100644 --- a/packages/core/src/components/modal/modal.md.scss +++ b/packages/core/src/components/modal/modal.md.scss @@ -1,20 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./modal"; - +@import "./modal.md.vars"; // Material Design Modals // -------------------------------------------------- -/// @prop - Background color for the modal -$modal-md-background-color: $background-md-color !default; - -/// @prop - Box shadow color of the alert -$modal-inset-box-shadow-color: rgba(0, 0, 0, .4) !default; - -/// @prop - Box shadow of the alert -$modal-inset-box-shadow: 0 28px 48px $modal-inset-box-shadow-color !default; - - .modal-wrapper-md { @include transform(translate3d(0, 40px, 0)); diff --git a/packages/core/src/components/modal/modal.md.vars.scss b/packages/core/src/components/modal/modal.md.vars.scss new file mode 100644 index 0000000000..4791342a96 --- /dev/null +++ b/packages/core/src/components/modal/modal.md.vars.scss @@ -0,0 +1,13 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Modals +// -------------------------------------------------- + +/// @prop - Background color for the modal +$modal-md-background-color: $background-md-color !default; + +/// @prop - Box shadow color of the alert +$modal-inset-box-shadow-color: rgba(0, 0, 0, .4) !default; + +/// @prop - Box shadow of the alert +$modal-inset-box-shadow: 0 28px 48px $modal-inset-box-shadow-color !default; diff --git a/packages/core/src/components/modal/modal.scss b/packages/core/src/components/modal/modal.scss index 2454bc9817..ca6d30b2b5 100644 --- a/packages/core/src/components/modal/modal.scss +++ b/packages/core/src/components/modal/modal.scss @@ -1,31 +1,8 @@ -@import "../../themes/ionic.globals"; - +@import "./modal.vars"; // Modals // -------------------------------------------------- -/// @prop - Min width of the modal inset -$modal-inset-min-width: 768px !default; - -/// @prop - Minimum height of the small modal inset -$modal-inset-min-height-small: 600px !default; - -/// @prop - Minimum height of the large modal inset -$modal-inset-min-height-large: 768px !default; - -/// @prop - Width of the large modal inset -$modal-inset-width: 600px !default; - -/// @prop - Height of the small modal inset -$modal-inset-height-small: 500px !default; - -/// @prop - Height of the large modal inset -$modal-inset-height-large: 600px !default; - -/// @prop - Color of the backdrop -$modal-backdrop-color: #000 !default; - - ion-modal { @include position(0, null, null, 0); diff --git a/packages/core/src/components/modal/modal.vars.scss b/packages/core/src/components/modal/modal.vars.scss new file mode 100644 index 0000000000..8f16c5b6e7 --- /dev/null +++ b/packages/core/src/components/modal/modal.vars.scss @@ -0,0 +1,25 @@ +@import "../../themes/ionic.globals"; + +// Modals +// -------------------------------------------------- + +/// @prop - Min width of the modal inset +$modal-inset-min-width: 768px !default; + +/// @prop - Minimum height of the small modal inset +$modal-inset-min-height-small: 600px !default; + +/// @prop - Minimum height of the large modal inset +$modal-inset-min-height-large: 768px !default; + +/// @prop - Width of the large modal inset +$modal-inset-width: 600px !default; + +/// @prop - Height of the small modal inset +$modal-inset-height-small: 500px !default; + +/// @prop - Height of the large modal inset +$modal-inset-height-large: 600px !default; + +/// @prop - Color of the backdrop +$modal-backdrop-color: #000 !default; diff --git a/packages/core/src/components/note/note.ios.scss b/packages/core/src/components/note/note.ios.scss index aca3b599fd..1a9c50f7cd 100644 --- a/packages/core/src/components/note/note.ios.scss +++ b/packages/core/src/components/note/note.ios.scss @@ -1,12 +1,8 @@ -@import "../../themes/ionic.globals.ios"; +@import "./note.ios.vars"; // iOS Note // -------------------------------------------------- -/// @prop - Text color of the note -$note-ios-color: darken($list-ios-border-color, 10%) !default; - - .note-ios { color: $note-ios-color; } diff --git a/packages/core/src/components/note/note.ios.vars.scss b/packages/core/src/components/note/note.ios.vars.scss new file mode 100644 index 0000000000..1061a24b3d --- /dev/null +++ b/packages/core/src/components/note/note.ios.vars.scss @@ -0,0 +1,7 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Note +// -------------------------------------------------- + +/// @prop - Text color of the note +$note-ios-color: darken($list-ios-border-color, 10%) !default; diff --git a/packages/core/src/components/note/note.md.scss b/packages/core/src/components/note/note.md.scss index 1ae3f94bcd..df0605d513 100644 --- a/packages/core/src/components/note/note.md.scss +++ b/packages/core/src/components/note/note.md.scss @@ -1,12 +1,8 @@ -@import "../../themes/ionic.globals.md"; +@import "./note.md.vars"; // Material Design Note // -------------------------------------------------- -/// @prop - Text color of the note -$note-md-color: darken($list-md-border-color, 10%) !default; - - .note-md { color: $note-md-color; } diff --git a/packages/core/src/components/note/note.md.vars.scss b/packages/core/src/components/note/note.md.vars.scss new file mode 100644 index 0000000000..f09d7ea38b --- /dev/null +++ b/packages/core/src/components/note/note.md.vars.scss @@ -0,0 +1,7 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Note +// -------------------------------------------------- + +/// @prop - Text color of the note +$note-md-color: darken($list-md-border-color, 10%) !default; diff --git a/packages/core/src/components/picker/picker.ios.scss b/packages/core/src/components/picker/picker.ios.scss index dc0ab50425..41e7b8a1ec 100644 --- a/packages/core/src/components/picker/picker.ios.scss +++ b/packages/core/src/components/picker/picker.ios.scss @@ -1,92 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./picker"; - +@import "./picker.ios.vars"; // iOS Picker // -------------------------------------------------- -/// @prop - Height of the picker wrapper -$picker-ios-height: 260px !default; - -/// @prop - Border color of the picker wrapper -$picker-ios-border-color: $list-ios-border-color !default; - -/// @prop - Background of the picker wrapper -$picker-ios-background-color: $list-ios-background-color !default; - -/// @prop - Height of the picker toolbar -$picker-ios-toolbar-height: 44px !default; - -/// @prop - Background color of the picker toolbar -$picker-ios-toolbar-background-color: $picker-ios-background-color !default; - -/// @prop - Height of the picker button -$picker-ios-button-height: $picker-ios-toolbar-height !default; - -/// @prop - Text color of the picker button -$picker-ios-button-text-color: color($colors-ios, primary) !default; - -/// @prop - Background of the picker button -$picker-ios-button-background-color: transparent !default; - -/// @prop - Font size of the picker button -$picker-ios-button-font-size: 1.6rem !default; - -/// @prop - Padding top of the picker button -$picker-ios-button-padding-top: 0 !default; - -/// @prop - Padding end of the picker button -$picker-ios-button-padding-end: 1em !default; - -/// @prop - Padding bottom of the picker button -$picker-ios-button-padding-bottom: $picker-ios-button-padding-top !default; - -/// @prop - Padding start of the picker button -$picker-ios-button-padding-start: $picker-ios-button-padding-end !default; - -/// @prop - Font weight of the strong picker button -$picker-ios-button-strong-font-weight: 600 !default; - -/// @prop - Padding top of the picker column -$picker-ios-column-padding-top: 0 !default; - -/// @prop - Padding end of the picker column -$picker-ios-column-padding-end: 4px !default; - -/// @prop - Padding bottom of the picker column -$picker-ios-column-padding-bottom: $picker-ios-column-padding-top !default; - -/// @prop - Padding start of the picker column -$picker-ios-column-padding-start: $picker-ios-column-padding-end !default; - -/// @prop - Perspective of the picker column -$picker-ios-column-perspective: 1000px !default; - -/// @prop - Padding top of the picker option -$picker-ios-option-padding-top: 0 !default; - -/// @prop - Padding end of the picker option -$picker-ios-option-padding-end: $picker-ios-option-padding-top !default; - -/// @prop - Padding bottom of the picker option -$picker-ios-option-padding-bottom: $picker-ios-option-padding-top !default; - -/// @prop - Padding start of the picker option -$picker-ios-option-padding-start: $picker-ios-option-padding-end !default; - -/// @prop - Text color of the picker option -$picker-ios-option-text-color: $list-ios-text-color !default; - -/// @prop - Font size of the picker option -$picker-ios-option-font-size: 20px !default; - -/// @prop - Height of the picker option -$picker-ios-option-height: 42px !default; - -/// @prop - Offset y of the picker option -$picker-ios-option-offset-y: (($picker-ios-height - $picker-ios-toolbar-height) / 2) - ($picker-ios-option-height / 2) - 10 !default; - - .picker-ios .picker-wrapper { height: $picker-ios-height; diff --git a/packages/core/src/components/picker/picker.ios.vars.scss b/packages/core/src/components/picker/picker.ios.vars.scss new file mode 100644 index 0000000000..9d5f75f462 --- /dev/null +++ b/packages/core/src/components/picker/picker.ios.vars.scss @@ -0,0 +1,85 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Picker +// -------------------------------------------------- + +/// @prop - Height of the picker wrapper +$picker-ios-height: 260px !default; + +/// @prop - Border color of the picker wrapper +$picker-ios-border-color: $list-ios-border-color !default; + +/// @prop - Background of the picker wrapper +$picker-ios-background-color: $list-ios-background-color !default; + +/// @prop - Height of the picker toolbar +$picker-ios-toolbar-height: 44px !default; + +/// @prop - Background color of the picker toolbar +$picker-ios-toolbar-background-color: $picker-ios-background-color !default; + +/// @prop - Height of the picker button +$picker-ios-button-height: $picker-ios-toolbar-height !default; + +/// @prop - Text color of the picker button +$picker-ios-button-text-color: color($colors-ios, primary) !default; + +/// @prop - Background of the picker button +$picker-ios-button-background-color: transparent !default; + +/// @prop - Font size of the picker button +$picker-ios-button-font-size: 1.6rem !default; + +/// @prop - Padding top of the picker button +$picker-ios-button-padding-top: 0 !default; + +/// @prop - Padding end of the picker button +$picker-ios-button-padding-end: 1em !default; + +/// @prop - Padding bottom of the picker button +$picker-ios-button-padding-bottom: $picker-ios-button-padding-top !default; + +/// @prop - Padding start of the picker button +$picker-ios-button-padding-start: $picker-ios-button-padding-end !default; + +/// @prop - Font weight of the strong picker button +$picker-ios-button-strong-font-weight: 600 !default; + +/// @prop - Padding top of the picker column +$picker-ios-column-padding-top: 0 !default; + +/// @prop - Padding end of the picker column +$picker-ios-column-padding-end: 4px !default; + +/// @prop - Padding bottom of the picker column +$picker-ios-column-padding-bottom: $picker-ios-column-padding-top !default; + +/// @prop - Padding start of the picker column +$picker-ios-column-padding-start: $picker-ios-column-padding-end !default; + +/// @prop - Perspective of the picker column +$picker-ios-column-perspective: 1000px !default; + +/// @prop - Padding top of the picker option +$picker-ios-option-padding-top: 0 !default; + +/// @prop - Padding end of the picker option +$picker-ios-option-padding-end: $picker-ios-option-padding-top !default; + +/// @prop - Padding bottom of the picker option +$picker-ios-option-padding-bottom: $picker-ios-option-padding-top !default; + +/// @prop - Padding start of the picker option +$picker-ios-option-padding-start: $picker-ios-option-padding-end !default; + +/// @prop - Text color of the picker option +$picker-ios-option-text-color: $list-ios-text-color !default; + +/// @prop - Font size of the picker option +$picker-ios-option-font-size: 20px !default; + +/// @prop - Height of the picker option +$picker-ios-option-height: 42px !default; + +/// @prop - Offset y of the picker option +$picker-ios-option-offset-y: (($picker-ios-height - $picker-ios-toolbar-height) / 2) - ($picker-ios-option-height / 2) - 10 !default; diff --git a/packages/core/src/components/picker/picker.md.scss b/packages/core/src/components/picker/picker.md.scss index 02ae10fd1e..d5de063aa8 100644 --- a/packages/core/src/components/picker/picker.md.scss +++ b/packages/core/src/components/picker/picker.md.scss @@ -1,77 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./picker"; - +@import "./picker.md.vars"; // Material Design Picker // -------------------------------------------------- -/// @prop - Height of the picker wrapper -$picker-md-height: 260px !default; - -/// @prop - Border color of the picker wrapper -$picker-md-border-color: $list-md-border-color !default; - -/// @prop - Background of the picker wrapper -$picker-md-background-color: $list-md-background-color !default; - -/// @prop - Height of the picker toolbar -$picker-md-toolbar-height: 44px !default; - -/// @prop - Background of the picker toolbar -$picker-md-toolbar-background-color: $picker-md-background-color !default; - -/// @prop - Height of the picker button -$picker-md-button-height: $picker-md-toolbar-height !default; - -/// @prop - Text color of the picker button -$picker-md-button-text-color: color($colors-md, primary) !default; - -/// @prop - Background of the picker button -$picker-md-button-background-color: transparent !default; - -/// @prop - Font size of the picker button -$picker-md-button-font-size: 1.4rem !default; - -/// @prop - Padding top of the picker column -$picker-md-column-padding-top: 0 !default; - -/// @prop - Padding end of the picker column -$picker-md-column-padding-end: 8px !default; - -/// @prop - Padding bottom of the picker column -$picker-md-column-padding-bottom: $picker-md-column-padding-top !default; - -/// @prop - Padding start of the picker column -$picker-md-column-padding-start: $picker-md-column-padding-end !default; - -/// @prop - Padding top of the picker option -$picker-md-option-padding-top: 0 !default; - -/// @prop - Padding end of the picker option -$picker-md-option-padding-end: $picker-md-option-padding-top !default; - -/// @prop - Padding bottom of the picker option -$picker-md-option-padding-bottom: $picker-md-option-padding-top !default; - -/// @prop - Padding start of the picker option -$picker-md-option-padding-start: $picker-md-option-padding-end !default; - -/// @prop - Text color of the picker option -$picker-md-option-text-color: $list-md-text-color !default; - -/// @prop - Font size of the picker option -$picker-md-option-font-size: 22px !default; - -/// @prop - Height of the picker option -$picker-md-option-height: 42px !default; - -/// @prop - Offset y of the picker option -$picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) / 2) - ($picker-md-option-height / 2) - 10 !default; - -/// @prop - Text color of the selected picker option -$picker-md-option-selected-color: color($colors-md, primary) !default; - - .picker-md .picker-wrapper { height: $picker-md-height; diff --git a/packages/core/src/components/picker/picker.md.vars.scss b/packages/core/src/components/picker/picker.md.vars.scss new file mode 100644 index 0000000000..5b4335c4fe --- /dev/null +++ b/packages/core/src/components/picker/picker.md.vars.scss @@ -0,0 +1,70 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Picker +// -------------------------------------------------- + +/// @prop - Height of the picker wrapper +$picker-md-height: 260px !default; + +/// @prop - Border color of the picker wrapper +$picker-md-border-color: $list-md-border-color !default; + +/// @prop - Background of the picker wrapper +$picker-md-background-color: $list-md-background-color !default; + +/// @prop - Height of the picker toolbar +$picker-md-toolbar-height: 44px !default; + +/// @prop - Background of the picker toolbar +$picker-md-toolbar-background-color: $picker-md-background-color !default; + +/// @prop - Height of the picker button +$picker-md-button-height: $picker-md-toolbar-height !default; + +/// @prop - Text color of the picker button +$picker-md-button-text-color: color($colors-md, primary) !default; + +/// @prop - Background of the picker button +$picker-md-button-background-color: transparent !default; + +/// @prop - Font size of the picker button +$picker-md-button-font-size: 1.4rem !default; + +/// @prop - Padding top of the picker column +$picker-md-column-padding-top: 0 !default; + +/// @prop - Padding end of the picker column +$picker-md-column-padding-end: 8px !default; + +/// @prop - Padding bottom of the picker column +$picker-md-column-padding-bottom: $picker-md-column-padding-top !default; + +/// @prop - Padding start of the picker column +$picker-md-column-padding-start: $picker-md-column-padding-end !default; + +/// @prop - Padding top of the picker option +$picker-md-option-padding-top: 0 !default; + +/// @prop - Padding end of the picker option +$picker-md-option-padding-end: $picker-md-option-padding-top !default; + +/// @prop - Padding bottom of the picker option +$picker-md-option-padding-bottom: $picker-md-option-padding-top !default; + +/// @prop - Padding start of the picker option +$picker-md-option-padding-start: $picker-md-option-padding-end !default; + +/// @prop - Text color of the picker option +$picker-md-option-text-color: $list-md-text-color !default; + +/// @prop - Font size of the picker option +$picker-md-option-font-size: 22px !default; + +/// @prop - Height of the picker option +$picker-md-option-height: 42px !default; + +/// @prop - Offset y of the picker option +$picker-md-option-offset-y: (($picker-md-height - $picker-md-toolbar-height) / 2) - ($picker-md-option-height / 2) - 10 !default; + +/// @prop - Text color of the selected picker option +$picker-md-option-selected-color: color($colors-md, primary) !default; diff --git a/packages/core/src/components/picker/picker.scss b/packages/core/src/components/picker/picker.scss index 2ac9fb3ada..6c70496c7d 100644 --- a/packages/core/src/components/picker/picker.scss +++ b/packages/core/src/components/picker/picker.scss @@ -1,15 +1,8 @@ -@import "../../themes/ionic.globals"; +@import "./picker.vars"; // Picker // -------------------------------------------------- -/// @prop - Width of the picker -$picker-width: 100% !default; - -/// @prop - Max width of the picker -$picker-max-width: 500px !default; - - ion-picker { @include position(0, null, null, 0); diff --git a/packages/core/src/components/picker/picker.vars.scss b/packages/core/src/components/picker/picker.vars.scss new file mode 100644 index 0000000000..31a7ffd2b8 --- /dev/null +++ b/packages/core/src/components/picker/picker.vars.scss @@ -0,0 +1,10 @@ +@import "../../themes/ionic.globals"; + +// Picker +// -------------------------------------------------- + +/// @prop - Width of the picker +$picker-width: 100% !default; + +/// @prop - Max width of the picker +$picker-max-width: 500px !default; diff --git a/packages/core/src/components/popover/popover.ios.scss b/packages/core/src/components/popover/popover.ios.scss index 8ae287d3db..a060f5e8c4 100644 --- a/packages/core/src/components/popover/popover.ios.scss +++ b/packages/core/src/components/popover/popover.ios.scss @@ -1,40 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./popover"; +@import "./popover.ios.vars"; // iOS Popover // -------------------------------------------------- -/// @prop - Width of the popover content -$popover-ios-width: 200px !default; - -/// @prop - Min width of the popover content -$popover-ios-min-width: 0 !default; - -/// @prop - Minimum height of the popover content -$popover-ios-min-height: 0 !default; - -/// @prop - Maximum height of the popover content -$popover-ios-max-height: 90% !default; - -/// @prop - Border radius of the popover content -$popover-ios-border-radius: 10px !default; - -/// @prop - Text color of the popover content -$popover-ios-text-color: $text-ios-color !default; - -/// @prop - Background of the popover content -$popover-ios-background: $background-ios-color !default; - -/// @prop - Background of the popover arrow -$popover-ios-arrow-background: $popover-ios-background !default; - -/// @prop - Filter of the translucent popover -$popover-ios-translucent-filter: saturate(180%) blur(20px) !default; - -/// @prop - Opacity of the translucent popover -$popover-ios-translucent-opacity: .88 !default; - - .popover-ios .popover-content { @include border-radius($popover-ios-border-radius); diff --git a/packages/core/src/components/popover/popover.ios.vars.scss b/packages/core/src/components/popover/popover.ios.vars.scss new file mode 100644 index 0000000000..b87ef85fc4 --- /dev/null +++ b/packages/core/src/components/popover/popover.ios.vars.scss @@ -0,0 +1,34 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Popover +// -------------------------------------------------- + +/// @prop - Width of the popover content +$popover-ios-width: 200px !default; + +/// @prop - Min width of the popover content +$popover-ios-min-width: 0 !default; + +/// @prop - Minimum height of the popover content +$popover-ios-min-height: 0 !default; + +/// @prop - Maximum height of the popover content +$popover-ios-max-height: 90% !default; + +/// @prop - Border radius of the popover content +$popover-ios-border-radius: 10px !default; + +/// @prop - Text color of the popover content +$popover-ios-text-color: $text-ios-color !default; + +/// @prop - Background of the popover content +$popover-ios-background: $background-ios-color !default; + +/// @prop - Background of the popover arrow +$popover-ios-arrow-background: $popover-ios-background !default; + +/// @prop - Filter of the translucent popover +$popover-ios-translucent-filter: saturate(180%) blur(20px) !default; + +/// @prop - Opacity of the translucent popover +$popover-ios-translucent-opacity: .88 !default; diff --git a/packages/core/src/components/popover/popover.md.scss b/packages/core/src/components/popover/popover.md.scss index 05ca1db0e8..5c3623d15d 100644 --- a/packages/core/src/components/popover/popover.md.scss +++ b/packages/core/src/components/popover/popover.md.scss @@ -1,37 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./popover"; +@import "./popover.md.vars"; // Material Design Popover // -------------------------------------------------- -/// @prop - Width of the popover content -$popover-md-width: 250px !default; - -/// @prop - Min width of the popover content -$popover-md-min-width: 0 !default; - -/// @prop - Minimum height of the popover content -$popover-md-min-height: 0 !default; - -/// @prop - Maximum height of the popover content -$popover-md-max-height: 90% !default; - -/// @prop - Border radius of the popover content -$popover-md-border-radius: 2px !default; - -/// @prop - Text color of the popover content -$popover-md-text-color: $text-md-color !default; - -/// @prop - Background of the popover content -$popover-md-background: $background-md-color !default; - -/// @prop - Box shadow color of the popover content -$popover-md-box-shadow-color: rgba(0, 0, 0, .3) !default; - -/// @prop - Box shadow of the popover content -$popover-md-box-shadow: 0 3px 12px 2px $popover-md-box-shadow-color !default; - - .popover-md .popover-content { @include border-radius($popover-md-border-radius); @include transform-origin(start, top); diff --git a/packages/core/src/components/popover/popover.md.vars.scss b/packages/core/src/components/popover/popover.md.vars.scss new file mode 100644 index 0000000000..44318754c6 --- /dev/null +++ b/packages/core/src/components/popover/popover.md.vars.scss @@ -0,0 +1,31 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Popover +// -------------------------------------------------- + +/// @prop - Width of the popover content +$popover-md-width: 250px !default; + +/// @prop - Min width of the popover content +$popover-md-min-width: 0 !default; + +/// @prop - Minimum height of the popover content +$popover-md-min-height: 0 !default; + +/// @prop - Maximum height of the popover content +$popover-md-max-height: 90% !default; + +/// @prop - Border radius of the popover content +$popover-md-border-radius: 2px !default; + +/// @prop - Text color of the popover content +$popover-md-text-color: $text-md-color !default; + +/// @prop - Background of the popover content +$popover-md-background: $background-md-color !default; + +/// @prop - Box shadow color of the popover content +$popover-md-box-shadow-color: rgba(0, 0, 0, .3) !default; + +/// @prop - Box shadow of the popover content +$popover-md-box-shadow: 0 3px 12px 2px $popover-md-box-shadow-color !default; diff --git a/packages/core/src/components/popover/popover.scss b/packages/core/src/components/popover/popover.scss index e0cb2969c6..2c7ab44a37 100644 --- a/packages/core/src/components/popover/popover.scss +++ b/packages/core/src/components/popover/popover.scss @@ -1,12 +1,8 @@ -@import "../../themes/ionic.globals"; +@import "./popover.vars"; // Popover // -------------------------------------------------- -/// @prop - Color of the backdrop -$popover-backdrop-color: #000 !default; - - ion-popover { @include position(0, 0, 0, 0); diff --git a/packages/core/src/components/popover/popover.vars.scss b/packages/core/src/components/popover/popover.vars.scss new file mode 100644 index 0000000000..e2807b9f9f --- /dev/null +++ b/packages/core/src/components/popover/popover.vars.scss @@ -0,0 +1,7 @@ +@import "../../themes/ionic.globals"; + +// Popover +// -------------------------------------------------- + +/// @prop - Color of the backdrop +$popover-backdrop-color: #000 !default; diff --git a/packages/core/src/components/radio/radio.ios.scss b/packages/core/src/components/radio/radio.ios.scss index becdd3be1f..a1ecc5d015 100644 --- a/packages/core/src/components/radio/radio.ios.scss +++ b/packages/core/src/components/radio/radio.ios.scss @@ -1,52 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./radio"; +@import "./radio.ios.vars"; // iOS Radio // -------------------------------------------------- -/// @prop - Color of the checked radio -$radio-ios-color-on: color($colors-ios, primary) !default; - -/// @prop - Width of the radio icon -$radio-ios-icon-width: 16px !default; - -/// @prop - Height of the radio icon -$radio-ios-icon-height: 21px !default; - -/// @prop - Border width of the radio icon -$radio-ios-icon-border-width: 2px !default; - -/// @prop - Border style of the radio icon -$radio-ios-icon-border-style: solid !default; - -/// @prop - Opacity of the disabled radio -$radio-ios-disabled-opacity: .3 !default; - -/// @prop - Margin top of the item-start in a radio -$radio-ios-item-start-margin-top: 8px !default; - -/// @prop - Margin end of the item-start in a radio -$radio-ios-item-start-margin-end: 21px !default; - -/// @prop - Margin bottom of the item-start in a radio -$radio-ios-item-start-margin-bottom: 8px !default; - -/// @prop - Margin start of the item-start in a radio -$radio-ios-item-start-margin-start: 3px !default; - -/// @prop - Margin top of the item-end in a radio -$radio-ios-item-end-margin-top: $item-ios-padding-media-top !default; - -/// @prop - Margin end of the item-end in a radio -$radio-ios-item-end-margin-end: 11px !default; - -/// @prop - Margin bottom of the item-end in a radio -$radio-ios-item-end-margin-bottom: $item-ios-padding-media-bottom !default; - -/// @prop - Margin start of the item-end in a radio -$radio-ios-item-end-margin-start: ($item-ios-padding-start / 2) !default; - - // iOS Radio Circle: Unchecked // ----------------------------------------- diff --git a/packages/core/src/components/radio/radio.ios.vars.scss b/packages/core/src/components/radio/radio.ios.vars.scss new file mode 100644 index 0000000000..0273c637c7 --- /dev/null +++ b/packages/core/src/components/radio/radio.ios.vars.scss @@ -0,0 +1,46 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Radio +// -------------------------------------------------- + +/// @prop - Color of the checked radio +$radio-ios-color-on: color($colors-ios, primary) !default; + +/// @prop - Width of the radio icon +$radio-ios-icon-width: 16px !default; + +/// @prop - Height of the radio icon +$radio-ios-icon-height: 21px !default; + +/// @prop - Border width of the radio icon +$radio-ios-icon-border-width: 2px !default; + +/// @prop - Border style of the radio icon +$radio-ios-icon-border-style: solid !default; + +/// @prop - Opacity of the disabled radio +$radio-ios-disabled-opacity: .3 !default; + +/// @prop - Margin top of the item-start in a radio +$radio-ios-item-start-margin-top: 8px !default; + +/// @prop - Margin end of the item-start in a radio +$radio-ios-item-start-margin-end: 21px !default; + +/// @prop - Margin bottom of the item-start in a radio +$radio-ios-item-start-margin-bottom: 8px !default; + +/// @prop - Margin start of the item-start in a radio +$radio-ios-item-start-margin-start: 3px !default; + +/// @prop - Margin top of the item-end in a radio +$radio-ios-item-end-margin-top: $item-ios-padding-media-top !default; + +/// @prop - Margin end of the item-end in a radio +$radio-ios-item-end-margin-end: 11px !default; + +/// @prop - Margin bottom of the item-end in a radio +$radio-ios-item-end-margin-bottom: $item-ios-padding-media-bottom !default; + +/// @prop - Margin start of the item-end in a radio +$radio-ios-item-end-margin-start: ($item-ios-padding-start / 2) !default; diff --git a/packages/core/src/components/radio/radio.md.scss b/packages/core/src/components/radio/radio.md.scss index 817370fc33..de75bd5a72 100644 --- a/packages/core/src/components/radio/radio.md.scss +++ b/packages/core/src/components/radio/radio.md.scss @@ -1,64 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./radio"; +@import "./radio.md.vars"; // Material Design Radio // -------------------------------------------------- -/// @prop - Color of the checked radio -$radio-md-color-on: color($colors-md, primary) !default; - -/// @prop - Color of the unchecked radio -$radio-md-color-off: darken($list-md-border-color, 40%) !default; - -/// @prop - Width of the radio icon -$radio-md-icon-width: 16px !default; - -/// @prop - Height of the radio icon -$radio-md-icon-height: 16px !default; - -/// @prop - Border width of the radio icon -$radio-md-icon-border-width: 2px !default; - -/// @prop - Border style of the radio icon -$radio-md-icon-border-style: solid !default; - -/// @prop - Border radius of the radio icon -$radio-md-icon-border-radius: 50% !default; - -/// @prop - Transition duration of the radio -$radio-md-transition-duration: 280ms !default; - -/// @prop - Transition easing of the radio -$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; - -/// @prop - Opacity of the disabled radio -$radio-md-disabled-opacity: .3 !default; - -/// @prop - Margin top of the item-start in a radio -$radio-md-item-start-margin-top: 11px !default; - -/// @prop - Margin end of the item-start in a radio -$radio-md-item-start-margin-end: 36px !default; - -/// @prop - Margin bottom of the item-start in a radio -$radio-md-item-start-margin-bottom: 10px !default; - -/// @prop - Margin start of the item-start in a radio -$radio-md-item-start-margin-start: 4px !default; - -/// @prop - Margin top of the item-end in a radio -$radio-md-item-end-margin-top: $item-md-padding-media-top !default; - -/// @prop - Margin end of the item-end in a radio -$radio-md-item-end-margin-end: 10px !default; - -/// @prop - Margin bottom of the item-end in a radio -$radio-md-item-end-margin-bottom: $item-md-padding-media-bottom !default; - -/// @prop - Margin start of the item-end in a radio -$radio-md-item-end-margin-start: 0 !default; - - // Material Design Radio Outer Circle: Unchecked // ----------------------------------------- diff --git a/packages/core/src/components/radio/radio.md.vars.scss b/packages/core/src/components/radio/radio.md.vars.scss new file mode 100644 index 0000000000..08b25081f0 --- /dev/null +++ b/packages/core/src/components/radio/radio.md.vars.scss @@ -0,0 +1,58 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Radio +// -------------------------------------------------- + +/// @prop - Color of the checked radio +$radio-md-color-on: color($colors-md, primary) !default; + +/// @prop - Color of the unchecked radio +$radio-md-color-off: darken($list-md-border-color, 40%) !default; + +/// @prop - Width of the radio icon +$radio-md-icon-width: 16px !default; + +/// @prop - Height of the radio icon +$radio-md-icon-height: 16px !default; + +/// @prop - Border width of the radio icon +$radio-md-icon-border-width: 2px !default; + +/// @prop - Border style of the radio icon +$radio-md-icon-border-style: solid !default; + +/// @prop - Border radius of the radio icon +$radio-md-icon-border-radius: 50% !default; + +/// @prop - Transition duration of the radio +$radio-md-transition-duration: 280ms !default; + +/// @prop - Transition easing of the radio +$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; + +/// @prop - Opacity of the disabled radio +$radio-md-disabled-opacity: .3 !default; + +/// @prop - Margin top of the item-start in a radio +$radio-md-item-start-margin-top: 11px !default; + +/// @prop - Margin end of the item-start in a radio +$radio-md-item-start-margin-end: 36px !default; + +/// @prop - Margin bottom of the item-start in a radio +$radio-md-item-start-margin-bottom: 10px !default; + +/// @prop - Margin start of the item-start in a radio +$radio-md-item-start-margin-start: 4px !default; + +/// @prop - Margin top of the item-end in a radio +$radio-md-item-end-margin-top: $item-md-padding-media-top !default; + +/// @prop - Margin end of the item-end in a radio +$radio-md-item-end-margin-end: 10px !default; + +/// @prop - Margin bottom of the item-end in a radio +$radio-md-item-end-margin-bottom: $item-md-padding-media-bottom !default; + +/// @prop - Margin start of the item-end in a radio +$radio-md-item-end-margin-start: 0 !default; diff --git a/packages/core/src/components/radio/radio.scss b/packages/core/src/components/radio/radio.scss index 0cbba6c39a..a3a56c7261 100644 --- a/packages/core/src/components/radio/radio.scss +++ b/packages/core/src/components/radio/radio.scss @@ -3,7 +3,6 @@ // Radio // -------------------------------------------------- - ion-radio { position: relative; display: inline-block; diff --git a/packages/core/src/components/range/range.ios.scss b/packages/core/src/components/range/range.ios.scss index eded03f7aa..ed62b4eb64 100644 --- a/packages/core/src/components/range/range.ios.scss +++ b/packages/core/src/components/range/range.ios.scss @@ -1,87 +1,8 @@ -@import "../../themes/ionic.globals.ios"; +@import "./range.ios.vars"; // iOS Range // -------------------------------------------------- -/// @prop - Padding top/bottom of the range -$range-ios-padding-vertical: 8px !default; - -/// @prop - Padding start/end of the range -$range-ios-padding-horizontal: 16px !default; - -/// @prop - Height of the range slider -$range-ios-slider-height: 42px !default; - -/// @prop - Width of the area that will select the range knob -$range-ios-hit-width: 42px !default; - -/// @prop - Height of the area that will select the range knob -$range-ios-hit-height: $range-ios-slider-height !default; - -/// @prop - Height of the range bar -$range-ios-bar-height: 1px !default; - -/// @prop - Background of the range bar -$range-ios-bar-background-color: #bdbdbd !default; - -/// @prop - Background of the active range bar -$range-ios-bar-active-background-color: color($colors-ios, primary) !default; - -/// @prop - Width of the range knob -$range-ios-knob-width: 28px !default; - -/// @prop - Height of the range knob -$range-ios-knob-height: $range-ios-knob-width !default; - -/// @prop - Box shadow of the range knob -$range-ios-knob-box-shadow: 0 3px 1px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .02) !default; - -/// @prop - Border radius of the range knob -$range-ios-knob-border-radius: 50% !default; - -/// @prop - Background of the range knob -$range-ios-knob-background-color: #fff !default; - -/// @prop - Width of the range tick -$range-ios-tick-width: $range-ios-bar-height !default; - -/// @prop - Height of the range tick -$range-ios-tick-height: 8px !default; - -/// @prop - Border radius of the range tick -$range-ios-tick-border-radius: 0 !default; - -/// @prop - Background of the range tick -$range-ios-tick-background-color: $range-ios-bar-background-color !default; - -/// @prop - Background of the active range tick -$range-ios-tick-active-background-color: $range-ios-bar-active-background-color !default; - -/// @prop - Background of the range pin -$range-ios-pin-background-color: transparent !default; - -/// @prop - Color of the range pin -$range-ios-pin-color: $text-ios-color !default; - -/// @prop - Font size of the range pin -$range-ios-pin-font-size: 12px !default; - -// deprecated -$range-ios-pin-padding: null !default; - -/// @prop - Padding top of the range pin -$range-ios-pin-padding-top: 8px !default; - -/// @prop - Padding end of the range pin -$range-ios-pin-padding-end: $range-ios-pin-padding-top !default; - -/// @prop - Padding bottom of the range pin -$range-ios-pin-padding-bottom: $range-ios-pin-padding-top !default; - -/// @prop - Padding start of the range pin -$range-ios-pin-padding-start: $range-ios-pin-padding-end !default; - - .range-ios { @include padding($range-ios-padding-vertical, $range-ios-padding-horizontal); } @@ -183,6 +104,7 @@ $range-ios-pin-padding-start: $range-ios-pin-padding-end !defaul @include text-align(center); @include border-radius(50px); @include transform(translate3d(0, 28px, 0), scale(.01)); + @include padding($range-ios-pin-padding-top, $range-ios-pin-padding-end, $range-ios-pin-padding-bottom, $range-ios-pin-padding-start); position: relative; top: -20px; @@ -197,10 +119,6 @@ $range-ios-pin-padding-start: $range-ios-pin-padding-end !defaul background: $range-ios-pin-background-color; transition: transform 120ms ease; - - @include deprecated-variable(padding, $range-ios-pin-padding) { - @include padding($range-ios-pin-padding-top, $range-ios-pin-padding-end, $range-ios-pin-padding-bottom, $range-ios-pin-padding-start); - } } .range-ios .range-knob-pressed .range-pin { diff --git a/packages/core/src/components/range/range.ios.vars.scss b/packages/core/src/components/range/range.ios.vars.scss new file mode 100644 index 0000000000..8b0eec86e2 --- /dev/null +++ b/packages/core/src/components/range/range.ios.vars.scss @@ -0,0 +1,79 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Range +// -------------------------------------------------- + +/// @prop - Padding top/bottom of the range +$range-ios-padding-vertical: 8px !default; + +/// @prop - Padding start/end of the range +$range-ios-padding-horizontal: 16px !default; + +/// @prop - Height of the range slider +$range-ios-slider-height: 42px !default; + +/// @prop - Width of the area that will select the range knob +$range-ios-hit-width: 42px !default; + +/// @prop - Height of the area that will select the range knob +$range-ios-hit-height: $range-ios-slider-height !default; + +/// @prop - Height of the range bar +$range-ios-bar-height: 1px !default; + +/// @prop - Background of the range bar +$range-ios-bar-background-color: #bdbdbd !default; + +/// @prop - Background of the active range bar +$range-ios-bar-active-background-color: color($colors-ios, primary) !default; + +/// @prop - Width of the range knob +$range-ios-knob-width: 28px !default; + +/// @prop - Height of the range knob +$range-ios-knob-height: $range-ios-knob-width !default; + +/// @prop - Box shadow of the range knob +$range-ios-knob-box-shadow: 0 3px 1px rgba(0, 0, 0, .1), 0 4px 8px rgba(0, 0, 0, .13), 0 0 0 1px rgba(0, 0, 0, .02) !default; + +/// @prop - Border radius of the range knob +$range-ios-knob-border-radius: 50% !default; + +/// @prop - Background of the range knob +$range-ios-knob-background-color: #fff !default; + +/// @prop - Width of the range tick +$range-ios-tick-width: $range-ios-bar-height !default; + +/// @prop - Height of the range tick +$range-ios-tick-height: 8px !default; + +/// @prop - Border radius of the range tick +$range-ios-tick-border-radius: 0 !default; + +/// @prop - Background of the range tick +$range-ios-tick-background-color: $range-ios-bar-background-color !default; + +/// @prop - Background of the active range tick +$range-ios-tick-active-background-color: $range-ios-bar-active-background-color !default; + +/// @prop - Background of the range pin +$range-ios-pin-background-color: transparent !default; + +/// @prop - Color of the range pin +$range-ios-pin-color: $text-ios-color !default; + +/// @prop - Font size of the range pin +$range-ios-pin-font-size: 12px !default; + +/// @prop - Padding top of the range pin +$range-ios-pin-padding-top: 8px !default; + +/// @prop - Padding end of the range pin +$range-ios-pin-padding-end: $range-ios-pin-padding-top !default; + +/// @prop - Padding bottom of the range pin +$range-ios-pin-padding-bottom: $range-ios-pin-padding-top !default; + +/// @prop - Padding start of the range pin +$range-ios-pin-padding-start: $range-ios-pin-padding-end !default; diff --git a/packages/core/src/components/range/range.md.scss b/packages/core/src/components/range/range.md.scss index 87c4f9d81a..124930e606 100644 --- a/packages/core/src/components/range/range.md.scss +++ b/packages/core/src/components/range/range.md.scss @@ -1,81 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./range"; +@import "./range.md.vars"; + // Material Design Range // -------------------------------------------------- -/// @prop - Padding top/bottom of the range -$range-md-padding-vertical: 8px !default; - -/// @prop - Padding start/end of the range -$range-md-padding-horizontal: 8px !default; - -/// @prop - Height of the range slider -$range-md-slider-height: 42px !default; - -/// @prop - Width of the area that will select the range knob -$range-md-hit-width: 42px !default; - -/// @prop - Height of the area that will select the range knob -$range-md-hit-height: $range-md-slider-height !default; - -/// @prop - Height of the range bar -$range-md-bar-height: 2px !default; - -/// @prop - Background of the range bar -$range-md-bar-background-color: #bdbdbd !default; - -/// @prop - Background of the active range bar -$range-md-bar-active-background-color: color($colors-md, primary) !default; - -/// @prop - Width of the range knob -$range-md-knob-width: 18px !default; - -/// @prop - Height of the range knob -$range-md-knob-height: $range-md-knob-width !default; - -/// @prop - Background of the range knob -$range-md-knob-background-color: $range-md-bar-active-background-color !default; - -/// @prop - Background of the range knob when the value is the minimum -$range-md-knob-min-background-color: $background-md-color !default; - -/// @prop - Border of the range knob when the value is the minimum -$range-md-knob-min-border: 2px solid $range-md-bar-background-color !default; - -/// @prop - Width of the range tick -$range-md-tick-width: 2px !default; - -/// @prop - Height of the range tick -$range-md-tick-height: $range-md-tick-width !default; - -/// @prop - Border radius of the range tick -$range-md-tick-border-radius: 50% !default; - -/// @prop - Background of the range tick -$range-md-tick-background-color: #000 !default; - -/// @prop - Background of the active range tick -$range-md-tick-active-background-color: $range-md-tick-background-color !default; - -/// @prop - Background of the range pin -$range-md-pin-background-color: $range-md-bar-active-background-color !default; - -/// @prop - Color of the range pin -$range-md-pin-color: color-contrast($colors-md, $range-md-bar-active-background-color) !default; - -/// @prop - Font size of the range pin -$range-md-pin-font-size: 12px !default; - -/// @prop - Padding top/bottom of the range pin -$range-md-pin-padding-vertical: 8px !default; - -/// @prop - Padding start/end of the range pin -$range-md-pin-padding-horizontal: 0 !default; - -/// @prop - Background of the range pin when the value is the minimum -$range-md-pin-min-background-color: $range-md-bar-background-color !default; - - .range-md { @include padding($range-md-padding-vertical, $range-md-padding-horizontal); } diff --git a/packages/core/src/components/range/range.md.vars.scss b/packages/core/src/components/range/range.md.vars.scss new file mode 100644 index 0000000000..5b8493458c --- /dev/null +++ b/packages/core/src/components/range/range.md.vars.scss @@ -0,0 +1,76 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Range +// -------------------------------------------------- + +/// @prop - Padding top/bottom of the range +$range-md-padding-vertical: 8px !default; + +/// @prop - Padding start/end of the range +$range-md-padding-horizontal: 8px !default; + +/// @prop - Height of the range slider +$range-md-slider-height: 42px !default; + +/// @prop - Width of the area that will select the range knob +$range-md-hit-width: 42px !default; + +/// @prop - Height of the area that will select the range knob +$range-md-hit-height: $range-md-slider-height !default; + +/// @prop - Height of the range bar +$range-md-bar-height: 2px !default; + +/// @prop - Background of the range bar +$range-md-bar-background-color: #bdbdbd !default; + +/// @prop - Background of the active range bar +$range-md-bar-active-background-color: color($colors-md, primary) !default; + +/// @prop - Width of the range knob +$range-md-knob-width: 18px !default; + +/// @prop - Height of the range knob +$range-md-knob-height: $range-md-knob-width !default; + +/// @prop - Background of the range knob +$range-md-knob-background-color: $range-md-bar-active-background-color !default; + +/// @prop - Background of the range knob when the value is the minimum +$range-md-knob-min-background-color: $background-md-color !default; + +/// @prop - Border of the range knob when the value is the minimum +$range-md-knob-min-border: 2px solid $range-md-bar-background-color !default; + +/// @prop - Width of the range tick +$range-md-tick-width: 2px !default; + +/// @prop - Height of the range tick +$range-md-tick-height: $range-md-tick-width !default; + +/// @prop - Border radius of the range tick +$range-md-tick-border-radius: 50% !default; + +/// @prop - Background of the range tick +$range-md-tick-background-color: #000 !default; + +/// @prop - Background of the active range tick +$range-md-tick-active-background-color: $range-md-tick-background-color !default; + +/// @prop - Background of the range pin +$range-md-pin-background-color: $range-md-bar-active-background-color !default; + +/// @prop - Color of the range pin +$range-md-pin-color: color-contrast($colors-md, $range-md-bar-active-background-color) !default; + +/// @prop - Font size of the range pin +$range-md-pin-font-size: 12px !default; + +/// @prop - Padding top/bottom of the range pin +$range-md-pin-padding-vertical: 8px !default; + +/// @prop - Padding start/end of the range pin +$range-md-pin-padding-horizontal: 0 !default; + +/// @prop - Background of the range pin when the value is the minimum +$range-md-pin-min-background-color: $range-md-bar-background-color !default; diff --git a/packages/core/src/components/reorder-group/reorder-group.scss b/packages/core/src/components/reorder-group/reorder-group.scss index 0af0118a11..f1ce8dae84 100644 --- a/packages/core/src/components/reorder-group/reorder-group.scss +++ b/packages/core/src/components/reorder-group/reorder-group.scss @@ -1,7 +1,4 @@ -@import "../../themes/ionic.globals"; - -$reorder-initial-transform: 160% !default; - +@import "./reorder-group.vars"; // Reorder Group // -------------------------------------------------- diff --git a/packages/core/src/components/reorder-group/reorder-group.vars.scss b/packages/core/src/components/reorder-group/reorder-group.vars.scss new file mode 100644 index 0000000000..a829785c33 --- /dev/null +++ b/packages/core/src/components/reorder-group/reorder-group.vars.scss @@ -0,0 +1,6 @@ +@import "../../themes/ionic.globals"; + +// Reorder Group +// -------------------------------------------------- + +$reorder-initial-transform: 160% !default; diff --git a/packages/core/src/components/searchbar/searchbar.ios.scss b/packages/core/src/components/searchbar/searchbar.ios.scss index 3596871b0a..895b186e6e 100644 --- a/packages/core/src/components/searchbar/searchbar.ios.scss +++ b/packages/core/src/components/searchbar/searchbar.ios.scss @@ -1,67 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./searchbar"; +@import "./searchbar.ios.vars"; // iOS Searchbar // -------------------------------------------------- -/// @prop - Padding top of the searchbar -$searchbar-ios-padding-top: 12px !default; - -/// @prop - Padding end of the searchbar -$searchbar-ios-padding-end: $searchbar-ios-padding-top !default; - -/// @prop - Padding bottom of the searchbar -$searchbar-ios-padding-bottom: $searchbar-ios-padding-top !default; - -/// @prop - Padding start of the searchbar -$searchbar-ios-padding-start: $searchbar-ios-padding-end !default; - -/// @prop - Minimum height of the searchbar -$searchbar-ios-min-height: 44px !default; - -/// @prop - Color of the searchbar input search icon -$searchbar-ios-input-search-icon-color: rgba(0, 0, 0, .5) !default; - -/// @prop - Svg for the searchbar input search icon -$searchbar-ios-input-search-icon-svg: "" !default; - -/// @prop - Size of the searchbar input search icon -$searchbar-ios-input-search-icon-size: 13px !default; - -/// @prop - Height of the searchbar input -$searchbar-ios-input-height: 36px !default; - -/// @prop - Border radius of the searchbar input -$searchbar-ios-input-border-radius: 10px !default; - -/// @prop - Color of the searchbar input placeholder -$searchbar-ios-input-placeholder-color: rgba(0, 0, 0, .5) !default; - -/// @prop - Color of the searchbar input text -$searchbar-ios-input-text-color: #000 !default; - -/// @prop - Background of the searchbar input -$searchbar-ios-input-background-color: rgba(15, 22, 64, .1) !default; - -/// @prop - Transition of the searchbar input -$searchbar-ios-input-transition: all 300ms ease !default; - -/// @prop - Transition of the searchbar input cancel button -$searchbar-ios-cancel-transition: all 300ms ease !default; - -/// @prop - Color of the searchbar input clear icon -$searchbar-ios-input-clear-icon-color: rgba(0, 0, 0, .5) !default; - -/// @prop - Svg for the searchbar input clear icon -$searchbar-ios-input-clear-icon-svg: "" !default; - -/// @prop - Size of the searchbar input clear icon -$searchbar-ios-input-clear-icon-size: 18px !default; - - -// Searchbar -// ----------------------------------------- - .searchbar-ios { @include padding($searchbar-ios-padding-top, $searchbar-ios-padding-end, $searchbar-ios-padding-bottom, $searchbar-ios-padding-start); diff --git a/packages/core/src/components/searchbar/searchbar.ios.vars.scss b/packages/core/src/components/searchbar/searchbar.ios.vars.scss new file mode 100644 index 0000000000..06cd78ed20 --- /dev/null +++ b/packages/core/src/components/searchbar/searchbar.ios.vars.scss @@ -0,0 +1,58 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Searchbar +// -------------------------------------------------- + +/// @prop - Padding top of the searchbar +$searchbar-ios-padding-top: 12px !default; + +/// @prop - Padding end of the searchbar +$searchbar-ios-padding-end: $searchbar-ios-padding-top !default; + +/// @prop - Padding bottom of the searchbar +$searchbar-ios-padding-bottom: $searchbar-ios-padding-top !default; + +/// @prop - Padding start of the searchbar +$searchbar-ios-padding-start: $searchbar-ios-padding-end !default; + +/// @prop - Minimum height of the searchbar +$searchbar-ios-min-height: 44px !default; + +/// @prop - Color of the searchbar input search icon +$searchbar-ios-input-search-icon-color: rgba(0, 0, 0, .5) !default; + +/// @prop - Svg for the searchbar input search icon +$searchbar-ios-input-search-icon-svg: "" !default; + +/// @prop - Size of the searchbar input search icon +$searchbar-ios-input-search-icon-size: 13px !default; + +/// @prop - Height of the searchbar input +$searchbar-ios-input-height: 36px !default; + +/// @prop - Border radius of the searchbar input +$searchbar-ios-input-border-radius: 10px !default; + +/// @prop - Color of the searchbar input placeholder +$searchbar-ios-input-placeholder-color: rgba(0, 0, 0, .5) !default; + +/// @prop - Color of the searchbar input text +$searchbar-ios-input-text-color: #000 !default; + +/// @prop - Background of the searchbar input +$searchbar-ios-input-background-color: rgba(15, 22, 64, .1) !default; + +/// @prop - Transition of the searchbar input +$searchbar-ios-input-transition: all 300ms ease !default; + +/// @prop - Transition of the searchbar input cancel button +$searchbar-ios-cancel-transition: all 300ms ease !default; + +/// @prop - Color of the searchbar input clear icon +$searchbar-ios-input-clear-icon-color: rgba(0, 0, 0, .5) !default; + +/// @prop - Svg for the searchbar input clear icon +$searchbar-ios-input-clear-icon-svg: "" !default; + +/// @prop - Size of the searchbar input clear icon +$searchbar-ios-input-clear-icon-size: 18px !default; diff --git a/packages/core/src/components/searchbar/searchbar.md.scss b/packages/core/src/components/searchbar/searchbar.md.scss index 564b603713..8e13262b12 100644 --- a/packages/core/src/components/searchbar/searchbar.md.scss +++ b/packages/core/src/components/searchbar/searchbar.md.scss @@ -1,67 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./searchbar"; +@import "./searchbar.md.vars"; // Material Design Searchbar // -------------------------------------------------- -/// @prop - Padding top of the searchbar -$searchbar-md-padding-top: 8px !default; - -/// @prop - Padding end of the searchbar -$searchbar-md-padding-end: $searchbar-md-padding-top !default; - -/// @prop - Padding bottom of the searchbar -$searchbar-md-padding-bottom: $searchbar-md-padding-top !default; - -/// @prop - Padding start of the searchbar -$searchbar-md-padding-start: $searchbar-md-padding-end !default; - -/// @prop - Background of the searchbar -$searchbar-md-background-color: inherit !default; - -/// @prop - Color of the searchbar input search icon -$searchbar-md-input-search-icon-color: #5b5b5b !default; - -/// @prop - Svg for the searchbar input search icon -$searchbar-md-input-search-icon-svg: "" !default; - -/// @prop - Size of the searchbar input search icon -$searchbar-md-input-search-icon-size: 20px !default; - -/// @prop - Height of the searchbar input -$searchbar-md-input-height: auto !default; - -/// @prop - Line height of the searchbar input -$searchbar-md-input-line-height: 3rem !default; - -/// @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; - -/// @prop - Color of the searchbar input placeholder -$searchbar-md-input-placeholder-color: #aeaeae !default; - -/// @prop - Color of the searchbar input text -$searchbar-md-input-text-color: #141414 !default; - -/// @prop - Background of the searchbar input -$searchbar-md-input-background-color: #fff !default; - -/// @prop - Border radius of the searchbar input -$searchbar-md-input-border-radius: 2px !default; - -/// @prop - Color of the searchbar input clear icon -$searchbar-md-input-clear-icon-color: #5b5b5b !default; - -/// @prop - Svg for the searchbar input clear icon -$searchbar-md-input-clear-icon-svg: "" !default; - -/// @prop - Size of the searchbar input clear icon -$searchbar-md-input-clear-icon-size: 22px !default; - - -// Searchbar -// ----------------------------------------- - .searchbar-md { @include padding($searchbar-md-padding-top, $searchbar-md-padding-end, $searchbar-md-padding-bottom, $searchbar-md-padding-start); diff --git a/packages/core/src/components/searchbar/searchbar.md.vars.scss b/packages/core/src/components/searchbar/searchbar.md.vars.scss new file mode 100644 index 0000000000..72de6fd09b --- /dev/null +++ b/packages/core/src/components/searchbar/searchbar.md.vars.scss @@ -0,0 +1,58 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Searchbar +// -------------------------------------------------- + +/// @prop - Padding top of the searchbar +$searchbar-md-padding-top: 8px !default; + +/// @prop - Padding end of the searchbar +$searchbar-md-padding-end: $searchbar-md-padding-top !default; + +/// @prop - Padding bottom of the searchbar +$searchbar-md-padding-bottom: $searchbar-md-padding-top !default; + +/// @prop - Padding start of the searchbar +$searchbar-md-padding-start: $searchbar-md-padding-end !default; + +/// @prop - Background of the searchbar +$searchbar-md-background-color: inherit !default; + +/// @prop - Color of the searchbar input search icon +$searchbar-md-input-search-icon-color: #5b5b5b !default; + +/// @prop - Svg for the searchbar input search icon +$searchbar-md-input-search-icon-svg: "" !default; + +/// @prop - Size of the searchbar input search icon +$searchbar-md-input-search-icon-size: 20px !default; + +/// @prop - Height of the searchbar input +$searchbar-md-input-height: auto !default; + +/// @prop - Line height of the searchbar input +$searchbar-md-input-line-height: 3rem !default; + +/// @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; + +/// @prop - Color of the searchbar input placeholder +$searchbar-md-input-placeholder-color: #aeaeae !default; + +/// @prop - Color of the searchbar input text +$searchbar-md-input-text-color: #141414 !default; + +/// @prop - Background of the searchbar input +$searchbar-md-input-background-color: #fff !default; + +/// @prop - Border radius of the searchbar input +$searchbar-md-input-border-radius: 2px !default; + +/// @prop - Color of the searchbar input clear icon +$searchbar-md-input-clear-icon-color: #5b5b5b !default; + +/// @prop - Svg for the searchbar input clear icon +$searchbar-md-input-clear-icon-svg: "" !default; + +/// @prop - Size of the searchbar input clear icon +$searchbar-md-input-clear-icon-size: 22px !default; diff --git a/packages/core/src/components/segment/segment.ios.scss b/packages/core/src/components/segment/segment.ios.scss index f72a04dcd9..0f7884af27 100644 --- a/packages/core/src/components/segment/segment.ios.scss +++ b/packages/core/src/components/segment/segment.ios.scss @@ -1,78 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./segment"; +@import "./segment.ios.vars"; // iOS Segment // -------------------------------------------------- -/// @prop - Background of the segment button -$segment-button-ios-background-color: transparent !default; - -/// @prop - Background of the activated segment button -$segment-button-ios-background-color-activated: $toolbar-ios-active-color !default; - -/// @prop - Text color of the segment button -$segment-button-ios-text-color: color-contrast($colors-ios, $segment-button-ios-background-color-activated) !default; - -/// @prop - Transition of the activated segment button -$segment-button-ios-transition-activated: 100ms all linear !default; - -/// @prop - Transition of the segment button on hover -$segment-button-ios-transition-hover: 100ms all linear !default; - -/// @prop - Transition of the segment button when pressed -$segment-button-ios-transition-active: 100ms all linear !default; - -/// @prop - Opacity of the segment button on hover -$segment-button-ios-opacity-hover: .1 !default; - -/// @prop - Opacity of the segment button when pressed -$segment-button-ios-opacity-active: .16 !default; - -/// @prop - Opacity of the activated segment button -$segment-button-ios-opacity-activated: 1 !default; - -/// @prop - Opacity of the disabled segment button -$segment-button-ios-opacity-disabled: .3 !default; - -/// @prop - Border width of the segment button -$segment-button-ios-border-width: 1px !default; - -/// @prop - Height of the segment button -$segment-button-ios-height: 3.2rem !default; - -/// @prop - Line height of the segment button -$segment-button-ios-line-height: 2.8rem !default; - -/// @prop - Font size of the segment button -$segment-button-ios-font-size: 1.3rem !default; - -/// @prop - Border radius of the segment button -$segment-button-ios-border-radius: 4px !default; - -/// @prop - Size of an icon in the segment button -$segment-button-ios-icon-size: 2.6rem !default; - -/// @prop - Line height of an icon in the segment button -$segment-button-ios-icon-line-height: 2.8rem !default; - -/// @prop - Max width of the segment button in a toolbar -$segment-button-ios-toolbar-button-max-width: 100px !default; - -/// @prop - Height of the segment button in a toolbar -$segment-button-ios-toolbar-button-height: 2.6rem !default; - -/// @prop - Line height of the segment button in a toolbar -$segment-button-ios-toolbar-line-height: 2.2rem !default; - -/// @prop - Font size of the segment button in a toolbar -$segment-button-ios-toolbar-font-size: 1.2rem !default; - -/// @prop - Size of an icon in the segment button in a toolbar -$segment-button-ios-toolbar-icon-size: 2.2rem !default; - -/// @prop - Line height of an icon in the segment button in a toolbar -$segment-button-ios-toolbar-icon-line-height: 2.4rem !default; - .segment-ios ion-segment-button { display: flex; diff --git a/packages/core/src/components/segment/segment.ios.vars.scss b/packages/core/src/components/segment/segment.ios.vars.scss new file mode 100644 index 0000000000..7669e27245 --- /dev/null +++ b/packages/core/src/components/segment/segment.ios.vars.scss @@ -0,0 +1,73 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Segment +// -------------------------------------------------- + +/// @prop - Background of the segment button +$segment-button-ios-background-color: transparent !default; + +/// @prop - Background of the activated segment button +$segment-button-ios-background-color-activated: $toolbar-ios-active-color !default; + +/// @prop - Text color of the segment button +$segment-button-ios-text-color: color-contrast($colors-ios, $segment-button-ios-background-color-activated) !default; + +/// @prop - Transition of the activated segment button +$segment-button-ios-transition-activated: 100ms all linear !default; + +/// @prop - Transition of the segment button on hover +$segment-button-ios-transition-hover: 100ms all linear !default; + +/// @prop - Transition of the segment button when pressed +$segment-button-ios-transition-active: 100ms all linear !default; + +/// @prop - Opacity of the segment button on hover +$segment-button-ios-opacity-hover: .1 !default; + +/// @prop - Opacity of the segment button when pressed +$segment-button-ios-opacity-active: .16 !default; + +/// @prop - Opacity of the activated segment button +$segment-button-ios-opacity-activated: 1 !default; + +/// @prop - Opacity of the disabled segment button +$segment-button-ios-opacity-disabled: .3 !default; + +/// @prop - Border width of the segment button +$segment-button-ios-border-width: 1px !default; + +/// @prop - Height of the segment button +$segment-button-ios-height: 3.2rem !default; + +/// @prop - Line height of the segment button +$segment-button-ios-line-height: 2.8rem !default; + +/// @prop - Font size of the segment button +$segment-button-ios-font-size: 1.3rem !default; + +/// @prop - Border radius of the segment button +$segment-button-ios-border-radius: 4px !default; + +/// @prop - Size of an icon in the segment button +$segment-button-ios-icon-size: 2.6rem !default; + +/// @prop - Line height of an icon in the segment button +$segment-button-ios-icon-line-height: 2.8rem !default; + +/// @prop - Max width of the segment button in a toolbar +$segment-button-ios-toolbar-button-max-width: 100px !default; + +/// @prop - Height of the segment button in a toolbar +$segment-button-ios-toolbar-button-height: 2.6rem !default; + +/// @prop - Line height of the segment button in a toolbar +$segment-button-ios-toolbar-line-height: 2.2rem !default; + +/// @prop - Font size of the segment button in a toolbar +$segment-button-ios-toolbar-font-size: 1.2rem !default; + +/// @prop - Size of an icon in the segment button in a toolbar +$segment-button-ios-toolbar-icon-size: 2.2rem !default; + +/// @prop - Line height of an icon in the segment button in a toolbar +$segment-button-ios-toolbar-icon-line-height: 2.4rem !default; diff --git a/packages/core/src/components/segment/segment.md.scss b/packages/core/src/components/segment/segment.md.scss index 0d4179760a..0dabae0797 100644 --- a/packages/core/src/components/segment/segment.md.scss +++ b/packages/core/src/components/segment/segment.md.scss @@ -1,58 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./segment"; +@import "./segment.md.vars"; // Material Design Segment // -------------------------------------------------- -/// @prop - Text color of the activated segment button -$segment-button-md-text-color-activated: $toolbar-md-active-color !default; - -/// @prop - Border color of the activated segment button -$segment-button-md-border-color-activated: $toolbar-md-active-color !default; - -/// @prop - Width of the bottom border on the segment button -$segment-button-md-border-bottom-width: 2px !default; - -/// @prop - Color of the bottom border on the segment button -$segment-button-md-border-bottom-color: rgba(#000, .10) !default; - -/// @prop - Opacity of the segment button -$segment-button-md-opacity: .7 !default; - -/// @prop - Opacity of the activated segment button -$segment-button-md-opacity-activated: 1 !default; - -/// @prop - Opacity of the disabled segment button -$segment-button-md-opacity-disabled: .3 !default; - -/// @prop - Padding top of the segment button -$segment-button-md-padding-top: 0 !default; - -/// @prop - Padding end of the segment button -$segment-button-md-padding-end: 6px !default; - -/// @prop - Padding bottom of the segment button -$segment-button-md-padding-bottom: $segment-button-md-padding-top !default; - -/// @prop - Padding start of the segment button -$segment-button-md-padding-start: $segment-button-md-padding-end !default; - -/// @prop - Height of the segment button -$segment-button-md-height: 4.2rem !default; - -/// @prop - Line height of the segment button -$segment-button-md-line-height: 4rem !default; - -/// @prop - Font size of the segment button -$segment-button-md-font-size: 1.2rem !default; - -/// @prop - Size of an icon in the segment button -$segment-button-md-icon-size: 2.6rem !default; - -/// @prop - Line height of an icon in the segment button -$segment-button-md-icon-line-height: $segment-button-md-line-height !default; - - .segment-md ion-segment-button { display: flex; diff --git a/packages/core/src/components/segment/segment.md.vars.scss b/packages/core/src/components/segment/segment.md.vars.scss new file mode 100644 index 0000000000..4049998e91 --- /dev/null +++ b/packages/core/src/components/segment/segment.md.vars.scss @@ -0,0 +1,52 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Segment +// -------------------------------------------------- + +/// @prop - Text color of the activated segment button +$segment-button-md-text-color-activated: $toolbar-md-active-color !default; + +/// @prop - Border color of the activated segment button +$segment-button-md-border-color-activated: $toolbar-md-active-color !default; + +/// @prop - Width of the bottom border on the segment button +$segment-button-md-border-bottom-width: 2px !default; + +/// @prop - Color of the bottom border on the segment button +$segment-button-md-border-bottom-color: rgba(#000, .10) !default; + +/// @prop - Opacity of the segment button +$segment-button-md-opacity: .7 !default; + +/// @prop - Opacity of the activated segment button +$segment-button-md-opacity-activated: 1 !default; + +/// @prop - Opacity of the disabled segment button +$segment-button-md-opacity-disabled: .3 !default; + +/// @prop - Padding top of the segment button +$segment-button-md-padding-top: 0 !default; + +/// @prop - Padding end of the segment button +$segment-button-md-padding-end: 6px !default; + +/// @prop - Padding bottom of the segment button +$segment-button-md-padding-bottom: $segment-button-md-padding-top !default; + +/// @prop - Padding start of the segment button +$segment-button-md-padding-start: $segment-button-md-padding-end !default; + +/// @prop - Height of the segment button +$segment-button-md-height: 4.2rem !default; + +/// @prop - Line height of the segment button +$segment-button-md-line-height: 4rem !default; + +/// @prop - Font size of the segment button +$segment-button-md-font-size: 1.2rem !default; + +/// @prop - Size of an icon in the segment button +$segment-button-md-icon-size: 2.6rem !default; + +/// @prop - Line height of an icon in the segment button +$segment-button-md-icon-line-height: $segment-button-md-line-height !default; diff --git a/packages/core/src/components/segment/segment.scss b/packages/core/src/components/segment/segment.scss index 2eb7452ad6..a312f91422 100644 --- a/packages/core/src/components/segment/segment.scss +++ b/packages/core/src/components/segment/segment.scss @@ -3,7 +3,6 @@ // Segment // -------------------------------------------------- - ion-segment { display: flex; diff --git a/packages/core/src/components/select/select.ios.scss b/packages/core/src/components/select/select.ios.scss index be13730339..2fc7af6c79 100644 --- a/packages/core/src/components/select/select.ios.scss +++ b/packages/core/src/components/select/select.ios.scss @@ -1,28 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./select"; +@import "./select.ios.vars"; // iOS Select // -------------------------------------------------- -/// @prop - Padding top of the select -$select-ios-padding-top: $item-ios-padding-top !default; - -/// @prop - Padding end of the select -$select-ios-padding-end: ($item-ios-padding-end / 2) !default; - -/// @prop - Padding bottom of the select -$select-ios-padding-bottom: $item-ios-padding-bottom !default; - -/// @prop - Padding start of the select -$select-ios-padding-start: $item-ios-padding-start !default; - -/// @prop - Color of the select icon -$select-ios-icon-color: #999 !default; - -/// @prop - Color of the select placeholder -$select-ios-placeholder-color: $select-ios-icon-color !default; - - .select-ios { @include padding($select-ios-padding-top, $select-ios-padding-end, $select-ios-padding-bottom, $select-ios-padding-start); } diff --git a/packages/core/src/components/select/select.ios.vars.scss b/packages/core/src/components/select/select.ios.vars.scss new file mode 100644 index 0000000000..9cc7f69fee --- /dev/null +++ b/packages/core/src/components/select/select.ios.vars.scss @@ -0,0 +1,22 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Select +// -------------------------------------------------- + +/// @prop - Padding top of the select +$select-ios-padding-top: $item-ios-padding-top !default; + +/// @prop - Padding end of the select +$select-ios-padding-end: ($item-ios-padding-end / 2) !default; + +/// @prop - Padding bottom of the select +$select-ios-padding-bottom: $item-ios-padding-bottom !default; + +/// @prop - Padding start of the select +$select-ios-padding-start: $item-ios-padding-start !default; + +/// @prop - Color of the select icon +$select-ios-icon-color: #999 !default; + +/// @prop - Color of the select placeholder +$select-ios-placeholder-color: $select-ios-icon-color !default; diff --git a/packages/core/src/components/select/select.md.scss b/packages/core/src/components/select/select.md.scss index e2fceaaf7d..196d4ee0a3 100644 --- a/packages/core/src/components/select/select.md.scss +++ b/packages/core/src/components/select/select.md.scss @@ -1,28 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./select"; +@import "./select.md.vars"; // Material Design Select // -------------------------------------------------- -/// @prop - Padding top of the select -$select-md-padding-top: $item-md-padding-top !default; - -/// @prop - Padding end of the select -$select-md-padding-end: ($item-md-padding-end / 2) !default; - -/// @prop - Padding bottom of the select -$select-md-padding-bottom: $item-md-padding-bottom !default; - -/// @prop - Padding start of the select -$select-md-padding-start: $item-md-padding-start !default; - -/// @prop - Color of the select icon -$select-md-icon-color: #999 !default; - -/// @prop - Color of the select placeholder -$select-md-placeholder-color: $select-md-icon-color !default; - - .select-md { @include padding($select-md-padding-top, $select-md-padding-end, $select-md-padding-bottom, $select-md-padding-start); } diff --git a/packages/core/src/components/select/select.md.vars.scss b/packages/core/src/components/select/select.md.vars.scss new file mode 100644 index 0000000000..55f403e676 --- /dev/null +++ b/packages/core/src/components/select/select.md.vars.scss @@ -0,0 +1,22 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Select +// -------------------------------------------------- + +/// @prop - Padding top of the select +$select-md-padding-top: $item-md-padding-top !default; + +/// @prop - Padding end of the select +$select-md-padding-end: ($item-md-padding-end / 2) !default; + +/// @prop - Padding bottom of the select +$select-md-padding-bottom: $item-md-padding-bottom !default; + +/// @prop - Padding start of the select +$select-md-padding-start: $item-md-padding-start !default; + +/// @prop - Color of the select icon +$select-md-icon-color: #999 !default; + +/// @prop - Color of the select placeholder +$select-md-placeholder-color: $select-md-icon-color !default; diff --git a/packages/core/src/components/select/select.scss b/packages/core/src/components/select/select.scss index 55db4824ec..8116227275 100644 --- a/packages/core/src/components/select/select.scss +++ b/packages/core/src/components/select/select.scss @@ -1,21 +1,8 @@ -@import "../../themes/ionic.globals"; +@import "./select.vars"; // Select // -------------------------------------------------- -/// @prop - Margin top of the select popover list -$select-popover-list-margin-top: -1px !default; - -/// @prop - Margin end of the select popover list -$select-popover-list-margin-end: 0 !default; - -/// @prop - Margin bottom of the select popover list -$select-popover-list-margin-bottom: -1px !default; - -/// @prop - Margin start of the select popover list -$select-popover-list-margin-start: 0 !default; - - ion-select { position: relative; diff --git a/packages/core/src/components/select/select.vars.scss b/packages/core/src/components/select/select.vars.scss new file mode 100644 index 0000000000..09d0d564dd --- /dev/null +++ b/packages/core/src/components/select/select.vars.scss @@ -0,0 +1,16 @@ +@import "../../themes/ionic.globals"; + +// Select +// -------------------------------------------------- + +/// @prop - Margin top of the select popover list +$select-popover-list-margin-top: -1px !default; + +/// @prop - Margin end of the select popover list +$select-popover-list-margin-end: 0 !default; + +/// @prop - Margin bottom of the select popover list +$select-popover-list-margin-bottom: -1px !default; + +/// @prop - Margin start of the select popover list +$select-popover-list-margin-start: 0 !default; diff --git a/packages/core/src/components/slides/slides.scss b/packages/core/src/components/slides/slides.scss index e92ae46dc6..4b1b21d9ed 100644 --- a/packages/core/src/components/slides/slides.scss +++ b/packages/core/src/components/slides/slides.scss @@ -1,11 +1,9 @@ @import "../../themes/ionic.globals"; @import "./slides-import"; - // Slides // -------------------------------------------------- - ion-slides { display: block; } diff --git a/packages/core/src/components/spinner/spinner.ios.scss b/packages/core/src/components/spinner/spinner.ios.scss index 1225591a23..dd16506bdd 100644 --- a/packages/core/src/components/spinner/spinner.ios.scss +++ b/packages/core/src/components/spinner/spinner.ios.scss @@ -1,26 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./spinner"; - +@import "./spinner.ios.vars"; // iOS Spinner // -------------------------------------------------- -/// @prop - Color of the ios spinner -$spinner-ios-ios-color: #69717d !default; - -/// @prop - Color of the bubbles spinner -$spinner-ios-bubbles-color: #000 !default; - -/// @prop - Color of the circles spinner -$spinner-ios-circles-color: #69717d !default; - -/// @prop - Color of the crescent spinner -$spinner-ios-crescent-color: #000 !default; - -/// @prop - Color of the dots spinner -$spinner-ios-dots-color: #444 !default; - - .spinner-lines-ios line, .spinner-lines-sm-ios line { stroke: $spinner-ios-ios-color; diff --git a/packages/core/src/components/spinner/spinner.ios.vars.scss b/packages/core/src/components/spinner/spinner.ios.vars.scss new file mode 100644 index 0000000000..c15e5ffffd --- /dev/null +++ b/packages/core/src/components/spinner/spinner.ios.vars.scss @@ -0,0 +1,19 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Spinner +// -------------------------------------------------- + +/// @prop - Color of the ios spinner +$spinner-ios-ios-color: #69717d !default; + +/// @prop - Color of the bubbles spinner +$spinner-ios-bubbles-color: #000 !default; + +/// @prop - Color of the circles spinner +$spinner-ios-circles-color: #69717d !default; + +/// @prop - Color of the crescent spinner +$spinner-ios-crescent-color: #000 !default; + +/// @prop - Color of the dots spinner +$spinner-ios-dots-color: #444 !default; diff --git a/packages/core/src/components/spinner/spinner.md.scss b/packages/core/src/components/spinner/spinner.md.scss index df524152d1..396e2069be 100644 --- a/packages/core/src/components/spinner/spinner.md.scss +++ b/packages/core/src/components/spinner/spinner.md.scss @@ -1,26 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./spinner"; - +@import "./spinner.md.vars"; // Material Design Spinner // -------------------------------------------------- -/// @prop - Color of the ios spinner -$spinner-md-ios-color: #69717d !default; - -/// @prop - Color of the bubbles spinner -$spinner-md-bubbles-color: #000 !default; - -/// @prop - Color of the circles spinner -$spinner-md-circles-color: #69717d !default; - -/// @prop - Color of the crescent spinner -$spinner-md-crescent-color: #000 !default; - -/// @prop - Color of the dots spinner -$spinner-md-dots-color: #444 !default; - - .spinner-lines-md line, .spinner-lines-sm-md line { stroke: $spinner-md-ios-color; diff --git a/packages/core/src/components/spinner/spinner.md.vars.scss b/packages/core/src/components/spinner/spinner.md.vars.scss new file mode 100644 index 0000000000..e16e8b298c --- /dev/null +++ b/packages/core/src/components/spinner/spinner.md.vars.scss @@ -0,0 +1,19 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Spinner +// -------------------------------------------------- + +/// @prop - Color of the ios spinner +$spinner-md-ios-color: #69717d !default; + +/// @prop - Color of the bubbles spinner +$spinner-md-bubbles-color: #000 !default; + +/// @prop - Color of the circles spinner +$spinner-md-circles-color: #69717d !default; + +/// @prop - Color of the crescent spinner +$spinner-md-crescent-color: #000 !default; + +/// @prop - Color of the dots spinner +$spinner-md-dots-color: #444 !default; diff --git a/packages/core/src/components/spinner/spinner.scss b/packages/core/src/components/spinner/spinner.scss index 405ce3024d..42676f7fa6 100644 --- a/packages/core/src/components/spinner/spinner.scss +++ b/packages/core/src/components/spinner/spinner.scss @@ -1,6 +1,5 @@ @import "../../themes/ionic.globals"; - // Spinners // -------------------------------------------------- diff --git a/packages/core/src/components/split-pane/split-pane.ios.scss b/packages/core/src/components/split-pane/split-pane.ios.scss index 48f1dd3914..a31a2efdb7 100644 --- a/packages/core/src/components/split-pane/split-pane.ios.scss +++ b/packages/core/src/components/split-pane/split-pane.ios.scss @@ -1,19 +1,11 @@ @import "../../themes/ionic.globals.ios"; @import "./split-pane"; +@import "./split-pane.ios.vars"; // Split Pane // -------------------------------------------------- -/// @prop - Minimum width of the split-pane's side pane -$split-pane-ios-side-min-width: $split-pane-side-min-width !default; - -/// @prop - Maximum width of the split-pane's side pane -$split-pane-ios-side-max-width: $split-pane-side-max-width !default; - -/// @prop - Border style of the side pane -$split-pane-ios-border: $hairlines-width solid $list-ios-border-color !default; - .split-pane-ios.split-pane-visible >.split-pane-side { min-width: $split-pane-ios-side-min-width; max-width: $split-pane-ios-side-max-width; diff --git a/packages/core/src/components/split-pane/split-pane.ios.vars.scss b/packages/core/src/components/split-pane/split-pane.ios.vars.scss new file mode 100644 index 0000000000..eadec310e3 --- /dev/null +++ b/packages/core/src/components/split-pane/split-pane.ios.vars.scss @@ -0,0 +1,13 @@ +@import "../../themes/ionic.globals.ios"; + +// Split Pane +// -------------------------------------------------- + +/// @prop - Minimum width of the split pane's side pane +$split-pane-ios-side-min-width: $split-pane-side-min-width !default; + +/// @prop - Maximum width of the split pane's side pane +$split-pane-ios-side-max-width: $split-pane-side-max-width !default; + +/// @prop - Border style of the side pane +$split-pane-ios-border: $hairlines-width solid $list-ios-border-color !default; diff --git a/packages/core/src/components/split-pane/split-pane.md.scss b/packages/core/src/components/split-pane/split-pane.md.scss index 9204949703..0138b931d6 100644 --- a/packages/core/src/components/split-pane/split-pane.md.scss +++ b/packages/core/src/components/split-pane/split-pane.md.scss @@ -1,19 +1,9 @@ - -@import "../../themes/ionic.globals.md"; @import "./split-pane"; +@import "./split-pane.md.vars"; // Split Pane // -------------------------------------------------- -/// @prop - Minimum width of the split-pane's side pane -$split-pane-md-side-min-width: $split-pane-side-min-width !default; - -/// @prop - Maximum width of the split-pane's side pane -$split-pane-md-side-max-width: $split-pane-side-max-width !default; - -/// @prop - Border style of the side pane -$split-pane-md-border: 1px solid $list-md-border-color !default; - .split-pane-md.split-pane-visible >.split-pane-side { min-width: $split-pane-md-side-min-width; max-width: $split-pane-md-side-max-width; diff --git a/packages/core/src/components/split-pane/split-pane.md.vars.scss b/packages/core/src/components/split-pane/split-pane.md.vars.scss new file mode 100644 index 0000000000..17aad4d2ad --- /dev/null +++ b/packages/core/src/components/split-pane/split-pane.md.vars.scss @@ -0,0 +1,13 @@ +@import "../../themes/ionic.globals.md"; + +// Split Pane +// -------------------------------------------------- + +/// @prop - Minimum width of the split pane's side pane +$split-pane-md-side-min-width: $split-pane-side-min-width !default; + +/// @prop - Maximum width of the split pane's side pane +$split-pane-md-side-max-width: $split-pane-side-max-width !default; + +/// @prop - Border style of the side pane +$split-pane-md-border: 1px solid $list-md-border-color !default; diff --git a/packages/core/src/components/split-pane/split-pane.scss b/packages/core/src/components/split-pane/split-pane.scss index 6e030701ea..fa9de837e5 100644 --- a/packages/core/src/components/split-pane/split-pane.scss +++ b/packages/core/src/components/split-pane/split-pane.scss @@ -1,12 +1,8 @@ - -@import "../../themes/ionic.globals"; +@import "./split-pane.vars"; // Split Pane // -------------------------------------------------- -$split-pane-side-min-width: 270px !default; -$split-pane-side-max-width: 28% !default; - .split-pane { @include position(0, 0, 0, 0); diff --git a/packages/core/src/components/split-pane/split-pane.vars.scss b/packages/core/src/components/split-pane/split-pane.vars.scss new file mode 100644 index 0000000000..e7df6a8a01 --- /dev/null +++ b/packages/core/src/components/split-pane/split-pane.vars.scss @@ -0,0 +1,10 @@ +@import "../../themes/ionic.globals"; + +// Split Pane +// -------------------------------------------------- + +/// @prop - Minimum width of the split pane's side pane +$split-pane-side-min-width: 270px !default; + +/// @prop - Maximum width of the split pane's side pane +$split-pane-side-max-width: 28% !default; diff --git a/packages/core/src/components/tabs/tabs.scss b/packages/core/src/components/tabs/tabs.scss index dbc366c0b7..39fcec3b43 100644 --- a/packages/core/src/components/tabs/tabs.scss +++ b/packages/core/src/components/tabs/tabs.scss @@ -1,5 +1,7 @@ @import "../../themes/ionic.globals"; +// Tabs +// -------------------------------------------------- ion-tabs { display: flex; diff --git a/packages/core/src/components/title/title.ios.scss b/packages/core/src/components/title/title.ios.scss index 550858fa9a..bada6f2f66 100644 --- a/packages/core/src/components/title/title.ios.scss +++ b/packages/core/src/components/title/title.ios.scss @@ -1,23 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./title"; - +@import "./title.ios.vars"; // iOS Title // -------------------------------------------------- -/// @prop - Font size of the toolbar title -$toolbar-ios-title-font-size: 1.7rem !default; - -/// @prop - Font weight of the toolbar title -$toolbar-ios-title-font-weight: 600 !default; - -/// @prop - Text alignment of the toolbar title -$toolbar-ios-title-text-align: center !default; - -/// @prop - Text color of the toolbar title -$toolbar-ios-title-text-color: color-contrast($colors-ios, $toolbar-ios-background) !default; - - .toolbar-ios ion-title { @include position(0, null, null, 0); @include padding(0, 90px, 1px); diff --git a/packages/core/src/components/title/title.ios.vars.scss b/packages/core/src/components/title/title.ios.vars.scss new file mode 100644 index 0000000000..e96ee0262c --- /dev/null +++ b/packages/core/src/components/title/title.ios.vars.scss @@ -0,0 +1,16 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Title +// -------------------------------------------------- + +/// @prop - Font size of the toolbar title +$toolbar-ios-title-font-size: 1.7rem !default; + +/// @prop - Font weight of the toolbar title +$toolbar-ios-title-font-weight: 600 !default; + +/// @prop - Text alignment of the toolbar title +$toolbar-ios-title-text-align: center !default; + +/// @prop - Text color of the toolbar title +$toolbar-ios-title-text-color: color-contrast($colors-ios, $toolbar-ios-background) !default; diff --git a/packages/core/src/components/title/title.md.scss b/packages/core/src/components/title/title.md.scss index 3333564703..a2594642ba 100644 --- a/packages/core/src/components/title/title.md.scss +++ b/packages/core/src/components/title/title.md.scss @@ -1,17 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./title"; - +@import "./title.md.vars"; // Material Design Title // -------------------------------------------------- -/// @prop - Font size of the toolbar title -$toolbar-md-title-font-size: 2rem !default; - -/// @prop - Text color of the toolbar title -$toolbar-md-title-text-color: color-contrast($colors-md, $toolbar-md-background, md) !default; - - .toolbar-title-md { @include padding(0, 12px); diff --git a/packages/core/src/components/title/title.md.vars.scss b/packages/core/src/components/title/title.md.vars.scss new file mode 100644 index 0000000000..7f3b94c124 --- /dev/null +++ b/packages/core/src/components/title/title.md.vars.scss @@ -0,0 +1,10 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Title +// -------------------------------------------------- + +/// @prop - Font size of the toolbar title +$toolbar-md-title-font-size: 2rem !default; + +/// @prop - Text color of the toolbar title +$toolbar-md-title-text-color: color-contrast($colors-md, $toolbar-md-background, md) !default; diff --git a/packages/core/src/components/title/title.scss b/packages/core/src/components/title/title.scss index 19bef4180b..a4016d3afc 100644 --- a/packages/core/src/components/title/title.scss +++ b/packages/core/src/components/title/title.scss @@ -1,6 +1,5 @@ @import "../../themes/ionic.globals"; - // Title // -------------------------------------------------- diff --git a/packages/core/src/components/toast/toast.ios.scss b/packages/core/src/components/toast/toast.ios.scss index 64fb6be736..da4f553bfb 100644 --- a/packages/core/src/components/toast/toast.ios.scss +++ b/packages/core/src/components/toast/toast.ios.scss @@ -1,43 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./toast"; +@import "./toast.ios.vars"; // iOS Toast // -------------------------------------------------- -/// @prop - Background of the toast wrapper -$toast-ios-background: rgba(237, 237, 239, 1) !default; - -/// @prop - Border radius of the toast wrapper -$toast-ios-border-radius: 14px !default; - -/// @prop - Color of the toast title -$toast-ios-title-color: rgba(71, 71, 71, 1) !default; - -/// @prop - Font size of the toast title -$toast-ios-title-font-size: 14px !default; - -/// @prop - Padding top of the toast title -$toast-ios-title-padding-top: 15px !default; - -/// @prop - Padding end of the toast title -$toast-ios-title-padding-end: $toast-ios-title-padding-top !default; - -/// @prop - Padding bottom of the toast title -$toast-ios-title-padding-bottom: $toast-ios-title-padding-top !default; - -/// @prop - Padding start of the toast title -$toast-ios-title-padding-start: $toast-ios-title-padding-end !default; - -/// @prop - Color of the toast button -$toast-ios-button-color: rgba(71, 71, 71, 1) !default; - -/// @prop - Filter of the translucent toast -$toast-ios-translucent-filter: saturate(180%) blur(20px) !default; - -/// @prop - Opacity of the translucent toast -$toast-ios-translucent-opacity: .88 !default; - - .toast-ios .toast-wrapper { @include position-horizontal(10px, 10px); @include margin(auto); diff --git a/packages/core/src/components/toast/toast.ios.vars.scss b/packages/core/src/components/toast/toast.ios.vars.scss new file mode 100644 index 0000000000..9237520990 --- /dev/null +++ b/packages/core/src/components/toast/toast.ios.vars.scss @@ -0,0 +1,37 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Toast +// -------------------------------------------------- + +/// @prop - Background of the toast wrapper +$toast-ios-background: rgba(237, 237, 239, 1) !default; + +/// @prop - Border radius of the toast wrapper +$toast-ios-border-radius: 14px !default; + +/// @prop - Color of the toast title +$toast-ios-title-color: rgba(71, 71, 71, 1) !default; + +/// @prop - Font size of the toast title +$toast-ios-title-font-size: 14px !default; + +/// @prop - Padding top of the toast title +$toast-ios-title-padding-top: 15px !default; + +/// @prop - Padding end of the toast title +$toast-ios-title-padding-end: $toast-ios-title-padding-top !default; + +/// @prop - Padding bottom of the toast title +$toast-ios-title-padding-bottom: $toast-ios-title-padding-top !default; + +/// @prop - Padding start of the toast title +$toast-ios-title-padding-start: $toast-ios-title-padding-end !default; + +/// @prop - Color of the toast button +$toast-ios-button-color: rgba(71, 71, 71, 1) !default; + +/// @prop - Filter of the translucent toast +$toast-ios-translucent-filter: saturate(180%) blur(20px) !default; + +/// @prop - Opacity of the translucent toast +$toast-ios-translucent-opacity: .88 !default; diff --git a/packages/core/src/components/toast/toast.md.scss b/packages/core/src/components/toast/toast.md.scss index 4626d5b703..f6e92b80e4 100644 --- a/packages/core/src/components/toast/toast.md.scss +++ b/packages/core/src/components/toast/toast.md.scss @@ -1,31 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./toast"; +@import "./toast.md.vars"; // Material Design Toast // -------------------------------------------------- -/// @prop - Background of the toast wrapper -$toast-md-background: #333 !default; - -/// @prop - Color of the toast title -$toast-md-title-color: #fff !default; - -/// @prop - Font size of the toast title -$toast-md-title-font-size: 1.5rem !default; - -/// @prop - Padding top of the toast title -$toast-md-title-padding-top: 19px !default; - -/// @prop - Padding end of the toast title -$toast-md-title-padding-end: 16px !default; - -/// @prop - Padding bottom of the toast title -$toast-md-title-padding-bottom: 17px !default; - -/// @prop - Padding start of the toast title -$toast-md-title-padding-start: $toast-md-title-padding-end !default; - - .toast-md .toast-wrapper { @include position-horizontal(0, 0); @include margin(auto); diff --git a/packages/core/src/components/toast/toast.md.vars.scss b/packages/core/src/components/toast/toast.md.vars.scss new file mode 100644 index 0000000000..e1c8b8bb2e --- /dev/null +++ b/packages/core/src/components/toast/toast.md.vars.scss @@ -0,0 +1,25 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Toast +// -------------------------------------------------- + +/// @prop - Background of the toast wrapper +$toast-md-background: #333 !default; + +/// @prop - Color of the toast title +$toast-md-title-color: #fff !default; + +/// @prop - Font size of the toast title +$toast-md-title-font-size: 1.5rem !default; + +/// @prop - Padding top of the toast title +$toast-md-title-padding-top: 19px !default; + +/// @prop - Padding end of the toast title +$toast-md-title-padding-end: 16px !default; + +/// @prop - Padding bottom of the toast title +$toast-md-title-padding-bottom: 17px !default; + +/// @prop - Padding start of the toast title +$toast-md-title-padding-start: $toast-md-title-padding-end !default; diff --git a/packages/core/src/components/toast/toast.scss b/packages/core/src/components/toast/toast.scss index 16c857466d..33fea4c9a5 100644 --- a/packages/core/src/components/toast/toast.scss +++ b/packages/core/src/components/toast/toast.scss @@ -1,16 +1,8 @@ -@import "../../themes/ionic.globals"; - +@import "./toast.vars"; // Toast // -------------------------------------------------- -/// @prop - Width of the toast -$toast-width: 100% !default; - -/// @prop - Max width of the toast -$toast-max-width: 700px !default; - - ion-toast { @include position(0, null, null, 0); diff --git a/packages/core/src/components/toast/toast.vars.scss b/packages/core/src/components/toast/toast.vars.scss new file mode 100644 index 0000000000..c108470135 --- /dev/null +++ b/packages/core/src/components/toast/toast.vars.scss @@ -0,0 +1,10 @@ +@import "../../themes/ionic.globals"; + +// Toast +// -------------------------------------------------- + +/// @prop - Width of the toast +$toast-width: 100% !default; + +/// @prop - Max width of the toast +$toast-max-width: 700px !default; diff --git a/packages/core/src/components/toggle/toggle.ios.scss b/packages/core/src/components/toggle/toggle.ios.scss index 48bd9661b9..15dde737cc 100644 --- a/packages/core/src/components/toggle/toggle.ios.scss +++ b/packages/core/src/components/toggle/toggle.ios.scss @@ -1,78 +1,5 @@ -@import "../../themes/ionic.globals.ios"; @import "./toggle"; - - -// iOS Toggle -// -------------------------------------------------- - -/// @prop - Width of the toggle -$toggle-ios-width: 51px !default; - -/// @prop - Height of the toggle -$toggle-ios-height: 32px !default; - -/// @prop - Border width of the toggle -$toggle-ios-border-width: 2px !default; - -/// @prop - Border radius of the toggle -$toggle-ios-border-radius: $toggle-ios-height / 2 !default; - -/// @prop - Background color of the unchecked toggle -$toggle-ios-background-color-off: $list-ios-background-color !default; - -/// @prop - Border color of the unchecked toggle -$toggle-ios-border-color-off: grayscale(lighten($list-ios-border-color, 11%)) !default; - -/// @prop - Background color of the checked toggle -$toggle-ios-background-color-on: color($colors-ios, primary) !default; - -/// @prop - Width of the toggle handle -$toggle-ios-handle-width: $toggle-ios-height - ($toggle-ios-border-width * 2) !default; - -/// @prop - Height of the toggle handle -$toggle-ios-handle-height: $toggle-ios-handle-width !default; - -/// @prop - Border radius of the toggle handle -$toggle-ios-handle-border-radius: $toggle-ios-handle-height / 2 !default; - -/// @prop - Box shadow of the toggle handle -$toggle-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1) !default; - -/// @prop - Background color of the toggle handle -$toggle-ios-handle-background-color: $toggle-ios-background-color-off !default; - -/// @prop - Margin of the toggle handle -$toggle-ios-media-margin: 0 !default; - -/// @prop - Transition duration of the toggle icon -$toggle-ios-transition-duration: 300ms !default; - -/// @prop - Opacity of the disabled toggle -$toggle-ios-disabled-opacity: .3 !default; - -/// @prop - Padding top of the toggle positioned on the start in an item -$toggle-ios-item-start-padding-top: 6px !default; - -/// @prop - Padding end of the toggle positioned on the start in an item -$toggle-ios-item-start-padding-end: 16px !default; - -/// @prop - Padding bottom of the toggle positioned on the start in an item -$toggle-ios-item-start-padding-bottom: 5px !default; - -/// @prop - Padding start of the toggle positioned on the start in an item -$toggle-ios-item-start-padding-start: 0 !default; - -/// @prop - Padding top of the toggle positioned on the end in an item -$toggle-ios-item-end-padding-top: 6px !default; - -/// @prop - Padding end of the toggle positioned on the end in an item -$toggle-ios-item-end-padding-end: ($item-ios-padding-end / 2) !default; - -/// @prop - Padding bottom of the toggle positioned on the end in an item -$toggle-ios-item-end-padding-bottom: 5px !default; - -/// @prop - Padding start of the toggle positioned on the end in an item -$toggle-ios-item-end-padding-start: $item-ios-padding-start !default; +@import "./toggle.ios.vars"; // iOS Toggle // ----------------------------------------- diff --git a/packages/core/src/components/toggle/toggle.ios.vars.scss b/packages/core/src/components/toggle/toggle.ios.vars.scss new file mode 100644 index 0000000000..4d70381789 --- /dev/null +++ b/packages/core/src/components/toggle/toggle.ios.vars.scss @@ -0,0 +1,73 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Toggle +// -------------------------------------------------- + +/// @prop - Width of the toggle +$toggle-ios-width: 51px !default; + +/// @prop - Height of the toggle +$toggle-ios-height: 32px !default; + +/// @prop - Border width of the toggle +$toggle-ios-border-width: 2px !default; + +/// @prop - Border radius of the toggle +$toggle-ios-border-radius: $toggle-ios-height / 2 !default; + +/// @prop - Background color of the unchecked toggle +$toggle-ios-background-color-off: $list-ios-background-color !default; + +/// @prop - Border color of the unchecked toggle +$toggle-ios-border-color-off: grayscale(lighten($list-ios-border-color, 11%)) !default; + +/// @prop - Background color of the checked toggle +$toggle-ios-background-color-on: color($colors-ios, primary) !default; + +/// @prop - Width of the toggle handle +$toggle-ios-handle-width: $toggle-ios-height - ($toggle-ios-border-width * 2) !default; + +/// @prop - Height of the toggle handle +$toggle-ios-handle-height: $toggle-ios-handle-width !default; + +/// @prop - Border radius of the toggle handle +$toggle-ios-handle-border-radius: $toggle-ios-handle-height / 2 !default; + +/// @prop - Box shadow of the toggle handle +$toggle-ios-handle-box-shadow: 0 3px 12px rgba(0, 0, 0, .16), 0 3px 1px rgba(0, 0, 0, .1) !default; + +/// @prop - Background color of the toggle handle +$toggle-ios-handle-background-color: $toggle-ios-background-color-off !default; + +/// @prop - Margin of the toggle handle +$toggle-ios-media-margin: 0 !default; + +/// @prop - Transition duration of the toggle icon +$toggle-ios-transition-duration: 300ms !default; + +/// @prop - Opacity of the disabled toggle +$toggle-ios-disabled-opacity: .3 !default; + +/// @prop - Padding top of the toggle positioned on the start in an item +$toggle-ios-item-start-padding-top: 6px !default; + +/// @prop - Padding end of the toggle positioned on the start in an item +$toggle-ios-item-start-padding-end: 16px !default; + +/// @prop - Padding bottom of the toggle positioned on the start in an item +$toggle-ios-item-start-padding-bottom: 5px !default; + +/// @prop - Padding start of the toggle positioned on the start in an item +$toggle-ios-item-start-padding-start: 0 !default; + +/// @prop - Padding top of the toggle positioned on the end in an item +$toggle-ios-item-end-padding-top: 6px !default; + +/// @prop - Padding end of the toggle positioned on the end in an item +$toggle-ios-item-end-padding-end: ($item-ios-padding-end / 2) !default; + +/// @prop - Padding bottom of the toggle positioned on the end in an item +$toggle-ios-item-end-padding-bottom: 5px !default; + +/// @prop - Padding start of the toggle positioned on the end in an item +$toggle-ios-item-end-padding-start: $item-ios-padding-start !default; diff --git a/packages/core/src/components/toggle/toggle.md.scss b/packages/core/src/components/toggle/toggle.md.scss index 1707d9d862..5347719ed6 100644 --- a/packages/core/src/components/toggle/toggle.md.scss +++ b/packages/core/src/components/toggle/toggle.md.scss @@ -1,96 +1,5 @@ -@import "../../themes/ionic.globals.md"; @import "./toggle"; - - -// Material Design Toggle -// -------------------------------------------------- - -/// @prop - Color of the active toggle -$toggle-md-active-color: color($colors-md, primary) !default; - -/// @prop - Width of the toggle track -$toggle-md-track-width: 36px !default; - -/// @prop - Height of the toggle track -$toggle-md-track-height: 14px !default; - -/// @prop - Background color of the toggle track -$toggle-md-track-background-color-off: $list-md-border-color !default; - -/// @prop - Background color of the checked toggle track -$toggle-md-track-background-color-on: lighten($toggle-md-active-color, 25%) !default; - -/// @prop - Width of the toggle handle -$toggle-md-handle-width: 20px !default; - -/// @prop - Height of the toggle handle -$toggle-md-handle-height: 20px !default; - -/// @prop - Border radius of the toggle handle -$toggle-md-handle-border-radius: 50% !default; - -/// @prop - Box shadow of the toggle handle -$toggle-md-handle-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; - -/// @prop - Background color of the toggle handle -$toggle-md-handle-background-color-off: $background-md-color !default; - -/// @prop - Background color of the checked toggle handle -$toggle-md-handle-background-color-on: $toggle-md-active-color !default; - -/// @prop - Margin top of the toggle -$toggle-md-media-margin-top: 0 !default; - -/// @prop - Margin end of the toggle -$toggle-md-media-margin-end: $toggle-md-media-margin-top !default; - -/// @prop - Margin bottom of the toggle -$toggle-md-media-margin-bottom: $toggle-md-media-margin-top !default; - -/// @prop - Margin start of the toggle -$toggle-md-media-margin-start: $toggle-md-media-margin-end !default; - -/// @prop - Transition duration of the toggle icon -$toggle-md-transition-duration: 300ms !default; - -/// @prop - Opacity of the disabled toggle -$toggle-md-disabled-opacity: .3 !default; - -/// @prop - Padding top of standalone toggle -$toggle-md-padding-top: 12px !default; - -/// @prop - Padding end of standalone toggle -$toggle-md-padding-end: $toggle-md-padding-top !default; - -/// @prop - Padding bottom of standalone toggle -$toggle-md-padding-bottom: $toggle-md-padding-top !default; - -/// @prop - Padding start of standalone toggle -$toggle-md-padding-start: $toggle-md-padding-end !default; - -/// @prop - Padding top of the toggle positioned on the start in an item -$toggle-md-item-start-padding-top: 12px !default; - -/// @prop - Padding end of the toggle positioned on the start in an item -$toggle-md-item-start-padding-end: 18px !default; - -/// @prop - Padding bottom of the toggle positioned on the start in an item -$toggle-md-item-start-padding-bottom: 12px !default; - -/// @prop - Padding start the toggle positioned on the start in an item -$toggle-md-item-start-padding-start: 2px !default; - -/// @prop - Padding top of the toggle positioned on the end in an item -$toggle-md-item-end-padding-top: 12px !default; - -/// @prop - Padding end of the toggle positioned on the end in an item -$toggle-md-item-end-padding-end: ($item-md-padding-end / 2) !default; - -/// @prop - Padding bottom of the toggle positioned on the end in an item -$toggle-md-item-end-padding-bottom: 12px !default; - -/// @prop - Padding start of the toggle positioned on the end in an item -$toggle-md-item-end-padding-start: $item-md-padding-start !default; +@import "./toggle.md.vars"; // Material Design Toggle // ----------------------------------------- diff --git a/packages/core/src/components/toggle/toggle.md.vars.scss b/packages/core/src/components/toggle/toggle.md.vars.scss new file mode 100644 index 0000000000..b4e9fae42b --- /dev/null +++ b/packages/core/src/components/toggle/toggle.md.vars.scss @@ -0,0 +1,91 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Toggle +// -------------------------------------------------- + +/// @prop - Color of the active toggle +$toggle-md-active-color: color($colors-md, primary) !default; + +/// @prop - Width of the toggle track +$toggle-md-track-width: 36px !default; + +/// @prop - Height of the toggle track +$toggle-md-track-height: 14px !default; + +/// @prop - Background color of the toggle track +$toggle-md-track-background-color-off: $list-md-border-color !default; + +/// @prop - Background color of the checked toggle track +$toggle-md-track-background-color-on: lighten($toggle-md-active-color, 25%) !default; + +/// @prop - Width of the toggle handle +$toggle-md-handle-width: 20px !default; + +/// @prop - Height of the toggle handle +$toggle-md-handle-height: 20px !default; + +/// @prop - Border radius of the toggle handle +$toggle-md-handle-border-radius: 50% !default; + +/// @prop - Box shadow of the toggle handle +$toggle-md-handle-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; + +/// @prop - Background color of the toggle handle +$toggle-md-handle-background-color-off: $background-md-color !default; + +/// @prop - Background color of the checked toggle handle +$toggle-md-handle-background-color-on: $toggle-md-active-color !default; + +/// @prop - Margin top of the toggle +$toggle-md-media-margin-top: 0 !default; + +/// @prop - Margin end of the toggle +$toggle-md-media-margin-end: $toggle-md-media-margin-top !default; + +/// @prop - Margin bottom of the toggle +$toggle-md-media-margin-bottom: $toggle-md-media-margin-top !default; + +/// @prop - Margin start of the toggle +$toggle-md-media-margin-start: $toggle-md-media-margin-end !default; + +/// @prop - Transition duration of the toggle icon +$toggle-md-transition-duration: 300ms !default; + +/// @prop - Opacity of the disabled toggle +$toggle-md-disabled-opacity: .3 !default; + +/// @prop - Padding top of standalone toggle +$toggle-md-padding-top: 12px !default; + +/// @prop - Padding end of standalone toggle +$toggle-md-padding-end: $toggle-md-padding-top !default; + +/// @prop - Padding bottom of standalone toggle +$toggle-md-padding-bottom: $toggle-md-padding-top !default; + +/// @prop - Padding start of standalone toggle +$toggle-md-padding-start: $toggle-md-padding-end !default; + +/// @prop - Padding top of the toggle positioned on the start in an item +$toggle-md-item-start-padding-top: 12px !default; + +/// @prop - Padding end of the toggle positioned on the start in an item +$toggle-md-item-start-padding-end: 18px !default; + +/// @prop - Padding bottom of the toggle positioned on the start in an item +$toggle-md-item-start-padding-bottom: 12px !default; + +/// @prop - Padding start the toggle positioned on the start in an item +$toggle-md-item-start-padding-start: 2px !default; + +/// @prop - Padding top of the toggle positioned on the end in an item +$toggle-md-item-end-padding-top: 12px !default; + +/// @prop - Padding end of the toggle positioned on the end in an item +$toggle-md-item-end-padding-end: ($item-md-padding-end / 2) !default; + +/// @prop - Padding bottom of the toggle positioned on the end in an item +$toggle-md-item-end-padding-bottom: 12px !default; + +/// @prop - Padding start of the toggle positioned on the end in an item +$toggle-md-item-end-padding-start: $item-md-padding-start !default; diff --git a/packages/core/src/components/toggle/toggle.scss b/packages/core/src/components/toggle/toggle.scss index 0ba8a067a0..1f239fa664 100644 --- a/packages/core/src/components/toggle/toggle.scss +++ b/packages/core/src/components/toggle/toggle.scss @@ -1,6 +1,5 @@ @import "../../themes/ionic.globals"; - // Toggle // -------------------------------------------------- diff --git a/packages/core/src/components/toolbar/toolbar-button.scss b/packages/core/src/components/toolbar/toolbar-button.scss deleted file mode 100644 index d88cc79044..0000000000 --- a/packages/core/src/components/toolbar/toolbar-button.scss +++ /dev/null @@ -1,63 +0,0 @@ -@import "../../themes/ionic.globals"; - -// Toolbar Buttons -// -------------------------------------------------- - -.bar-button { - @include margin(0); - @include padding(0); - @include text-align(center); - @include appearance(none); - - position: relative; - display: inline-block; - - line-height: 1; - text-overflow: ellipsis; - text-transform: none; - white-space: nowrap; - - cursor: pointer; - - vertical-align: top; // the better option for most scenarios - vertical-align: -webkit-baseline-middle; // the best for those that support it - - user-select: none; -} - -.bar-button::after { - @include position(-7px, -2px, -6px, -2px); - - // used to make the button's hit area larger - position: absolute; - - content: ""; -} - - -// Menu Toggle -// -------------------------------------------------- - -.bar-button-menutoggle { - display: flex; - - align-items: center; -} - - -// Back Button -// -------------------------------------------------- - -.back-button { - display: none; -} - -.back-button.show-back-button { - display: inline-block; -} - -.back-button-text { - display: flex; - - align-items: center; -} diff --git a/packages/core/src/components/toolbar/toolbar.ios.scss b/packages/core/src/components/toolbar/toolbar.ios.scss index ff1ae0c48f..3a76713f1a 100644 --- a/packages/core/src/components/toolbar/toolbar.ios.scss +++ b/packages/core/src/components/toolbar/toolbar.ios.scss @@ -1,45 +1,9 @@ -@import "../../themes/ionic.globals.ios"; @import "./toolbar"; -@import "./toolbar-button"; - +@import "./toolbar.ios.vars"; // iOS Toolbar // -------------------------------------------------- -/// @prop - Order of the toolbar elements -$toolbar-order-ios: ( - back-button: 0, - menu-toggle-start: 1, - buttons-start: 2, - buttons-mode-start: 3, - content: 4, - buttons-mode-end: 5, - buttons-end: 6, - menu-toggle-end: 7, -); - -/// @prop - Font size of the toolbar button -$toolbar-ios-button-font-size: 1.7rem !default; - -/// @prop - Text color of the toolbar button -$toolbar-ios-button-color: color-contrast($colors-ios, $toolbar-ios-background, ios) !default; - -/// @prop - Border radius of the toolbar button -$toolbar-ios-button-border-radius: 4px !default; - -/// @prop - Font weight of the strong toolbar button -$toolbar-ios-button-strong-font-weight: 600 !default; - -/// @prop - Height of the navigation bar -$navbar-ios-height: $toolbar-ios-height !default; - -/// @prop - Filter of the translucent toolbar -$toolbar-ios-translucent-filter: saturate(180%) blur(20px) !default; - -/// @prop - Opacity of the translucent toolbar -$toolbar-ios-translucent-opacity: .88 !default; - - .toolbar-ios { @include padding($toolbar-ios-padding); diff --git a/packages/core/src/components/toolbar/toolbar.ios.vars.scss b/packages/core/src/components/toolbar/toolbar.ios.vars.scss new file mode 100644 index 0000000000..287ac03381 --- /dev/null +++ b/packages/core/src/components/toolbar/toolbar.ios.vars.scss @@ -0,0 +1,37 @@ +@import "../../themes/ionic.globals.ios"; + +// iOS Toolbar +// -------------------------------------------------- + +/// @prop - Order of the toolbar elements +$toolbar-order-ios: ( + back-button: 0, + menu-toggle-start: 1, + buttons-start: 2, + buttons-mode-start: 3, + content: 4, + buttons-mode-end: 5, + buttons-end: 6, + menu-toggle-end: 7, +); + +/// @prop - Font size of the toolbar button +$toolbar-ios-button-font-size: 1.7rem !default; + +/// @prop - Text color of the toolbar button +$toolbar-ios-button-color: color-contrast($colors-ios, $toolbar-ios-background, ios) !default; + +/// @prop - Border radius of the toolbar button +$toolbar-ios-button-border-radius: 4px !default; + +/// @prop - Font weight of the strong toolbar button +$toolbar-ios-button-strong-font-weight: 600 !default; + +/// @prop - Height of the navigation bar +$navbar-ios-height: $toolbar-ios-height !default; + +/// @prop - Filter of the translucent toolbar +$toolbar-ios-translucent-filter: saturate(180%) blur(20px) !default; + +/// @prop - Opacity of the translucent toolbar +$toolbar-ios-translucent-opacity: .88 !default; diff --git a/packages/core/src/components/toolbar/toolbar.md.scss b/packages/core/src/components/toolbar/toolbar.md.scss index 435255ee84..1b0b14cf23 100644 --- a/packages/core/src/components/toolbar/toolbar.md.scss +++ b/packages/core/src/components/toolbar/toolbar.md.scss @@ -1,39 +1,9 @@ -@import "../../themes/ionic.globals.md"; @import "./toolbar"; -@import "./toolbar-button"; - +@import "./toolbar.md.vars"; // Material Design Toolbar // -------------------------------------------------- -/// @prop - Order of the toolbar elements -$toolbar-order-md: ( - back-button: 0, - menu-toggle-start: 1, - buttons-start: 2, - content: 3, - buttons-mode-start: 4, - buttons-mode-end: 5, - buttons-end: 6, - menu-toggle-end: 7, -); - -/// @prop - Font size of the toolbar button -$toolbar-md-button-font-size: 1.4rem !default; - -/// @prop - Text color of the toolbar button -$toolbar-md-button-color: color-contrast($colors-md, $toolbar-md-background, md) !default; - -/// @prop - Border radius of the toolbar button -$toolbar-md-button-border-radius: 2px !default; - -/// @prop - Font weight of the strong toolbar button -$toolbar-md-button-strong-font-weight: bold !default; - -/// @prop - Height of the navigation bar -$navbar-md-height: $toolbar-md-height !default; - - .toolbar-md { @include padding($toolbar-md-padding); diff --git a/packages/core/src/components/toolbar/toolbar.md.vars.scss b/packages/core/src/components/toolbar/toolbar.md.vars.scss new file mode 100644 index 0000000000..5e8eb40d5b --- /dev/null +++ b/packages/core/src/components/toolbar/toolbar.md.vars.scss @@ -0,0 +1,31 @@ +@import "../../themes/ionic.globals.md"; + +// Material Design Toolbar +// -------------------------------------------------- + +/// @prop - Order of the toolbar elements +$toolbar-order-md: ( + back-button: 0, + menu-toggle-start: 1, + buttons-start: 2, + content: 3, + buttons-mode-start: 4, + buttons-mode-end: 5, + buttons-end: 6, + menu-toggle-end: 7, +); + +/// @prop - Font size of the toolbar button +$toolbar-md-button-font-size: 1.4rem !default; + +/// @prop - Text color of the toolbar button +$toolbar-md-button-color: color-contrast($colors-md, $toolbar-md-background, md) !default; + +/// @prop - Border radius of the toolbar button +$toolbar-md-button-border-radius: 2px !default; + +/// @prop - Font weight of the strong toolbar button +$toolbar-md-button-strong-font-weight: bold !default; + +/// @prop - Height of the navigation bar +$navbar-md-height: $toolbar-md-height !default; diff --git a/packages/core/src/components/toolbar/toolbar.scss b/packages/core/src/components/toolbar/toolbar.scss index 377a9d4694..482aee47b3 100644 --- a/packages/core/src/components/toolbar/toolbar.scss +++ b/packages/core/src/components/toolbar/toolbar.scss @@ -1,6 +1,5 @@ @import "../../themes/ionic.globals"; - // Toolbar // -------------------------------------------------- @@ -82,3 +81,66 @@ ion-navbar.toolbar { transform: translateZ(0); } + + +// Toolbar Buttons +// -------------------------------------------------- + +.bar-button { + @include margin(0); + @include padding(0); + @include text-align(center); + @include appearance(none); + + position: relative; + display: inline-block; + + line-height: 1; + text-overflow: ellipsis; + text-transform: none; + white-space: nowrap; + + cursor: pointer; + + vertical-align: top; // the better option for most scenarios + vertical-align: -webkit-baseline-middle; // the best for those that support it + + user-select: none; +} + +.bar-button::after { + @include position(-7px, -2px, -6px, -2px); + + // used to make the button's hit area larger + position: absolute; + + content: ""; +} + + +// Menu Toggle +// -------------------------------------------------- + +.bar-button-menutoggle { + display: flex; + + align-items: center; +} + + +// Back Button +// -------------------------------------------------- + +.back-button { + display: none; +} + +.back-button.show-back-button { + display: inline-block; +} + +.back-button-text { + display: flex; + + align-items: center; +} diff --git a/packages/core/src/themes/ionic.components.scss b/packages/core/src/themes/ionic.components.scss index 97875e6dea..69bb47e2fb 100644 --- a/packages/core/src/themes/ionic.components.scss +++ b/packages/core/src/themes/ionic.components.scss @@ -27,7 +27,6 @@ @import "../components/button/button", -"../components/button/button-icon", "../components/button/button.ios", "../components/button/button.md"; @@ -188,7 +187,6 @@ @import "../components/toolbar/toolbar", -"../components/toolbar/toolbar-button", "../components/toolbar/toolbar.ios", "../components/toolbar/toolbar.md";