From a30379bef6bf323b512b12eeb6904abab4690115 Mon Sep 17 00:00:00 2001 From: Amit Moryossef Date: Fri, 12 May 2017 20:05:45 +0300 Subject: [PATCH] feat(rtl): add rtl margin, padding, position and border-radius (#11342) * refactor(item): replaced item-left with item-start replaced item-right with item-end * style(item): fix spacing * fix(item): add backwards support for left/right in ng-content * fix(item): deprecated old variables, not breaking change * feat(rtl): padding mixin * feat(rtl): change all padding variables to start/end add support for old variable names * feat(rtl): replace all padding-side with start/end * revert(functions): remove mixins * feat(scss): add padding-horizontal and rtl functions (thanks brandy) * feat(padding): use padding horizontal mixin everywhere * feat(padding): use padding horizontal mixin everywhere * fix(lint): change properties order. tests passing * fix(sass-functions): reorder functions to avoid warning * fix(scss): fix variable name * perf(rtl): add check if need rtl selector * feat(scss): add full padding function * feat(scss): add border-radius mixin * fix(rtl): change border-radius to use mixin * perf(scss): only override if has something to override * feat(scss): add margin scss variables for sides * feat(scss): add margin mixin * fix(scss): fix wrong support for 2/3 args * feat(rtl): spread margins/paddings * feat(rtl): spread margins/paddings * feat(position): add rtl support for absolute * fix(rtl): add missing calls * fix(item): old attributes deprecated support * revert(changelog): not intended to be changed * fix(sass-functions): and not && * fix(padding): merge + missing padding * style(): remove newline * refactor(mixins): move mixins to mixins file * style(): fix alignment * fix(item): right padding should not be set * fix(): incorrect defaults * feat(scss-lint): disable some side variables * fix(scss): lint passes * feat(lint): disabled text-align * fix(): correct variable name * fix(fab): missed a comma * fix(rtl): rtl method incorrect for multiple selectors * fix(rtl): toolbar bad merge * fix(rtl): icon-only is in px not em * fix(rtl): toggle padding * feat(rtl): correct notation for rtl custom * Merge branch 'breaking-item' into start-end # Conflicts: # src/components/checkbox/checkbox.ios.scss # src/components/checkbox/checkbox.md.scss # src/components/checkbox/checkbox.wp.scss # src/components/item/item.ios.scss # src/components/item/item.md.scss # src/components/item/item.wp.scss # src/components/radio/radio.ios.scss # src/components/radio/radio.md.scss # src/components/radio/radio.wp.scss # src/components/toggle/toggle.ios.scss # src/components/toggle/toggle.md.scss # src/components/toggle/toggle.wp.scss * fix(scss): fix for deprecated usages --- .scss-lint.yml | 37 +-- scripts/gulp/tasks/lint.ts | 3 +- .../action-sheet/action-sheet.ios.scss | 32 ++- .../action-sheet/action-sheet.md.scss | 71 ++++-- src/components/action-sheet/action-sheet.scss | 12 +- .../action-sheet/action-sheet.wp.scss | 70 ++++-- src/components/alert/alert.ios.scss | 179 ++++++++++--- src/components/alert/alert.md.scss | 207 +++++++++++---- src/components/alert/alert.scss | 27 +- src/components/alert/alert.wp.scss | 230 +++++++++++++---- src/components/app/app.scss | 46 ++-- src/components/backdrop/backdrop.scss | 4 +- src/components/badge/badge.ios.scss | 3 +- src/components/badge/badge.md.scss | 3 +- src/components/badge/badge.scss | 3 +- src/components/badge/badge.wp.scss | 3 +- src/components/button/button-icon.scss | 8 +- src/components/button/button.ios.scss | 121 +++++++-- src/components/button/button.md.scss | 130 +++++++--- src/components/button/button.scss | 19 +- src/components/button/button.wp.scss | 120 +++++++-- src/components/card/card.ios.scss | 97 +++++-- src/components/card/card.md.scss | 97 +++++-- src/components/card/card.wp.scss | 97 +++++-- src/components/checkbox/checkbox.ios.scss | 47 +++- src/components/checkbox/checkbox.md.scss | 55 ++-- src/components/checkbox/checkbox.wp.scss | 54 ++-- src/components/chip/chip.ios.scss | 43 +++- src/components/chip/chip.md.scss | 43 +++- src/components/chip/chip.scss | 33 ++- src/components/chip/chip.wp.scss | 43 +++- src/components/content/content.ios.scss | 4 +- src/components/content/content.scss | 46 ++-- src/components/datetime/datetime.ios.scss | 14 +- src/components/datetime/datetime.md.scss | 14 +- src/components/datetime/datetime.scss | 2 +- src/components/datetime/datetime.wp.scss | 16 +- src/components/fab/fab.scss | 41 +-- src/components/grid/grid.mixins.scss | 26 +- src/components/grid/grid.ts | 2 +- .../infinite-scroll/infinite-scroll.scss | 43 +++- src/components/input/input.ios.scss | 37 ++- src/components/input/input.md.scss | 37 ++- src/components/input/input.scss | 17 +- src/components/input/input.wp.scss | 33 +-- src/components/item/item-media.scss | 4 +- src/components/item/item-sliding.scss | 26 +- src/components/item/item.ios.scss | 59 +++-- src/components/item/item.md.scss | 40 ++- src/components/item/item.scss | 17 +- src/components/item/item.wp.scss | 46 ++-- src/components/label/label.ios.scss | 23 +- src/components/label/label.md.scss | 22 +- src/components/label/label.scss | 4 +- src/components/label/label.wp.scss | 5 +- src/components/list/list.ios.scss | 41 +-- src/components/list/list.md.scss | 60 ++--- src/components/list/list.scss | 12 +- src/components/list/list.wp.scss | 57 +++-- src/components/loading/loading.ios.scss | 25 +- src/components/loading/loading.md.scss | 25 +- src/components/loading/loading.scss | 6 +- src/components/loading/loading.wp.scss | 25 +- src/components/menu/menu.scss | 15 +- src/components/modal/modal.ios.scss | 4 +- src/components/modal/modal.md.scss | 4 +- src/components/modal/modal.scss | 12 +- src/components/picker/picker.ios.scss | 56 ++++- src/components/picker/picker.md.scss | 55 +++- src/components/picker/picker.scss | 17 +- src/components/picker/picker.wp.scss | 57 ++++- src/components/popover/popover.ios.scss | 10 +- src/components/popover/popover.md.scss | 3 +- src/components/popover/popover.scss | 7 +- src/components/popover/popover.wp.scss | 3 +- src/components/radio/radio.ios.scss | 58 +++-- src/components/radio/radio.md.scss | 77 ++++-- src/components/radio/radio.wp.scss | 77 ++++-- src/components/range/range.ios.scss | 62 +++-- src/components/range/range.md.scss | 53 ++-- src/components/range/range.wp.scss | 61 +++-- src/components/refresher/refresher.scss | 6 +- src/components/scroll/scroll.scss | 6 +- src/components/searchbar/searchbar.ios.scss | 35 ++- src/components/searchbar/searchbar.md.scss | 49 ++-- src/components/searchbar/searchbar.scss | 6 +- src/components/searchbar/searchbar.ts | 4 +- src/components/searchbar/searchbar.wp.scss | 40 +-- src/components/segment/segment.ios.scss | 21 +- src/components/segment/segment.md.scss | 24 +- src/components/segment/segment.scss | 4 +- src/components/segment/segment.wp.scss | 25 +- src/components/select/select.ios.scss | 18 +- src/components/select/select.md.scss | 20 +- src/components/select/select.scss | 10 +- src/components/select/select.wp.scss | 29 ++- src/components/slides/slides.scss | 85 ++++--- src/components/spinner/spinner.scss | 4 +- src/components/split-pane/split-pane.scss | 18 +- src/components/tabs/tabs.ios.scss | 24 +- src/components/tabs/tabs.md.scss | 73 ++++-- src/components/tabs/tabs.scss | 29 +-- src/components/tabs/tabs.wp.scss | 25 +- src/components/toast/toast.ios.scss | 32 ++- src/components/toast/toast.md.scss | 30 ++- src/components/toast/toast.scss | 7 +- src/components/toast/toast.wp.scss | 32 ++- src/components/toggle/toggle.ios.scss | 63 +++-- src/components/toggle/toggle.md.scss | 95 +++++-- src/components/toggle/toggle.wp.scss | 53 ++-- src/components/toolbar/toolbar-button.scss | 11 +- src/components/toolbar/toolbar.ios.scss | 36 +-- src/components/toolbar/toolbar.md.scss | 49 ++-- src/components/toolbar/toolbar.scss | 8 +- src/components/toolbar/toolbar.wp.scss | 62 +++-- .../virtual-scroll/virtual-scroll.scss | 5 +- src/themes/ionic.functions.scss | 86 +++---- src/themes/ionic.mixins.scss | 236 ++++++++++++++++++ src/themes/ionic.theme.dark.ios.scss | 4 + src/themes/ionic.theme.dark.md.scss | 4 + src/themes/ionic.theme.dark.wp.scss | 4 + src/themes/ionic.theme.default.ios.scss | 4 + src/themes/ionic.theme.default.md.scss | 4 + src/themes/ionic.theme.default.wp.scss | 4 + src/themes/util.scss | 7 +- 125 files changed, 3289 insertions(+), 1499 deletions(-) diff --git a/.scss-lint.yml b/.scss-lint.yml index 8f47412b545..8d2150cfc7a 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -37,13 +37,10 @@ linters: - position - top - - right - bottom - - left - z-index - display - overflow - - float - clear - - flex @@ -59,16 +56,10 @@ linters: - justify-content - order - - - margin - margin-top - - margin-right - margin-bottom - - margin-left - - padding - padding-top - - padding-right - padding-bottom - - padding-left - - width - min-width @@ -104,12 +95,6 @@ linters: - border-bottom-style - border-left-style - - border-radius - - border-top-left-radius - - border-top-right-radius - - border-bottom-left-radius - - border-bottom-right-radius - - border-color - border-top-color - border-right-color @@ -135,7 +120,6 @@ linters: - letter-spacing - line-height - list-style - - text-align - text-decoration - text-indent - text-overflow @@ -207,3 +191,24 @@ linters: PropertySpelling: extra_properties: - contain + disabled_properties: + - right + - left + + - float + + - padding + - padding-left + - padding-right + + - margin + - margin-left + - margin-right + + - border-radius + - border-top-left-radius + - border-top-right-radius + - border-bottom-right-radius + - border-bottom-left-radius + + - text-align diff --git a/scripts/gulp/tasks/lint.ts b/scripts/gulp/tasks/lint.ts index c4e87ad802b..6a6df57742e 100644 --- a/scripts/gulp/tasks/lint.ts +++ b/scripts/gulp/tasks/lint.ts @@ -17,7 +17,8 @@ task('lint.sass', function() { return src([ 'src/**/*.scss', '!src/components/*/test/**/*', - '!src/util/test/*' + '!src/util/test/*', + '!src/themes/normalize.scss', ]) .pipe(scsslint()) .pipe(scsslint.failReporter()); diff --git a/src/components/action-sheet/action-sheet.ios.scss b/src/components/action-sheet/action-sheet.ios.scss index 13de9dfcf89..c95aa3393b5 100644 --- a/src/components/action-sheet/action-sheet.ios.scss +++ b/src/components/action-sheet/action-sheet.ios.scss @@ -6,8 +6,20 @@ /// @prop - Text align of the action sheet $action-sheet-ios-text-align: center !default; -/// @prop - Padding of the action sheet -$action-sheet-ios-padding: 0 10px !default; +// deprecated +$action-sheet-ios-padding: null !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 - Bottom margin of the action sheet button group $action-sheet-ios-group-margin-bottom: 10px !default; @@ -78,15 +90,18 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default; } .action-sheet-ios .action-sheet-container { - padding: $action-sheet-ios-padding; + @include deprecated-variable(padding, $action-sheet-ios-padding) { + @include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start); + } } .action-sheet-ios .action-sheet-group { + @include border-radius($action-sheet-ios-border-radius); + overflow: hidden; margin-bottom: $action-sheet-ios-group-margin-bottom - 2; - border-radius: $action-sheet-ios-border-radius; background: $action-sheet-ios-background; } @@ -95,20 +110,19 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default; } .action-sheet-ios .action-sheet-title { + @include padding($action-sheet-ios-title-padding); @include text-align($action-sheet-ios-text-align); - - padding: $action-sheet-ios-title-padding; + @include border-radius($action-sheet-ios-title-border-radius); border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color; - border-radius: $action-sheet-ios-title-border-radius; font-size: $action-sheet-ios-title-font-size; font-weight: $action-sheet-ios-title-font-weight; color: $action-sheet-ios-title-color; } .action-sheet-ios .action-sheet-button { - margin: 0; - padding: $action-sheet-ios-button-padding; + @include margin(0); + @include padding($action-sheet-ios-button-padding); min-height: $action-sheet-ios-button-min-height; diff --git a/src/components/action-sheet/action-sheet.md.scss b/src/components/action-sheet/action-sheet.md.scss index 2c85ba50b25..e9a820c92fe 100644 --- a/src/components/action-sheet/action-sheet.md.scss +++ b/src/components/action-sheet/action-sheet.md.scss @@ -18,8 +18,20 @@ $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 of the action sheet title -$action-sheet-md-title-padding: 11px 16px 17px !default; +// deprecated +$action-sheet-md-title-padding: null !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; @@ -30,8 +42,20 @@ $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 of the action sheet button -$action-sheet-md-button-padding: 0 16px !default; +// deprecated +$action-sheet-md-button-padding: null !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; @@ -51,11 +75,23 @@ $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 of the icon in the action sheet button -$action-sheet-md-icon-margin: 0 32px 0 0 !default; +// deprecated +$action-sheet-md-icon-margin: null !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; .action-sheet-md .action-sheet-container { - padding: .8rem 0; + @include padding(.8rem, 0); background: $action-sheet-md-background; } @@ -63,10 +99,12 @@ $action-sheet-md-icon-margin: 0 32px 0 0 !default; .action-sheet-md .action-sheet-title { @include text-align($action-sheet-md-text-align); - padding: $action-sheet-md-title-padding; - font-size: $action-sheet-md-title-font-size; color: $action-sheet-md-title-color; + + @include deprecated-variable(padding, $action-sheet-md-title-padding) { + @include padding($action-sheet-md-title-padding-top, $action-sheet-md-title-padding-end, $action-sheet-md-title-padding-bottom, $action-sheet-md-title-padding-start); + } } .action-sheet-md .action-sheet-button { @@ -75,13 +113,16 @@ $action-sheet-md-icon-margin: 0 32px 0 0 !default; position: relative; overflow: hidden; - padding: $action-sheet-md-button-padding; - min-height: $action-sheet-md-button-min-height; font-size: $action-sheet-md-button-font-size; color: $action-sheet-md-button-text-color; background: $action-sheet-md-button-background; + + + @include deprecated-variable(padding, $action-sheet-md-button-padding) { + @include padding($action-sheet-md-button-padding-top, $action-sheet-md-button-padding-end, $action-sheet-md-button-padding-bottom, $action-sheet-md-button-padding-start); + } } .action-sheet-md .action-sheet-button.activated { @@ -89,15 +130,17 @@ $action-sheet-md-icon-margin: 0 32px 0 0 !default; } .action-sheet-md .action-sheet-icon { + @include padding(0); @include text-align($action-sheet-md-icon-text-align); - margin: $action-sheet-md-icon-margin; - padding: 0; - width: $action-sheet-md-icon-width; font-size: $action-sheet-md-icon-font-size; vertical-align: $action-sheet-md-icon-vertical-align; + + @include deprecated-variable(margin, $action-sheet-md-icon-margin) { + @include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start); + } } .action-sheet-md .action-sheet-group { diff --git a/src/components/action-sheet/action-sheet.scss b/src/components/action-sheet/action-sheet.scss index 18e17dd9ec8..7b772fc8ec4 100644 --- a/src/components/action-sheet/action-sheet.scss +++ b/src/components/action-sheet/action-sheet.scss @@ -11,9 +11,9 @@ $action-sheet-max-width: 500px !default; ion-action-sheet { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; z-index: $z-index-overlay; display: block; @@ -22,15 +22,13 @@ ion-action-sheet { } .action-sheet-wrapper { + @include position(null, 0, 0, 0); + @include margin(auto); + position: absolute; - right: 0; - bottom: 0; - left: 0; z-index: $z-index-overlay-wrapper; display: block; - margin: auto; - width: $action-sheet-width; max-width: $action-sheet-max-width; diff --git a/src/components/action-sheet/action-sheet.wp.scss b/src/components/action-sheet/action-sheet.wp.scss index cc2ea65437c..2a18a4dc178 100644 --- a/src/components/action-sheet/action-sheet.wp.scss +++ b/src/components/action-sheet/action-sheet.wp.scss @@ -15,8 +15,20 @@ $action-sheet-wp-box-shadow-color: rgba(0, 0, 0, .2) !default; /// @prop - Box shadow of the action sheet $action-sheet-wp-box-shadow: 0 -1px 0 $action-sheet-wp-box-shadow-color !default; -/// @prop - Padding of the action sheet title -$action-sheet-wp-title-padding: 11px 16px 17px !default; +// deprecated +$action-sheet-wp-title-padding: null !default; + +/// @prop - Padding top of the action sheet title +$action-sheet-wp-title-padding-top: 11px !default; + +/// @prop - Padding end of the action sheet title +$action-sheet-wp-title-padding-end: 16px !default; + +/// @prop - Padding bottom of the action sheet title +$action-sheet-wp-title-padding-bottom: 17px !default; + +/// @prop - Padding start of the action sheet title +$action-sheet-wp-title-padding-start: $action-sheet-wp-title-padding-end !default; /// @prop - Font size of the action sheet title $action-sheet-wp-title-font-size: 2rem !default; @@ -36,8 +48,20 @@ $action-sheet-wp-button-text-color: #4d4d4d !default; /// @prop - Font size of the action sheet button $action-sheet-wp-button-font-size: 1.5rem !default; -/// @prop - Padding of the action sheet button -$action-sheet-wp-button-padding: 0 16px !default; +// deprecated +$action-sheet-wp-button-padding: null !default; + +/// @prop - Padding top of the action sheet button +$action-sheet-wp-button-padding-top: 0 !default; + +/// @prop - Padding end of the action sheet button +$action-sheet-wp-button-padding-end: 16px !default; + +/// @prop - Padding bottom of the action sheet button +$action-sheet-wp-button-padding-bottom: $action-sheet-wp-button-padding-top !default; + +/// @prop - Padding start of the action sheet button +$action-sheet-wp-button-padding-start: $action-sheet-wp-button-padding-end !default; /// @prop - Text align of the action sheet button $action-sheet-wp-button-text-align: $action-sheet-wp-text-align !default; @@ -60,8 +84,20 @@ $action-sheet-wp-icon-text-align: center !default; /// @prop - Vertical align of the icon in the action sheet button $action-sheet-wp-icon-vertical-align: middle !default; -/// @prop - Margin of the icon in the action sheet button -$action-sheet-wp-icon-margin: 0 20px 0 0 !default; +// deprecated +$action-sheet-wp-icon-margin: null !default; + +/// @prop - Margin top of the icon in the action sheet button +$action-sheet-wp-icon-margin-top: 0 !default; + +/// @prop - Margin end of the icon in the action sheet button +$action-sheet-wp-icon-margin-end: 20px !default; + +/// @prop - Margin bottom of the icon in the action sheet button +$action-sheet-wp-icon-margin-bottom: 0 !default; + +/// @prop - Margin start of the icon in the action sheet button +$action-sheet-wp-icon-margin-start: 0 !default; .action-sheet-wp .action-sheet-wrapper { @@ -71,22 +107,26 @@ $action-sheet-wp-icon-margin: 0 20px 0 0 !default; .action-sheet-wp .action-sheet-title { @include text-align($action-sheet-wp-title-text-align); - padding: $action-sheet-wp-title-padding; - font-size: $action-sheet-wp-title-font-size; color: $action-sheet-wp-title-color; + + @include deprecated-variable(padding, $action-sheet-wp-title-padding) { + @include padding($action-sheet-wp-title-padding-top, $action-sheet-wp-title-padding-end, $action-sheet-wp-title-padding-bottom, $action-sheet-wp-title-padding-start); + } } .action-sheet-wp .action-sheet-button { @include text-align($action-sheet-wp-button-text-align); - padding: $action-sheet-wp-button-padding; - min-height: $action-sheet-wp-button-height; font-size: $action-sheet-wp-button-font-size; color: $action-sheet-wp-button-text-color; background: $action-sheet-wp-button-background; + + @include deprecated-variable(padding, $action-sheet-wp-button-padding) { + @include padding($action-sheet-wp-button-padding-top, $action-sheet-wp-button-padding-end, $action-sheet-wp-button-padding-bottom, $action-sheet-wp-button-padding-start); + } } .action-sheet-wp .action-sheet-button.activated { @@ -94,19 +134,21 @@ $action-sheet-wp-icon-margin: 0 20px 0 0 !default; } .action-sheet-wp .action-sheet-icon { + @include padding(0); @include text-align($action-sheet-wp-icon-text-align); - margin: $action-sheet-wp-icon-margin; - padding: 0; - width: $action-sheet-wp-icon-width; font-size: $action-sheet-wp-icon-font-size; vertical-align: $action-sheet-wp-icon-vertical-align; + + @include deprecated-variable(margin, $action-sheet-wp-icon-margin) { + @include margin($action-sheet-wp-icon-margin-top, $action-sheet-wp-icon-margin-end, $action-sheet-wp-icon-margin-bottom, $action-sheet-wp-icon-margin-start); + } } .action-sheet-wp .action-sheet-container { - padding: .8rem 0; + @include padding(.8rem, 0); background: $action-sheet-wp-background; } diff --git a/src/components/alert/alert.ios.scss b/src/components/alert/alert.ios.scss index e80f13861e5..2baf340f602 100644 --- a/src/components/alert/alert.ios.scss +++ b/src/components/alert/alert.ios.scss @@ -15,8 +15,20 @@ $alert-ios-background: #f8f8f8 !default; /// @prop - Box shadow of the alert $alert-ios-box-shadow: none !default; -/// @prop - Padding of the alert head -$alert-ios-head-padding: 12px 16px 7px !default; +// deprecated +$alert-ios-head-padding: null !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; @@ -36,8 +48,21 @@ $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 of the alert message -$alert-ios-message-padding: 0 16px 21px !default; +// deprecated +$alert-ios-message-padding: null !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; @@ -48,8 +73,20 @@ $alert-ios-message-text-align: center !default; /// @prop - Text color of the alert message $alert-ios-message-text-color: inherit !default; -/// @prop - Padding of the alert empty message -$alert-ios-message-padding-empty: 0 0 12px 0 !default; +// deprecated +$alert-ios-message-padding-empty: null !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; @@ -57,8 +94,20 @@ $alert-ios-content-max-height: 240px !default; /// @prop - Margin top of the alert input $alert-ios-input-margin-top: 10px !default; -/// @prop - Padding on the alert input -$alert-ios-input-padding: 6px !default; +// deprecated +$alert-ios-input-padding: null !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; @@ -117,8 +166,20 @@ $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 on the label for the radio alert -$alert-ios-radio-label-padding: 13px !default; +// deprecated +$alert-ios-radio-label-padding: null !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; @@ -153,8 +214,20 @@ $alert-ios-radio-icon-border-color: $alert-ios-button-text-color !de /// @prop - Transform of the icon in the radio alert $alert-ios-radio-icon-transform: rotate(45deg) !default; -/// @prop - Padding of the label for the checkbox in the alert -$alert-ios-checkbox-label-padding: 13px !default; +// deprecated +$alert-ios-checkbox-label-padding: null !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; @@ -162,8 +235,20 @@ $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 of the checkbox in the alert -$alert-ios-checkbox-margin: 10px 6px 10px 16px !default; +// deprecated +$alert-ios-checkbox-margin: null !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; @@ -215,11 +300,12 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; .alert-ios .alert-wrapper { + @include border-radius($alert-ios-border-radius); + overflow: hidden; max-width: $alert-ios-max-width; - border-radius: $alert-ios-border-radius; background-color: $alert-ios-background; box-shadow: $alert-ios-box-shadow; @@ -232,7 +318,9 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; .alert-ios .alert-head { @include text-align($alert-ios-head-text-align); - padding: $alert-ios-head-padding; + @include deprecated-variable(padding, $alert-ios-head-padding) { + @include padding($alert-ios-head-padding-top, $alert-ios-head-padding-end, $alert-ios-head-padding-bottom, $alert-ios-head-padding-start); + } } .alert-ios .alert-title { @@ -255,10 +343,12 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; .alert-ios .alert-input-group { @include text-align($alert-ios-message-text-align); - padding: $alert-ios-message-padding; - font-size: $alert-ios-message-font-size; color: $alert-ios-message-text-color; + + @include deprecated-variable(padding, $alert-ios-message-padding) { + @include padding($alert-ios-message-padding-top, $alert-ios-message-padding-end, $alert-ios-message-padding-bottom, $alert-ios-message-padding-start); + } } .alert-ios .alert-message { @@ -266,7 +356,9 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; } .alert-ios .alert-message:empty { - padding: $alert-ios-message-padding-empty; + @include deprecated-variable(padding, $alert-ios-message-padding-empty) { + @include padding($alert-ios-message-empty-padding-top, $alert-ios-message-empty-padding-end, $alert-ios-message-empty-padding-bottom, $alert-ios-message-empty-padding-start); + } } @@ -275,13 +367,15 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; .alert-ios .alert-input { @include appearance(none); - - margin-top: $alert-ios-input-margin-top; - padding: $alert-ios-input-padding; + @include margin($alert-ios-input-margin-top, null, null, null); + @include border-radius($alert-ios-input-border-radius); border: $alert-ios-input-border; - border-radius: $alert-ios-input-border-radius; background-color: $alert-ios-input-background-color; + + @include deprecated-variable(padding, $alert-ios-input-padding) { + @include padding($alert-ios-input-padding-top, $alert-ios-input-padding-end, $alert-ios-input-padding-bottom, $alert-ios-input-padding-start); + } } @@ -317,12 +411,14 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; order: 0; - padding: $alert-ios-radio-label-padding; - text-overflow: ellipsis; white-space: nowrap; color: $alert-ios-radio-label-text-color; + + @include deprecated-variable(padding, $alert-ios-radio-label-padding) { + @include padding($alert-ios-radio-label-padding-top, $alert-ios-radio-label-padding-end, $alert-ios-radio-label-padding-bottom, $alert-ios-radio-label-padding-start); + } } @@ -350,9 +446,9 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; // ----------------------------------------- .alert-ios [aria-checked=true] .alert-radio-inner { + @include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-left); + position: absolute; - top: $alert-ios-radio-icon-top; - left: $alert-ios-radio-icon-left; width: $alert-ios-radio-icon-width; height: $alert-ios-radio-icon-height; @@ -374,12 +470,14 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; flex: 1; - padding: $alert-ios-checkbox-label-padding; - text-overflow: ellipsis; white-space: nowrap; color: $alert-ios-checkbox-label-text-color; + + @include deprecated-variable(padding, $alert-ios-checkbox-label-padding) { + @include padding($alert-ios-checkbox-label-padding-top, $alert-ios-checkbox-label-padding-end, $alert-ios-checkbox-label-padding-bottom, $alert-ios-checkbox-label-padding-start); + } } .alert-ios [aria-checked=true] .alert-checkbox-label { @@ -390,18 +488,21 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; // ----------------------------------------- .alert-ios .alert-checkbox-icon { - position: relative; + @include border-radius($alert-ios-checkbox-border-radius); - margin: $alert-ios-checkbox-margin; + position: relative; width: $alert-ios-checkbox-size; height: $alert-ios-checkbox-size; border-width: $alert-ios-checkbox-border-width; border-style: $alert-ios-checkbox-border-style; - border-radius: $alert-ios-checkbox-border-radius; border-color: $alert-ios-checkbox-border-color-off; background-color: $alert-ios-checkbox-background-color-off; + + @include deprecated-variable(margin, $alert-ios-checkbox-margin) { + @include margin($alert-ios-checkbox-margin-top, $alert-ios-checkbox-margin-end, $alert-ios-checkbox-margin-bottom, $alert-ios-checkbox-margin-start); + } } @@ -418,9 +519,9 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; // ----------------------------------------- .alert-ios [aria-checked=true] .alert-checkbox-inner { + @include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-left); + position: absolute; - top: $alert-ios-checkbox-icon-top; - left: $alert-ios-checkbox-icon-left; width: $alert-ios-checkbox-icon-width; height: $alert-ios-checkbox-icon-height; @@ -438,24 +539,24 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default; // -------------------------------------------------- .alert-ios .alert-button-group { - flex-wrap: $alert-ios-button-group-flex-wrap; + @include margin-horizontal(null, -$alert-ios-button-border-width); - margin-right: -$alert-ios-button-border-width; + flex-wrap: $alert-ios-button-group-flex-wrap; } .alert-ios .alert-button { + @include margin($alert-ios-button-margin); + @include border-radius($alert-ios-button-border-radius); + overflow: hidden; flex: $alert-ios-button-flex; - margin: $alert-ios-button-margin; - min-width: $alert-ios-button-min-width; height: $alert-ios-button-min-height; border-top: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color; border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color; - border-radius: $alert-ios-button-border-radius; font-size: $alert-ios-button-font-size; color: $alert-ios-button-text-color; background-color: $alert-ios-button-background-color; diff --git a/src/components/alert/alert.md.scss b/src/components/alert/alert.md.scss index 74fe4af07f3..dde56b5b617 100644 --- a/src/components/alert/alert.md.scss +++ b/src/components/alert/alert.md.scss @@ -18,8 +18,21 @@ $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 of the alert head -$alert-md-head-padding: 24px 24px 20px 24px !default; +// deprecated +$alert-md-head-padding: null !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; @@ -30,8 +43,20 @@ $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 of the alert message -$alert-md-message-padding: 0 24px 24px 24px !default; +// deprecated +$alert-md-message-padding: null !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; @@ -39,8 +64,20 @@ $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 of the alert empty message -$alert-md-message-padding-empty: 0 !default; +// deprecated +$alert-md-message-padding-empty: null !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; @@ -69,29 +106,69 @@ $alert-md-input-border-color-focused: color($colors-md, primary) !defaul /// @prop - Margin top of the alert input $alert-md-input-margin-top: 5px !default; -/// @prop - Margin right of the alert input +// deprecated $alert-md-input-margin-right: 0 !default; +/// @prop - Margin end of the alert input +$alert-md-input-margin-end: $alert-md-input-margin-right !default; /// @prop - Margin bottom of the alert input $alert-md-input-margin-bottom: 5px !default; -/// @prop - Margin left of the alert input +// deprecated $alert-md-input-margin-left: 0 !default; +/// @prop - Margin start of the alert input +$alert-md-input-margin-start: $alert-md-input-margin-left; /// @prop - Flex wrap of the alert button group $alert-md-button-group-flex-wrap: wrap-reverse !default; -/// @prop - Padding of the alert button group -$alert-md-button-group-padding: 8px 8px 8px 24px !default; +// deprecated +$alert-md-button-group-padding: null !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 of the alert button -$alert-md-button-padding: 10px !default; +// deprecated +$alert-md-button-padding: null !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; + +// deprecated +$alert-md-button-margin: null !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 of the alert button -$alert-md-button-margin: 0 8px 0 0 !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; @@ -121,8 +198,20 @@ $alert-md-list-border-top: 1px solid $alert-md-input-border-c /// @prop - Border bottom of the alert list $alert-md-list-border-bottom: $alert-md-list-border-top !default; -/// @prop - Padding on the label for the radio alert -$alert-md-radio-label-padding: 13px 26px !default; +// deprecated +$alert-md-radio-label-padding: null !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; @@ -181,8 +270,20 @@ $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 of the label for the checkbox in the alert -$alert-md-checkbox-label-padding: 13px 26px !default; +// deprecated +$alert-md-checkbox-label-padding: null !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; @@ -244,9 +345,10 @@ $alert-md-checkbox-icon-border-color: color-contrast($colors-md, $alert- $alert-md-checkbox-icon-transform: rotate(45deg) !default; .alert-md .alert-wrapper { + @include border-radius($alert-md-border-radius); + max-width: $alert-md-max-width; - border-radius: $alert-md-border-radius; background-color: $alert-md-background-color; box-shadow: $alert-md-box-shadow; @@ -258,7 +360,9 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; .alert-md .alert-head { @include text-align($alert-md-head-text-align); - padding: $alert-md-head-padding; + @include deprecated-variable(padding, $alert-md-head-padding) { + @include padding($alert-md-head-padding-top, $alert-md-head-padding-end, $alert-md-head-padding-bottom, $alert-md-head-padding-start); + } } .alert-md .alert-title { @@ -275,9 +379,11 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; .alert-md .alert-message, .alert-md .alert-input-group { - padding: $alert-md-message-padding; - color: $alert-md-message-text-color; + + @include deprecated-variable(padding, $alert-md-message-padding) { + @include padding($alert-md-message-padding-top, $alert-md-message-padding-end, $alert-md-message-padding-bottom, $alert-md-message-padding-start); + } } .alert-md .alert-message { @@ -287,7 +393,9 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; } .alert-md .alert-message:empty { - padding: $alert-md-message-padding-empty; + @include deprecated-variable(padding, $alert-md-message-padding-empty) { + @include padding($alert-md-message-empty-padding-top, $alert-md-message-empty-padding-end, $alert-md-message-empty-padding-bottom, $alert-md-message-empty-padding-start); + } } @@ -295,7 +403,7 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; // -------------------------------------------------- .alert-md .alert-input { - margin: $alert-md-input-margin-top $alert-md-input-margin-right $alert-md-input-margin-bottom $alert-md-input-margin-left; + @include margin($alert-md-input-margin-top, $alert-md-input-margin-end, $alert-md-input-margin-bottom, $alert-md-input-margin-start); border-bottom: $alert-md-input-border-width $alert-md-input-border-style $alert-md-input-border-color; color: $alert-md-input-text-color; @@ -341,21 +449,24 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; flex: 1; - padding: $alert-md-radio-label-padding; - text-overflow: ellipsis; white-space: nowrap; color: $alert-md-radio-label-text-color; + + @include deprecated-variable(padding, $alert-md-radio-label-padding) { + @include padding($alert-md-radio-label-padding-top, $alert-md-radio-label-padding-end, $alert-md-radio-label-padding-bottom, $alert-md-radio-label-padding-start); + } } // Material Design Alert Radio Unchecked Circle // --------------------------------------------------- .alert-md .alert-radio-icon { + @include position($alert-md-radio-top, null, null, $alert-md-radio-left); + @include border-radius($alert-md-radio-border-radius); + position: relative; - top: $alert-md-radio-top; - left: $alert-md-radio-left; display: block; width: $alert-md-radio-width; @@ -363,7 +474,6 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; border-width: $alert-md-radio-border-width; border-style: $alert-md-radio-border-style; - border-radius: $alert-md-radio-border-radius; border-color: $alert-md-radio-border-color-off; } @@ -371,14 +481,14 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; // --------------------------------------------------- .alert-md .alert-radio-inner { + @include position($alert-md-radio-icon-top, null, null, $alert-md-radio-icon-left); + @include border-radius($alert-md-radio-icon-border-radius); + position: absolute; - top: $alert-md-radio-icon-top; - left: $alert-md-radio-icon-left; width: $alert-md-radio-icon-width; height: $alert-md-radio-icon-height; - border-radius: $alert-md-radio-icon-border-radius; background-color: $alert-md-radio-border-color-on; transform: $alert-md-radio-icon-transform-off; transition: $alert-md-radio-icon-transition; @@ -409,12 +519,14 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; flex: 1; - padding: $alert-md-checkbox-label-padding; - text-overflow: ellipsis; white-space: nowrap; color: $alert-md-checkbox-label-text-color; + + @include deprecated-variable(padding, $alert-md-checkbox-label-padding) { + @include padding($alert-md-checkbox-label-padding-top, $alert-md-checkbox-label-padding-end, $alert-md-checkbox-label-padding-bottom, $alert-md-checkbox-label-padding-start); + } } .alert-md [aria-checked=true] .alert-checkbox-label { @@ -425,16 +537,16 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; // -------------------------------------------------- .alert-md .alert-checkbox-icon { + @include position($alert-md-checkbox-top, null, null, $alert-md-checkbox-left); + @include border-radius($alert-md-checkbox-border-radius); + position: relative; - top: $alert-md-checkbox-top; - left: $alert-md-checkbox-left; width: $alert-md-checkbox-width; height: $alert-md-checkbox-height; border-width: $alert-md-checkbox-border-width; border-style: $alert-md-checkbox-border-style; - border-radius: $alert-md-checkbox-border-radius; border-color: $alert-md-checkbox-border-color-off; } @@ -447,9 +559,9 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; } .alert-md [aria-checked=true] .alert-checkbox-inner { + @include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-left); + position: absolute; - top: $alert-md-checkbox-icon-top; - left: $alert-md-checkbox-icon-left; width: $alert-md-checkbox-icon-width; height: $alert-md-checkbox-icon-height; @@ -470,24 +582,31 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default; flex-wrap: $alert-md-button-group-flex-wrap; justify-content: $alert-md-button-group-justify-content; - padding: $alert-md-button-group-padding; + @include deprecated-variable(padding, $alert-md-button-group-padding) { + @include padding($alert-md-button-group-padding-top, $alert-md-button-group-padding-end, $alert-md-button-group-padding-bottom, $alert-md-button-group-padding-start); + } } .alert-md .alert-button { @include text-align($alert-md-button-text-align); + @include border-radius($alert-md-button-border-radius); // necessary for ripple to work properly position: relative; overflow: hidden; - margin: $alert-md-button-margin; - padding: $alert-md-button-padding; - - border-radius: $alert-md-button-border-radius; font-weight: $alert-md-button-font-weight; text-transform: $alert-md-button-text-transform; color: $alert-md-button-text-color; background-color: $alert-md-button-background-color; + + @include deprecated-variable(margin, $alert-md-button-margin) { + @include margin($alert-md-button-margin-top, $alert-md-button-margin-end, $alert-md-button-margin-bottom, $alert-md-button-margin-start); + } + + @include deprecated-variable(padding, $alert-md-button-padding) { + @include padding($alert-md-button-padding-top, $alert-md-button-padding-end, $alert-md-button-padding-bottom, $alert-md-button-padding-start); + } } .alert-md .alert-button.activated { diff --git a/src/components/alert/alert.scss b/src/components/alert/alert.scss index df2a17b4043..30165b00838 100644 --- a/src/components/alert/alert.scss +++ b/src/components/alert/alert.scss @@ -20,11 +20,10 @@ $alert-input-placeholder-color: #999 !default; ion-alert { + @include position(0, 0, 0, 0); + position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + z-index: $z-index-overlay; display: flex; @@ -60,13 +59,13 @@ ion-alert input { } .alert-title { - margin: 0; - padding: 0; + @include margin(0); + @include padding(0); } .alert-sub-title { - margin: 5px 0 0; - padding: 0; + @include margin(5px, 0, 0); + @include padding(0); font-weight: normal; } @@ -79,8 +78,7 @@ ion-alert input { .alert-input { @include placeholder($alert-input-placeholder-color); - - padding: 10px 0; + @include padding(10px, 0); border: 0; background: inherit; @@ -98,11 +96,11 @@ ion-alert input { } .alert-button { + @include margin(0); + z-index: 0; display: block; - margin: 0; - font-size: $alert-button-font-size; line-height: $alert-button-line-height; } @@ -110,9 +108,8 @@ ion-alert input { .alert-tappable { @include text-align(start); @include appearance(none); - - margin: 0; - padding: 0; + @include margin(0); + @include padding(0); width: 100%; diff --git a/src/components/alert/alert.wp.scss b/src/components/alert/alert.wp.scss index f5a4c2b21ee..896aef0a32f 100644 --- a/src/components/alert/alert.wp.scss +++ b/src/components/alert/alert.wp.scss @@ -27,8 +27,20 @@ $alert-wp-border-radius: 0 !default; /// @prop - Background color of the alert $alert-wp-background: #e6e6e6 !default; -/// @prop - Padding of the alert head -$alert-wp-head-padding: 20px 22px 5px 22px !default; +// deprecated +$alert-wp-head-padding: null !default; + +/// @prop - Padding top of the alert head +$alert-wp-head-padding-top: 20px !default; + +/// @prop - Padding end of the alert head +$alert-wp-head-padding-end: 22px !default; + +/// @prop - Padding bottom of the alert head +$alert-wp-head-padding-bottom: 5px !default; + +/// @prop - Padding start of the alert head +$alert-wp-head-padding-start: 22px !default; /// @prop - Text align of the alert head $alert-wp-head-text-align: start !default; @@ -42,11 +54,35 @@ $alert-wp-title-font-weight: 400 !default; /// @prop - Font size of the alert sub title $alert-wp-sub-title-font-size: 16px !default; -/// @prop - Padding of the alert message -$alert-wp-message-padding: 0 22px 8px 22px !default; +// deprecated +$alert-wp-message-padding: null !default; + +/// @prop - Padding top of the alert message +$alert-wp-message-padding-top: 0 !default; + +/// @prop - Padding end of the alert message +$alert-wp-message-padding-end: 22px !default; + +/// @prop - Padding bottom of the alert message +$alert-wp-message-padding-bottom: 8px !default; -/// @prop - Padding of the alert empty message -$alert-wp-message-padding-empty: 0 !default; +/// @prop - Padding start of the alert message +$alert-wp-message-padding-start: 22px !default; + +// deprecated +$alert-wp-message-padding-empty: null !default; + +/// @prop - Padding top of the alert empty message +$alert-wp-message-empty-padding-top: 0 !default; + +/// @prop - Padding end of the alert empty message +$alert-wp-message-empty-padding-end: $alert-wp-message-empty-padding-top !default; + +/// @prop - Padding bottom of the alert empty message +$alert-wp-message-empty-padding-bottom: $alert-wp-message-empty-padding-top !default; + +/// @prop - Padding start of the alert empty message +$alert-wp-message-empty-padding-start: $alert-wp-message-empty-padding-end !default; /// @prop - Text color of the alert message $alert-wp-message-text-color: #000 !default; @@ -57,11 +93,35 @@ $alert-wp-message-font-size: 13px !default; /// @prop - Maximum height of the alert content $alert-wp-content-max-height: 240px !default; -/// @prop - Margin of the alert input -$alert-wp-input-margin: 5px 0 5px 0 !default; +// deprecated +$alert-wp-input-margin: null !default; + +/// @prop - Margin top of the alert input +$alert-wp-input-margin-top: 5px !default; + +/// @prop - Margin end of the alert input +$alert-wp-input-margin-end: 0 !default; -/// @prop - Padding on the alert input -$alert-wp-input-padding: 0 8px !default; +/// @prop - Margin bottom of the alert input +$alert-wp-input-margin-bottom: 5px !default; + +/// @prop - Margin start of the alert input +$alert-wp-input-margin-start: 0 !default; + +// deprecated +$alert-wp-input-padding: null !default; + +/// @prop - Padding top on the alert input +$alert-wp-input-padding-top: 0 !default; + +/// @prop - Padding end on the alert input +$alert-wp-input-padding-end: 8px !default; + +/// @prop - Padding bottom on the alert input +$alert-wp-input-padding-bottom: $alert-wp-input-padding-top !default; + +/// @prop - Padding start on the alert input +$alert-wp-input-padding-start: $alert-wp-input-padding-end !default; /// @prop - Border width of the alert input $alert-wp-input-border-width: 2px !default; @@ -81,8 +141,20 @@ $alert-wp-input-line-height: 3rem !default; /// @prop - Color of the text in the alert input $alert-wp-input-text-color: #000 !default; -/// @prop - Padding of the alert button -$alert-wp-button-padding: 5px !default; +// deprecated +$alert-wp-button-padding: null !default; + +/// @prop - Padding top of the alert button +$alert-wp-button-padding-top: 5px !default; + +/// @prop - Padding end of the alert button +$alert-wp-button-padding-end: $alert-wp-button-padding-top !default; + +/// @prop - Padding bottom of the alert button +$alert-wp-button-padding-bottom: $alert-wp-button-padding-top !default; + +/// @prop - Padding start of the alert button +$alert-wp-button-padding-start: $alert-wp-button-padding-end !default; /// @prop - Width of the alert button $alert-wp-button-width: 49.5% !default; @@ -102,11 +174,25 @@ $alert-wp-button-background: #b8b8b8 !default; /// @prop - Background color of the activated alert button $alert-wp-button-background-activated: color-shade($alert-wp-button-background) !default; -/// @prop - Margin right of the alert button +// deprecated $alert-wp-button-margin-right: 1% !default; +/// @prop - Margin end of the alert button +$alert-wp-button-margin-end: $alert-wp-button-margin-right !default; + +$alert-wp-button-group-padding: null !default; + +/// @prop - Padding top of the alert button group +$alert-wp-button-group-padding-top: 20px !default; + +/// @prop - Padding end of the alert button group +$alert-wp-button-group-padding-end: 22px !default; + +/// @prop - Padding bottom of the alert button group +$alert-wp-button-group-padding-bottom: 20px !default; + +/// @prop - Padding start of the alert button group +$alert-wp-button-group-padding-start: 22px !default; -/// @prop - Padding of the alert button group -$alert-wp-button-group-padding: 20px 22px 20px 22px !default; /// @prop - Justify content of the alert button group $alert-wp-button-group-justify-content: flex-end !default; @@ -127,8 +213,21 @@ $alert-wp-radio-background: color($colors-wp, primary) !defau /// @prop - Border color of the radio alert $alert-wp-radio-border-color: $input-wp-border-color !default; -/// @prop - Padding of the label for the radio alert -$alert-wp-radio-label-padding: 13px 26px !default; +// deprecated +$alert-wp-radio-label-padding: null !default; + +/// @prop - Padding top of the label for the radio alert +$alert-wp-radio-label-padding-top: 13px !default; + +/// @prop - Padding end of the label for the radio alert +$alert-wp-radio-label-padding-end: 26px !default; + +/// @prop - Padding bottom of the label for the radio alert +$alert-wp-radio-label-padding-bottom: $alert-wp-radio-label-padding-top !default; + +/// @prop - Padding start of the label for the radio alert +$alert-wp-radio-label-padding-start: $alert-wp-radio-label-padding-end !default; + /// @prop - Text color of the label for the radio alert $alert-wp-radio-label-text-color: initial !default; @@ -175,8 +274,20 @@ $alert-wp-radio-icon-height: 8px !default; /// @prop - Border radius of the icon in the radio alert $alert-wp-radio-icon-border-radius: $alert-wp-radio-border-radius !default; -/// @prop - Padding of the label for the checkbox in the alert -$alert-wp-checkbox-label-padding: 13px 26px !default; +// deprecated +$alert-wp-checkbox-label-padding: null !default; + +/// @prop - Padding top of the label for the checkbox in the alert +$alert-wp-checkbox-label-padding-top: 13px !default; + +/// @prop - Padding end of the label for the checkbox in the alert +$alert-wp-checkbox-label-padding-end: 26px !default; + +/// @prop - Padding bottom of the label for the checkbox in the alert +$alert-wp-checkbox-label-padding-bottom: $alert-wp-checkbox-label-padding-top !default; + +/// @prop - Padding start of the label for the checkbox in the alert +$alert-wp-checkbox-label-padding-start: $alert-wp-checkbox-label-padding-end !default; /// @prop - Text color of the label for the checkbox in the alert $alert-wp-checkbox-label-text-color: initial !default; @@ -244,11 +355,12 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; } .alert-wp .alert-wrapper { + @include border-radius($alert-wp-border-radius); + width: $alert-wp-width; max-width: $alert-wp-max-width; border: $alert-wp-border-width $alert-wp-border-style $alert-wp-border-color; - border-radius: $alert-wp-border-radius; background: $alert-wp-background; } @@ -258,7 +370,9 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; .alert-wp .alert-head { @include text-align($alert-wp-head-text-align); - padding: $alert-wp-head-padding; + @include deprecated-variable(padding, $alert-wp-head-padding) { + @include padding($alert-wp-head-padding-top, $alert-wp-head-padding-end, $alert-wp-head-padding-bottom, $alert-wp-head-padding-start); + } } .alert-wp .alert-title { @@ -276,9 +390,11 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; .alert-wp .alert-message, .alert-wp .alert-input-group { - padding: $alert-wp-message-padding; - color: $alert-wp-message-text-color; + + @include deprecated-variable(padding, $alert-wp-message-padding) { + @include padding($alert-wp-message-padding-top, $alert-wp-message-padding-end, $alert-wp-message-padding-bottom, $alert-wp-message-padding-start); + } } .alert-wp .alert-message { @@ -288,7 +404,9 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; } .alert-wp .alert-message:empty { - padding: $alert-wp-message-padding-empty; + @include deprecated-variable(padding, $alert-wp-message-padding-empty) { + @include padding($alert-wp-message-empty-padding-top, $alert-wp-message-empty-padding-end, $alert-wp-message-empty-padding-bottom, $alert-wp-message-empty-padding-start); + } } @@ -296,12 +414,17 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; // -------------------------------------------------- .alert-wp .alert-input { - margin: $alert-wp-input-margin; - padding: $alert-wp-input-padding; - border: $alert-wp-input-border-width $alert-wp-input-border-style $alert-wp-input-border-color; line-height: $alert-wp-input-line-height; color: $alert-wp-input-text-color; + + @include deprecated-variable(margin, $alert-wp-input-margin) { + @include margin($alert-wp-input-margin-top, $alert-wp-input-margin-end, $alert-wp-input-margin-bottom, $alert-wp-input-margin-start); + } + + @include deprecated-variable(padding, $alert-wp-input-padding) { + @include padding($alert-wp-input-padding-top, $alert-wp-input-padding-end, $alert-wp-input-padding-bottom, $alert-wp-input-padding-start); + } } .alert-wp .alert-input:focus { @@ -339,31 +462,32 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; flex: 1; - padding: $alert-wp-radio-label-padding; - text-overflow: ellipsis; white-space: nowrap; color: $alert-wp-radio-label-text-color; + + @include deprecated-variable(padding, $alert-wp-radio-label-padding) { + @include padding($alert-wp-radio-label-padding-top, $alert-wp-radio-label-padding-end, $alert-wp-radio-label-padding-bottom, $alert-wp-radio-label-padding-start); + } } // Windows Alert Radio Unchecked Circle // --------------------------------------------------- .alert-wp .alert-radio-icon { + @include position($alert-wp-radio-top, null, null, $alert-wp-radio-left); + @include margin(0); + @include border-radius($alert-wp-radio-border-radius); + position: relative; - top: $alert-wp-radio-top; - left: $alert-wp-radio-left; display: block; - margin: 0; - width: $alert-wp-radio-width; height: $alert-wp-radio-height; border-width: $alert-wp-radio-border-width; border-style: $alert-wp-radio-border-style; - border-radius: $alert-wp-radio-border-radius; border-color: $alert-wp-radio-border-color; } @@ -371,15 +495,15 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; // --------------------------------------------------- .alert-wp .alert-radio-inner { + @include position($alert-wp-radio-icon-top, null, null, $alert-wp-radio-icon-left); + @include border-radius($alert-wp-radio-icon-border-radius); + position: absolute; - top: $alert-wp-radio-icon-top; - left: $alert-wp-radio-icon-left; display: none; width: $alert-wp-radio-icon-width; height: $alert-wp-radio-icon-height; - border-radius: $alert-wp-radio-icon-border-radius; background: $alert-wp-radio-background; } @@ -407,12 +531,14 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; flex: 1; - padding: $alert-wp-checkbox-label-padding; - text-overflow: ellipsis; white-space: nowrap; color: $alert-wp-checkbox-label-text-color; + + @include deprecated-variable(padding, $alert-wp-checkbox-label-padding) { + @include padding($alert-wp-checkbox-label-padding-top, $alert-wp-checkbox-label-padding-end, $alert-wp-checkbox-label-padding-bottom, $alert-wp-checkbox-label-padding-start); + } } .alert-wp [aria-checked=true] .alert-checkbox-label { @@ -423,16 +549,16 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; // -------------------------------------------------- .alert-wp .alert-checkbox-icon { + @include position($alert-wp-checkbox-top, null, null, $alert-wp-checkbox-left); + @include border-radius($alert-wp-checkbox-border-radius); + position: relative; - top: $alert-wp-checkbox-top; - left: $alert-wp-checkbox-left; width: $alert-wp-checkbox-width; height: $alert-wp-checkbox-height; border-width: $alert-wp-checkbox-border-width; border-style: $alert-wp-checkbox-border-style; - border-radius: $alert-wp-checkbox-border-radius; border-color: $alert-wp-checkbox-border-color; background: $alert-wp-checkbox-background-off; } @@ -449,9 +575,9 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; // -------------------------------------------------- .alert-wp [aria-checked=true] .alert-checkbox-inner { + @include position($alert-wp-checkbox-icon-top, null, null, $alert-wp-checkbox-icon-left); + position: absolute; - top: $alert-wp-checkbox-icon-top; - left: $alert-wp-checkbox-icon-left; width: $alert-wp-checkbox-icon-width; height: $alert-wp-checkbox-icon-height; @@ -472,7 +598,9 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; flex-wrap: $alert-wp-button-group-flex-wrap; justify-content: $alert-wp-button-group-justify-content; - padding: $alert-wp-button-group-padding; + @include deprecated-variable(padding, $alert-wp-button-group-padding) { + @include padding($alert-wp-button-group-padding-top, $alert-wp-button-group-padding-end, $alert-wp-button-group-padding-bottom, $alert-wp-button-group-padding-start); + } } .alert-wp .alert-button-group-vertical .alert-button { @@ -482,23 +610,25 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default; } .alert-wp .alert-button-group-vertical .alert-button:first-child:not(:only-child) { - margin-top: 0; - margin-right: 0; + @include margin(0, 0, null, null); } .alert-wp .alert-button { - padding: $alert-wp-button-padding; + @include border-radius($alert-wp-button-border-radius); width: $alert-wp-button-width; - border-radius: $alert-wp-button-border-radius; font-weight: $alert-wp-button-font-weight; color: $alert-wp-button-text-color; background: $alert-wp-button-background; + + @include deprecated-variable(padding, $alert-wp-button-padding) { + @include padding($alert-wp-button-padding-top, $alert-wp-button-padding-end, $alert-wp-button-padding-bottom, $alert-wp-button-padding-start); + } } .alert-wp .alert-button:first-child:not(:only-child) { - margin-right: $alert-wp-button-margin-right; + @include margin-horizontal(null, $alert-wp-button-margin-end); } .alert-wp .alert-button.activated { diff --git a/src/components/app/app.scss b/src/components/app/app.scss index 56262c4874a..7beadc430a9 100644 --- a/src/components/app/app.scss +++ b/src/components/app/app.scss @@ -100,12 +100,12 @@ html { } body { + @include margin(0); + @include padding(0); + position: fixed; overflow: hidden; - margin: 0; - padding: 0; - width: 100%; max-width: 100%; height: 100%; @@ -229,9 +229,9 @@ ion-nav, ion-tab, ion-tabs, .app-root { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; z-index: $z-index-page-container; display: block; @@ -267,9 +267,9 @@ ion-tabs, // -------------------------------------------------- .ion-page { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; display: block; width: 100%; @@ -289,9 +289,9 @@ ion-tabs, // -------------------------------------------------- ion-header { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; z-index: $z-index-toolbar; display: block; @@ -299,9 +299,9 @@ ion-header { } ion-footer { + @include position(null, null, 0, 0); + position: absolute; - bottom: 0; - left: 0; z-index: $z-index-toolbar; display: block; @@ -412,33 +412,31 @@ ion-footer { // Provide `[float-{bp}]` attributes for floating the element based // on the breakpoint [float#{$infix}-left] { - // scss-lint:disable ImportantRule + // scss-lint:disable ImportantRule, PropertySpelling float: left !important; } [float#{$infix}-right] { - // scss-lint:disable ImportantRule + // scss-lint:disable ImportantRule, PropertySpelling float: right !important; } [float#{$infix}-start] { - // scss-lint:disable ImportantRule + // scss-lint:disable ImportantRule, PropertySpelling float: left !important; - } - [float#{$infix}-end] { - // scss-lint:disable ImportantRule - float: right !important; + @include rtl() { + float: right !important; + } } - [dir="rtl"] [float#{$infix}-start] { - // scss-lint:disable ImportantRule + [float#{$infix}-end] { + // scss-lint:disable ImportantRule, PropertySpelling float: right !important; - } - [dir="rtl"] [float#{$infix}-end] { - // scss-lint:disable ImportantRule - float: left !important; + @include rtl() { + float: left !important; + } } } } diff --git a/src/components/backdrop/backdrop.scss b/src/components/backdrop/backdrop.scss index 15e754d59fc..5eab9f11799 100644 --- a/src/components/backdrop/backdrop.scss +++ b/src/components/backdrop/backdrop.scss @@ -7,9 +7,9 @@ $backdrop-color: #000 !default; ion-backdrop { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; z-index: $z-index-backdrop; display: block; diff --git a/src/components/badge/badge.ios.scss b/src/components/badge/badge.ios.scss index 0c1d0fa4514..1391ca69452 100644 --- a/src/components/badge/badge.ios.scss +++ b/src/components/badge/badge.ios.scss @@ -14,7 +14,8 @@ $badge-ios-text-color: color-contrast($colors-ios, $badge-ios-background .badge-ios { - border-radius: $badge-ios-border-radius; + @include border-radius($badge-ios-border-radius); + color: $badge-ios-text-color; background-color: $badge-ios-background-color; } diff --git a/src/components/badge/badge.md.scss b/src/components/badge/badge.md.scss index 958c62ed16a..b1eca5ac233 100644 --- a/src/components/badge/badge.md.scss +++ b/src/components/badge/badge.md.scss @@ -14,7 +14,8 @@ $badge-md-text-color: color-contrast($colors-md, $badge-md-backgro .badge-md { - border-radius: $badge-md-border-radius; + @include border-radius($badge-md-border-radius); + color: $badge-md-text-color; background-color: $badge-md-background-color; } diff --git a/src/components/badge/badge.scss b/src/components/badge/badge.scss index 3143035a06d..a0f5330178c 100644 --- a/src/components/badge/badge.scss +++ b/src/components/badge/badge.scss @@ -11,12 +11,11 @@ $badge-font-weight: bold !default; ion-badge { + @include padding(3px, 8px); @include text-align(center); display: inline-block; - padding: 3px 8px; - min-width: 10px; font-size: $badge-font-size; diff --git a/src/components/badge/badge.wp.scss b/src/components/badge/badge.wp.scss index 9c86c3e126c..dd12a1923f0 100644 --- a/src/components/badge/badge.wp.scss +++ b/src/components/badge/badge.wp.scss @@ -14,7 +14,8 @@ $badge-wp-text-color: color-contrast($colors-wp, $badge-wp-backgro .badge-wp { - border-radius: $badge-wp-border-radius; + @include border-radius($badge-wp-border-radius); + color: $badge-wp-text-color; background-color: $badge-wp-background-color; } diff --git a/src/components/button/button-icon.scss b/src/components/button/button-icon.scss index 1412e939df9..e9f8bc80efe 100644 --- a/src/components/button/button-icon.scss +++ b/src/components/button/button-icon.scss @@ -14,23 +14,23 @@ [icon-left] ion-icon { @include button-icon; - padding-right: .3em; + @include padding-horizontal(null, .3em); } [icon-right] ion-icon { @include button-icon; - padding-left: .4em; + @include padding-horizontal(.4em, null); } .button[icon-only] { - padding: 0; + @include padding(0); min-width: .9em; } [icon-only] ion-icon { - padding: 0 .5em; + @include padding(0, .5em); font-size: 1.8em; line-height: .67; diff --git a/src/components/button/button.ios.scss b/src/components/button/button.ios.scss index 5b07c8923b1..0b53a53b3a1 100644 --- a/src/components/button/button.ios.scss +++ b/src/components/button/button.ios.scss @@ -3,11 +3,35 @@ // iOS Button // -------------------------------------------------- -/// @prop - Margin of the button -$button-ios-margin: .4rem .2rem !default; +// deprecated +$button-ios-margin: null !default; -/// @prop - Padding of the button -$button-ios-padding: 0 1em !default; +/// @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; + +// deprecated +$button-ios-padding: null !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; @@ -37,8 +61,20 @@ $button-ios-opacity-hover: .8 !default; // iOS Large Button // -------------------------------------------------- -/// @prop - Padding of the large button -$button-ios-large-padding: 0 1em !default; +// deprecated +$button-ios-large-padding: null !default; + +/// @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; @@ -50,8 +86,20 @@ $button-ios-large-font-size: 2rem !default; // iOS Small Button // -------------------------------------------------- -/// @prop - Padding of the small button -$button-ios-small-padding: 0 .9em !default; +// deprecated +$button-ios-small-padding: null !default; + +/// @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; @@ -119,8 +167,20 @@ $button-ios-clear-opacity-hover: .6 !default; // iOS Round Button // -------------------------------------------------- -/// @prop - Padding of the round button -$button-ios-round-padding: $button-round-padding !default; +// deprecated +$button-ios-round-padding: null !default; + +/// @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; @@ -137,16 +197,22 @@ $button-ios-strong-font-weight: 600 !default; // -------------------------------------------------- .button-ios { - margin: $button-ios-margin; - padding: $button-ios-padding; + @include border-radius($button-ios-border-radius); height: $button-ios-height; - border-radius: $button-ios-border-radius; font-size: $button-ios-font-size; color: $button-ios-text-color; background-color: $button-ios-background-color; + + @include deprecated-variable(margin, $button-ios-margin) { + @include margin($button-ios-margin-top, $button-ios-margin-end, $button-ios-margin-bottom, $button-ios-margin-start); + } + + @include deprecated-variable(padding, $button-ios-padding) { + @include padding($button-ios-padding-top, $button-ios-padding-end, $button-ios-padding-bottom, $button-ios-padding-start); + } } .button-ios.activated { @@ -182,19 +248,23 @@ $button-ios-strong-font-weight: 600 !default; // -------------------------------------------------- .button-large-ios { - padding: $button-ios-large-padding; - height: $button-ios-large-height; font-size: $button-ios-large-font-size; + + @include deprecated-variable(padding, $button-ios-large-padding) { + @include padding($button-ios-large-padding-top, $button-ios-large-padding-end, $button-ios-large-padding-bottom, $button-ios-large-padding-start); + } } .button-small-ios { - padding: $button-ios-small-padding; - height: $button-ios-small-height; font-size: $button-ios-small-font-size; + + @include deprecated-variable(padding, $button-ios-small-padding) { + @include padding($button-ios-small-padding-top, $button-ios-small-padding-end, $button-ios-small-padding-bottom, $button-ios-small-padding-start); + } } .button-small-ios[icon-only] ion-icon { @@ -205,29 +275,28 @@ $button-ios-strong-font-weight: 600 !default; // -------------------------------------------------- .button-block-ios { - margin-right: 0; - margin-left: 0; + @include margin-horizontal(0); } // iOS Full Button // -------------------------------------------------- .button-full-ios { - margin-right: 0; - margin-left: 0; + @include margin-horizontal(0); + @include border-radius(0); border-right-width: 0; border-left-width: 0; - border-radius: 0; } // iOS Outline Button // -------------------------------------------------- .button-outline-ios { + @include border-radius($button-ios-outline-border-radius); + border-width: $button-ios-outline-border-width; border-style: $button-ios-outline-border-style; - border-radius: $button-ios-outline-border-radius; border-color: $button-ios-outline-border-color; color: $button-ios-outline-text-color; background-color: $button-ios-outline-background-color; @@ -304,9 +373,11 @@ $button-ios-strong-font-weight: 600 !default; // -------------------------------------------------- .button-round-ios { - padding: $button-ios-round-padding; + @include border-radius($button-ios-round-border-radius); - border-radius: $button-ios-round-border-radius; + @include deprecated-variable(padding, $button-ios-round-padding) { + @include padding($button-ios-round-padding-top, $button-ios-round-padding-end, $button-ios-round-padding-bottom, $button-ios-round-padding-start); + } } diff --git a/src/components/button/button.md.scss b/src/components/button/button.md.scss index b967f5bee0c..f6b45299d16 100644 --- a/src/components/button/button.md.scss +++ b/src/components/button/button.md.scss @@ -3,11 +3,35 @@ // Material Design Button // -------------------------------------------------- -/// @prop - Margin of the button -$button-md-margin: .4rem .2rem !default; +// deprecated +$button-md-margin: null !default; -/// @prop - Padding of the button -$button-md-padding: 0 1.1em !default; +/// @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; + +// deprecated +$button-md-padding: null !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; @@ -58,8 +82,20 @@ $button-md-ripple-background-color: #555 !default; // Material Design Large Button // -------------------------------------------------- -/// @prop - Padding of the large button -$button-md-large-padding: 0 1em !default; +// deprecated +$button-md-large-padding: null !default; + +/// @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; @@ -71,8 +107,20 @@ $button-md-large-font-size: 2rem !default; // Material Design Small Button // -------------------------------------------------- -/// @prop - Padding of the small button -$button-md-small-padding: 0 .9em !default; +// deprecated +$button-md-small-padding: null !default; + +/// @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; @@ -155,8 +203,20 @@ $button-md-clear-ripple-background-color: #999 !default; // Material Design Round Button // -------------------------------------------------- -/// @prop - Padding of the round button -$button-md-round-padding: $button-round-padding !default; +// deprecated +$button-md-round-padding: null !default; + +/// @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; @@ -173,15 +233,12 @@ $button-md-strong-font-weight: bold !default; // -------------------------------------------------- .button-md { - overflow: hidden; + @include border-radius($button-md-border-radius); - margin: $button-md-margin; - padding: $button-md-padding; + overflow: hidden; height: $button-md-height; - border-radius: $button-md-border-radius; - font-size: $button-md-font-size; font-weight: $button-md-font-weight; @@ -193,6 +250,14 @@ $button-md-strong-font-weight: bold !default; transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function, background-color $button-md-transition-duration $button-md-transition-timing-function, color $button-md-transition-duration $button-md-transition-timing-function; + + @include deprecated-variable(margin, $button-md-margin) { + @include margin($button-md-margin-top, $button-md-margin-end, $button-md-margin-bottom, $button-md-margin-start); + } + + @include deprecated-variable(padding, $button-md-padding) { + @include padding($button-md-padding-top, $button-md-padding-end, $button-md-padding-bottom, $button-md-padding-start); + } } .button-md:hover:not(.disable-hover) { @@ -241,19 +306,23 @@ $button-md-strong-font-weight: bold !default; // -------------------------------------------------- .button-large-md { - padding: $button-md-large-padding; - height: $button-md-large-height; font-size: $button-md-large-font-size; + + @include deprecated-variable(padding, $button-md-large-padding) { + @include padding($button-md-large-padding-top, $button-md-large-padding-end, $button-md-large-padding-bottom, $button-md-large-padding-start); + } } .button-small-md { - padding: $button-md-small-padding; - height: $button-md-small-height; font-size: $button-md-small-font-size; + + @include deprecated-variable(padding, $button-md-small-padding) { + @include padding($button-md-small-padding-top, $button-md-small-padding-end, $button-md-small-padding-bottom, $button-md-small-padding-start); + } } .button-small-md[icon-only] ion-icon { @@ -264,20 +333,18 @@ $button-md-strong-font-weight: bold !default; // -------------------------------------------------- .button-block-md { - margin-right: 0; - margin-left: 0; + @include margin-horizontal(0); } // Material Design Full Button // -------------------------------------------------- .button-full-md { - margin-right: 0; - margin-left: 0; + @include margin-horizontal(0); + @include border-radius(0); border-right-width: 0; border-left-width: 0; - border-radius: 0; } // Material Design Outline Button @@ -385,13 +452,15 @@ $button-md-strong-font-weight: bold !default; // -------------------------------------------------- .button-round-md { - padding: $button-md-round-padding; + @include border-radius($button-md-round-border-radius); - border-radius: $button-md-round-border-radius; + @include deprecated-variable(padding, $button-md-round-padding) { + @include padding($button-md-round-padding-top, $button-md-round-padding-end, $button-md-round-padding-bottom, $button-md-round-padding-start); + } } .button-md [icon-only] { - padding: 0; + @include padding(0); } @@ -401,14 +470,13 @@ $button-md-strong-font-weight: bold !default; // it's display none, and .md sets to display block. .button-effect { + @include position(0, null, null, 0); + @include border-radius(50%); + position: absolute; - top: 0; - left: 0; z-index: 0; display: none; - border-radius: 50%; - background-color: $button-md-ripple-background-color; opacity: .2; diff --git a/src/components/button/button.scss b/src/components/button/button.scss index 075c65f68b6..b806a5fc1f9 100644 --- a/src/components/button/button.scss +++ b/src/components/button/button.scss @@ -3,8 +3,20 @@ // Buttons // -------------------------------------------------- -/// @prop - Padding of the round button -$button-round-padding: 0 2.6rem !default; +// deprecated +$button-round-padding: null !default; + +/// @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; @@ -93,7 +105,8 @@ button[disabled], // -------------------------------------------------- .button-full.button-outline { + @include border-radius(0); + border-right-width: 0; border-left-width: 0; - border-radius: 0; } diff --git a/src/components/button/button.wp.scss b/src/components/button/button.wp.scss index 5d6892bf0bc..d5b67f1610b 100644 --- a/src/components/button/button.wp.scss +++ b/src/components/button/button.wp.scss @@ -3,11 +3,35 @@ // Windows Button // -------------------------------------------------- -/// @prop - Margin of the button -$button-wp-margin: .4rem .2rem !default; +// deprecated +$button-wp-margin: null !default; -/// @prop - Padding of the button -$button-wp-padding: 0 1.1em !default; +/// @prop - Margin top of the button +$button-wp-margin-top: .4rem !default; + +/// @prop - Margin end of the button +$button-wp-margin-end: .2rem !default; + +/// @prop - Margin bottom of the button +$button-wp-margin-bottom: .4rem !default; + +/// @prop - Margin start of the button +$button-wp-margin-start: .2rem !default; + +// deprecated +$button-wp-padding: null !default; + +/// @prop - Padding top of the button +$button-wp-padding-top: 0 !default; + +/// @prop - Padding end of the button +$button-wp-padding-end: 1.1em !default; + +/// @prop - Padding bottom of the button +$button-wp-padding-bottom: $button-wp-padding-top !default; + +/// @prop - Padding start of the button +$button-wp-padding-start: $button-wp-padding-end !default; /// @prop - Height of the button $button-wp-height: 3.6rem !default; @@ -40,8 +64,20 @@ $button-wp-background-color-activated: color-shade($button-wp // Windows Large Button // -------------------------------------------------- -/// @prop - Padding of the large button -$button-wp-large-padding: 0 1em !default; +// deprecated +$button-wp-large-padding: null !default; + +/// @prop - Padding top of the large button +$button-wp-large-padding-top: 0 !default; + +/// @prop - Padding end of the large button +$button-wp-large-padding-end: 1em !default; + +/// @prop - Padding bottom of the large button +$button-wp-large-padding-bottom: $button-wp-large-padding-top !default; + +/// @prop - Padding start of the large button +$button-wp-large-padding-start: $button-wp-large-padding-end !default; /// @prop - Height of the large button $button-wp-large-height: 2.8em !default; @@ -53,8 +89,20 @@ $button-wp-large-font-size: 2rem !default; // Windows Small Button // -------------------------------------------------- -/// @prop - Padding of the small button -$button-wp-small-padding: 0 .9em !default; +// deprecated +$button-wp-small-padding: null !default; + +/// @prop - Padding top of the small button +$button-wp-small-padding-top: 0 !default; + +/// @prop - Padding end of the small button +$button-wp-small-padding-end: .9em !default; + +/// @prop - Padding bottom of the small button +$button-wp-small-padding-bottom: $button-wp-small-padding-top !default; + +/// @prop - Padding start of the small button +$button-wp-small-padding-start: $button-wp-small-padding-end !default; /// @prop - Height of the small button $button-wp-small-height: 2.1em !default; @@ -110,8 +158,20 @@ $button-wp-clear-background-color-hover: rgba(158, 158, 158, .1 // Windows Round Button // -------------------------------------------------- -/// @prop - Padding of the round button -$button-wp-round-padding: $button-round-padding !default; +// deprecated +$button-wp-round-padding: null !default; + +/// @prop - Padding top of the round button +$button-wp-round-padding-top: $button-round-padding-top !default; + +/// @prop - Padding end of the round button +$button-wp-round-padding-end: $button-round-padding-end !default; + +/// @prop - Padding bottom of the round button +$button-wp-round-padding-bottom: $button-round-padding-bottom !default; + +/// @prop - Padding start of the round button +$button-wp-round-padding-start: $button-round-padding-start !default; /// @prop - Border radius of the round button $button-wp-round-border-radius: $button-round-border-radius !default; @@ -128,18 +188,24 @@ $button-wp-strong-font-weight: bold !default; // -------------------------------------------------- .button-wp { - margin: $button-wp-margin; - padding: $button-wp-padding; + @include border-radius($button-wp-border-radius); height: $button-wp-height; border: $button-wp-border-width $button-wp-border-style $button-wp-border-color; - border-radius: $button-wp-border-radius; font-size: $button-wp-font-size; color: $button-wp-text-color; background-color: $button-wp-background-color; + + @include deprecated-variable(margin, $button-wp-margin) { + @include margin($button-wp-margin-top, $button-wp-margin-end, $button-wp-margin-bottom, $button-wp-margin-start); + } + + @include deprecated-variable(padding, $button-wp-padding) { + @include padding($button-wp-padding-top, $button-wp-padding-end, $button-wp-padding-bottom, $button-wp-padding-start); + } } .button-wp:hover:not(.disable-hover) { @@ -180,19 +246,23 @@ $button-wp-strong-font-weight: bold !default; // -------------------------------------------------- .button-large-wp { - padding: $button-wp-large-padding; - height: $button-wp-large-height; font-size: $button-wp-large-font-size; + + @include deprecated-variable(padding, $button-wp-large-padding) { + @include padding($button-wp-large-padding-top, $button-wp-large-padding-end, $button-wp-large-padding-bottom, $button-wp-large-padding-start); + } } .button-small-wp { - padding: $button-wp-small-padding; - height: $button-wp-small-height; font-size: $button-wp-small-font-size; + + @include deprecated-variable(padding, $button-wp-small-padding) { + @include padding($button-wp-small-padding-top, $button-wp-small-padding-end, $button-wp-small-padding-bottom, $button-wp-small-padding-start); + } } .button-small-wp[icon-only] ion-icon { @@ -203,20 +273,18 @@ $button-wp-strong-font-weight: bold !default; // -------------------------------------------------- .button-block-wp { - margin-right: 0; - margin-left: 0; + @include margin-horizontal(0); } // Windows Full Button // -------------------------------------------------- .button-full-wp { - margin-right: 0; - margin-left: 0; + @include margin-horizontal(0); + @include border-radius(0); border-right-width: 0; border-left-width: 0; - border-radius: 0; } // Windows Outline Button @@ -304,13 +372,15 @@ $button-wp-strong-font-weight: bold !default; // -------------------------------------------------- .button-round-wp { - padding: $button-wp-round-padding; + @include border-radius($button-wp-round-border-radius); - border-radius: $button-wp-round-border-radius; + @include deprecated-variable(padding, $button-wp-round-padding) { + @include padding($button-wp-round-padding-top, $button-wp-round-padding-end, $button-wp-round-padding-bottom, $button-wp-round-padding-start); + } } .button-wp [icon-only] { - padding: 0; + @include padding(0); } diff --git a/src/components/card/card.ios.scss b/src/components/card/card.ios.scss index 25378efd4bb..3202a17f732 100644 --- a/src/components/card/card.ios.scss +++ b/src/components/card/card.ios.scss @@ -6,26 +6,34 @@ /// @prop - Margin top of the card $card-ios-margin-top: 12px !default; -/// @prop - Margin right of the card +// deprecated $card-ios-margin-right: 12px !default; +/// @prop - Margin end of the card +$card-ios-margin-end: $card-ios-margin-right !default; /// @prop - Margin bottom of the card $card-ios-margin-bottom: 12px !default; -/// @prop - Margin left of the card +// deprecated $card-ios-margin-left: 12px !default; +/// @prop - Margin start of the card +$card-ios-margin-start: $card-ios-margin-left; /// @prop - Padding top of the card $card-ios-padding-top: 13px !default; -/// @prop - Padding right of the card +// deprecated $card-ios-padding-right: 16px !default; +/// @prop - Padding end of the card +$card-ios-padding-end: $card-ios-padding-right; /// @prop - Padding bottom of the card $card-ios-padding-bottom: 14px !default; -/// @prop - Padding left of the card +// deprecated $card-ios-padding-left: 16px !default; +/// @prop - Padding start of the card +$card-ios-padding-start: $card-ios-padding-left; /// @prop - Padding top of the media on the card $card-ios-padding-media-top: 10px !default; @@ -54,11 +62,35 @@ $card-ios-text-color: #666 !default; /// @prop - Font size of the card title $card-ios-title-font-size: 1.8rem !default; -/// @prop - Padding of the card title -$card-ios-title-padding: 8px 0 8px 0 !default; +// deprecated +$card-ios-title-padding: null !default; -/// @prop - Margin of the card title -$card-ios-title-margin: 2px 0 2px !default; +/// @prop - Padding top of the card title +$card-ios-title-padding-top: 8px !default; + +/// @prop - Padding end of the card title +$card-ios-title-padding-end: 0 !default; + +/// @prop - Padding bottom of the card title +$card-ios-title-padding-bottom: 8px !default; + +/// @prop - Padding start of the card title +$card-ios-title-padding-start: 0 !default; + +// deprecated +$card-ios-title-margin: null !default; + +/// @prop - Margin top of the card title +$card-ios-title-margin-top: 2px !default; + +/// @prop - Margin end of the card title +$card-ios-title-margin-end: 0 !default; + +/// @prop - Margin bottom of the card title +$card-ios-title-margin-bottom: 2px !default; + +/// @prop - Margin start of the card title +$card-ios-title-margin-start: 0 !default; /// @prop - Color of the card title $card-ios-title-text-color: #222 !default; @@ -69,19 +101,31 @@ $card-ios-header-font-size: 1.6rem !default; /// @prop - Font weight of the card header $card-ios-header-font-weight: 500 !default; -/// @prop - Padding of the card header -$card-ios-header-padding: 16px !default; +// deprecated +$card-ios-header-padding: null !default; + +/// @prop - Padding top of the card header +$card-ios-header-padding-top: 16px !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: $card-ios-header-padding-top !default; + +/// @prop - Padding start of the card header +$card-ios-header-padding-start: $card-ios-header-padding-end !default; /// @prop - Color of the card header $card-ios-header-color: #333 !default; .card-ios { - margin: $card-ios-margin-top $card-ios-margin-right $card-ios-margin-bottom $card-ios-margin-left; + @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); - width: calc(100% - #{($card-ios-margin-right + $card-ios-margin-left)}); + width: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)}); - border-radius: $card-ios-border-radius; font-size: $card-ios-font-size; background: $card-ios-background-color; @@ -103,18 +147,20 @@ $card-ios-header-color: #333 !default; } .card-content-ios { - padding: $card-ios-padding-top $card-ios-padding-right $card-ios-padding-bottom $card-ios-padding-left; + @include padding($card-ios-padding-top, $card-ios-padding-end, $card-ios-padding-bottom, $card-ios-padding-start); font-size: $card-ios-font-size; line-height: 1.4; } .card-header-ios { - padding: $card-ios-header-padding; - font-size: $card-ios-header-font-size; font-weight: $card-ios-header-font-weight; color: $card-ios-header-color; + + @include deprecated-variable(padding, $card-ios-header-padding) { + @include padding($card-ios-header-padding-top, $card-ios-header-padding-end, $card-ios-header-padding-bottom, $card-ios-header-padding-start); + } } .card-header-ios + .card-content-ios, @@ -129,23 +175,28 @@ $card-ios-header-color: #333 !default; .card-title-ios { display: block; - margin: $card-ios-title-margin; - padding: $card-ios-title-padding; - font-size: $card-ios-title-font-size; line-height: 1.2; color: $card-ios-title-text-color; + + @include deprecated-variable(margin, $card-ios-title-margin) { + @include margin($card-ios-title-margin-top, $card-ios-title-margin-end, $card-ios-title-margin-bottom, $card-ios-title-margin-start); + } + + @include deprecated-variable(padding, $card-ios-title-padding) { + @include padding($card-ios-title-padding-top, $card-ios-title-padding-end, $card-ios-title-padding-bottom, $card-ios-title-padding-start); + } } .card-ios h1 { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 2.4rem; font-weight: normal; } .card-ios h2 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.6rem; font-weight: normal; @@ -155,14 +206,14 @@ $card-ios-header-color: #333 !default; .card-ios h4, .card-ios h5, .card-ios h6 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.4rem; font-weight: normal; } .card-ios p { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 1.4rem; color: $card-ios-text-color; diff --git a/src/components/card/card.md.scss b/src/components/card/card.md.scss index 4875196481d..ae439b80b12 100644 --- a/src/components/card/card.md.scss +++ b/src/components/card/card.md.scss @@ -6,27 +6,35 @@ /// @prop - Margin top of the card $card-md-margin-top: 10px !default; -/// @prop - Margin right of the card +// deprecated $card-md-margin-right: 10px !default; +/// @prop - Margin end of the card +$card-md-margin-end: $card-md-margin-right !default; /// @prop - Margin bottom of the card $card-md-margin-bottom: 10px !default; -/// @prop - Margin left of the card +// deprecated $card-md-margin-left: 10px !default; +/// @prop - Margin start of the card +$card-md-margin-start: $card-md-margin-left; /// @prop - Padding top of the card $card-md-padding-top: 13px !default; -/// @prop - Padding right of the card +// deprecated $card-md-padding-right: 16px !default; +/// @prop - Padding right of the card +$card-md-padding-end: $card-md-padding-right; /// @prop - Padding bottom of the card $card-md-padding-bottom: 13px !default; -/// @prop - Padding left of the card +// deprecated $card-md-padding-left: 16px !default; +/// @prop - Padding start of the card +$card-md-padding-start: $card-md-padding-left; /// @prop - Padding top of the media on the card $card-md-padding-media-top: 10px !default; @@ -62,11 +70,35 @@ $card-md-text-color: #222 !default; /// @prop - Font size of the card title $card-md-title-font-size: 2.4rem !default; -/// @prop - Padding of the card title -$card-md-title-padding: 8px 0 8px 0 !default; +// deprecated +$card-md-title-padding: null !default; + +/// @prop - Padding top of the card title +$card-md-title-padding-top: 8px !default; + +/// @prop - Padding end of the card title +$card-md-title-padding-end: 0 !default; + +/// @prop - Padding bottom of the card title +$card-md-title-padding-bottom: 8px !default; + +/// @prop - Padding start of the card title +$card-md-title-padding-start: 0 !default; -/// @prop - Margin of the card title -$card-md-title-margin: 2px 0 2px !default; +// deprecated +$card-md-title-margin: null !default; + +/// @prop - Margin top of the card title +$card-md-title-margin-top: 2px !default; + +/// @prop - Margin end of the card title +$card-md-title-margin-end: 0 !default; + +/// @prop - Margin bottom of the card title +$card-md-title-margin-bottom: 2px !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; @@ -74,19 +106,31 @@ $card-md-title-text-color: #222 !default; /// @prop - Font size of the card header $card-md-header-font-size: 1.6rem !default; -/// @prop - Padding of the card header -$card-md-header-padding: 16px !default; +// deprecated +$card-md-header-padding: null !default; + +/// @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; /// @prop - Color of the card header $card-md-header-color: #222 !default; .card-md { - margin: $card-md-margin-top $card-md-margin-right $card-md-margin-bottom $card-md-margin-left; + @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); - width: calc(100% - #{($card-md-margin-right + $card-md-margin-left)}); + width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)}); - border-radius: $card-md-border-radius; font-size: $card-md-font-size; background: $card-md-background-color; @@ -108,17 +152,19 @@ $card-md-header-color: #222 !default; } .card-content-md { - padding: $card-md-padding-top $card-md-padding-right $card-md-padding-bottom $card-md-padding-left; + @include padding($card-md-padding-top, $card-md-padding-end, $card-md-padding-bottom, $card-md-padding-start); font-size: $card-md-font-size; line-height: $card-md-line-height; } .card-header-md { - padding: $card-md-header-padding; - font-size: $card-md-header-font-size; color: $card-md-header-color; + + @include deprecated-variable(padding, $card-md-header-padding) { + @include padding($card-md-header-padding-top, $card-md-header-padding-end, $card-md-header-padding-bottom, $card-md-header-padding-start); + } } .card-header-md + .card-content-md, @@ -133,16 +179,21 @@ $card-md-header-color: #222 !default; .card-title-md { display: block; - margin: $card-md-title-margin; - padding: $card-md-title-padding; - font-size: $card-md-title-font-size; line-height: 1.2; color: $card-md-title-text-color; + + @include deprecated-variable(margin, $card-md-title-margin) { + @include margin($card-md-title-margin-top, $card-md-title-margin-end, $card-md-title-margin-bottom, $card-md-title-margin-start); + } + + @include deprecated-variable(padding, $card-md-title-padding) { + @include padding($card-md-title-padding-top, $card-md-title-padding-end, $card-md-title-padding-bottom, $card-md-title-padding-start); + } } .card-md h1 { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 2.4rem; font-weight: normal; @@ -150,7 +201,7 @@ $card-md-header-color: #222 !default; } .card-md h2 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.6rem; font-weight: normal; @@ -161,7 +212,7 @@ $card-md-header-color: #222 !default; .card-md h4, .card-md h5, .card-md h6 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.4rem; font-weight: normal; @@ -169,7 +220,7 @@ $card-md-header-color: #222 !default; } .card-md p { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 1.4rem; font-weight: normal; diff --git a/src/components/card/card.wp.scss b/src/components/card/card.wp.scss index f24f49ec899..120423d4a9a 100644 --- a/src/components/card/card.wp.scss +++ b/src/components/card/card.wp.scss @@ -6,26 +6,34 @@ /// @prop - Margin top of the card $card-wp-margin-top: 8px !default; -/// @prop - Margin right of the card +// deprecated $card-wp-margin-right: 8px !default; +/// @prop - Margin end of the card +$card-wp-margin-end: $card-wp-margin-right !default; /// @prop - Margin bottom of the card $card-wp-margin-bottom: 8px !default; -/// @prop - Margin left of the card +// deprecated $card-wp-margin-left: 8px !default; +/// @prop - Margin start of the card +$card-wp-margin-start: $card-wp-margin-left; /// @prop - Padding top of the card $card-wp-padding-top: 13px !default; -/// @prop - Padding right of the card +// deprecated $card-wp-padding-right: 16px !default; +/// @prop - Padding end of the card +$card-wp-padding-end: $card-wp-padding-right; /// @prop - Padding bottom of the card $card-wp-padding-bottom: 13px !default; -/// @prop - Padding left of the card +// deprecated $card-wp-padding-left: 16px !default; +/// @prop - Padding start of the card +$card-wp-padding-start: $card-wp-padding-left; /// @prop - Padding top of the media on the card $card-wp-padding-media-top: 10px !default; @@ -63,11 +71,35 @@ $card-wp-text-color: #222 !default; /// @prop - Font size of card title $card-wp-title-font-size: 2.4rem !default; -/// @prop - Padding of the card title -$card-wp-title-padding: 8px 0 8px 0 !default; +// deprecated +$card-wp-title-padding: null !default; -/// @prop - Margin of the card title -$card-wp-title-margin: 2px 0 !default; +/// @prop - Padding top of the card title +$card-wp-title-padding-top: 8px !default; + +/// @prop - Padding end of the card title +$card-wp-title-padding-end: 0 !default; + +/// @prop - Padding bottom of the card title +$card-wp-title-padding-bottom: 8px !default; + +/// @prop - Padding start of the card title +$card-wp-title-padding-start: 0 !default; + +// deprecated +$card-wp-title-margin: null !default; + +/// @prop - Margin top of the card title +$card-wp-title-margin-top: 2px !default; + +/// @prop - Margin end of the card title +$card-wp-title-margin-end: 0 !default; + +/// @prop - Margin bottom of the card title +$card-wp-title-margin-bottom: $card-wp-title-margin-top !default; + +/// @prop - Margin start of the card title +$card-wp-title-margin-start: $card-wp-title-margin-end !default; /// @prop - Color of the card title $card-wp-title-text-color: #222 !default; @@ -75,19 +107,31 @@ $card-wp-title-text-color: #222 !default; /// @prop - Font size of the card header $card-wp-header-font-size: 1.6rem !default; -/// @prop - Padding of the card header -$card-wp-header-padding: 16px !default; +// deprecated +$card-wp-header-padding: null !default; + +/// @prop - Padding top of the card header +$card-wp-header-padding-top: 16px !default; + +/// @prop - Padding end of the card header +$card-wp-header-padding-end: $card-wp-header-padding-top !default; + +/// @prop - Padding bottom of the card header +$card-wp-header-padding-bottom: $card-wp-header-padding-top !default; + +/// @prop - Padding start of the card header +$card-wp-header-padding-start: $card-wp-header-padding-end !default; /// @prop - Color of the card header $card-wp-header-color: #222 !default; .card-wp { - margin: $card-wp-margin-top $card-wp-margin-right $card-wp-margin-bottom $card-wp-margin-left; + @include margin($card-wp-margin-top, $card-wp-margin-end, $card-wp-margin-bottom, $card-wp-margin-start); + @include border-radius($card-wp-border-radius); - width: calc(100% - #{($card-wp-margin-right + $card-wp-margin-left)}); + width: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)}); - border-radius: $card-wp-border-radius; font-size: $card-wp-font-size; background: $card-wp-background-color; @@ -109,18 +153,20 @@ $card-wp-header-color: #222 !default; } .card-content-wp { - padding: $card-wp-padding-top $card-wp-padding-right $card-wp-padding-bottom $card-wp-padding-left; + @include padding($card-wp-padding-top, $card-wp-padding-end, $card-wp-padding-bottom, $card-wp-padding-start); font-size: $card-wp-font-size; line-height: $card-wp-line-height; } .card-header-wp { - padding: $card-wp-header-padding; - font-size: $card-wp-header-font-size; color: $card-wp-header-color; + + @include deprecated-variable(padding, $card-wp-header-padding) { + @include padding($card-wp-header-padding-top, $card-wp-header-padding-end, $card-wp-header-padding-bottom, $card-wp-header-padding-start); + } } .card-header-wp + .card-content-wp, @@ -135,16 +181,21 @@ $card-wp-header-color: #222 !default; .card-title-wp { display: block; - margin: $card-wp-title-margin; - padding: $card-wp-title-padding; - font-size: $card-wp-title-font-size; line-height: 1.2; color: $card-wp-title-text-color; + + @include deprecated-variable(margin, $card-wp-title-margin) { + @include margin($card-wp-title-margin-top, $card-wp-title-margin-end, $card-wp-title-margin-bottom, $card-wp-title-margin-start); + } + + @include deprecated-variable(padding, $card-wp-title-padding) { + @include padding($card-wp-title-padding-top, $card-wp-title-padding-end, $card-wp-title-padding-bottom, $card-wp-title-padding-start); + } } .card-wp h1 { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 2.4rem; font-weight: normal; @@ -152,7 +203,7 @@ $card-wp-header-color: #222 !default; } .card-wp h2 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.6rem; font-weight: normal; @@ -163,7 +214,7 @@ $card-wp-header-color: #222 !default; .card-wp h4, .card-wp h5, .card-wp h6 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.4rem; font-weight: normal; @@ -171,7 +222,7 @@ $card-wp-header-color: #222 !default; } .card-wp p { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 1.4rem; font-weight: normal; diff --git a/src/components/checkbox/checkbox.ios.scss b/src/components/checkbox/checkbox.ios.scss index 9f48578339b..7116598c753 100644 --- a/src/components/checkbox/checkbox.ios.scss +++ b/src/components/checkbox/checkbox.ios.scss @@ -40,14 +40,34 @@ $checkbox-ios-icon-checkmark-color: color-contrast($colors-ios, $checkbox- $checkbox-ios-disabled-opacity: .3 !default; // deprecated -$checkbox-ios-item-left-margin: $item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px !default; -/// @prop - Margin of the start checkbox item -$checkbox-ios-item-start-margin: $checkbox-ios-item-left-margin; +$checkbox-ios-item-left-margin: null !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; // deprecated -$checkbox-ios-item-right-margin: 10px 8px 9px 0 !default; -/// @prop - Margin of the end checkbox item -$checkbox-ios-item-end-margin: $checkbox-ios-item-right-margin; +$checkbox-ios-item-right-margin: null !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; .checkbox-ios { @@ -60,6 +80,8 @@ $checkbox-ios-item-end-margin: $checkbox-ios-item-right-margin; // ----------------------------------------- .checkbox-ios .checkbox-icon { + @include border-radius($checkbox-ios-icon-border-radius); + position: relative; width: $checkbox-ios-icon-size; @@ -67,7 +89,6 @@ $checkbox-ios-item-end-margin: $checkbox-ios-item-right-margin; border-width: $checkbox-ios-icon-border-width; border-style: $checkbox-ios-icon-border-style; - border-radius: $checkbox-ios-icon-border-radius; border-color: $checkbox-ios-icon-border-color-off; background-color: $checkbox-ios-background-color-off; } @@ -86,9 +107,9 @@ $checkbox-ios-item-end-margin: $checkbox-ios-item-right-margin; // ----------------------------------------- .checkbox-ios .checkbox-checked .checkbox-inner { + @include position(4px, null, null, 7px); + position: absolute; - top: 4px; - left: 7px; width: 4px; height: 9px; @@ -120,12 +141,16 @@ $checkbox-ios-item-end-margin: $checkbox-ios-item-right-margin; position: static; display: block; - margin: $checkbox-ios-item-start-margin; + @include deprecated-variable(margin, $checkbox-ios-item-left-margin) { + @include margin($checkbox-ios-item-start-margin-top, $checkbox-ios-item-start-margin-end, $checkbox-ios-item-start-margin-bottom, $checkbox-ios-item-start-margin-start); + } } .item.item-ios .checkbox-ios[item-right], // deprecated .item.item-ios .checkbox-ios[item-end] { - margin: $checkbox-ios-item-end-margin; + @include deprecated-variable(margin, $checkbox-ios-item-right-margin) { + @include margin($checkbox-ios-item-end-margin-top, $checkbox-ios-item-end-margin-end, $checkbox-ios-item-end-margin-bottom, $checkbox-ios-item-end-margin-start); + } } diff --git a/src/components/checkbox/checkbox.md.scss b/src/components/checkbox/checkbox.md.scss index ec953315d17..ad76e0c5ce5 100644 --- a/src/components/checkbox/checkbox.md.scss +++ b/src/components/checkbox/checkbox.md.scss @@ -12,12 +12,6 @@ $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 - Padding of the checkbox -$checkbox-md-padding: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default; - -/// @prop - Margin of the checkbox -$checkbox-md-margin: 0 !default; - /// @prop - Opacity of the disabled checkbox $checkbox-md-disabled-opacity: .3 !default; @@ -61,14 +55,34 @@ $checkbox-md-transition-duration: 280ms !default; $checkbox-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; // deprecated -$checkbox-md-item-left-margin: $item-md-padding-media-top 36px $item-md-padding-media-bottom 4px !default; -/// @prop - Margin of the start checkbox item -$checkbox-md-item-start-margin: $checkbox-md-item-left-margin; +$checkbox-md-item-left-margin: null !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; // deprecated -$checkbox-md-item-right-margin: 11px 10px 10px 0 !default; -/// @prop - Margin of the end checkbox item -$checkbox-md-item-end-margin: $checkbox-md-item-right-margin; +$checkbox-md-item-right-margin: null !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; .checkbox-md { @@ -81,6 +95,8 @@ $checkbox-md-item-end-margin: $checkbox-md-item-right-margin; // ----------------------------------------- .checkbox-md .checkbox-icon { + @include border-radius($checkbox-md-icon-border-radius); + position: relative; width: $checkbox-md-icon-size; @@ -88,7 +104,6 @@ $checkbox-md-item-end-margin: $checkbox-md-item-right-margin; border-width: $checkbox-md-icon-border-width; border-style: $checkbox-md-icon-border-style; - border-radius: $checkbox-md-icon-border-radius; border-color: $checkbox-md-icon-border-color-off; background-color: $checkbox-md-icon-background-color-off; @@ -111,9 +126,9 @@ $checkbox-md-item-end-margin: $checkbox-md-item-right-margin; // ----------------------------------------- .checkbox-md .checkbox-checked .checkbox-inner { + @include position(0, null, null, 4px); + position: absolute; - top: 0; - left: 4px; width: 5px; height: 10px; @@ -145,16 +160,20 @@ $checkbox-md-item-end-margin: $checkbox-md-item-right-margin; position: static; display: block; - margin: $checkbox-md-item-start-margin; + @include deprecated-variable(margin, $checkbox-md-item-left-margin) { + @include margin($checkbox-md-item-start-margin-top, $checkbox-md-item-start-margin-end, $checkbox-md-item-start-margin-bottom, $checkbox-md-item-start-margin-start); + } } .item.item-md .checkbox-md[item-right], // deprecated .item.item-md .checkbox-md[item-end] { - margin: $checkbox-md-item-end-margin; + @include deprecated-variable(margin, $checkbox-md-item-right-margin) { + @include margin($checkbox-md-item-end-margin-top, $checkbox-md-item-end-margin-end, $checkbox-md-item-end-margin-bottom, $checkbox-md-item-end-margin-start); + } } .checkbox-md + .item-inner ion-label { - margin-left: 0; + @include margin-horizontal(0, null); } diff --git a/src/components/checkbox/checkbox.wp.scss b/src/components/checkbox/checkbox.wp.scss index 1f000f1c71a..517e82871c8 100644 --- a/src/components/checkbox/checkbox.wp.scss +++ b/src/components/checkbox/checkbox.wp.scss @@ -12,12 +12,6 @@ $checkbox-wp-border-bottom-style: solid !default; /// @prop - Border bottom color of the checkbox $checkbox-wp-border-bottom-color: $list-wp-border-color !default; -/// @prop - Padding of the checkbox -$checkbox-wp-padding: $item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom 0 !default; - -/// @prop - Margin of the checkbox -$checkbox-wp-margin: 0 !default; - /// @prop - Opacity of the disabled checkbox $checkbox-wp-disabled-opacity: .3 !default; @@ -55,15 +49,34 @@ $checkbox-wp-icon-border-color-off: #333 !default; $checkbox-wp-icon-border-color-on: color($colors-wp, primary) !default; // deprecated -$checkbox-wp-item-left-margin: $item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 4px !default; -/// @prop - Margin of the start checkbox item -$checkbox-wp-item-start-margin: $checkbox-wp-item-left-margin; +$checkbox-wp-item-left-margin: null !default; + +/// @prop - Margin top of the start checkbox item +$checkbox-wp-item-start-margin-top: $item-wp-padding-media-top !default; + +/// @prop - Margin end of the start checkbox item +$checkbox-wp-item-start-margin-end: $item-wp-padding-end !default; + +/// @prop - Margin bottom of the start checkbox item +$checkbox-wp-item-start-margin-bottom: $item-wp-padding-media-bottom !default; + +/// @prop - Margin start of the start checkbox item +$checkbox-wp-item-start-margin-start: 4px !default; // deprecated -$checkbox-wp-item-right-margin: 11px 10px 10px 0 !default; -/// @prop - Margin of the end checkbox item -$checkbox-wp-item-end-margin: $checkbox-wp-item-right-margin; +$checkbox-wp-item-right-margin: null !default; + +/// @prop - Margin top of the end checkbox item +$checkbox-wp-item-end-margin-top: 11px !default; +/// @prop - Margin end of the end checkbox item +$checkbox-wp-item-end-margin-end: 10px !default; + +/// @prop - Margin bottom of the end checkbox item +$checkbox-wp-item-end-margin-bottom: 10px !default; + +/// @prop - Margin start of the end checkbox item +$checkbox-wp-item-end-margin-start: 0 !default; .checkbox-wp { position: relative; @@ -75,6 +88,8 @@ $checkbox-wp-item-end-margin: $checkbox-wp-item-right-margin; // ----------------------------------------- .checkbox-wp .checkbox-icon { + @include border-radius($checkbox-wp-icon-border-radius); + position: relative; width: $checkbox-wp-icon-size; @@ -82,7 +97,6 @@ $checkbox-wp-item-end-margin: $checkbox-wp-item-right-margin; border-width: $checkbox-wp-icon-border-width; border-style: $checkbox-wp-icon-border-style; - border-radius: $checkbox-wp-icon-border-radius; border-color: $checkbox-wp-icon-border-color-off; background-color: $checkbox-wp-icon-background-color-off; } @@ -101,9 +115,9 @@ $checkbox-wp-item-end-margin: $checkbox-wp-item-right-margin; // ----------------------------------------- .checkbox-wp .checkbox-checked .checkbox-inner { + @include position(-2px, null, null, 3px); + position: absolute; - top: -2px; - left: 3px; width: 6px; height: 12px; @@ -135,16 +149,20 @@ $checkbox-wp-item-end-margin: $checkbox-wp-item-right-margin; position: static; display: block; - margin: $checkbox-wp-item-start-margin; + @include deprecated-variable(margin, $checkbox-wp-item-left-margin) { + @include margin($checkbox-wp-item-start-margin-top, $checkbox-wp-item-start-margin-end, $checkbox-wp-item-start-margin-bottom, $checkbox-wp-item-start-margin-start); + } } .item.item-wp .checkbox-wp[item-right], // deprecated .item.item-wp .checkbox-wp[item-end] { - margin: $checkbox-wp-item-end-margin; + @include deprecated-variable(margin, $checkbox-wp-item-right-margin) { + @include margin($checkbox-wp-item-end-margin-top, $checkbox-wp-item-end-margin-end, $checkbox-wp-item-end-margin-bottom, $checkbox-wp-item-end-margin-start); + } } .checkbox-wp + .item-inner ion-label { - margin-left: 0; + @include margin-horizontal(0, null); } diff --git a/src/components/chip/chip.ios.scss b/src/components/chip/chip.ios.scss index 40f81caa0f3..f5ad7f57d3f 100644 --- a/src/components/chip/chip.ios.scss +++ b/src/components/chip/chip.ios.scss @@ -2,8 +2,20 @@ // iOS Chip // -------------------------------------------------- -/// @prop - Margin of the chip -$chip-ios-margin: 2px 0 !default; +// deprecated +$chip-ios-margin: null !default; + +/// @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; @@ -20,8 +32,20 @@ $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 of the label in the chip -$chip-ios-label-margin: 0 10px !default; +// deprecated +$chip-ios-label-margin: null !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; @@ -31,19 +55,24 @@ $chip-ios-icon-text-color: color-contrast($colors-ios, $chip-ios-icon .chip-ios { - margin: $chip-ios-margin; + @include border-radius($chip-ios-border-radius); height: $chip-ios-height; - border-radius: $chip-ios-border-radius; font-size: $chip-ios-font-size; line-height: $chip-ios-height; color: $chip-ios-text-color; background: $chip-ios-background-color; + + @include deprecated-variable(margin, $chip-ios-margin) { + @include margin($chip-ios-margin-top, $chip-ios-margin-end, $chip-ios-margin-bottom, $chip-ios-margin-start); + } } .chip-ios > ion-label { - margin: $chip-ios-label-margin; + @include deprecated-variable(margin, $chip-ios-label-margin) { + @include margin($chip-ios-label-margin-top, $chip-ios-label-margin-end, $chip-ios-label-margin-bottom, $chip-ios-label-margin-start); + } } .chip-ios > ion-icon { diff --git a/src/components/chip/chip.md.scss b/src/components/chip/chip.md.scss index 566d23d39c9..3bc7a4e6ad7 100644 --- a/src/components/chip/chip.md.scss +++ b/src/components/chip/chip.md.scss @@ -2,8 +2,20 @@ // Material Design Chip // -------------------------------------------------- -/// @prop - Margin of the chip -$chip-md-margin: 2px 0 !default; +// deprecated +$chip-md-margin: null !default; + +/// @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; @@ -20,8 +32,20 @@ $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 of the label in the chip -$chip-md-label-margin: 0 10px !default; +// deprecated +$chip-md-label-margin: null !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; @@ -31,19 +55,24 @@ $chip-md-icon-text-color: color-contrast($colors-md, $chip-md-icon-ba .chip-md { - margin: $chip-md-margin; + @include border-radius($chip-md-border-radius); height: $chip-md-height; - border-radius: $chip-md-border-radius; font-size: $chip-md-font-size; line-height: $chip-md-height; color: $chip-md-text-color; background: $chip-md-background-color; + + @include deprecated-variable(margin, $chip-md-margin) { + @include margin($chip-md-margin-top, $chip-md-margin-end, $chip-md-margin-bottom, $chip-md-margin-start); + } } .chip-md > ion-label { - margin: $chip-md-label-margin; + @include deprecated-variable(margin, $chip-md-label-margin) { + @include margin($chip-md-label-margin-top, $chip-md-label-margin-end, $chip-md-label-margin-bottom, $chip-md-label-margin-start); + } } .chip-md > ion-icon { diff --git a/src/components/chip/chip.scss b/src/components/chip/chip.scss index ee434909d46..eef06462c99 100644 --- a/src/components/chip/chip.scss +++ b/src/components/chip/chip.scss @@ -6,8 +6,20 @@ /// @prop - Border radius of the button in the chip $chip-button-border-radius: 50% !default; -/// @prop - Margin of the button in the chip -$chip-button-margin: 0 !default; +// deprecated +$chip-button-margin: null !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; @@ -43,42 +55,43 @@ ion-chip { } ion-chip .button { - margin: $chip-button-margin; + @include border-radius($chip-button-border-radius); width: $chip-button-size; height: $chip-button-size; - border-radius: $chip-button-border-radius; + @include deprecated-variable(margin, $chip-button-margin) { + @include margin($chip-button-margin-top, $chip-button-margin-end, $chip-button-margin-bottom, $chip-button-margin-start); + } } ion-chip ion-icon { @include text-align($chip-icon-text-align); + @include border-radius($chip-icon-border-radius); width: $chip-icon-size; height: $chip-icon-size; - border-radius: $chip-icon-border-radius; - font-size: $chip-icon-font-size; line-height: $chip-icon-size; } 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; - - border-radius: $chip-avatar-border-radius; } ion-chip ion-avatar img { + @include border-radius($chip-avatar-border-radius); + display: block; width: 100%; max-width: 100%; height: 100%; max-height: 100%; - - border-radius: $chip-avatar-border-radius; } diff --git a/src/components/chip/chip.wp.scss b/src/components/chip/chip.wp.scss index 412195325f7..58986960933 100644 --- a/src/components/chip/chip.wp.scss +++ b/src/components/chip/chip.wp.scss @@ -2,8 +2,20 @@ // Windows Chip // -------------------------------------------------- -/// @prop - Margin of the chip -$chip-wp-margin: 2px 0 !default; +// deprecated +$chip-wp-margin: null !default; + +/// @prop - Margin top of the chip +$chip-wp-margin-top: 2px !default; + +/// @prop - Margin end of the chip +$chip-wp-margin-end: 0 !default; + +/// @prop - Margin bottom of the chip +$chip-wp-margin-bottom: $chip-wp-margin-top !default; + +/// @prop - Margin start of the chip +$chip-wp-margin-start: $chip-wp-margin-end !default; /// @prop - Height of the chip $chip-wp-height: 32px !default; @@ -20,8 +32,20 @@ $chip-wp-text-color: rgba(0, 0, 0, .87) !default; /// @prop - Background color of the chip $chip-wp-background-color: rgba(0, 0, 0, .12) !default; -/// @prop - Margin of the label in the chip -$chip-wp-label-margin: 0 10px !default; +// deprecated +$chip-wp-label-margin: null !default; + +/// @prop - Margin top of the label in the chip +$chip-wp-label-margin-top: 0 !default; + +/// @prop - Margin end of the label in the chip +$chip-wp-label-margin-end: 10px !default; + +/// @prop - Margin bottom of the label in the chip +$chip-wp-label-margin-bottom: $chip-wp-label-margin-top !default; + +/// @prop - Margin start of the label in the chip +$chip-wp-label-margin-start: $chip-wp-label-margin-end !default; /// @prop - Background color of the icon in the chip $chip-wp-icon-background-color: color($colors-wp, primary) !default; @@ -31,19 +55,24 @@ $chip-wp-icon-text-color: color-contrast($colors-wp, $chip-wp-icon-ba .chip-wp { - margin: $chip-wp-margin; + @include border-radius($chip-wp-border-radius); height: $chip-wp-height; - border-radius: $chip-wp-border-radius; font-size: $chip-wp-font-size; line-height: $chip-wp-height; color: $chip-wp-text-color; background: $chip-wp-background-color; + + @include deprecated-variable(margin, $chip-wp-margin) { + @include margin($chip-wp-margin-top, $chip-wp-margin-end, $chip-wp-margin-bottom, $chip-wp-margin-start); + } } .chip-wp > ion-label { - margin: $chip-wp-label-margin; + @include deprecated-variable(margin, $chip-wp-label-margin) { + @include margin($chip-wp-label-margin-top, $chip-wp-label-margin-end, $chip-wp-label-margin-bottom, $chip-wp-label-margin-start); + } } .chip-wp > ion-icon { diff --git a/src/components/content/content.ios.scss b/src/components/content/content.ios.scss index 5daee495b9f..81f1b774b1e 100644 --- a/src/components/content/content.ios.scss +++ b/src/components/content/content.ios.scss @@ -26,11 +26,11 @@ $content-ios-transition-background: #000 !default; } .ios .ion-page.show-page ~ .nav-decor { + @include position(0, null, null, 0); + // when ios pages transition, the leaving page grays out // this is the black square behind all pages so they gray out position: absolute; - top: 0; - left: 0; z-index: 0; display: block; diff --git a/src/components/content/content.scss b/src/components/content/content.scss index 3f584a6aae2..cef3f332f40 100644 --- a/src/components/content/content.scss +++ b/src/components/content/content.scss @@ -4,9 +4,9 @@ // -------------------------------------------------- ion-content { + @include position(0, null, null, 0); + position: relative; - top: 0; - left: 0; display: block; width: 100%; @@ -28,11 +28,9 @@ a { // -------------------------------------------------- .scroll-content { + @include position(0, 0, 0, 0); + position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; z-index: $z-index-scroll-content; display: block; @@ -65,11 +63,9 @@ ion-content.js-scroll > .scroll-content { // -------------------------------------------------- .fixed-content { + @include position(0, 0, 0, 0); + position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; display: block; } @@ -87,13 +83,13 @@ ion-content.js-scroll > .scroll-content { ion-app [no-padding], ion-app [no-padding] .scroll-content { - padding: 0; + @include padding(0); } @mixin content-padding($mode, $content-padding) { ion-app.#{$mode} [padding], ion-app.#{$mode} [padding] .scroll-content { - padding: $content-padding; + @include padding($content-padding); } ion-app.#{$mode} [padding-top], @@ -103,12 +99,12 @@ ion-app [no-padding] .scroll-content { ion-app.#{$mode} [padding-left], ion-app.#{$mode} [padding-left] .scroll-content { - padding-left: $content-padding; + @include padding-horizontal($content-padding, null); } ion-app.#{$mode} [padding-right], ion-app.#{$mode} [padding-right] .scroll-content { - padding-right: $content-padding; + @include padding-horizontal(null, $content-padding); } ion-app.#{$mode} [padding-bottom], @@ -124,8 +120,7 @@ ion-app [no-padding] .scroll-content { ion-app.#{$mode} [padding-horizontal], ion-app.#{$mode} [padding-horizontal] .scroll-content { - padding-right: $content-padding; - padding-left: $content-padding; + @include padding-horizontal($content-padding); } } @@ -135,13 +130,13 @@ ion-app [no-padding] .scroll-content { ion-app [no-margin], ion-app [no-margin] .scroll-content { - margin: 0; + @include margin(0); } @mixin content-margin($mode, $content-margin) { ion-app.#{$mode} [margin], ion-app.#{$mode} [margin] .scroll-content { - margin: $content-margin; + @include margin($content-margin); } ion-app.#{$mode} [margin-top], @@ -151,14 +146,26 @@ ion-app [no-margin] .scroll-content { ion-app.#{$mode} [margin-left], ion-app.#{$mode} [margin-left] .scroll-content { + // scss-lint:disable PropertySpelling margin-left: $content-margin; } + ion-app.#{$mode} [margin-start], + ion-app.#{$mode} [margin-start] .scroll-content { + @include margin-horizontal($content-margin, null); + } + ion-app.#{$mode} [margin-right], ion-app.#{$mode} [margin-right] .scroll-content { + // scss-lint:disable PropertySpelling margin-right: $content-margin; } + ion-app.#{$mode} [margin-end], + ion-app.#{$mode} [margin-end] .scroll-content { + @include margin-horizontal(null, $content-margin); + } + ion-app.#{$mode} [margin-bottom], ion-app.#{$mode} [margin-bottom] .scroll-content { margin-bottom: $content-margin; @@ -172,7 +179,6 @@ ion-app [no-margin] .scroll-content { ion-app.#{$mode} [margin-horizontal], ion-app.#{$mode} [margin-horizontal] .scroll-content { - margin-right: $content-margin; - margin-left: $content-margin; + @include margin-horizontal($content-margin); } } diff --git a/src/components/datetime/datetime.ios.scss b/src/components/datetime/datetime.ios.scss index d103ec6c5bf..726e711f01c 100644 --- a/src/components/datetime/datetime.ios.scss +++ b/src/components/datetime/datetime.ios.scss @@ -6,21 +6,25 @@ /// @prop - Padding top of the DateTime component $datetime-ios-padding-top: $item-ios-padding-top !default; -/// @prop - Padding right of the DateTime component -$datetime-ios-padding-right: ($item-ios-padding-right / 2) !default; +// deprecated +$datetime-ios-padding-right: ($item-ios-padding-end / 2) !default; +/// @prop - Padding end of the DateTime component +$datetime-ios-padding-end: $datetime-ios-padding-right; /// @prop - Padding bottom of the DateTime component $datetime-ios-padding-bottom: $item-ios-padding-bottom !default; -/// @prop - Padding left of the DateTime component -$datetime-ios-padding-left: $item-ios-padding-left !default; +// deprecated +$datetime-ios-padding-left: $item-ios-padding-start !default; +/// @prop - Padding start of the DateTime component +$datetime-ios-padding-start: $datetime-ios-padding-left; /// @prop - Color of the DateTime placeholder $datetime-ios-placeholder-color: #999 !default; .datetime-ios { - padding: $datetime-ios-padding-top $datetime-ios-padding-right $datetime-ios-padding-bottom $datetime-ios-padding-left; + @include padding($datetime-ios-padding-top, $datetime-ios-padding-end, $datetime-ios-padding-bottom, $datetime-ios-padding-start); } .datetime-ios .datetime-placeholder { diff --git a/src/components/datetime/datetime.md.scss b/src/components/datetime/datetime.md.scss index a2bb9913c0b..9f2162ee3e2 100644 --- a/src/components/datetime/datetime.md.scss +++ b/src/components/datetime/datetime.md.scss @@ -6,21 +6,25 @@ /// @prop - Padding top of the DateTime component $datetime-md-padding-top: $item-md-padding-top !default; -/// @prop - Padding right of the DateTime component -$datetime-md-padding-right: ($item-md-padding-right / 2) !default; +// deprecated +$datetime-md-padding-right: ($item-md-padding-end / 2) !default; +/// @prop - Padding end of the DateTime component +$datetime-md-padding-end: $datetime-md-padding-right; /// @prop - Padding bottom of the DateTime component $datetime-md-padding-bottom: $item-md-padding-bottom !default; -/// @prop - Padding left of the DateTime component -$datetime-md-padding-left: $item-md-padding-left !default; +// deprecated +$datetime-md-padding-left: $item-md-padding-start !default; +/// @prop - Padding start of the DateTime component +$datetime-md-padding-start: $datetime-md-padding-left; /// @prop - Color of the DateTime placeholder $datetime-md-placeholder-color: #999 !default; .datetime-md { - padding: $datetime-md-padding-top $datetime-md-padding-right $datetime-md-padding-bottom $datetime-md-padding-left; + @include padding($datetime-md-padding-top, $datetime-md-padding-end, $datetime-md-padding-bottom, $datetime-md-padding-start); } .datetime-md .datetime-placeholder { diff --git a/src/components/datetime/datetime.scss b/src/components/datetime/datetime.scss index f1a3a58b140..bd3dd010dcb 100644 --- a/src/components/datetime/datetime.scss +++ b/src/components/datetime/datetime.scss @@ -31,7 +31,7 @@ ion-datetime { .item-label-stacked ion-datetime, .item-label-floating ion-datetime { - padding-left: 0; + @include padding-horizontal(0, null); width: 100%; } diff --git a/src/components/datetime/datetime.wp.scss b/src/components/datetime/datetime.wp.scss index a9129a0fc8a..72164592e6f 100644 --- a/src/components/datetime/datetime.wp.scss +++ b/src/components/datetime/datetime.wp.scss @@ -9,14 +9,18 @@ $datetime-wp-min-width: 45% !default; /// @prop - Padding top of the DateTime component $datetime-wp-padding-top: $item-wp-padding-top !default; -/// @prop - Padding right of the DateTime component -$datetime-wp-padding-right: ($item-wp-padding-right / 2) !default; +// deprecated +$datetime-wp-padding-right: ($item-wp-padding-end / 2) !default; +/// @prop - Padding end of the DateTime component +$datetime-wp-padding-end: $datetime-wp-padding-right; /// @prop - Padding bottom of the DateTime component $datetime-wp-padding-bottom: $item-wp-padding-bottom !default; -/// @prop - Padding left of the DateTime component -$datetime-wp-padding-left: $item-wp-padding-left !default; +// deprecated +$datetime-wp-padding-left: $item-wp-padding-start !default; +/// @prop - Padding start of the DateTime component +$datetime-wp-padding-start: $datetime-wp-padding-left; /// @prop - Border width of the DateTime component $datetime-wp-border-width: 2px !default; @@ -29,13 +33,13 @@ $datetime-wp-placeholder-color: $input-wp-border-color !default; .datetime-wp { - padding: $datetime-wp-padding-top $datetime-wp-padding-right $datetime-wp-padding-bottom $datetime-wp-padding-left; + @include padding($datetime-wp-padding-top, $datetime-wp-padding-end, $datetime-wp-padding-bottom, $datetime-wp-padding-start); min-width: $datetime-wp-min-width; } .datetime-wp .datetime-text { - padding: 0 8px; + @include padding(0, 8px); min-height: 3.4rem; diff --git a/src/components/fab/fab.scss b/src/components/fab/fab.scss index 66bb3ee3266..97c7213ddf9 100755 --- a/src/components/fab/fab.scss +++ b/src/components/fab/fab.scss @@ -22,6 +22,7 @@ $fab-list-button-background-color: #f4f4f4 !default; .fab { @include text-align(center); @include appearance(none); + @include border-radius(50%); position: relative; z-index: 0; @@ -31,7 +32,6 @@ $fab-list-button-background-color: #f4f4f4 !default; width: $fab-size; height: $fab-size; - border-radius: 50%; font-size: 14px; line-height: $fab-size; text-overflow: ellipsis; @@ -57,7 +57,7 @@ $fab-list-button-background-color: #f4f4f4 !default; // -------------------------------------------------- .fab[mini] { - margin: ($fab-size - $fab-mini-size) / 2; + @include margin(($fab-size - $fab-mini-size) / 2); width: $fab-mini-size; height: $fab-mini-size; @@ -78,9 +78,9 @@ ion-fab { z-index: $z-index-fixed-content; &[center] { - left: 50%; + @include position(null, null, null, 50%); - margin-left: -$fab-size / 2; + @include margin-horizontal(-$fab-size / 2, null); } &[middle] { @@ -94,17 +94,27 @@ ion-fab { } &[right] { + // scss-lint:disable PropertySpelling right: $fab-content-margin; } + &[end] { + @include position-horizontal(null, $fab-content-margin); + } + &[bottom] { bottom: $fab-content-margin; } &[left] { + // scss-lint:disable PropertySpelling left: $fab-content-margin; } + &[start] { + @include position-horizontal($fab-content-margin, null); + } + &[top][edge] { top: -$fab-size / 2; } @@ -119,6 +129,8 @@ ion-fab { // -------------------------------------------------- ion-fab-list { + @include margin($fab-size + $fab-list-margin, 0); + position: absolute; top: 0; display: none; @@ -126,14 +138,12 @@ ion-fab-list { flex-direction: column; align-items: center; - margin: $fab-size + $fab-list-margin 0; - min-width: $fab-size; min-height: $fab-size; } .fab-in-list { - margin: 8px 0; + @include margin(8px, 0); width: $fab-mini-size; height: $fab-mini-size; @@ -151,7 +161,7 @@ ion-fab-list { ion-fab-list[side=left] .fab-in-list, ion-fab-list[side=right] .fab-in-list { - margin: 0 8px; + @include margin(0, 8px); } ion-fab-list[side=top] { @@ -162,19 +172,17 @@ ion-fab-list[side=top] { } ion-fab-list[side=left] { - right: 0; + @include margin(0, $fab-size + $fab-list-margin); + @include position-horizontal(null, 0); flex-direction: row-reverse; - - margin: 0 $fab-size + $fab-list-margin; } ion-fab-list[side=right] { - left: 0; + @include margin(0, $fab-size + $fab-list-margin); + @include position(null, null, null, 0); flex-direction: row; - - margin: 0 $fab-size + $fab-list-margin; } @@ -186,10 +194,9 @@ ion-fab-list[side=right] { } .fab-close-icon { + @include position(0, 0, null, 0); + position: absolute; - top: 0; - right: 0; - left: 0; line-height: $fab-size; opacity: 0; diff --git a/src/components/grid/grid.mixins.scss b/src/components/grid/grid.mixins.scss index 25c2a4f6d23..ae693eb20ec 100644 --- a/src/components/grid/grid.mixins.scss +++ b/src/components/grid/grid.mixins.scss @@ -8,9 +8,9 @@ // --------------------------------------------------------------------------------- @mixin make-grid($padding-width: $grid-padding-width) { - padding: $padding-width / 2; - margin-left: auto; - margin-right: auto; + @include padding($padding-width / 2); + @include margin-horizontal(auto); + width: 100%; display: flex; @@ -19,10 +19,10 @@ // Remove the padding from the grid and all immediate children columns &[no-padding] { - padding: 0; + @include padding(0); > .row > .col { - padding: 0; + @include padding(0); } } } @@ -100,12 +100,12 @@ // --------------------------------------------------------------------------------- @mixin make-column-base($padding-width: $grid-padding-width) { - position: relative; + @include padding($padding-width / 2); - padding: $padding-width / 2; + position: relative; width: 100%; - margin: 0; + @include margin(0); min-height: 1px; // Prevent columns from collapsing when empty flex-basis: 0; flex-grow: 1; @@ -153,17 +153,17 @@ @each $breakpoint in map-keys($padding-widths) { @include media-breakpoint-up($breakpoint) { $padding-width: map-get($padding-widths, $breakpoint); - padding: ($padding-width / 2); + @include padding($padding-width / 2); } } } -// Offset the column using margin-left +// Offset the column using margin-start // --------------------------------------------------------------------------------- @mixin make-column-offset($size, $columns: $grid-columns) { - margin-left: percentage($size / $columns); + @include margin-horizontal(percentage($size / $columns), null); } @@ -171,7 +171,7 @@ // --------------------------------------------------------------------------------- @mixin make-column-push($size, $columns: $grid-columns) { - left: if($size > 0, percentage($size / $columns), auto); + @include position(null, null, null, if($size > 0, percentage($size / $columns), auto)); } @@ -179,7 +179,7 @@ // --------------------------------------------------------------------------------- @mixin make-column-pull($size, $columns: $grid-columns) { - right: if($size > 0, percentage($size / $columns), auto); + @include position(null, if($size > 0, percentage($size / $columns), auto), null, null); } diff --git a/src/components/grid/grid.ts b/src/components/grid/grid.ts index a771b10f384..78cb88d932a 100644 --- a/src/components/grid/grid.ts +++ b/src/components/grid/grid.ts @@ -265,7 +265,7 @@ import { Directive } from '@angular/core'; * ### Offsetting columns * * Move columns to the right by adding the `offset-*` attributes. These attributes - * increase the margin left of the column by `*` columns. For example, in the following + * increase the margin start of the column by `*` columns. For example, in the following * grid the last column will be offset by 3 columns and take up 3 columns: * * ``` diff --git a/src/components/infinite-scroll/infinite-scroll.scss b/src/components/infinite-scroll/infinite-scroll.scss index dade088ae3c..cf67304009a 100644 --- a/src/components/infinite-scroll/infinite-scroll.scss +++ b/src/components/infinite-scroll/infinite-scroll.scss @@ -4,8 +4,20 @@ // -------------------------------------------------- -/// @prop - Margin of the infinite scroll loading icon -$infinite-scroll-loading-margin: 0 0 32px 0 !default; +// deprecated +$infinite-scroll-loading-margin: null !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; @@ -13,9 +25,20 @@ $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 of the infinite scroll loading text -$infinite-scroll-loading-text-margin: 4px 32px 0 32px !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: block; @@ -42,15 +65,19 @@ ion-infinite-scroll-content { .infinite-loading { display: none; - margin: $infinite-scroll-loading-margin; - 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 { - margin: $infinite-scroll-loading-text-margin; - color: $infinite-scroll-loading-text-color; + + @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); + } } .infinite-loading-spinner .spinner-ios line, diff --git a/src/components/input/input.ios.scss b/src/components/input/input.ios.scss index 4b0f8be8154..65a77007c70 100644 --- a/src/components/input/input.ios.scss +++ b/src/components/input/input.ios.scss @@ -9,14 +9,18 @@ $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 right of the input -$text-input-ios-margin-right: ($item-ios-padding-right / 2) !default; +// deprecated +$text-input-ios-margin-right: ($item-ios-padding-end / 2) !default; +/// @prop - Margin end of the input +$text-input-ios-margin-end: $text-input-ios-margin-right !default; /// @prop - Margin bottom of the input $text-input-ios-margin-bottom: $item-ios-padding-bottom !default; -/// @prop - Margin left of the input +// deprecated $text-input-ios-margin-left: 0 !default; +/// @prop - Margin start of the input +$text-input-ios-margin-start: $text-input-ios-margin-left; /// @prop - Width of the icon used to clear the input $text-input-ios-input-clear-icon-width: 30px !default; @@ -53,10 +57,10 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid ! // -------------------------------------------------- .text-input-ios { - margin: $text-input-ios-margin-top $text-input-ios-margin-right $text-input-ios-margin-bottom $text-input-ios-margin-left; - padding: 0; + @include margin($text-input-ios-margin-top, $text-input-ios-margin-end, $text-input-ios-margin-bottom, $text-input-ios-margin-start); + @include padding(0); - width: calc(100% - #{($text-input-ios-margin-right + $text-input-ios-margin-left)}); + width: calc(100% - #{($text-input-ios-margin-end + $text-input-ios-margin-start)}); } @@ -64,8 +68,8 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid ! // -------------------------------------------------- .input-ios .inset-input { - margin: ($item-ios-padding-top / 2) $item-ios-padding-right ($item-ios-padding-bottom / 2) 0; - padding: ($item-ios-padding-top / 2) ($item-ios-padding-right / 2) ($item-ios-padding-bottom / 2) ($item-ios-padding-left / 2); + @include padding(($item-ios-padding-top / 2), ($item-ios-padding-end / 2), ($item-ios-padding-bottom / 2), ($item-ios-padding-start / 2)); + @include margin(($item-ios-padding-top / 2), $item-ios-padding-end, ($item-ios-padding-bottom / 2), 0); } @@ -132,23 +136,19 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid ! .item-ios.item-label-stacked .text-input, .item-ios.item-label-floating .text-input { - margin-top: 8px; - margin-bottom: 8px; - margin-left: 0; + @include margin(8px, null, 8px, 0); - width: calc(100% - #{$text-input-ios-margin-right}); + width: calc(100% - #{$text-input-ios-margin-end}); } .item-ios.item-label-stacked .label-ios + .input + .cloned-input, .item-ios.item-label-floating .label-ios + .input + .cloned-input { - margin-left: 0; + @include margin-horizontal(0, null); } .item-label-stacked .select-ios, .item-label-floating .select-ios { - padding-top: 8px; - padding-bottom: 8px; - padding-left: 0; + @include padding(8px, null, 8px, 0); } @@ -160,14 +160,13 @@ $text-input-ios-highlight-color-invalid: $text-input-highlight-color-invalid ! } .input-ios[clearInput] .text-input { - padding-right: $text-input-ios-input-clear-icon-width; + @include padding-horizontal(null, $text-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); - right: ($item-ios-padding-right / 2); - width: $text-input-ios-input-clear-icon-width; background-size: $text-input-ios-input-clear-icon-size; diff --git a/src/components/input/input.md.scss b/src/components/input/input.md.scss index 8caebfce061..96a5cce9654 100644 --- a/src/components/input/input.md.scss +++ b/src/components/input/input.md.scss @@ -9,14 +9,18 @@ $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 right of the input -$text-input-md-margin-right: ($item-md-padding-right / 2) !default; +// deprecated +$text-input-md-margin-right: ($item-md-padding-end / 2) !default; +/// @prop - Margin end of the input +$text-input-md-margin-end: $text-input-md-margin-right !default; /// @prop - Margin bottom of the input $text-input-md-margin-bottom: $item-md-padding-bottom !default; -/// @prop - Margin left of the input -$text-input-md-margin-left: ($item-md-padding-left / 2) !default; +// deprecated +$text-input-md-margin-left: ($item-md-padding-start / 2) !default; +/// @prop - Margin start of the input +$text-input-md-margin-start: $text-input-md-margin-left !default; /// @prop - Width of the icon used to clear the input $text-input-md-input-clear-icon-width: 30px !default; @@ -53,10 +57,10 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid // -------------------------------------------------- .text-input-md { - margin: $text-input-md-margin-top $text-input-md-margin-right $text-input-md-margin-bottom $text-input-md-margin-left; - padding: 0; + @include margin($text-input-md-margin-top, $text-input-md-margin-end, $text-input-md-margin-bottom, $text-input-md-margin-start); + @include padding(0); - width: calc(100% - #{$text-input-md-margin-right} - #{$text-input-md-margin-left}); + width: calc(100% - #{$text-input-md-margin-end} - #{$text-input-md-margin-start}); } @@ -64,8 +68,8 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid // -------------------------------------------------- .input-md .inset-input { - margin: ($item-md-padding-top / 2) $item-md-padding-right ($item-md-padding-bottom / 2) $item-md-padding-left; - padding: ($item-md-padding-top / 2) ($item-md-padding-right / 2) ($item-md-padding-bottom / 2) ($item-md-padding-left / 2); + @include padding(($item-md-padding-top / 2), ($item-md-padding-end / 2), ($item-md-padding-bottom / 2), ($item-md-padding-start / 2)); + @include margin(($item-md-padding-top / 2), $item-md-padding-end, ($item-md-padding-bottom / 2), $item-md-padding-start); } @@ -133,18 +137,14 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid .item-label-stacked .text-input-md, .item-label-floating .text-input-md { - margin-top: 8px; - margin-bottom: 8px; - margin-left: 0; + @include margin(8px, null, 8px, 0); - width: calc(100% - #{$text-input-md-margin-right}); + width: calc(100% - #{$text-input-md-margin-end}); } .item-label-stacked .select-md, .item-label-floating .select-md { - padding-top: 8px; - padding-bottom: 8px; - padding-left: 0; + @include padding(8px, null, 8px, 0); } @@ -156,14 +156,13 @@ $text-input-md-highlight-color-invalid: $text-input-highlight-color-invalid } .input-md[clearInput] .text-input { - padding-right: $text-input-md-input-clear-icon-width; + @include padding-horizontal(null, $text-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); - right: ($item-md-padding-right / 2); - width: $text-input-md-input-clear-icon-width; background-size: $text-input-md-input-clear-icon-size; diff --git a/src/components/input/input.scss b/src/components/input/input.scss index 04ad51c18d3..e9220087a61 100644 --- a/src/components/input/input.scss +++ b/src/components/input/input.scss @@ -46,6 +46,7 @@ ion-textarea { .text-input { @include placeholder($text-input-placeholder-color); @include appearance(none); + @include border-radius(0); display: inline-block; @@ -55,7 +56,7 @@ ion-textarea { width: calc(100% - 10px); border: 0; - border-radius: 0; + background: transparent; } @@ -86,9 +87,9 @@ input.text-input:-webkit-autofill { // The input cover is not clickable when the input is disabled .input-cover { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; width: 100%; height: 100%; @@ -125,11 +126,11 @@ input.text-input:-webkit-autofill { // Next and Previous input tabbing [next-input] { + @include padding(0); + position: absolute; bottom: 20px; - padding: 0; - width: 1px; height: 1px; @@ -144,13 +145,13 @@ input.text-input:-webkit-autofill { // -------------------------------------------------- .text-input-clear-icon { + @include margin(0); + @include padding(0); + position: absolute; top: 0; display: none; - margin: 0; - padding: 0; - height: 100%; background-repeat: no-repeat; diff --git a/src/components/input/input.wp.scss b/src/components/input/input.wp.scss index 435d05294e7..ae523688a5d 100644 --- a/src/components/input/input.wp.scss +++ b/src/components/input/input.wp.scss @@ -15,14 +15,18 @@ $text-input-wp-border-width: 2px !default; /// @prop - Margin top of the input $text-input-wp-margin-top: $item-wp-padding-top !default; -/// @prop - Margin right of the input -$text-input-wp-margin-right: ($item-wp-padding-right / 2) !default; +// deprecated +$text-input-wp-margin-right: ($item-wp-padding-end / 2) !default; +/// @prop - Margin end of the input +$text-input-wp-margin-end: $text-input-wp-margin-right !default; /// @prop - Margin bottom of the input $text-input-wp-margin-bottom: $item-wp-padding-bottom !default; -/// @prop - Margin left of the input -$text-input-wp-margin-left: ($item-wp-padding-left / 2) !default; +// deprecated +$text-input-wp-margin-left: ($item-wp-padding-start / 2) !default; +/// @prop - Margin start of the input +$text-input-wp-margin-start: $text-input-wp-margin-left !default; /// @prop - Vertical padding of the input $text-input-wp-padding-vertical: 0 !default; @@ -68,10 +72,10 @@ $text-input-wp-highlight-color-invalid: $text-input-highlight-color-invalid // -------------------------------------------------- .text-input-wp { - margin: $text-input-wp-margin-top $text-input-wp-margin-right $text-input-wp-margin-bottom $text-input-wp-margin-left; - padding: $text-input-wp-padding-vertical $text-input-wp-padding-horizontal; + @include margin($text-input-wp-margin-top, $text-input-wp-margin-end, $text-input-wp-margin-bottom, $text-input-wp-margin-start); + @include padding($text-input-wp-padding-vertical, $text-input-wp-padding-horizontal); - width: calc(100% - #{$text-input-wp-margin-right} - #{$text-input-wp-margin-left}); + width: calc(100% - #{$text-input-wp-margin-end} - #{$text-input-wp-margin-start}); border: $text-input-wp-border-width solid $text-input-wp-border-color; line-height: $text-input-wp-line-height; @@ -82,8 +86,8 @@ $text-input-wp-highlight-color-invalid: $text-input-highlight-color-invalid // -------------------------------------------------- .item-wp .inset-input { - margin: ($item-wp-padding-top / 2) $item-wp-padding-right ($item-wp-padding-bottom / 2) $item-wp-padding-left; - padding: ($item-wp-padding-top / 2) ($item-wp-padding-right / 2) ($item-wp-padding-bottom / 2) ($item-wp-padding-left / 2); + @include padding(($item-wp-padding-top / 2), ($item-wp-padding-end / 2), ($item-wp-padding-bottom / 2), ($item-wp-padding-start / 2)); + @include margin(($item-wp-padding-top / 2), $item-wp-padding-end, ($item-wp-padding-bottom / 2), $item-wp-padding-start); } @@ -119,11 +123,9 @@ $text-input-wp-highlight-color-invalid: $text-input-highlight-color-invalid .item-label-floating .text-input-wp, .item-label-stacked .select-wp, .item-label-floating .select-wp { - margin-top: 8px; - margin-bottom: 8px; - margin-left: 0; + @include margin(8px, null, 8px, 0); - width: calc(100% - #{$text-input-wp-margin-right}); + width: calc(100% - #{$text-input-wp-margin-end}); } .item-wp.item-label-stacked [item-right], // deprecated @@ -141,14 +143,13 @@ $text-input-wp-highlight-color-invalid: $text-input-highlight-color-invalid } .input-wp[clearInput] .text-input { - padding-right: $text-input-wp-input-clear-icon-width; + @include padding-horizontal(null, $text-input-wp-input-clear-icon-width); } .input-wp .text-input-clear-icon { + @include position-horizontal(null, ($item-wp-padding-end / 2)); @include svg-background-image($text-input-wp-input-clear-icon-svg); - right: ($item-wp-padding-right / 2); - width: $text-input-wp-input-clear-icon-width; background-size: $text-input-wp-input-clear-icon-size; diff --git a/src/components/item/item-media.scss b/src/components/item/item-media.scss index eeaf66c3c9f..a4188fd2e47 100644 --- a/src/components/item/item-media.scss +++ b/src/components/item/item-media.scss @@ -51,9 +51,9 @@ ion-thumbnail img { } .item-cover { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; width: 100%; height: 100%; diff --git a/src/components/item/item-sliding.scss b/src/components/item/item-sliding.scss index bfb54bb4280..10ff2695de5 100644 --- a/src/components/item/item-sliding.scss +++ b/src/components/item/item-sliding.scss @@ -17,9 +17,10 @@ ion-item-sliding .item { } ion-item-options { + @include position(0, 0, null, null); + position: absolute; - top: 0; - right: 0; + z-index: $z-index-item-options; display: none; @@ -33,19 +34,18 @@ ion-item-options { } ion-item-options[side=left] { - right: auto; - left: 0; + @include position-horizontal(0, auto); justify-content: flex-start; } ion-item-options .button { - margin: 0; - padding: 0 .7em; + @include margin(0); + @include padding(0, .7em); + @include border-radius(0); height: 100%; - border-radius: 0; box-shadow: none; box-sizing: content-box; @@ -57,9 +57,7 @@ ion-item-options:not([icon-left]) .button:not([icon-only]) { } ion-icon { - padding-right: 0; - padding-bottom: .3em; - padding-left: 0; + @include padding(null, 0, .3em, 0); } } @@ -107,18 +105,18 @@ button[expandable] { } ion-item-sliding.active-swipe-right button[expandable] { - order: 1; + @include padding-horizontal(90%, null); - padding-left: 90%; + order: 1; transition-duration: .6s; transition-property: padding-left; } ion-item-sliding.active-swipe-left button[expandable] { - order: -1; + @include padding-horizontal(null, 90%); - padding-right: 90%; + order: -1; transition-duration: .6s; transition-property: padding-right; diff --git a/src/components/item/item.ios.scss b/src/components/item/item.ios.scss index c9f56c05f90..16ed2d8cca6 100644 --- a/src/components/item/item.ios.scss +++ b/src/components/item/item.ios.scss @@ -6,8 +6,20 @@ /// @prop - Font size of the item text $item-ios-body-text-font-size: 1.7rem !default; -/// @prop - Margin of the item paragraph -$item-ios-paragraph-margin: 0 0 2px !default; +// deprecated +$item-ios-paragraph-margin: null !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; @@ -39,9 +51,6 @@ $item-ios-divider-background: #f7f7f7 !default; /// @prop - Color for the divider $item-ios-divider-color: #222 !default; -/// @prop - Padding for the divider -$item-ios-divider-padding: 5px 15px !default; - /// @prop - Background for the sliding content $item-ios-sliding-content-background: $list-ios-background-color !default; @@ -50,9 +59,9 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; // -------------------------------------------------- .item-ios { - position: relative; + @include padding-horizontal($item-ios-padding-start, null); - padding-left: $item-ios-padding-left; + position: relative; border-radius: 0; font-size: $item-ios-body-text-font-size; @@ -67,14 +76,14 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; } .item-ios h1 { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 2.4rem; font-weight: normal; } .item-ios h2 { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 1.7rem; font-weight: normal; @@ -84,7 +93,7 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; .item-ios h4, .item-ios h5, .item-ios h6 { - margin: 0 0 3px; + @include margin(0, 0, 3px); font-size: 1.4rem; font-weight: normal; @@ -94,12 +103,14 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; .item-ios p { overflow: inherit; - margin: $item-ios-paragraph-margin; - font-size: $item-ios-paragraph-font-size; line-height: normal; text-overflow: inherit; color: $item-ios-paragraph-text-color; + + @include deprecated-variable(margin, $item-ios-paragraph-margin) { + @include margin($item-ios-paragraph-margin-top, $item-ios-paragraph-margin-end, $item-ios-paragraph-margin-bottom, $item-ios-paragraph-margin-start); + } } .item-ios h2:last-child, @@ -112,7 +123,7 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; } .item-ios.item-block .item-inner { - padding-right: ($item-ios-padding-right / 2); + @include padding-horizontal(null, $item-ios-padding-end / 2); border-bottom: $hairlines-width solid $list-ios-border-color; } @@ -123,25 +134,23 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; .item-ios [item-left], // deprecated .item-ios [item-start] { - margin: $item-ios-padding-media-top $item-ios-padding-left $item-ios-padding-media-bottom 0; + @include margin($item-ios-padding-media-top, $item-ios-padding-start, $item-ios-padding-media-bottom, 0); } .item-ios [item-right], // deprecated .item-ios [item-end] { - margin: $item-ios-padding-media-top ($item-ios-padding-left / 2) $item-ios-padding-media-bottom ($item-ios-padding-right / 2); + @include margin($item-ios-padding-media-top, ($item-ios-padding-start / 2), $item-ios-padding-media-bottom, ($item-ios-padding-end / 2)); } .item-ios ion-icon[item-left], // deprecated .item-ios ion-icon[item-right], // deprecated .item-ios ion-icon[item-start], .item-ios ion-icon[item-end] { - margin-top: $item-ios-padding-icon-top; - margin-bottom: $item-ios-padding-icon-bottom; - margin-left: 0; + @include margin($item-ios-padding-icon-top, null, $item-ios-padding-icon-bottom, 0); } .item-ios .item-button { - padding: 0 .5em; + @include padding(0, .5em); height: 24px; @@ -150,21 +159,21 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; .item-ios .item-button[icon-only] ion-icon, .item-ios .item-button[icon-only] { - padding: 0 1px; + @include padding(0, 1px); } .item-ios ion-avatar[item-left], // deprecated .item-ios ion-thumbnail[item-left], // deprecated .item-ios ion-avatar[item-start], .item-ios ion-thumbnail[item-start] { - margin: ($item-ios-padding-right / 2) $item-ios-padding-right ($item-ios-padding-right / 2) 0; + @include margin(($item-ios-padding-end / 2), $item-ios-padding-end, ($item-ios-padding-end / 2), 0); } .item-ios ion-avatar[item-right], // deprecated .item-ios ion-thumbnail[item-right], // deprecated .item-ios ion-avatar[item-end], .item-ios ion-thumbnail[item-end] { - margin: ($item-ios-padding-right / 2); + @include margin(($item-ios-padding-end / 2)); } @@ -212,10 +221,10 @@ $item-ios-sliding-content-background: $list-ios-background-color !default; a.item-ios:not([detail-none]) .item-inner { @include svg-background-image($item-ios-detail-push-svg); - padding-right: 32px; + @include padding-horizontal(null, 32px); background-repeat: no-repeat; - background-position: right ($item-ios-padding-right - 2) center; + background-position: right ($item-ios-padding-end - 2) center; background-size: 14px 14px; } } @@ -238,7 +247,7 @@ ion-item-group .item-wrapper:last-child .item-ios .item-inner { // -------------------------------------------------- .item-divider-ios { - padding-left: $item-ios-padding-left; + @include padding-horizontal($item-ios-padding-start, null); color: $item-ios-divider-color; background-color: $item-ios-divider-background; diff --git a/src/components/item/item.md.scss b/src/components/item/item.md.scss index 2bad0cd583a..3c8456e5970 100644 --- a/src/components/item/item.md.scss +++ b/src/components/item/item.md.scss @@ -45,18 +45,14 @@ $item-md-divider-font-size: $item-md-body-text-font-size !default; /// @prop - Border bottom for the divider $item-md-divider-border-bottom: 1px solid $list-md-border-color !default; -/// @prop - Padding for the divider -$item-md-divider-padding: 5px 15px !default; - /// @prop - Background for the sliding content $item-md-sliding-content-background: $list-md-background-color !default; .item-md { - position: relative; + @include padding-horizontal($item-md-padding-start, 0); - padding-right: 0; - padding-left: ($item-md-padding-left); + position: relative; font-size: $item-md-font-size; font-weight: normal; @@ -77,14 +73,14 @@ $item-md-sliding-content-background: $list-md-background-color !default; } .item-md h1 { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 2.4rem; font-weight: normal; } .item-md h2 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.6rem; font-weight: normal; @@ -94,7 +90,7 @@ $item-md-sliding-content-background: $list-md-background-color !default; .item-md h4, .item-md h5, .item-md h6 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.4rem; font-weight: normal; @@ -104,7 +100,7 @@ $item-md-sliding-content-background: $list-md-background-color !default; .item-md p { overflow: inherit; - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 1.4rem; line-height: normal; @@ -113,7 +109,7 @@ $item-md-sliding-content-background: $list-md-background-color !default; } .item-md.item-block .item-inner { - padding-right: ($item-md-padding-right / 2); + @include padding-horizontal(null, ($item-md-padding-end / 2)); border-bottom: 1px solid $list-md-border-color; } @@ -129,10 +125,10 @@ $item-md-sliding-content-background: $list-md-background-color !default; a.item-md:not([detail-none]) .item-inner { @include svg-background-image($item-md-detail-push-svg); - padding-right: 32px; + @include padding-horizontal(null, 32px); background-repeat: no-repeat; - background-position: right ($item-md-padding-right - 2) center; + background-position: right ($item-md-padding-end - 2) center; background-size: 14px 14px; } } @@ -145,20 +141,18 @@ $item-md-sliding-content-background: $list-md-background-color !default; .item-md [item-right], // deprecated .item-md [item-start], .item-md [item-end] { - margin: $item-md-padding-media-top ($item-md-padding-right / 2) $item-md-padding-media-bottom 0; + @include margin($item-md-padding-media-top, ($item-md-padding-end / 2), $item-md-padding-media-bottom, 0); } .item-md ion-icon[item-left], // deprecated .item-md ion-icon[item-right], // deprecated .item-md ion-icon[item-start], .item-md ion-icon[item-end] { - margin-top: $item-md-padding-icon-top; - margin-bottom: $item-md-padding-icon-bottom; - margin-left: 0; + @include margin($item-md-padding-icon-top, null, $item-md-padding-icon-bottom, 0); } .item-md .item-button { - padding: 0 .6em; + @include padding(0, .6em); height: 25px; @@ -167,28 +161,28 @@ $item-md-sliding-content-background: $list-md-background-color !default; .item-md .item-button[icon-only] ion-icon, .item-md .item-button[icon-only] { - padding: 0 1px; + @include padding(0, 1px); } .item-md ion-icon[item-left] + .item-inner, // deprecated .item-md ion-icon[item-left] + .item-input, // deprecated .item-md ion-icon[item-start] + .item-inner, .item-md ion-icon[item-start] + .item-input { - margin-left: $item-md-padding-left + ($item-md-padding-left / 2); + @include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2), null); } .item-md ion-avatar[item-left], // deprecated .item-md ion-thumbnail[item-left], // deprecated .item-md ion-avatar[item-start], .item-md ion-thumbnail[item-start] { - margin: ($item-md-padding-right / 2) $item-md-padding-right ($item-md-padding-right / 2) 0; + @include margin(($item-md-padding-end / 2), $item-md-padding-end, ($item-md-padding-end / 2), 0); } .item-md ion-avatar[item-right], // deprecated .item-md ion-thumbnail[item-right], // deprecated .item-md ion-avatar[item-end], .item-md ion-thumbnail[item-end] { - margin: ($item-md-padding-right / 2); + @include margin(($item-md-padding-end / 2)); } @@ -243,7 +237,7 @@ ion-item-group .item-md .item-wrapper:last-child .item-inner { // -------------------------------------------------- .item-divider-md { - padding-left: $item-md-padding-left; + @include padding-horizontal($item-md-padding-start, null); color: $item-md-divider-color; background-color: $item-md-divider-background; diff --git a/src/components/item/item.scss b/src/components/item/item.scss index c8ef0360d6f..940e1250abc 100644 --- a/src/components/item/item.scss +++ b/src/components/item/item.scss @@ -19,6 +19,8 @@ } .item-block { + @include margin(0); + @include padding(0); @include text-align(initial); display: flex; @@ -27,9 +29,6 @@ align-items: center; justify-content: space-between; - margin: 0; - padding: 0; - width: 100%; min-height: 4.4rem; @@ -42,6 +41,9 @@ } .item-inner { + @include margin(0); + @include padding(0); + display: flex; overflow: hidden; @@ -50,9 +52,6 @@ align-items: inherit; align-self: stretch; - margin: 0; - padding: 0; - min-height: inherit; border: 0; @@ -80,6 +79,9 @@ ion-item-group { } ion-item-divider { + @include margin(0); + @include padding(0); + z-index: $z-index-item-divider; display: flex; overflow: hidden; @@ -87,9 +89,6 @@ ion-item-divider { align-items: center; justify-content: space-between; - margin: 0; - padding: 0; - width: 100%; min-height: 30px; diff --git a/src/components/item/item.wp.scss b/src/components/item/item.wp.scss index a63f9c59128..8ce9632be95 100644 --- a/src/components/item/item.wp.scss +++ b/src/components/item/item.wp.scss @@ -51,18 +51,14 @@ $item-wp-divider-border-bottom: 1px solid $list-wp-border-color !default; /// @prop - Font size for the divider $item-wp-divider-font-size: 2rem !default; -/// @prop - Padding for the divider -$item-wp-divider-padding: 5px 15px !default; - /// @prop - Background for the sliding content $item-wp-sliding-content-background: $list-wp-background-color !default; .item-wp { - position: relative; + @include padding-horizontal($item-wp-padding-start, 0); - padding-right: 0; - padding-left: ($item-wp-padding-left); + position: relative; font-size: $item-wp-font-size; font-weight: normal; @@ -82,14 +78,14 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; } .item-wp h1 { - margin: 0 0 2px; + @include margin(0, 0, 2px); font-size: 2.4rem; font-weight: normal; } .item-wp h2 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.6rem; font-weight: normal; @@ -99,7 +95,7 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; .item-wp h4, .item-wp h5, .item-wp h6 { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.4rem; font-weight: normal; @@ -107,9 +103,9 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; } .item-wp p { - overflow: inherit; + @include margin(0, 0, 2px); - margin: 0 0 2px; + overflow: inherit; font-size: 1.4rem; line-height: normal; @@ -118,7 +114,7 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; } .item-wp.item-block .item-inner { - padding-right: ($item-wp-padding-right / 2); + @include padding-horizontal(null, ($item-wp-padding-end / 2)); border-bottom: 1px solid $list-wp-border-color; } @@ -134,10 +130,10 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; a.item-wp:not([detail-none]) .item-inner { @include svg-background-image($item-wp-detail-push-svg); - padding-right: 32px; + @include padding-horizontal(null, 32px); background-repeat: no-repeat; - background-position: right ($item-wp-padding-right - 2) center; + background-position: right ($item-wp-padding-end - 2) center; background-size: 14px 14px; } } @@ -150,20 +146,18 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; .item-wp [item-right], // deprecated .item-wp [item-start], .item-wp [item-end] { - margin: $item-wp-padding-media-top ($item-wp-padding-right / 2) $item-wp-padding-media-bottom 0; + @include margin($item-wp-padding-media-top, ($item-wp-padding-end / 2), $item-wp-padding-media-bottom, 0); } .item-wp ion-icon[item-left], // deprecated .item-wp ion-icon[item-right], // deprecated .item-wp ion-icon[item-start], .item-wp ion-icon[item-end] { - margin-top: $item-wp-padding-icon-top; - margin-bottom: $item-wp-padding-icon-bottom; - margin-left: 0; + @include margin($item-wp-padding-icon-top, null, $item-wp-padding-icon-bottom, 0); } .item-wp .item-button { - padding: 0 .6em; + @include padding(0, .6em); height: 25px; @@ -172,7 +166,7 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; .item-wp .item-button[icon-only] ion-icon, .item-wp .item-button[icon-only] { - padding: 0 1px; + @include padding(0, 1px); } .item-wp[text-wrap] ion-label { @@ -184,21 +178,21 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; .item-wp ion-icon[item-left] + .item-input, // deprecated .item-wp ion-icon[item-start] + .item-inner, .item-wp ion-icon[item-start] + .item-input { - margin-left: ($item-wp-padding-left / 2); + @include margin-horizontal(($item-wp-padding-start / 2), null); } .item-wp ion-avatar[item-left], // deprecated .item-wp ion-thumbnail[item-left], // deprecated .item-wp ion-avatar[item-start], .item-wp ion-thumbnail[item-start] { - margin: ($item-wp-padding-right / 2) $item-wp-padding-right ($item-wp-padding-right / 2) 0; + @include margin(($item-wp-padding-end / 2), $item-wp-padding-end, ($item-wp-padding-end / 2), 0); } .item-wp ion-avatar[item-right], // deprecated .item-wp ion-thumbnail[item-right], // deprecated .item-wp ion-avatar[item-end], .item-wp ion-thumbnail[item-end] { - margin: ($item-wp-padding-right / 2); + @include margin($item-wp-padding-end / 2); } @@ -212,12 +206,12 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; .item-wp ion-avatar ion-img, .item-wp ion-avatar img { + @include border-radius($item-wp-avatar-border-radius); + overflow: hidden; width: $item-wp-avatar-size; height: $item-wp-avatar-size; - - border-radius: $item-wp-avatar-border-radius; } @@ -240,7 +234,7 @@ $item-wp-sliding-content-background: $list-wp-background-color !default; // -------------------------------------------------- .item-divider-wp { - padding-left: $item-wp-padding-left; + @include padding-horizontal($item-wp-padding-start, null); border-bottom: $item-wp-divider-border-bottom; font-size: $item-wp-divider-font-size; diff --git a/src/components/label/label.ios.scss b/src/components/label/label.ios.scss index 8c9d58fa620..55070678f94 100644 --- a/src/components/label/label.ios.scss +++ b/src/components/label/label.ios.scss @@ -9,15 +9,28 @@ $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 of the label -$label-ios-margin: $item-ios-padding-top ($item-ios-padding-right / 2) $item-ios-padding-bottom 0 !default; +// deprecated +$label-ios-margin: 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 { - margin: $label-ios-margin; + @include deprecated-variable(margin, $label-ios-margin) { + @include margin($label-ios-margin-top, $label-ios-margin-end, $label-ios-margin-bottom, $label-ios-margin-start); + } } @@ -37,9 +50,9 @@ $label-ios-margin: $item-ios-padding-top ($item-ios-padding- .label-ios + ion-input .text-input, .label-ios + ion-textarea .text-input, .label-ios + .input + .cloned-input { - margin-left: $item-ios-padding-left; + @include margin-horizontal($item-ios-padding-start, null); - width: calc(100% - (#{$item-ios-padding-right} / 2) - #{$item-ios-padding-left}); + width: calc(100% - (#{$item-ios-padding-end} / 2) - #{$item-ios-padding-start}); } diff --git a/src/components/label/label.md.scss b/src/components/label/label.md.scss index 81575864ef7..487f9f4c645 100644 --- a/src/components/label/label.md.scss +++ b/src/components/label/label.md.scss @@ -9,15 +9,28 @@ $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 of the label -$label-md-margin: $item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0 !default; +// deprecated +$label-md-margin: null !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 { - margin: $label-md-margin; + @include deprecated-variable(margin, $label-md-margin) { + @include margin($label-md-margin-top, $label-md-margin-end, $label-md-margin-bottom, $label-md-margin-start); + } } [text-wrap] .label-md { @@ -54,8 +67,7 @@ $label-md-margin: $item-md-padding-top ($item-md-padding-rig .label-md[stacked], .label-md[floating] { - margin-bottom: 0; - margin-left: 0; + @include margin(null, null, 0, 0); } .input-has-focus .label-md[stacked], diff --git a/src/components/label/label.scss b/src/components/label/label.scss index 6f3f7ebf8bd..3da376a995f 100644 --- a/src/components/label/label.scss +++ b/src/components/label/label.scss @@ -4,13 +4,13 @@ // -------------------------------------------------- ion-label { + @include margin(0); + display: block; overflow: hidden; flex: 1; - margin: 0; - font-size: inherit; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/components/label/label.wp.scss b/src/components/label/label.wp.scss index 1194ad9586e..f70148b842d 100644 --- a/src/components/label/label.wp.scss +++ b/src/components/label/label.wp.scss @@ -14,7 +14,7 @@ $label-wp-text-color-focused: color($colors-wp, primary) !default; // -------------------------------------------------- .label-wp { - margin: $item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom 0; + @include margin($item-wp-padding-top, ($item-wp-padding-end / 2), $item-wp-padding-bottom, 0); } @@ -47,8 +47,7 @@ $label-wp-text-color-focused: color($colors-wp, primary) !default; .label-wp[stacked], .label-wp[floating] { - margin-bottom: 0; - margin-left: 0; + @include margin(null, null, 0, 0); } .input-has-focus .label-wp[stacked], diff --git a/src/components/list/list.ios.scss b/src/components/list/list.ios.scss index d36c3a63410..447f818599d 100644 --- a/src/components/list/list.ios.scss +++ b/src/components/list/list.ios.scss @@ -6,32 +6,42 @@ /// @prop - Margin top of the list $list-ios-margin-top: 10px !default; -/// @prop - Margin right of the list +// deprecated $list-ios-margin-right: 0 !default; +/// @prop - Margin end of the list +$list-ios-margin-end: $list-ios-margin-right !default; /// @prop - Margin bottom of the list $list-ios-margin-bottom: 32px !default; -/// @prop - Margin left of the list +// deprecated $list-ios-margin-left: 0 !default; +/// @prop - Margin start of the list +$list-ios-margin-start: $list-ios-margin-left !default; /// @prop - Margin top of the inset list $list-inset-ios-margin-top: 16px !default; -/// @prop - Margin right of the inset list +// deprecated $list-inset-ios-margin-right: 16px !default; +/// @prop - Margin end of the inset list +$list-inset-ios-margin-end: $list-inset-ios-margin-right !default; /// @prop - Margin bottom of the inset list $list-inset-ios-margin-bottom: 16px !default; -/// @prop - Margin left of the inset list +// deprecated $list-inset-ios-margin-left: 16px !default; +/// @prop - Margin start of the inset list +$list-inset-ios-margin-start: $list-inset-ios-margin-left !default; /// @prop - Border radius of the inset list $list-inset-ios-border-radius: 4px !default; -/// @prop - Padding left of the header in a list -$list-ios-header-padding-left: $item-ios-padding-left !default; +// deprecated +$list-ios-header-padding-left: $item-ios-padding-start !default; +/// @prop - Padding start of the header in a list +$list-ios-header-padding-start: $list-ios-header-padding-left; /// @prop - Border bottom of the header in a list $list-ios-header-border-bottom: $hairlines-width solid $list-ios-border-color !default; @@ -59,7 +69,7 @@ $list-ios-header-background-color: transparent !default; // -------------------------------------------------- .list-ios { - margin: -1px $list-ios-margin-right $list-ios-margin-bottom $list-ios-margin-left; + @include margin(-1px, $list-ios-margin-end, $list-ios-margin-bottom, $list-ios-margin-start); } .list-ios > .item-block:first-child { @@ -84,7 +94,7 @@ $list-ios-header-background-color: transparent !default; // the item itself (for last-child items) // the item-inner class (if it is not last) .list-ios .item[no-lines], -.list-ios .item[no-lines] .item-inner, { +.list-ios .item[no-lines] .item-inner { border-width: 0; } @@ -97,7 +107,7 @@ $list-ios-header-background-color: transparent !default; align-items: center; - margin: 0; + @include margin(0); height: 100%; min-height: 100%; @@ -109,7 +119,7 @@ $list-ios-header-background-color: transparent !default; } .list-ios ion-item-options .button::before { - margin: 0 auto; + @include margin(0, auto); } .list-ios:not([inset]) + .list-ios:not([inset]) ion-list-header { @@ -122,7 +132,7 @@ $list-ios-header-background-color: transparent !default; // -------------------------------------------------- .list-ios[inset] { - margin: $list-inset-ios-margin-top $list-inset-ios-margin-right $list-inset-ios-margin-bottom $list-inset-ios-margin-left; + @include margin($list-inset-ios-margin-top, $list-inset-ios-margin-end, $list-inset-ios-margin-bottom, $list-inset-ios-margin-start); border-radius: $list-inset-ios-border-radius; } @@ -169,9 +179,9 @@ $list-ios-header-background-color: transparent !default; // -------------------------------------------------- .list-header-ios { - position: relative; + @include padding-horizontal($list-ios-header-padding-start, null); - padding-left: $list-ios-header-padding-left; + position: relative; border-bottom: $list-ios-header-border-bottom; font-size: $list-ios-header-font-size; @@ -182,11 +192,6 @@ $list-ios-header-background-color: transparent !default; background: $list-ios-header-background-color; } -[dir="rtl"] .list-header-ios { - padding-right: $list-ios-header-padding-left; - padding-left: 0; -} - // Generate iOS List Header Colors // -------------------------------------------------- diff --git a/src/components/list/list.md.scss b/src/components/list/list.md.scss index d4f6167ee94..5df74f11f4b 100644 --- a/src/components/list/list.md.scss +++ b/src/components/list/list.md.scss @@ -6,26 +6,34 @@ /// @prop - Margin top of the list $list-md-margin-top: 16px !default; -/// @prop - Margin right of the list +// deprecated $list-md-margin-right: 0 !default; +/// @prop - Margin end of the list +$list-md-margin-end: $list-md-margin-right !default; /// @prop - Margin bottom of the list $list-md-margin-bottom: 16px !default; -/// @prop - Margin left of the list +// deprecated $list-md-margin-left: 0 !default; +/// @prop - Margin start of the list +$list-md-margin-start: $list-md-margin-left !default; /// @prop - Margin top of the inset list $list-inset-md-margin-top: 16px !default; -/// @prop - Margin right of the inset list +// deprecated $list-inset-md-margin-right: 16px !default; +/// @prop - Margin end of the inset list +$list-inset-md-margin-end: $list-inset-md-margin-right !default; /// @prop - Margin bottom of the inset list $list-inset-md-margin-bottom: 16px !default; -/// @prop - Margin left of the inset list +// deprecated $list-inset-md-margin-left: 16px !default; +/// @prop - Margin start of the inset list +$list-inset-md-margin-start: $list-inset-md-margin-left !default; /// @prop - Border radius of the inset list $list-inset-md-border-radius: 2px !default; @@ -33,8 +41,10 @@ $list-inset-md-border-radius: 2px !default; /// @prop - Margin bottom of the header in a list $list-md-header-margin-bottom: 13px !default; -/// @prop - Padding left of the header in a list -$list-md-header-padding-left: $item-md-padding-left !default; +// deprecated +$list-md-header-padding-left: $item-md-padding-start !default; +/// @prop - Padding start of the header in a list +$list-md-header-padding-start: $list-md-header-padding-left; /// @prop - Minimum height of the header in a list $list-md-header-min-height: 4.5rem !default; @@ -53,7 +63,7 @@ $list-md-header-color: #757575 !default; // -------------------------------------------------- .list-md { - margin: -1px $list-md-margin-right $list-md-margin-bottom $list-md-margin-left; + @include margin(-1px, $list-md-margin-end, $list-md-margin-bottom, $list-md-margin-start); } .list-md .item-block .item-inner { @@ -69,7 +79,7 @@ $list-md-header-color: #757575 !default; } .list-md > ion-input:last-child::after { - left: 0; + @include position-horizontal(0, null); } .list-md ion-item-options { @@ -77,23 +87,24 @@ $list-md-header-color: #757575 !default; } .list-md ion-item-options .button { + @include margin(1px, 0); + @include border-radius(0); + display: inline-flex; align-items: center; - margin: 1px 0; - height: calc(100% - 2px); border: 0; - border-radius: 0; + box-shadow: none; box-sizing: border-box; } .list-md ion-item-options .button::before { - margin: 0 auto; + @include margin(0, auto); } // If the item has the no-lines attribute remove the bottom border from: @@ -113,26 +124,24 @@ $list-md-header-color: #757575 !default; // -------------------------------------------------- .list-md[inset] { - margin: $list-inset-md-margin-top $list-inset-md-margin-right $list-inset-md-margin-bottom $list-inset-md-margin-left; - - border-radius: $list-inset-md-border-radius; + @include margin($list-inset-md-margin-top, $list-inset-md-margin-end, $list-inset-md-margin-bottom, $list-inset-md-margin-start); + @include border-radius($list-inset-md-border-radius); } .list-md[inset] .item:first-child { + @include border-radius($list-inset-md-border-radius, $list-inset-md-border-radius, null, null); + border-top-width: 0; - border-top-left-radius: $list-inset-md-border-radius; - border-top-right-radius: $list-inset-md-border-radius; } .list-md[inset] .item:last-child { + @include border-radius(null, null, $list-inset-md-border-radius, $list-inset-md-border-radius); + border-bottom-width: 0; - border-bottom-left-radius: $list-inset-md-border-radius; - border-bottom-right-radius: $list-inset-md-border-radius; } .list-md[inset] .item-input { - padding-right: 0; - padding-left: 0; + @include padding-horizontal(0); } .list-md[inset] + ion-list[inset] { @@ -158,8 +167,9 @@ $list-md-header-color: #757575 !default; // -------------------------------------------------- .list-header-md { + @include padding-horizontal($list-md-header-padding-start, null); + margin-bottom: $list-md-header-margin-bottom; - padding-left: $list-md-header-padding-left; min-height: $list-md-header-min-height; @@ -168,12 +178,6 @@ $list-md-header-color: #757575 !default; color: $list-md-header-color; } -[dir="rtl"] .list-header-md { - padding-right: $list-md-header-padding-left; - padding-left: 0; -} - - // Generate Material Design List Header Colors // -------------------------------------------------- diff --git a/src/components/list/list.scss b/src/components/list/list.scss index 061c1177a2a..b1e04f484dd 100644 --- a/src/components/list/list.scss +++ b/src/components/list/list.scss @@ -4,24 +4,24 @@ // -------------------------------------------------- ion-list-header { + @include margin(0); + @include padding(0); + display: flex; overflow: hidden; align-items: center; justify-content: space-between; - margin: 0; - padding: 0; - width: 100%; min-height: 4rem; } ion-list { - display: block; + @include margin(0); + @include padding(0); - margin: 0; - padding: 0; + display: block; list-style-type: none; } diff --git a/src/components/list/list.wp.scss b/src/components/list/list.wp.scss index 84f952c33c5..6214bf1d470 100644 --- a/src/components/list/list.wp.scss +++ b/src/components/list/list.wp.scss @@ -6,32 +6,42 @@ /// @prop - Margin top of the list $list-wp-margin-top: 16px !default; -/// @prop - Margin right of the list +// deprecated $list-wp-margin-right: 0 !default; +/// @prop - Margin end of the list +$list-wp-margin-end: $list-wp-margin-right !default; /// @prop - Margin bottom of the list $list-wp-margin-bottom: 16px !default; -/// @prop - Margin left of the list +// deprecated $list-wp-margin-left: 0 !default; +/// @prop - Margin start of the list +$list-wp-margin-start: $list-wp-margin-left !default; /// @prop - Margin top of the inset list $list-inset-wp-margin-top: 16px !default; -/// @prop - Margin right of the inset list +// deprecated $list-inset-wp-margin-right: 16px !default; +/// @prop - Margin end of the inset list +$list-inset-wp-margin-end: $list-inset-wp-margin-right !default; /// @prop - Margin bottom of the inset list $list-inset-wp-margin-bottom: 16px !default; -/// @prop - Margin left of the inset list +// deprecated $list-inset-wp-margin-left: 16px !default; +/// @prop - Margin start of the inset list +$list-inset-wp-margin-start: $list-inset-wp-margin-left !default; /// @prop - Border radius of the inset list $list-inset-wp-border-radius: 2px !default; -/// @prop - Padding left of the header in a list -$list-wp-header-padding-left: $item-wp-padding-left !default; +// deprecated +$list-wp-header-padding-left: $item-wp-padding-start !default; +/// @prop - Padding start of the header in a list +$list-wp-header-padding-start: $list-wp-header-padding-left; /// @prop - Border bottom of the header in a list $list-wp-header-border-bottom: 1px solid $list-wp-border-color !default; @@ -47,7 +57,7 @@ $list-wp-header-color: $list-wp-text-color !default; // -------------------------------------------------- .list-wp { - margin: 0 $list-wp-margin-right $list-wp-margin-bottom $list-wp-margin-left; + @include margin(0, $list-wp-margin-end, $list-wp-margin-bottom, $list-wp-margin-start); } .list-wp .item-block .item-inner { @@ -73,27 +83,27 @@ $list-wp-header-color: $list-wp-text-color !default; } .list-wp > ion-input:last-child::after { - left: 0; + @include position-horizontal(0, null); } .list-wp ion-item-options .button { + @include margin(1px, 0); + @include border-radius(0); + display: inline-flex; align-items: center; - margin: 1px 0; - height: calc(100% - 2px); border: 0; - border-radius: 0; box-shadow: none; box-sizing: border-box; } .list-wp ion-item-options .button::before { - margin: 0 auto; + @include margin(0, auto); } // If the item has the no-lines attribute remove the bottom border from: @@ -114,26 +124,24 @@ $list-wp-header-color: $list-wp-text-color !default; // -------------------------------------------------- .list-wp[inset] { - margin: $list-inset-wp-margin-top $list-inset-wp-margin-right $list-inset-wp-margin-bottom $list-inset-wp-margin-left; - - border-radius: $list-inset-wp-border-radius; + @include margin($list-inset-wp-margin-top, $list-inset-wp-margin-end, $list-inset-wp-margin-bottom, $list-inset-wp-margin-start); + @include border-radius($list-inset-wp-border-radius); } .list-wp[inset] .item:first-child { + @include border-radius($list-inset-wp-border-radius, $list-inset-wp-border-radius, null, null); + border-top-width: 0; - border-top-left-radius: $list-inset-wp-border-radius; - border-top-right-radius: $list-inset-wp-border-radius; } .list-wp[inset] .item:last-child { + @include border-radius(null, null, $list-inset-wp-border-radius, $list-inset-wp-border-radius); + border-bottom-width: 0; - border-bottom-left-radius: $list-inset-wp-border-radius; - border-bottom-right-radius: $list-inset-wp-border-radius; } .list-wp[inset] .item-input { - padding-right: 0; - padding-left: 0; + @include padding-horizontal(0); } .list-wp[inset] + ion-list[inset] { @@ -158,18 +166,13 @@ $list-wp-header-color: $list-wp-text-color !default; // -------------------------------------------------- .list-header-wp { - padding-left: $list-wp-header-padding-left; + @include padding-horizontal($list-wp-header-padding-start, null); border-bottom: $list-wp-header-border-bottom; font-size: $list-wp-header-font-size; color: $list-wp-header-color; } -[dir="rtl"] .list-header-wp { - padding-right: $list-wp-header-padding-left; - padding-left: 0; -} - // Generate Windows List Header Colors // -------------------------------------------------- diff --git a/src/components/loading/loading.ios.scss b/src/components/loading/loading.ios.scss index cdb36938119..97025c59e52 100644 --- a/src/components/loading/loading.ios.scss +++ b/src/components/loading/loading.ios.scss @@ -3,8 +3,20 @@ // iOS Loading Indicator // -------------------------------------------------- -/// @prop - Padding of the loading wrapper -$loading-ios-padding: 24px 34px !default; +// deprecated +$loading-ios-padding: null !default; + +/// @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; @@ -44,14 +56,17 @@ $loading-ios-spinner-dots-color: $loading-ios-spinner-color !default; .loading-ios .loading-wrapper { - padding: $loading-ios-padding; + @include border-radius($loading-ios-border-radius); max-width: $loading-ios-max-width; max-height: $loading-ios-max-height; - border-radius: $loading-ios-border-radius; color: $loading-ios-text-color; background: $loading-ios-background; + + @include deprecated-variable(padding, $loading-ios-padding) { + @include padding($loading-ios-padding-top, $loading-ios-padding-end, $loading-ios-padding-bottom, $loading-ios-padding-start); + } } @@ -63,7 +78,7 @@ $loading-ios-spinner-dots-color: $loading-ios-spinner-color !default; } .loading-ios .loading-spinner + .loading-content { - margin-left: 16px; + @include margin-horizontal(16px, null); } diff --git a/src/components/loading/loading.md.scss b/src/components/loading/loading.md.scss index d1c4d5c9a56..383403264b0 100644 --- a/src/components/loading/loading.md.scss +++ b/src/components/loading/loading.md.scss @@ -3,8 +3,20 @@ // Material Design Loading Indicator // -------------------------------------------------- -/// @prop - Padding of the loading wrapper -$loading-md-padding: 24px !default; +// deprecated +$loading-md-padding: null !default; + +/// @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; @@ -47,16 +59,19 @@ $loading-md-spinner-dots-color: $loading-md-spinner-color !default; .loading-md .loading-wrapper { - padding: $loading-md-padding; + @include border-radius($loading-md-border-radius); max-width: $loading-md-max-width; max-height: $loading-md-max-height; - border-radius: $loading-md-border-radius; color: $loading-md-text-color; background: $loading-md-background; box-shadow: $loading-md-box-shadow; + + @include deprecated-variable(padding, $loading-md-padding) { + @include padding($loading-md-padding-top, $loading-md-padding-end, $loading-md-padding-bottom, $loading-md-padding-start); + } } @@ -64,7 +79,7 @@ $loading-md-spinner-dots-color: $loading-md-spinner-color !default; // ----------------------------------------- .loading-md .loading-spinner + .loading-content { - margin-left: 16px; + @include margin-horizontal(16px, null); } diff --git a/src/components/loading/loading.scss b/src/components/loading/loading.scss index 1a517e9f6dc..bc2091c54ef 100644 --- a/src/components/loading/loading.scss +++ b/src/components/loading/loading.scss @@ -4,11 +4,9 @@ // -------------------------------------------------- ion-loading { + @include position(0, 0, 0, 0); + position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; z-index: $z-index-overlay; display: flex; diff --git a/src/components/loading/loading.wp.scss b/src/components/loading/loading.wp.scss index fefb389eb14..8596c68bc41 100644 --- a/src/components/loading/loading.wp.scss +++ b/src/components/loading/loading.wp.scss @@ -3,8 +3,20 @@ // Windows Loading Indicator // -------------------------------------------------- -/// @prop - Padding of the loading wrapper -$loading-wp-padding: 20px !default; +// deprecated +$loading-wp-padding: null !default; + +/// @prop - Padding top of the loading wrapper +$loading-wp-padding-top: 20px !default; + +/// @prop - Padding end of the loading wrapper +$loading-wp-padding-end: $loading-wp-padding-top !default; + +/// @prop - Padding bottom of the loading wrapper +$loading-wp-padding-bottom: $loading-wp-padding-top !default; + +/// @prop - Padding start of the loading wrapper +$loading-wp-padding-start: $loading-wp-padding-end !default; /// @prop - Max width of the loading wrapper $loading-wp-max-width: 280px !default; @@ -41,14 +53,17 @@ $loading-wp-spinner-dots-color: $loading-wp-spinner-color !default; .loading-wp .loading-wrapper { - padding: $loading-wp-padding; + @include border-radius($loading-wp-border-radius); max-width: $loading-wp-max-width; max-height: $loading-wp-max-height; - border-radius: $loading-wp-border-radius; color: $loading-wp-text-color; background: $loading-wp-background; + + @include deprecated-variable(padding, $loading-wp-padding) { + @include padding($loading-wp-padding-top, $loading-wp-padding-end, $loading-wp-padding-bottom, $loading-wp-padding-start); + } } @@ -56,7 +71,7 @@ $loading-wp-spinner-dots-color: $loading-wp-spinner-color !default; // ----------------------------------------- .loading-wp .loading-spinner + .loading-content { - margin-left: 16px; + @include margin-horizontal(16px, null); } diff --git a/src/components/menu/menu.scss b/src/components/menu/menu.scss index 4e83323c9a2..e6448e2af3f 100644 --- a/src/components/menu/menu.scss +++ b/src/components/menu/menu.scss @@ -11,11 +11,9 @@ $menu-small-width: $menu-width - 40px !default; ion-menu { + @include position(0, 0, 0, 0); + position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; display: none; @@ -28,11 +26,9 @@ ion-menu.show-menu { .menu-inner { + @include position(0, auto, 0, 0); + position: absolute; - top: 0; - right: auto; - bottom: 0; - left: 0; display: block; @@ -51,8 +47,7 @@ ion-menu.show-menu { } ion-menu[side=right] > .menu-inner { - right: 0; - left: auto; + @include position-horizontal(auto, 0); } ion-menu ion-backdrop { diff --git a/src/components/modal/modal.ios.scss b/src/components/modal/modal.ios.scss index 266db6d495f..8dec9d9b1c6 100644 --- a/src/components/modal/modal.ios.scss +++ b/src/components/modal/modal.ios.scss @@ -14,8 +14,8 @@ $modal-ios-border-radius: 10px !default; transform: translate3d(0, 100%, 0); @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) { - overflow: hidden; + @include border-radius($modal-ios-border-radius); - border-radius: $modal-ios-border-radius; + overflow: hidden; } } diff --git a/src/components/modal/modal.md.scss b/src/components/modal/modal.md.scss index 2215063d17e..7d685a18dc4 100644 --- a/src/components/modal/modal.md.scss +++ b/src/components/modal/modal.md.scss @@ -17,9 +17,9 @@ $modal-inset-box-shadow: 0 28px 48px $modal-inset-box-shadow-color !def transform: translate3d(0, 40px, 0); @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) { - overflow: hidden; + @include border-radius(2px); - border-radius: 2px; + overflow: hidden; box-shadow: $modal-inset-box-shadow; } diff --git a/src/components/modal/modal.scss b/src/components/modal/modal.scss index 70874a8bec6..79742cfc88a 100644 --- a/src/components/modal/modal.scss +++ b/src/components/modal/modal.scss @@ -23,9 +23,9 @@ $modal-inset-height-large: 600px !default; ion-modal { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; display: block; @@ -49,18 +49,18 @@ ion-modal ion-backdrop { contain: strict; @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) { + @include position(calc(50% - (#{$modal-inset-height-small}/2)), null, null, calc(50% - (#{$modal-inset-width}/2))); + position: absolute; - top: calc(50% - (#{$modal-inset-height-small}/2)); - left: calc(50% - (#{$modal-inset-width}/2)); width: $modal-inset-width; height: $modal-inset-height-small; } @media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-large) { + @include position(calc(50% - (#{$modal-inset-height-large}/2)), null, null, calc(50% - (#{$modal-inset-width}/2))); + position: absolute; - top: calc(50% - (#{$modal-inset-height-large}/2)); - left: calc(50% - (#{$modal-inset-width}/2)); width: $modal-inset-width; height: $modal-inset-height-large; diff --git a/src/components/picker/picker.ios.scss b/src/components/picker/picker.ios.scss index 5baeb80cd36..f5f6ebb3ba5 100644 --- a/src/components/picker/picker.ios.scss +++ b/src/components/picker/picker.ios.scss @@ -27,14 +27,38 @@ $picker-ios-button-text-color: color($colors-ios, primary) !defa /// @prop - Background of the picker button $picker-ios-button-background-color: transparent !default; -/// @prop - Padding of the picker column -$picker-ios-column-padding: 0 4px !default; +// deprecated +$picker-ios-column-padding: null !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 of the picker option -$picker-ios-option-padding: 0 !default; +// deprecated +$picker-ios-option-padding: null !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; @@ -86,7 +110,7 @@ $picker-button-ios-strong-font-weight: 600 !default; .picker-ios .picker-button, .picker-ios .picker-button.activated { - margin: 0; + @include margin(0); height: $picker-ios-button-height; @@ -101,9 +125,11 @@ $picker-button-ios-strong-font-weight: 600 !default; } .picker-ios .picker-col { - padding: $picker-ios-column-padding; - transform-style: preserve-3d; + + @include deprecated-variable(padding, $picker-ios-column-padding) { + @include padding($picker-ios-column-padding-top, $picker-ios-column-padding-end, $picker-ios-column-padding-bottom, $picker-ios-column-padding-start); + } } .picker-ios .picker-prefix, @@ -121,8 +147,7 @@ $picker-button-ios-strong-font-weight: 600 !default; } .picker-ios .picker-opt { - margin: 0; - padding: $picker-ios-option-padding; + @include margin(0); height: 4.6rem; @@ -138,12 +163,16 @@ $picker-button-ios-strong-font-weight: 600 !default; backface-visibility: hidden; pointer-events: auto; + + @include deprecated-variable(padding, $picker-ios-option-padding) { + @include padding($picker-ios-option-padding-top, $picker-ios-option-padding-end, $picker-ios-option-padding-bottom, $picker-ios-option-padding-start); + } } .picker-ios .picker-above-highlight { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; z-index: 10; display: block; @@ -160,9 +189,10 @@ $picker-button-ios-strong-font-weight: 600 !default; } .picker-ios .picker-below-highlight { + @include position($picker-ios-option-offset-y + $picker-ios-option-height - 4, null, null, 0); + position: absolute; - top: $picker-ios-option-offset-y + $picker-ios-option-height - 4; - left: 0; + z-index: 11; display: block; diff --git a/src/components/picker/picker.md.scss b/src/components/picker/picker.md.scss index 1cb0bb9c213..7c33f6b7720 100644 --- a/src/components/picker/picker.md.scss +++ b/src/components/picker/picker.md.scss @@ -27,11 +27,35 @@ $picker-md-button-text-color: color($colors-md, primary) !defaul /// @prop - Background of the picker button $picker-md-button-background-color: transparent !default; -/// @prop - Padding of the picker column -$picker-md-column-padding: 0 8px !default; +// deprecated +$picker-md-column-padding: null !default; -/// @prop - Padding of the picker option -$picker-md-option-padding: 0 !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; + +// deprecated +$picker-md-option-padding: null !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; @@ -69,7 +93,7 @@ $picker-md-option-selected-color: color($colors-md, primary) !defaul .picker-md .picker-button, .picker-md .picker-button.activated { - margin: 0; + @include margin(0); height: $picker-md-button-height; @@ -86,9 +110,11 @@ $picker-md-option-selected-color: color($colors-md, primary) !defaul } .picker-md .picker-col { - padding: $picker-md-column-padding; - transform-style: preserve-3d; + + @include deprecated-variable(padding, $picker-md-column-padding) { + @include padding($picker-md-column-padding-top, $picker-md-column-padding-end, $picker-md-column-padding-bottom, $picker-md-column-padding-start); + } } .picker-md .picker-prefix, @@ -107,8 +133,7 @@ $picker-md-option-selected-color: color($colors-md, primary) !defaul .picker-md .picker-opt { - margin: 0; - padding: $picker-md-option-padding; + @include margin(0); height: 4.3rem; @@ -123,6 +148,10 @@ $picker-md-option-selected-color: color($colors-md, primary) !defaul backface-visibility: hidden; pointer-events: auto; + + @include deprecated-variable(padding, $picker-md-option-padding) { + @include padding($picker-md-option-padding-top, $picker-md-option-padding-end, $picker-md-option-padding-bottom, $picker-md-option-padding-start); + } } .picker-md .picker-prefix, @@ -133,9 +162,9 @@ $picker-md-option-selected-color: color($colors-md, primary) !defaul } .picker-md .picker-above-highlight { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; z-index: 10; width: 100%; @@ -151,9 +180,9 @@ $picker-md-option-selected-color: color($colors-md, primary) !defaul } .picker-md .picker-below-highlight { + @include position($picker-md-option-offset-y + $picker-md-option-height - 4, null, null, 0); + position: absolute; - top: $picker-md-option-offset-y + $picker-md-option-height - 4; - left: 0; z-index: 11; width: 100%; diff --git a/src/components/picker/picker.scss b/src/components/picker/picker.scss index 7a478a5c2c2..074f9ddd560 100644 --- a/src/components/picker/picker.scss +++ b/src/components/picker/picker.scss @@ -11,9 +11,9 @@ $picker-max-width: 500px !default; ion-picker-cmp { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; z-index: $z-index-overlay; display: block; @@ -32,10 +32,11 @@ ion-picker-cmp { } .picker-wrapper { + @include position(null, 0, 0, 0); + + @include margin(auto); + position: absolute; - right: 0; - bottom: 0; - left: 0; z-index: $z-index-overlay-wrapper; display: flex; @@ -43,8 +44,6 @@ ion-picker-cmp { flex-direction: column; - margin: auto; - width: $picker-width; max-width: $picker-max-width; @@ -114,11 +113,11 @@ ion-picker-cmp { // contain property is supported by Chrome .picker-opt { + @include position(0, null, null, 0); @include text-align(center); position: absolute; - top: 0; - left: 0; + display: block; overflow: hidden; diff --git a/src/components/picker/picker.wp.scss b/src/components/picker/picker.wp.scss index 86c87145920..5482f3c1d72 100644 --- a/src/components/picker/picker.wp.scss +++ b/src/components/picker/picker.wp.scss @@ -27,11 +27,35 @@ $picker-wp-button-text-color: color($colors-wp, primary) !defaul /// @prop - Background of the picker button $picker-wp-button-background-color: transparent !default; -/// @prop - Padding of the picker column -$picker-wp-column-padding: 0 4px !default; +// deprecated +$picker-wp-column-padding: null !default; -/// @prop - Padding of the picker option -$picker-wp-option-padding: 0 !default; +/// @prop - Padding top of the picker column +$picker-wp-column-padding-top: 0 !default; + +/// @prop - Padding end of the picker column +$picker-wp-column-padding-end: 4px !default; + +/// @prop - Padding bottom of the picker column +$picker-wp-column-padding-bottom: $picker-wp-column-padding-top !default; + +/// @prop - Padding start of the picker column +$picker-wp-column-padding-start: $picker-wp-column-padding-end !default; + +// deprecated +$picker-wp-option-padding: null !default; + +/// @prop - Padding top of the picker option +$picker-wp-option-padding-top: 0 !default; + +/// @prop - Padding end of the picker option +$picker-wp-option-padding-end: $picker-wp-option-padding-top !default; + +/// @prop - Padding bottom of the picker option +$picker-wp-option-padding-bottom: $picker-wp-option-padding-top !default; + +/// @prop - Padding start of the picker option +$picker-wp-option-padding-start: $picker-wp-option-padding-end !default; /// @prop - Text color of the picker option $picker-wp-option-text-color: $list-wp-text-color !default; @@ -83,7 +107,7 @@ $picker-wp-option-selected-color: color($colors-wp, primary) !defaul .picker-wp .picker-button, .picker-wp .picker-button.activated { - margin: 0; + @include margin(0); height: $picker-wp-button-height; @@ -100,9 +124,11 @@ $picker-wp-option-selected-color: color($colors-wp, primary) !defaul } .picker-wp .picker-col { - padding: $picker-wp-column-padding; - transform-style: preserve-3d; + + @include deprecated-variable(padding, $picker-wp-column-padding) { + @include padding($picker-wp-column-padding-top, $picker-wp-column-padding-end, $picker-wp-column-padding-bottom, $picker-wp-column-padding-start); + } } .picker-wp .picker-prefix, @@ -120,8 +146,7 @@ $picker-wp-option-selected-color: color($colors-wp, primary) !defaul } .picker-wp .picker-opt { - margin: 0; - padding: $picker-wp-option-padding; + @include margin(0); height: 4.2rem; @@ -136,6 +161,10 @@ $picker-wp-option-selected-color: color($colors-wp, primary) !defaul backface-visibility: hidden; pointer-events: auto; + + @include deprecated-variable(padding, $picker-wp-option-padding) { + @include padding($picker-wp-option-padding-top, $picker-wp-option-padding-end, $picker-wp-option-padding-bottom, $picker-wp-option-padding-start); + } } .picker-wp .picker-prefix, @@ -145,9 +174,10 @@ $picker-wp-option-selected-color: color($colors-wp, primary) !defaul } .picker-wp .picker-above-highlight { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; + z-index: 10; width: 100%; @@ -163,9 +193,10 @@ $picker-wp-option-selected-color: color($colors-wp, primary) !defaul } .picker-wp .picker-below-highlight { + @include position($picker-wp-option-offset-y + $picker-wp-option-height - 4, null, null, 0); + position: absolute; - top: $picker-wp-option-offset-y + $picker-wp-option-height - 4; - left: 0; + z-index: 11; width: 100%; diff --git a/src/components/popover/popover.ios.scss b/src/components/popover/popover.ios.scss index 7a983eeab63..317898854d3 100644 --- a/src/components/popover/popover.ios.scss +++ b/src/components/popover/popover.ios.scss @@ -29,12 +29,13 @@ $popover-ios-arrow-background: $popover-ios-background !default; .popover-ios .popover-content { + @include border-radius($popover-ios-border-radius); + width: $popover-ios-width; min-width: $popover-ios-min-width; min-height: $popover-ios-min-height; max-height: $popover-ios-max-height; - border-radius: $popover-ios-border-radius; color: $popover-ios-text-color; background: $popover-ios-background; } @@ -54,17 +55,16 @@ $popover-ios-arrow-background: $popover-ios-background !default; } .popover-ios .popover-arrow::after { - position: absolute; + @include position(3px, null, null, 3px); + @include border-radius(3px); - top: 3px; - left: 3px; + position: absolute; z-index: $z-index-overlay-wrapper; width: 14px; height: 14px; - border-radius: 3px; background-color: $popover-ios-arrow-background; content: ""; transform: rotate(45deg); diff --git a/src/components/popover/popover.md.scss b/src/components/popover/popover.md.scss index ed69dd02d3e..25fb2ccf7c4 100644 --- a/src/components/popover/popover.md.scss +++ b/src/components/popover/popover.md.scss @@ -32,12 +32,13 @@ $popover-md-box-shadow: 0 3px 12px 2px $popover-md-box-shadow-col .popover-md .popover-content { + @include border-radius($popover-md-border-radius); + width: $popover-md-width; min-width: $popover-md-min-width; min-height: $popover-md-min-height; max-height: $popover-md-max-height; - border-radius: $popover-md-border-radius; color: $popover-md-text-color; background: $popover-md-background; box-shadow: $popover-md-box-shadow; diff --git a/src/components/popover/popover.scss b/src/components/popover/popover.scss index fdfd5e1296a..34534dedce5 100644 --- a/src/components/popover/popover.scss +++ b/src/components/popover/popover.scss @@ -5,11 +5,10 @@ ion-popover { + @include position(0, 0, 0, 0); + position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + z-index: $z-index-overlay; display: flex; diff --git a/src/components/popover/popover.wp.scss b/src/components/popover/popover.wp.scss index 0ab4aa10f7d..89e1c2b874e 100644 --- a/src/components/popover/popover.wp.scss +++ b/src/components/popover/popover.wp.scss @@ -29,13 +29,14 @@ $popover-wp-background: $background-wp-color !default; .popover-wp .popover-content { + @include border-radius($popover-wp-border-radius); + width: $popover-wp-width; min-width: $popover-wp-min-width; min-height: $popover-wp-min-height; max-height: $popover-wp-max-height; border: $popover-wp-border; - border-radius: $popover-wp-border-radius; color: $popover-wp-text-color; background: $popover-wp-background; diff --git a/src/components/radio/radio.ios.scss b/src/components/radio/radio.ios.scss index 9424be005a8..a20fd09752f 100644 --- a/src/components/radio/radio.ios.scss +++ b/src/components/radio/radio.ios.scss @@ -4,32 +4,52 @@ // -------------------------------------------------- /// @prop - Color of the checked radio -$radio-ios-color-on: color($colors-ios, primary) !default; +$radio-ios-color-on: color($colors-ios, primary) !default; /// @prop - Width of the radio icon -$radio-ios-icon-width: 16px !default; +$radio-ios-icon-width: 16px !default; /// @prop - Height of the radio icon -$radio-ios-icon-height: 21px !default; +$radio-ios-icon-height: 21px !default; /// @prop - Border width of the radio icon -$radio-ios-icon-border-width: 2px !default; +$radio-ios-icon-border-width: 2px !default; /// @prop - Border style of the radio icon -$radio-ios-icon-border-style: solid !default; +$radio-ios-icon-border-style: solid !default; /// @prop - Opacity of the disabled radio -$radio-ios-disabled-opacity: .3 !default; +$radio-ios-disabled-opacity: .3 !default; // deprecated -$radio-ios-item-left-margin: 8px 21px 8px 3px !default; -/// @prop - Margin of the item-start in a radio -$radio-ios-item-start-margin: $radio-ios-item-left-margin; +$radio-ios-item-left-margin: null !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; // deprecated -$radio-ios-item-right-margin: $item-ios-padding-media-top 11px $item-ios-padding-media-bottom ($item-ios-padding-left / 2) !default; -/// @prop - Margin of the item-end in a radio -$radio-ios-item-end-margin: $radio-ios-item-right-margin; +$radio-ios-item-right-margin: null !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; .radio-ios { @@ -54,9 +74,9 @@ $radio-ios-item-end-margin: $radio-ios-item-right-margin; // ----------------------------------------- .radio-ios .radio-checked .radio-inner { + @include position(4px, null, null, 7px); + position: absolute; - top: 4px; - left: 7px; width: 5px; height: 12px; @@ -88,16 +108,20 @@ $radio-ios-item-end-margin: $radio-ios-item-right-margin; position: static; display: block; - margin: $radio-ios-item-end-margin; + @include deprecated-variable(margin, $radio-ios-item-right-margin) { + @include margin($radio-ios-item-end-margin-top, $radio-ios-item-end-margin-end, $radio-ios-item-end-margin-bottom, $radio-ios-item-end-margin-start); + } &[item-left], // deprecated &[item-start] { - margin: $radio-ios-item-start-margin; + @include deprecated-variable(margin, $radio-ios-item-left-margin) { + @include margin($radio-ios-item-start-margin-top, $radio-ios-item-start-margin-end, $radio-ios-item-start-margin-bottom, $radio-ios-item-start-margin-start); + } } } .item-radio.item-ios ion-label { - margin-left: 0; + @include margin-horizontal(0, null); } diff --git a/src/components/radio/radio.md.scss b/src/components/radio/radio.md.scss index ef685c211a7..3c8a5351683 100644 --- a/src/components/radio/radio.md.scss +++ b/src/components/radio/radio.md.scss @@ -4,44 +4,64 @@ // -------------------------------------------------- /// @prop - Color of the checked radio -$radio-md-color-on: color($colors-md, primary) !default; +$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; +$radio-md-color-off: darken($list-md-border-color, 40%) !default; /// @prop - Width of the radio icon -$radio-md-icon-width: 16px !default; +$radio-md-icon-width: 16px !default; /// @prop - Height of the radio icon -$radio-md-icon-height: 16px !default; +$radio-md-icon-height: 16px !default; /// @prop - Border width of the radio icon -$radio-md-icon-border-width: 2px !default; +$radio-md-icon-border-width: 2px !default; /// @prop - Border style of the radio icon -$radio-md-icon-border-style: solid !default; +$radio-md-icon-border-style: solid !default; /// @prop - Border radius of the radio icon -$radio-md-icon-border-radius: 50% !default; +$radio-md-icon-border-radius: 50% !default; /// @prop - Transition duration of the radio -$radio-md-transition-duration: 280ms !default; +$radio-md-transition-duration: 280ms !default; /// @prop - Transition easing of the radio -$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; +$radio-md-transition-easing: cubic-bezier(.4, 0, .2, 1) !default; /// @prop - Opacity of the disabled radio -$radio-md-disabled-opacity: .3 !default; +$radio-md-disabled-opacity: .3 !default; // deprecated -$radio-md-item-left-margin: 11px 36px 10px 4px !default; -/// @prop - Margin of the item-start in a radio -$radio-md-item-start-margin: $radio-md-item-left-margin; +$radio-md-item-left-margin: null !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; // deprecated -$radio-md-item-right-margin: $item-md-padding-media-top 10px $item-md-padding-media-bottom 0 !default; -/// @prop - Margin of the item-end in a radio -$radio-md-item-end-margin: $radio-md-item-right-margin; +$radio-md-item-right-margin: null !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; .radio-md { @@ -54,19 +74,18 @@ $radio-md-item-end-margin: $radio-md-item-right-margin; // ----------------------------------------- .radio-md .radio-icon { + @include position(0, null, null, 0); + @include margin(0); + @include border-radius($radio-md-icon-border-radius); + position: relative; - top: 0; - left: 0; display: block; - margin: 0; - width: $radio-md-icon-width; height: $radio-md-icon-height; border-width: $radio-md-icon-border-width; border-style: $radio-md-icon-border-style; - border-radius: $radio-md-icon-border-radius; border-color: $radio-md-color-off; } @@ -75,14 +94,14 @@ $radio-md-item-end-margin: $radio-md-item-right-margin; // ----------------------------------------- .radio-md .radio-inner { + @include position($radio-md-icon-border-width, null, null, $radio-md-icon-border-width); + @include border-radius(50%); + position: absolute; - top: $radio-md-icon-border-width; - left: $radio-md-icon-border-width; width: $radio-md-icon-width - $radio-md-icon-border-width * 4; height: $radio-md-icon-height - $radio-md-icon-border-width * 4; - border-radius: 50%; background-color: $radio-md-color-on; transform: scale3d(0, 0, 0); transition: transform $radio-md-transition-duration $radio-md-transition-easing; @@ -123,16 +142,20 @@ $radio-md-item-end-margin: $radio-md-item-right-margin; position: static; display: block; - margin: $radio-md-item-end-margin; + @include deprecated-variable(margin, $radio-md-item-right-margin) { + @include margin($radio-md-item-end-margin-top, $radio-md-item-end-margin-end, $radio-md-item-end-margin-bottom, $radio-md-item-end-margin-start); + } &[item-left], // deprecated &[item-start] { - margin: $radio-md-item-start-margin; + @include deprecated-variable(margin, $radio-md-item-left-margin) { + @include margin($radio-md-item-start-margin-top, $radio-md-item-start-margin-end, $radio-md-item-start-margin-bottom, $radio-md-item-start-margin-start); + } } } .item-radio.item-md ion-label { - margin-left: 0; + @include margin-horizontal(0, null); } diff --git a/src/components/radio/radio.wp.scss b/src/components/radio/radio.wp.scss index 9226866e9ac..c08c77355a1 100644 --- a/src/components/radio/radio.wp.scss +++ b/src/components/radio/radio.wp.scss @@ -4,41 +4,61 @@ // -------------------------------------------------- /// @prop - Color of the checked radio -$radio-wp-color-on: color($colors-wp, primary) !default; +$radio-wp-color-on: color($colors-wp, primary) !default; /// @prop - Color of the unchecked radio -$radio-wp-color-off: #333 !default; +$radio-wp-color-off: #333 !default; /// @prop - Order of the radio (places to the left of the item) -$radio-wp-order: -1 !default; +$radio-wp-order: -1 !default; /// @prop - Width of the radio icon -$radio-wp-icon-width: 16px !default; +$radio-wp-icon-width: 16px !default; /// @prop - Height of the radio icon -$radio-wp-icon-height: 16px !default; +$radio-wp-icon-height: 16px !default; /// @prop - Border width of the radio icon -$radio-wp-icon-border-width: 2px !default; +$radio-wp-icon-border-width: 2px !default; /// @prop - Border style of the radio icon -$radio-wp-icon-border-style: solid !default; +$radio-wp-icon-border-style: solid !default; /// @prop - Border radius of the radio icon -$radio-wp-icon-border-radius: 50% !default; +$radio-wp-icon-border-radius: 50% !default; /// @prop - Opacity of the disabled radio -$radio-wp-disabled-opacity: .3 !default; +$radio-wp-disabled-opacity: .3 !default; // deprecated -$radio-wp-item-left-margin: 9px 20px 9px 4px !default; -/// @prop - Margin of the item-start in a radio -$radio-wp-item-start-margin: $radio-wp-item-left-margin; +$radio-wp-item-left-margin: null !default; + +/// @prop - Margin top of the item-start in a radio +$radio-wp-item-start-margin-top: 9px !default; + +/// @prop - Margin end of the item-start in a radio +$radio-wp-item-start-margin-end: 20px !default; + +/// @prop - Margin bottom of the item-start in a radio +$radio-wp-item-start-margin-bottom: 9px !default; + +/// @prop - Margin start of the item-start in a radio +$radio-wp-item-start-margin-start: 4px !default; // deprecated -$radio-wp-item-right-margin: 11px 10px 10px 0 !default; -/// @prop - Margin of the item-end in a radio -$radio-wp-item-end-margin: $radio-wp-item-right-margin; +$radio-wp-item-right-margin: null !default; + +/// @prop - Margin top of the item-end in a radio +$radio-wp-item-end-margin-top: 11px !default; + +/// @prop - Margin end of the item-end in a radio +$radio-wp-item-end-margin-end: 10px !default; + +/// @prop - Margin bottom of the item-end in a radio +$radio-wp-item-end-margin-bottom: 10px !default; + +/// @prop - Margin start of the item-end in a radio +$radio-wp-item-end-margin-start: 0 !default; .radio-wp { @@ -51,19 +71,19 @@ $radio-wp-item-end-margin: $radio-wp-item-right-margin; // ----------------------------------------- .radio-wp .radio-icon { + @include position(0, null, null, 0); + @include margin(0); + @include border-radius($radio-wp-icon-border-radius); + position: relative; - top: 0; - left: 0; - display: block; - margin: 0; + display: block; width: $radio-wp-icon-width; height: $radio-wp-icon-height; border-width: $radio-wp-icon-border-width; border-style: $radio-wp-icon-border-style; - border-radius: $radio-wp-icon-border-radius; border-color: $radio-wp-color-off; } @@ -72,15 +92,16 @@ $radio-wp-item-end-margin: $radio-wp-item-right-margin; // ----------------------------------------- .radio-wp .radio-inner { + @include position($radio-wp-icon-border-width, null, null, $radio-wp-icon-border-width); + @include border-radius(50%); + position: absolute; - top: $radio-wp-icon-border-width; - left: $radio-wp-icon-border-width; + display: none; width: $radio-wp-icon-width / 2; height: $radio-wp-icon-height / 2; - border-radius: 50%; background-color: $radio-wp-color-off; } @@ -122,18 +143,22 @@ $radio-wp-item-end-margin: $radio-wp-item-right-margin; order: $radio-wp-order; - margin: $radio-wp-item-start-margin; + @include deprecated-variable(margin, $radio-wp-item-left-margin) { + @include margin($radio-wp-item-start-margin-top, $radio-wp-item-start-margin-end, $radio-wp-item-start-margin-bottom, $radio-wp-item-start-margin-start); + } &[item-right], // deprecated &[item-end] { order: 0; - margin: $radio-wp-item-end-margin; + @include deprecated-variable(margin, $radio-wp-item-right-margin) { + @include margin($radio-wp-item-end-margin-top, $radio-wp-item-end-margin-end, $radio-wp-item-end-margin-bottom, $radio-wp-item-end-margin-start); + } } } .item-radio.item-wp ion-label { - margin-left: 0; + @include margin-horizontal(0, null); } diff --git a/src/components/range/range.ios.scss b/src/components/range/range.ios.scss index 07cc074abfe..b1bda739e6d 100644 --- a/src/components/range/range.ios.scss +++ b/src/components/range/range.ios.scss @@ -6,7 +6,7 @@ /// @prop - Padding top/bottom of the range $range-ios-padding-vertical: 8px !default; -/// @prop - Padding left/right of the range +/// @prop - Padding start/end of the range $range-ios-padding-horizontal: 16px !default; /// @prop - Height of the range slider @@ -66,20 +66,32 @@ $range-ios-pin-color: $text-ios-color !default; /// @prop - Font size of the range pin $range-ios-pin-font-size: 12px !default; -/// @prop - Padding of the range pin -$range-ios-pin-padding: 8px !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 { - padding: $range-ios-padding-vertical $range-ios-padding-horizontal; + @include padding($range-ios-padding-vertical, $range-ios-padding-horizontal); } .range-ios [range-left] { - margin: 0 20px 0 0; + @include margin(0, 20px, 0, 0); } .range-ios [range-right] { - margin: 0 0 0 20px; + @include margin(0, 0, 0, 20px); } .range-ios.range-has-pin { @@ -91,15 +103,14 @@ $range-ios-pin-padding: 8px !default; } .range-ios .range-bar { + @include position(($range-ios-slider-height / 2), null, null, 0); + @include border-radius(1px); + position: absolute; - top: ($range-ios-slider-height / 2); - left: 0; width: 100%; height: $range-ios-bar-height; - border-radius: 1px; - background: $range-ios-bar-background-color; pointer-events: none; @@ -122,29 +133,26 @@ $range-ios-pin-padding: 8px !default; } .range-ios .range-knob-handle { + @include position(($range-ios-slider-height / 2), null, null, 0); + @include margin(-($range-ios-hit-height / 2), null, null, -($range-ios-hit-width / 2)); @include text-align(center); position: absolute; - top: ($range-ios-slider-height / 2); - left: 0; - - margin-top: -($range-ios-hit-height / 2); - margin-left: -($range-ios-hit-width / 2); width: $range-ios-hit-width; height: $range-ios-hit-height; } .range-ios .range-knob { + @include position(($range-ios-hit-height / 2) - ($range-ios-knob-height / 2) + ($range-ios-bar-height / 2) - .5px, + null, null, ($range-ios-hit-width / 2) - ($range-ios-knob-width / 2)); + @include border-radius($range-ios-knob-border-radius); + position: absolute; - top: ($range-ios-hit-height / 2) - ($range-ios-knob-height / 2) + ($range-ios-bar-height / 2) - .5px; - left: ($range-ios-hit-width / 2) - ($range-ios-knob-width / 2); width: $range-ios-knob-width; height: $range-ios-knob-height; - border-radius: $range-ios-knob-border-radius; - background: $range-ios-knob-background-color; box-shadow: $range-ios-knob-box-shadow; @@ -153,16 +161,15 @@ $range-ios-pin-padding: 8px !default; } .range-ios .range-tick { + @include margin-horizontal(-($range-ios-tick-width / 2), null); + @include border-radius($range-ios-tick-border-radius); + position: absolute; top: ($range-ios-hit-height / 2) - ($range-ios-tick-height / 2) + ($range-ios-bar-height / 2); - margin-left: ($range-ios-tick-width / 2) * -1; - width: $range-ios-tick-width; height: $range-ios-tick-height; - border-radius: $range-ios-tick-border-radius; - background: $range-ios-tick-background-color; pointer-events: none; @@ -174,17 +181,14 @@ $range-ios-pin-padding: 8px !default; .range-ios .range-pin { @include text-align(center); + @include border-radius(50px); position: relative; top: -20px; display: inline-block; - padding: $range-ios-pin-padding; - min-width: 28px; - border-radius: 50px; - font-size: $range-ios-pin-font-size; color: $range-ios-pin-color; @@ -193,6 +197,10 @@ $range-ios-pin-padding: 8px !default; transform: translate3d(0, 28px, 0) scale(.01); 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/src/components/range/range.md.scss b/src/components/range/range.md.scss index 11690503987..b477305671a 100644 --- a/src/components/range/range.md.scss +++ b/src/components/range/range.md.scss @@ -6,7 +6,7 @@ /// @prop - Padding top/bottom of the range $range-md-padding-vertical: 8px !default; -/// @prop - Padding left/right of the range +/// @prop - Padding start/end of the range $range-md-padding-horizontal: 8px !default; /// @prop - Height of the range slider @@ -69,7 +69,7 @@ $range-md-pin-font-size: 12px !default; /// @prop - Padding top/bottom of the range pin $range-md-pin-padding-vertical: 8px !default; -/// @prop - Padding left/right of the range pin +/// @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 @@ -77,15 +77,15 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def .range-md { - padding: $range-md-padding-vertical $range-md-padding-horizontal; + @include padding($range-md-padding-vertical, $range-md-padding-horizontal); } .range-md [range-left] { - margin: 0 12px 0 0; + @include margin(0, 12px, 0, 0); } .range-md [range-right] { - margin: 0 0 0 12px; + @include margin(0, 0, 0, 12px); } .range-md.range-has-pin { @@ -97,9 +97,9 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def } .range-md .range-bar { + @include position(($range-md-slider-height / 2), null, null, 0); + position: absolute; - top: ($range-md-slider-height / 2); - left: 0; width: 100%; height: $range-md-bar-height; @@ -126,32 +126,28 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def } .range-md .range-knob-handle { + @include position(($range-md-slider-height / 2), null, null, 0); + @include margin(-($range-md-hit-height / 2), null, null, -($range-md-hit-width / 2)); @include text-align(center); position: absolute; - top: ($range-md-slider-height / 2); - left: 0; - - margin-top: -($range-md-hit-height / 2); - margin-left: -($range-md-hit-width / 2); width: $range-md-hit-width; height: $range-md-hit-height; } .range-md .range-knob { - position: absolute; + @include position(($range-md-hit-height / 2) - ($range-md-knob-height / 2) + ($range-md-bar-height / 2), + null, null, ($range-md-hit-width / 2) - ($range-md-knob-width / 2)); + @include border-radius(50%); - top: ($range-md-hit-height / 2) - ($range-md-knob-height / 2) + ($range-md-bar-height / 2); - left: ($range-md-hit-width / 2) - ($range-md-knob-width / 2); + position: absolute; z-index: 2; width: $range-md-knob-width; height: $range-md-knob-height; - border-radius: 50%; - background: $range-md-knob-background-color; transform: scale(.67); @@ -163,19 +159,18 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def } .range-md .range-tick { + @include margin-horizontal(-($range-md-tick-width / 2), null); + @include border-radius($range-md-tick-border-radius); + position: absolute; top: ($range-md-hit-height / 2) - ($range-md-tick-height / 2) + ($range-md-bar-height / 2); z-index: 1; - margin-left: ($range-md-tick-width / 2) * -1; - width: $range-md-tick-width; height: $range-md-tick-height; - border-radius: $range-md-tick-border-radius; - background: $range-md-tick-background-color; pointer-events: none; @@ -186,19 +181,17 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def } .range-md .range-pin { + @include padding($range-md-pin-padding-vertical, $range-md-pin-padding-horizontal); @include text-align(center); + @include border-radius(50%); position: relative; top: -20px; display: inline-block; - padding: $range-md-pin-padding-vertical $range-md-pin-padding-horizontal; - min-width: 28px; height: 28px; - border-radius: 50%; - font-size: $range-md-pin-font-size; color: $range-md-pin-color; @@ -209,17 +202,17 @@ $range-md-pin-min-background-color: $range-md-bar-background-color !def transition: transform 120ms ease, background-color 120ms ease; &::before { + @include position(3px, null, null, 50%); + @include border-radius(50%, 50%, 50%, 0); + @include margin-horizontal(-13px, null); + position: absolute; - top: 3px; - left: 50%; - z-index: -1; - margin-left: -13px; + z-index: -1; width: 26px; height: 26px; - border-radius: 50% 50% 50% 0; background: $range-md-pin-background-color; content: ""; diff --git a/src/components/range/range.wp.scss b/src/components/range/range.wp.scss index c967f9c3267..0ab71a1b0d4 100644 --- a/src/components/range/range.wp.scss +++ b/src/components/range/range.wp.scss @@ -6,7 +6,7 @@ /// @prop - Padding top/bottom of the range $range-wp-padding-vertical: 8px !default; -/// @prop - Padding left/right of the range +/// @prop - Padding start/end of the range $range-wp-padding-horizontal: 8px !default; /// @prop - Height of the range slider @@ -63,24 +63,36 @@ $range-wp-pin-color: color-contrast($colors-wp, $range-w /// @prop - Font size of the range pin $range-wp-pin-font-size: 12px !default; -/// @prop - Padding of the range pin -$range-wp-pin-padding: 8px !default; +// deprecated +$range-wp-pin-padding: null !default; + +/// @prop - Padding top of the range pin +$range-wp-pin-padding-top: 8px !default; + +/// @prop - Padding end of the range pin +$range-wp-pin-padding-end: $range-wp-pin-padding-top !default; + +/// @prop - Padding bottom of the range pin +$range-wp-pin-padding-bottom: $range-wp-pin-padding-top !default; + +/// @prop - Padding start of the range pin +$range-wp-pin-padding-start: $range-wp-pin-padding-end !default; .range-wp { - padding: $range-wp-padding-vertical $range-wp-padding-horizontal; + @include padding($range-wp-padding-vertical, $range-wp-padding-horizontal); } .range-wp [range-left] { - margin: 0 12px 0 0; + @include margin(0, 12px, 0, 0); } .range-wp [range-right] { - margin: 0 0 0 12px; + @include margin(0, 0, 0, 12px); } .range-wp.range-has-pin { - padding-top: $range-wp-padding-vertical + $range-wp-pin-font-size + $range-wp-pin-padding; + padding-top: $range-wp-padding-vertical + $range-wp-pin-font-size + $range-wp-pin-padding-top; } .range-wp .range-slider { @@ -88,9 +100,9 @@ $range-wp-pin-padding: 8px !default; } .range-wp .range-bar { + @include position(($range-wp-slider-height / 2), null, null, 0); + position: absolute; - top: ($range-wp-slider-height / 2); - left: 0; width: 100%; height: $range-wp-bar-height; @@ -117,45 +129,41 @@ $range-wp-pin-padding: 8px !default; } .range-wp .range-knob-handle { + @include position(($range-wp-slider-height / 2), null, null, 0); + @include margin(-($range-wp-hit-height / 2), null, null, -($range-wp-hit-width / 2)); @include text-align(center); position: absolute; - top: ($range-wp-slider-height / 2); - left: 0; - - margin-top: -($range-wp-hit-height / 2); - margin-left: -($range-wp-hit-width / 2); width: $range-wp-hit-width; height: $range-wp-hit-height; } .range-wp .range-knob { + @include position(($range-wp-hit-height / 2) - ($range-wp-knob-height / 2) + ($range-wp-bar-height / 2), + null, null, ($range-wp-hit-width / 2) - ($range-wp-knob-width / 2)); + @include border-radius($range-wp-knob-border-radius); + position: absolute; - top: ($range-wp-hit-height / 2) - ($range-wp-knob-height / 2) + ($range-wp-bar-height / 2); - left: ($range-wp-hit-width / 2) - ($range-wp-knob-width / 2); width: $range-wp-knob-width; height: $range-wp-knob-height; - border-radius: $range-wp-knob-border-radius; - background: $range-wp-knob-background-color; pointer-events: none; } .range-wp .range-tick { + @include margin-horizontal(-($range-wp-tick-width / 2), null); + @include border-radius($range-wp-tick-border-radius); + position: absolute; top: ($range-wp-hit-height / 2) - ($range-wp-tick-height / 2) + ($range-wp-bar-height / 2); - margin-left: ($range-wp-tick-width / 2) * -1; - width: $range-wp-tick-width; height: $range-wp-tick-height; - border-radius: $range-wp-tick-border-radius; - background: $range-wp-tick-background-color; pointer-events: none; @@ -167,17 +175,14 @@ $range-wp-pin-padding: 8px !default; .range-wp .range-pin { @include text-align(center); + @include border-radius(50px); position: relative; top: -24px; display: inline-block; - padding: $range-wp-pin-padding; - min-width: 28px; - border-radius: 50px; - font-size: $range-wp-pin-font-size; color: $range-wp-pin-color; @@ -186,6 +191,10 @@ $range-wp-pin-padding: 8px !default; transform: translate3d(0, 28px, 0) scale(.01); transition: transform 120ms ease; + + @include deprecated-variable(padding, $range-wp-pin-padding) { + @include padding($range-wp-pin-padding-top, $range-wp-pin-padding-end, $range-wp-pin-padding-bottom, $range-wp-pin-padding-start); + } } .range-wp .range-knob-pressed .range-pin { diff --git a/src/components/refresher/refresher.scss b/src/components/refresher/refresher.scss index f727f414f0f..154f4f15597 100644 --- a/src/components/refresher/refresher.scss +++ b/src/components/refresher/refresher.scss @@ -23,10 +23,12 @@ $refresher-border-color: #ddd !default; ion-refresher { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; + z-index: $z-index-refresher; + display: none; width: 100%; diff --git a/src/components/scroll/scroll.scss b/src/components/scroll/scroll.scss index f68893f7148..69bca6d999a 100644 --- a/src/components/scroll/scroll.scss +++ b/src/components/scroll/scroll.scss @@ -21,11 +21,9 @@ ion-scroll[center] .scroll-content { } ion-scroll .scroll-content { + @include position(0, 0, 0, 0); + position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; overflow-y: hidden; overflow-x: hidden; diff --git a/src/components/searchbar/searchbar.ios.scss b/src/components/searchbar/searchbar.ios.scss index a84695474f0..a0babeacaa2 100644 --- a/src/components/searchbar/searchbar.ios.scss +++ b/src/components/searchbar/searchbar.ios.scss @@ -6,7 +6,7 @@ /// @prop - Padding top/bottom of the searchbar $searchbar-ios-padding-vertical: 0 !default; -/// @prop - Padding left/right of the searchbar +/// @prop - Padding start/end of the searchbar $searchbar-ios-padding-horizontal: 8px !default; /// @prop - Background of the searchbar @@ -62,7 +62,7 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default; // ----------------------------------------- .searchbar-ios { - padding: $searchbar-ios-padding-vertical $searchbar-ios-padding-horizontal; + @include padding($searchbar-ios-padding-vertical, $searchbar-ios-padding-horizontal); min-height: $searchbar-ios-min-height; @@ -85,13 +85,11 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default; // ----------------------------------------- .searchbar-ios .searchbar-search-icon { + @include position(9px, null, null, 9px); @include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $searchbar-ios-input-search-icon-color); + @include margin-horizontal(calc(50% - 60px), null); position: absolute; - top: 9px; - left: 9px; - - margin-left: calc(50% - 60px); width: $searchbar-ios-input-search-icon-size + 1; height: $searchbar-ios-input-search-icon-size + 1; @@ -106,12 +104,11 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default; .searchbar-ios .searchbar-input { @include placeholder($searchbar-ios-input-placeholder-color); - - padding: 0 28px; + @include padding(0, 28px); + @include border-radius(5px); height: $searchbar-ios-input-height; - border-radius: 5px; font-size: 1.4rem; font-weight: 400; @@ -124,11 +121,10 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default; // ----------------------------------------- .searchbar-ios .searchbar-clear-icon { + @include position(0, 0, null, null); @include ios-searchbar-icon($searchbar-ios-input-clear-icon-svg, $searchbar-ios-input-clear-icon-color); position: absolute; - top: 0; - right: 0; width: 30px; height: 100%; @@ -143,14 +139,13 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default; // ----------------------------------------- .searchbar-ios .searchbar-ios-cancel { + @include padding(0, 8px, 0, 0); + @include margin-horizontal(0, null); + display: none; flex-shrink: 0; - margin-left: 0; - padding: 0; - padding-left: 8px; - height: 30px; cursor: pointer; @@ -160,11 +155,11 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default; // ----------------------------------------- .searchbar-ios.searchbar-left-aligned .searchbar-search-icon { - margin-left: 0; + @include margin-horizontal(0, null); } .searchbar-ios.searchbar-left-aligned .searchbar-input { - padding-left: 30px; + @include padding-horizontal(30px, null); } @@ -189,11 +184,11 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default; } .toolbar .searchbar-ios .searchbar-ios-cancel { - padding: 0; + @include padding(0); } .toolbar .searchbar-ios.searchbar-has-focus .searchbar-ios-cancel { - padding-left: 8px; + @include padding-horizontal(8px, null); } @@ -258,7 +253,7 @@ $searchbar-ios-toolbar-input-background: rgba(0, 0, 0, .08) !default; } .searchbar-animated .searchbar-ios-cancel { - margin-right: -100%; + @include margin-horizontal(null, -100%); opacity: 0; transform: translate3d(0, 0, 0); diff --git a/src/components/searchbar/searchbar.md.scss b/src/components/searchbar/searchbar.md.scss index b697874830c..cf596908a11 100644 --- a/src/components/searchbar/searchbar.md.scss +++ b/src/components/searchbar/searchbar.md.scss @@ -3,8 +3,20 @@ // Material Design Searchbar // -------------------------------------------------- -/// @prop - Padding of the searchbar -$searchbar-md-padding: 8px !default; +// deprecated +$searchbar-md-padding: null !default; + +/// @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; @@ -53,9 +65,11 @@ $searchbar-md-input-clear-icon-size: 22px !default; // ----------------------------------------- .searchbar-md { - padding: $searchbar-md-padding; - background: $searchbar-md-background-color; + + @include deprecated-variable(padding, $searchbar-md-padding) { + @include padding($searchbar-md-padding-top, $searchbar-md-padding-end, $searchbar-md-padding-bottom, $searchbar-md-padding-start); + } } @@ -63,11 +77,9 @@ $searchbar-md-input-clear-icon-size: 22px !default; // ----------------------------------------- .searchbar-md .searchbar-search-icon { + @include position(11px, null, null, 16px); @include svg-background-image($searchbar-md-input-search-icon-svg); - top: 11px; - left: 16px; - width: $searchbar-md-input-search-icon-size + 1; height: $searchbar-md-input-search-icon-size + 1; } @@ -77,11 +89,10 @@ $searchbar-md-input-clear-icon-size: 22px !default; // ----------------------------------------- .searchbar-md .searchbar-md-cancel { - top: 0; - left: 10px; - display: none; + @include position(0, null, null, 10px); + @include margin(0); - margin: 0; + display: none; width: $searchbar-md-input-search-icon-size + 1; height: 100%; @@ -109,13 +120,11 @@ $searchbar-md-input-clear-icon-size: 22px !default; .searchbar-md .searchbar-input { @include placeholder($searchbar-md-input-placeholder-color); - - padding: 6px 55px; + @include padding(6px, 55px); + @include border-radius($searchbar-md-input-border-radius); height: $searchbar-md-input-height; - border-radius: $searchbar-md-input-border-radius; - font-size: 1.6rem; font-weight: 400; @@ -132,13 +141,11 @@ $searchbar-md-input-clear-icon-size: 22px !default; // ----------------------------------------- .searchbar-md .searchbar-clear-icon { + @include position(0, 13px, null, null); @include svg-background-image($searchbar-md-input-clear-icon-svg); + @include padding(0); position: absolute; - top: 0; - right: 13px; - - padding: 0; width: $searchbar-md-input-clear-icon-size; height: 100%; @@ -169,11 +176,11 @@ $searchbar-md-input-clear-icon-size: 22px !default; // ----------------------------------------- .toolbar .searchbar-md { - padding: 3px; + @include padding(3px); } .toolbar .searchbar-md .searchbar-md-cancel { - left: 14px; + @include position-horizontal(14px, null); } diff --git a/src/components/searchbar/searchbar.scss b/src/components/searchbar/searchbar.scss index 0a67f402dde..9e37d8eb21a 100644 --- a/src/components/searchbar/searchbar.scss +++ b/src/components/searchbar/searchbar.scss @@ -37,10 +37,10 @@ ion-searchbar { } .searchbar-clear-icon { - display: none; + @include margin(0); + @include padding(0); - margin: 0; - padding: 0; + display: none; min-height: 0; } diff --git a/src/components/searchbar/searchbar.ts b/src/components/searchbar/searchbar.ts index 807a02c5fb4..47a83c7c071 100644 --- a/src/components/searchbar/searchbar.ts +++ b/src/components/searchbar/searchbar.ts @@ -236,11 +236,11 @@ export class Searchbar extends BaseInput { var textWidth = tempSpan.offsetWidth; doc.body.removeChild(tempSpan); - // Set the input padding left + // Set the input padding start var inputLeft = 'calc(50% - ' + (textWidth / 2) + 'px)'; inputEle.style.paddingLeft = inputLeft; - // Set the icon margin left + // Set the icon margin start var iconLeft = 'calc(50% - ' + ((textWidth / 2) + 30) + 'px)'; iconEle.style.marginLeft = iconLeft; } diff --git a/src/components/searchbar/searchbar.wp.scss b/src/components/searchbar/searchbar.wp.scss index 9b52bdad420..516b71d08dc 100644 --- a/src/components/searchbar/searchbar.wp.scss +++ b/src/components/searchbar/searchbar.wp.scss @@ -3,8 +3,20 @@ // Windows Searchbar // -------------------------------------------------- -/// @prop - Padding of the searchbar -$searchbar-wp-padding: 8px !default; +// deprecated +$searchbar-wp-padding: null !default; + +/// @prop - Padding top of the searchbar +$searchbar-wp-padding-top: 8px !default; + +/// @prop - Padding end of the searchbar +$searchbar-wp-padding-end: $searchbar-wp-padding-top !default; + +/// @prop - Padding bottom of the searchbar +$searchbar-wp-padding-bottom: $searchbar-wp-padding-top !default; + +/// @prop - Padding start of the searchbar +$searchbar-wp-padding-start: $searchbar-wp-padding-end !default; /// @prop - Background of the searchbar $searchbar-wp-background-color: transparent !default; @@ -30,7 +42,7 @@ $searchbar-wp-input-search-icon-size: 20px !default; /// @prop - Padding top/bottom of the searchbar input $searchbar-wp-input-padding-vertical: 0 !default; -/// @prop - Padding left/right of the searchbar input +/// @prop - Padding start/end of the searchbar input $searchbar-wp-input-padding-horizontal: 8px !default; /// @prop - Height of the searchbar input @@ -71,9 +83,11 @@ $searchbar-wp-input-clear-icon-size: 22px !default; // ----------------------------------------- .searchbar-wp { - padding: $searchbar-wp-padding; - background: $searchbar-wp-background-color; + + @include deprecated-variable(padding, $searchbar-wp-padding) { + @include padding($searchbar-wp-padding-top, $searchbar-wp-padding-end, $searchbar-wp-padding-bottom, $searchbar-wp-padding-start); + } } .searchbar-wp .searchbar-input-container { @@ -84,11 +98,10 @@ $searchbar-wp-input-clear-icon-size: 22px !default; // ----------------------------------------- .searchbar-wp .searchbar-search-icon { + @include position(5px, $searchbar-wp-input-padding-horizontal, null, null); @include svg-background-image($searchbar-wp-input-search-icon-svg); position: absolute; - top: 5px; - right: $searchbar-wp-input-padding-horizontal; width: $searchbar-wp-input-search-icon-size + 1; height: $searchbar-wp-input-search-icon-size + 1; @@ -107,12 +120,11 @@ $searchbar-wp-input-clear-icon-size: 22px !default; .searchbar-wp .searchbar-input { @include placeholder($searchbar-wp-input-placeholder-color); - - padding: $searchbar-wp-input-padding-vertical $searchbar-wp-input-padding-horizontal; + @include padding($searchbar-wp-input-padding-vertical, $searchbar-wp-input-padding-horizontal); + @include border-radius($searchbar-wp-input-border-radius); height: $searchbar-wp-input-height; - border-radius: $searchbar-wp-input-border-radius; font-size: $searchbar-wp-input-font-size; font-weight: $searchbar-wp-input-font-weight; @@ -128,13 +140,11 @@ $searchbar-wp-input-clear-icon-size: 22px !default; // ----------------------------------------- .searchbar-wp .searchbar-clear-icon { + @include position(0, $searchbar-wp-input-padding-horizontal, null, null); @include svg-background-image($searchbar-wp-input-clear-icon-svg); + @include padding(0); position: absolute; - top: 0; - right: $searchbar-wp-input-padding-horizontal; - - padding: 0; width: $searchbar-wp-input-clear-icon-size; height: 100%; @@ -184,7 +194,7 @@ $searchbar-wp-input-clear-icon-size: 22px !default; // ----------------------------------------- .toolbar .searchbar-wp { - padding: 2px; + @include padding(2px); } diff --git a/src/components/segment/segment.ios.scss b/src/components/segment/segment.ios.scss index 7ac64d91c93..687bfb7c5bb 100644 --- a/src/components/segment/segment.ios.scss +++ b/src/components/segment/segment.ios.scss @@ -113,9 +113,8 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default; } &:first-of-type { - margin-right: 0; - - border-radius: $segment-button-ios-border-radius 0 0 $segment-button-ios-border-radius; + @include border-radius($segment-button-ios-border-radius, 0, 0, $segment-button-ios-border-radius); + @include margin-horizontal(null, 0); } &:not(:first-of-type) { @@ -123,26 +122,24 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default; } &:last-of-type { - margin-left: 0; + @include border-radius(0, $segment-button-ios-border-radius, $segment-button-ios-border-radius, 0); + @include margin-horizontal(0, null); border-left-width: 0; - border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0; } } [dir="rtl"] .segment-ios .segment-button { &:first-of-type { - margin-left: 0; + @include margin-horizontal(0, null); border-left-width: 0; - border-radius: 0 $segment-button-ios-border-radius $segment-button-ios-border-radius 0; } &:last-of-type { - margin-right: 0; + @include margin-horizontal(null, 0); border-left-width: $segment-button-ios-border-width; - border-radius: $segment-button-ios-border-radius 0 0 $segment-button-ios-border-radius; } } @@ -164,11 +161,9 @@ $segment-button-ios-toolbar-icon-line-height: 2.4rem !default; // -------------------------------------------------- .toolbar-ios .segment-ios { + @include position(0, 0, 0, 0); + position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; } .toolbar-ios .segment-button { diff --git a/src/components/segment/segment.md.scss b/src/components/segment/segment.md.scss index 94ca648d18d..4db2e65d6c3 100644 --- a/src/components/segment/segment.md.scss +++ b/src/components/segment/segment.md.scss @@ -24,8 +24,20 @@ $segment-button-md-opacity-activated: 1 !default; /// @prop - Opacity of the disabled segment button $segment-button-md-opacity-disabled: .3 !default; -/// @prop - Padding of the segment button -$segment-button-md-padding: 0 6px !default; +// deprecated +$segment-button-md-padding: null !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; @@ -46,8 +58,6 @@ $segment-button-md-icon-line-height: $segment-button-md-line-height !d .segment-md .segment-button { flex: 1; - padding: $segment-button-md-padding; - width: 0; height: $segment-button-md-height; @@ -65,6 +75,10 @@ $segment-button-md-icon-line-height: $segment-button-md-line-height !d opacity: $segment-button-md-opacity; transition: 100ms all linear; + @include deprecated-variable(padding, $segment-button-md-padding) { + @include padding($segment-button-md-padding-top, $segment-button-md-padding-end, $segment-button-md-padding-bottom, $segment-button-md-padding-start); + } + ion-icon { font-size: $segment-button-md-icon-size; line-height: $segment-button-md-icon-line-height; @@ -87,7 +101,7 @@ $segment-button-md-icon-line-height: $segment-button-md-line-height !d .toolbar { .segment-md { - margin: 0 auto; + @include margin(0, auto); } .segment-md .segment-button.activated, diff --git a/src/components/segment/segment.scss b/src/components/segment/segment.scss index 67b6e69e5a3..2eb7452ad67 100644 --- a/src/components/segment/segment.scss +++ b/src/components/segment/segment.scss @@ -15,15 +15,13 @@ ion-segment { } .segment-button { + @include margin-horizontal(0); @include text-align(center); position: relative; display: block; overflow: hidden; - margin-right: 0; - margin-left: 0; - text-overflow: ellipsis; white-space: nowrap; cursor: pointer; diff --git a/src/components/segment/segment.wp.scss b/src/components/segment/segment.wp.scss index 9d4a8c4c448..c25859c9dac 100644 --- a/src/components/segment/segment.wp.scss +++ b/src/components/segment/segment.wp.scss @@ -9,8 +9,20 @@ $segment-button-wp-background-color: transparent !default; /// @prop - Text color of the activated segment button $segment-button-wp-text-color-activated: $toolbar-wp-text-color !default; -/// @prop - Padding of the segment button -$segment-button-wp-padding: 0 6px !default; +// deprecated +$segment-button-wp-padding: null !default; + +/// @prop - Padding top of the segment button +$segment-button-wp-padding-top: 0 !default; + +/// @prop - Padding end of the segment button +$segment-button-wp-padding-end: 6px !default; + +/// @prop - Padding bottom of the segment button +$segment-button-wp-padding-bottom: $segment-button-wp-padding-top !default; + +/// @prop - Padding start of the segment button +$segment-button-wp-padding-start: $segment-button-wp-padding-end !default; /// @prop - Height of the segment button $segment-button-wp-height: 4rem !default; @@ -51,8 +63,6 @@ $segment-button-wp-buttons-justify-content: flex-start !default; } .segment-wp .segment-button { - padding: $segment-button-wp-padding; - height: $segment-button-wp-height; font-size: $segment-button-wp-font-size; @@ -65,6 +75,10 @@ $segment-button-wp-buttons-justify-content: flex-start !default; background-color: $segment-button-wp-background-color; opacity: $segment-button-wp-opacity; + @include deprecated-variable(padding, $segment-button-wp-padding) { + @include padding($segment-button-wp-padding-top, $segment-button-wp-padding-end, $segment-button-wp-padding-bottom, $segment-button-wp-padding-start); + } + &.segment-activated { opacity: $segment-button-wp-opacity-activated; } @@ -85,8 +99,9 @@ $segment-button-wp-buttons-justify-content: flex-start !default; .toolbar { .segment-wp { - margin: 0 auto; + @include margin(0, auto); } + } diff --git a/src/components/select/select.ios.scss b/src/components/select/select.ios.scss index a28b960f006..893b71b36e8 100644 --- a/src/components/select/select.ios.scss +++ b/src/components/select/select.ios.scss @@ -6,14 +6,18 @@ /// @prop - Padding top of the select $select-ios-padding-top: $item-ios-padding-top !default; -/// @prop - Padding right of the select -$select-ios-padding-right: ($item-ios-padding-right / 2) !default; +// deprecated +$select-ios-padding-right: ($item-ios-padding-end / 2) !default; +/// @prop - Padding end of the select +$select-ios-padding-end: $select-ios-padding-right; /// @prop - Padding bottom of the select $select-ios-padding-bottom: $item-ios-padding-bottom !default; -/// @prop - Padding left of the select -$select-ios-padding-left: $item-ios-padding-left !default; +// deprecated +$select-ios-padding-left: $item-ios-padding-start !default; +/// @prop - Padding start of the select +$select-ios-padding-start: $select-ios-padding-left; /// @prop - Color of the select icon $select-ios-icon-color: #999 !default; @@ -23,7 +27,7 @@ $select-ios-placeholder-color: $select-ios-icon-color !default; .select-ios { - padding: $select-ios-padding-top $select-ios-padding-right $select-ios-padding-bottom $select-ios-padding-left; + @include padding($select-ios-padding-top, $select-ios-padding-end, $select-ios-padding-bottom, $select-ios-padding-start); } .select-ios .select-placeholder { @@ -38,9 +42,9 @@ $select-ios-placeholder-color: $select-ios-icon-color !default; } .select-ios .select-icon .select-icon-inner { + @include position(50%, null, null, 5px); + position: absolute; - top: 50%; - left: 5px; margin-top: -2px; diff --git a/src/components/select/select.md.scss b/src/components/select/select.md.scss index 1a69693f3f3..39e176a123c 100644 --- a/src/components/select/select.md.scss +++ b/src/components/select/select.md.scss @@ -6,14 +6,18 @@ /// @prop - Padding top of the select $select-md-padding-top: $item-md-padding-top !default; -/// @prop - Padding right of the select -$select-md-padding-right: ($item-md-padding-right / 2) !default; +// deprecated +$select-md-padding-right: ($item-md-padding-end / 2) !default; +/// @prop - Padding end of the select +$select-md-padding-end: $select-md-padding-right; /// @prop - Padding bottom of the select $select-md-padding-bottom: $item-md-padding-bottom !default; -/// @prop - Padding left of the select -$select-md-padding-left: $item-md-padding-left !default; +// deprecated +$select-md-padding-left: $item-md-padding-start !default; +/// @prop - Padding start of the select +$select-md-padding-start: $select-md-padding-left; /// @prop - Color of the select icon $select-md-icon-color: #999 !default; @@ -23,7 +27,7 @@ $select-md-placeholder-color: $select-md-icon-color !default; .select-md { - padding: $select-md-padding-top $select-md-padding-right $select-md-padding-bottom $select-md-padding-left; + @include padding($select-md-padding-top, $select-md-padding-end, $select-md-padding-bottom, $select-md-padding-start); } .select-md .select-placeholder { @@ -31,7 +35,7 @@ $select-md-placeholder-color: $select-md-icon-color !default; } .select-md .item-select ion-label { - margin-left: 0; + @include margin-horizontal(0, null); } .select-md .select-icon { @@ -42,9 +46,9 @@ $select-md-placeholder-color: $select-md-icon-color !default; } .select-md .select-icon .select-icon-inner { + @include position(50%, null, null, 5px); + position: absolute; - top: 50%; - left: 5px; margin-top: -3px; diff --git a/src/components/select/select.scss b/src/components/select/select.scss index 74f13c087f8..29eca2c2267 100644 --- a/src/components/select/select.scss +++ b/src/components/select/select.scss @@ -6,14 +6,18 @@ /// @prop - Margin top of the select popover list $select-popover-list-margin-top: -1px !default; -/// @prop - Margin right of the select popover list +// deprecated $select-popover-list-margin-right: 0 !default; +/// @prop - Margin end of the select popover list +$select-popover-list-margin-end: $select-popover-list-margin-right !default; /// @prop - Margin bottom of the select popover list $select-popover-list-margin-bottom: -1px !default; -/// @prop - Margin left of the select popover list +// deprecated $select-popover-list-margin-left: 0 !default; +/// @prop - Margin start of the select popover list +$select-popover-list-margin-start: $select-popover-list-margin-left !default; ion-select { @@ -47,5 +51,5 @@ ion-select { } .select-popover ion-list { - margin: $select-popover-list-margin-top $select-popover-list-margin-right $select-popover-list-margin-bottom $select-popover-list-margin-left; + @include margin($select-popover-list-margin-top, $select-popover-list-margin-end, $select-popover-list-margin-bottom, $select-popover-list-margin-start); } diff --git a/src/components/select/select.wp.scss b/src/components/select/select.wp.scss index 521e10ed053..7224561ceb5 100644 --- a/src/components/select/select.wp.scss +++ b/src/components/select/select.wp.scss @@ -6,20 +6,24 @@ /// @prop - Padding top and bottom of the select $select-wp-padding-vertical: 0 !default; -/// @prop - Padding left and right of the select -$select-wp-padding-horizontal: ($item-wp-padding-right / 2) !default; +/// @prop - Padding start/end of the select +$select-wp-padding-horizontal: ($item-wp-padding-end / 2) !default; /// @prop - Margin top of the select $select-wp-margin-top: $item-wp-padding-top !default; -/// @prop - Margin right of the select -$select-wp-margin-right: ($item-wp-padding-right / 2) !default; +// deprecated +$select-wp-margin-right: ($item-wp-padding-end / 2) !default; +/// @prop - Margin end of the select +$select-wp-margin-end: $select-wp-margin-right !default; /// @prop - Margin bottom of the select $select-wp-margin-bottom: $item-wp-padding-bottom !default; -/// @prop - Margin left of the select -$select-wp-margin-left: ($item-wp-padding-left / 2) !default; +// deprecated +$select-wp-margin-left: ($item-wp-padding-start / 2) !default; +/// @prop - Margin start of the select +$select-wp-margin-start: $select-wp-margin-left !default; /// @prop - Border width of the select $select-wp-border-width: 2px !default; @@ -41,10 +45,10 @@ $select-wp-placeholder-color: $select-wp-icon-color !default; .select-wp { - flex: 1; + @include margin($select-wp-margin-top, $select-wp-margin-end, $select-wp-margin-bottom, $select-wp-margin-start); + @include padding($select-wp-padding-vertical, $select-wp-padding-horizontal); - margin: $select-wp-margin-top $select-wp-margin-right $select-wp-margin-bottom $select-wp-margin-left; - padding: $select-wp-padding-vertical $select-wp-padding-horizontal; + flex: 1; max-width: 100%; @@ -57,7 +61,7 @@ $select-wp-placeholder-color: $select-wp-icon-color !default; } .item-wp.item-select ion-label { - margin-left: 0; + @include margin-horizontal(0, null); } .select-wp .select-icon { @@ -70,9 +74,10 @@ $select-wp-placeholder-color: $select-wp-icon-color !default; } .select-wp .select-icon .select-icon-inner { + @include position(3px, null, null, 5px); + position: absolute; - top: 3px; - left: 5px; + display: block; width: ($select-wp-icon-width / 2); diff --git a/src/components/slides/slides.scss b/src/components/slides/slides.scss index 0c86d1922f4..825158b7ad9 100644 --- a/src/components/slides/slides.scss +++ b/src/components/slides/slides.scss @@ -15,8 +15,8 @@ */ .swiper-container { - margin-left: auto; - margin-right: auto; + @include margin-horizontal(auto); + position: relative; overflow: hidden; /* Fix of Webkit flickering */ @@ -51,8 +51,9 @@ } .swiper-container-free-mode > .swiper-wrapper { + @include margin(0, auto); + transition-timing-function: ease-out; - margin: 0 auto; } .swiper-slide { @@ -75,9 +76,10 @@ /* a11y */ .swiper-container .swiper-notification { + @include position(0, null, null, 0); + position: absolute; - left: 0; - top: 0; + pointer-events: none; opacity: 0; z-index: -1000; @@ -117,9 +119,9 @@ .swiper-button-prev, .swiper-container-rtl .swiper-button-next { + @include position-horizontal(10px, auto); + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); - left: 10px; - right: auto; } .swiper-button-prev.swiper-button-black, @@ -134,9 +136,9 @@ .swiper-button-next, .swiper-container-rtl .swiper-button-prev { + @include position-horizontal(auto, 10px); + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); - right: 10px; - left: auto; } .swiper-button-next.swiper-button-black, @@ -168,8 +170,8 @@ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { - bottom: 10px; - left: 0; + @include position(null, null, 10px, 0); + width: 100%; } @@ -185,9 +187,10 @@ } button.swiper-pagination-bullet { + @include margin(0); + @include padding(0); + border: none; - margin: 0; - padding: 0; box-shadow: none; @include appearance(none); } @@ -214,18 +217,18 @@ button.swiper-pagination-bullet { } .swiper-container-vertical > .swiper-pagination-bullets { - right: 10px; - top: 50%; + @include position(50%, 10px, null, null); + transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { - margin: 5px 0; + @include margin(5px, 0); display: block; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { - margin: 0 5px; + @include margin(0, 5px); } /* Progress */ @@ -235,10 +238,11 @@ button.swiper-pagination-bullet { } .swiper-pagination-progress .swiper-pagination-progressbar { + @include position(0, null, null, 0); + background: #007aff; position: absolute; - left: 0; - top: 0; + width: 100%; height: 100%; transform: scale(0); @@ -250,17 +254,17 @@ button.swiper-pagination-bullet { } .swiper-container-horizontal > .swiper-pagination-progress { + @include position(0, null, null, 0); + width: 100%; height: 4px; - left: 0; - top: 0; } .swiper-container-vertical > .swiper-pagination-progress { + @include position(0, null, null, 0); + width: 4px; height: 100%; - left: 0; - top: 0; } .swiper-pagination-progress.swiper-pagination-white { @@ -294,9 +298,9 @@ button.swiper-pagination-bullet { .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { + @include position(0, null, null, 0); + position: absolute; - left: 0; - top: 0; width: 100%; height: 100%; pointer-events: none; @@ -384,9 +388,10 @@ button.swiper-pagination-bullet { } .swiper-container-cube .swiper-cube-shadow { + @include position(null, null, 0, 0); + position: absolute; - left: 0; - bottom: 0; + width: 100%; height: 100%; background: #000; @@ -442,8 +447,10 @@ button.swiper-pagination-bullet { } .swiper-container-horizontal > .swiper-scrollbar { + @include position(null, null, null, 1%); + position: absolute; - left: 1%; + bottom: 3px; z-index: 50; height: 5px; @@ -451,22 +458,23 @@ button.swiper-pagination-bullet { } .swiper-container-vertical > .swiper-scrollbar { + @include position(1%, 3px, null, null); + position: absolute; - right: 3px; - top: 1%; + z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { + @include position(0, null, null, 0); + height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; - left: 0; - top: 0; } .swiper-scrollbar-cursor-drag { @@ -475,13 +483,12 @@ button.swiper-pagination-bullet { /* Preloader */ .swiper-lazy-preloader { + @include position(50%, null, null, 50%); + @include margin(-21px, null, null, -21px); + width: 42px; height: 42px; position: absolute; - left: 50%; - top: 50%; - margin-left: -21px; - margin-top: -21px; z-index: 10; transform-origin: 50%; animation: swiper-preloader-spin 1s steps(12, end) infinite; @@ -523,17 +530,19 @@ ion-slides { } .swiper-container { + @include padding(0); + width: 100%; height: 100%; - padding: 0; display: flex; overflow: hidden; } .swiper-wrapper { + @include padding(0); + width: 100%; height: 100%; - padding: 0; display: flex; } diff --git a/src/components/spinner/spinner.scss b/src/components/spinner/spinner.scss index 964683ad242..9601e289c99 100644 --- a/src/components/spinner/spinner.scss +++ b/src/components/spinner/spinner.scss @@ -12,9 +12,9 @@ ion-spinner { } ion-spinner svg { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; width: 100%; height: 100%; diff --git a/src/components/split-pane/split-pane.scss b/src/components/split-pane/split-pane.scss index 0f8f17b9ae9..7054687d317 100644 --- a/src/components/split-pane/split-pane.scss +++ b/src/components/split-pane/split-pane.scss @@ -8,11 +8,9 @@ $split-pane-side-min-width: 270px !default; $split-pane-side-max-width: 28% !default; .split-pane { + @include position(0, 0, 0, 0); + position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; display: flex; @@ -32,12 +30,11 @@ $split-pane-side-max-width: 28% !default; .split-pane-visible >.split-pane-side, .split-pane-visible >.split-pane-main { + @include position(0, 0, 0, 0); + // scss-lint:disable ImportantRule position: relative; - top: 0; - right: 0; - bottom: 0; - left: 0; + z-index: 0; flex: 1; @@ -65,10 +62,9 @@ $split-pane-side-max-width: 28% !default; .split-pane-visible >ion-menu.menu-enabled { >.menu-inner { - // scss-lint:disable ImportantRule - right: 0; - left: 0; + @include position-horizontal(0, 0); + // scss-lint:disable ImportantRule width: auto; box-shadow: none !important; diff --git a/src/components/tabs/tabs.ios.scss b/src/components/tabs/tabs.ios.scss index b44d90e0332..9408b72ec7e 100644 --- a/src/components/tabs/tabs.ios.scss +++ b/src/components/tabs/tabs.ios.scss @@ -6,8 +6,20 @@ /// @prop - Border on the tabbar (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top]) $tabs-ios-border: $hairlines-width solid $tabs-ios-border-color !default; -/// @prop - Padding on the tab button -$tabs-ios-tab-padding: 0 2px !default; +// deprecated +$tabs-ios-tab-padding: null !default; + +/// @prop - Padding top on the tab button +$tabs-ios-tab-padding-top: 0 !default; + +/// @prop - Padding end on the tab button +$tabs-ios-tab-padding-end: 2px !default; + +/// @prop - Padding bottom on the tab button +$tabs-ios-tab-padding-bottom: $tabs-ios-tab-padding-top !default; + +/// @prop - Padding start on the tab button +$tabs-ios-tab-padding-start: $tabs-ios-tab-padding-end !default; /// @prop - Max width of the tab button $tabs-ios-tab-max-width: 240px !default; @@ -47,13 +59,15 @@ $tabs-ios-tab-icon-size: 30px !default; } .tabs-ios .tab-button { - padding: $tabs-ios-tab-padding; - max-width: $tabs-ios-tab-max-width; min-height: $tabs-ios-tab-min-height; font-size: $tabs-ios-tab-font-size; color: $tabs-ios-tab-text-color; + + @include deprecated-variable(padding, $tabs-ios-tab-padding) { + @include padding($tabs-ios-tab-padding-top, $tabs-ios-tab-padding-end, $tabs-ios-tab-padding-bottom, $tabs-ios-tab-padding-start); + } } .tabs-ios .tab-button:hover:not(.disable-hover), @@ -113,7 +127,7 @@ $tabs-ios-tab-icon-size: 30px !default; .tabs-ios[tabsLayout=icon-hide] .tab-button .tab-button-text, .tabs-ios .tab-button.has-title-only .tab-button-text { - margin: 2px 0; + @include margin(2px, 0); font-size: 1.4rem; line-height: 1.1; diff --git a/src/components/tabs/tabs.md.scss b/src/components/tabs/tabs.md.scss index dc3ffe07767..e77b5b93970 100644 --- a/src/components/tabs/tabs.md.scss +++ b/src/components/tabs/tabs.md.scss @@ -3,8 +3,20 @@ // Material Design Tabs // -------------------------------------------------- -/// @prop - Padding on the tab button -$tabs-md-tab-padding: 0 !default; +// deprecated +$tabs-md-tab-padding: null !default; + +/// @prop - Padding top on the tab button +$tabs-md-tab-padding-top: 0 !default; + +/// @prop - Padding end on the tab button +$tabs-md-tab-padding-end: $tabs-md-tab-padding-top !default; + +/// @prop - Padding bottom on the tab button +$tabs-md-tab-padding-bottom: $tabs-md-tab-padding-top !default; + +/// @prop - Padding start on the tab button +$tabs-md-tab-padding-start: $tabs-md-tab-padding-end !default; /// @prop - Minimum height of the tab button $tabs-md-tab-min-height: 5.6rem !default; @@ -30,14 +42,38 @@ $tabs-md-tab-icon-color: rgba($tabs-md-tab-color-inactive, /// @prop - Icon color of the active tab button $tabs-md-tab-icon-color-active: $tabs-md-tab-color-active !default; -/// @prop - Padding of the active tab button -$tabs-md-tab-padding-active: 0 !default; +// deprecated +$tabs-md-tab-padding-active: null !default; + +/// @prop - Padding top of the active tab button +$tabs-md-tab-padding-active-top: 0 !default; + +/// @prop - Padding end of the active tab button +$tabs-md-tab-padding-active-end: $tabs-md-tab-padding-active-top !default; + +/// @prop - Padding bottom of the active tab button +$tabs-md-tab-padding-active-bottom: $tabs-md-tab-padding-active-top !default; + +/// @prop - Padding start of the active tab button +$tabs-md-tab-padding-active-start: $tabs-md-tab-padding-active-end !default; /// @prop - Font size of the active tab button text $tabs-md-tab-font-size-active: 1.4rem !default; -/// @prop - Margin on the tab button text -$tabs-md-tab-text-margin: 0 !default; +// deprecated +$tabs-md-tab-text-margin: null !default; + +/// @prop - Margin top on the tab button text +$tabs-md-tab-text-margin-top: 0 !default; + +/// @prop - Margin end on the tab button text +$tabs-md-tab-text-margin-end: $tabs-md-tab-text-margin-top !default; + +/// @prop - Margin bottom on the tab button text +$tabs-md-tab-text-margin-bottom: $tabs-md-tab-text-margin-top !default; + +/// @prop - Margin start on the tab button text +$tabs-md-tab-text-margin-start: $tabs-md-tab-text-margin-end !default; /// @prop - Capitalization of the tab button text $tabs-md-tab-text-capitalization: none !default; @@ -82,18 +118,22 @@ $tabs-md-tab-icon-size: 2.4rem !default; // -------------------------------------------------- .tabs-md .tab-button { - padding: $tabs-md-tab-padding; - min-height: $tabs-md-tab-min-height; font-weight: $tabs-md-tab-font-weight; color: $tabs-md-tab-text-color; + + @include deprecated-variable(padding, $tabs-md-tab-padding) { + @include padding($tabs-md-tab-padding-top, $tabs-md-tab-padding-end, $tabs-md-tab-padding-bottom, $tabs-md-tab-padding-start); + } } .tabs-md .tab-button[aria-selected=true] { - padding: $tabs-md-tab-padding-active; - color: $tabs-md-tab-text-color-active; + + @include deprecated-variable(padding, $tabs-md-tab-padding-active) { + @include padding($tabs-md-tab-padding-active-top, $tabs-md-tab-padding-active-end, $tabs-md-tab-padding-active-bottom, $tabs-md-tab-padding-active-start); + } } @@ -101,13 +141,15 @@ $tabs-md-tab-icon-size: 2.4rem !default; // -------------------------------------------------- .tabs-md .tab-button-text { - margin: $tabs-md-tab-text-margin; - font-size: $tabs-md-tab-font-size; text-transform: $tabs-md-tab-text-capitalization; transform-origin: $tabs-md-tab-text-transform-origin; transition: $tabs-md-tab-text-transition; + + @include deprecated-variable(margin, $tabs-md-tab-text-margin) { + @include margin($tabs-md-tab-text-margin-top, $tabs-md-tab-text-margin-end, $tabs-md-tab-text-margin-bottom, $tabs-md-tab-text-margin-start); + } } .tabs-md .tab-button[aria-selected=true] .tab-button-text { @@ -171,7 +213,7 @@ $tabs-md-tab-icon-size: 2.4rem !default; .tabs-md[tabsLayout=title-hide] .tab-button, .tabs-md .tab-button.icon-only, .tabs-md .tab-button.has-title-only { - padding: 0 10px; + @include padding(0, 10px); } @@ -179,9 +221,10 @@ $tabs-md-tab-icon-size: 2.4rem !default; // -------------------------------------------------- .tabs-md[tabsHighlight=true] .tab-highlight { + @include position(null, null, 0, 0); + position: absolute; - bottom: 0; - left: 0; + display: block; width: 1px; diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss index 48a9127ebd9..4e4c91be379 100644 --- a/src/components/tabs/tabs.scss +++ b/src/components/tabs/tabs.scss @@ -4,9 +4,10 @@ // -------------------------------------------------- .tabbar { + @include position(null, null, 0, 0); + position: absolute; - bottom: 0; - left: 0; + z-index: $z-index-toolbar; display: flex; @@ -26,7 +27,9 @@ } .tab-button { + @include margin(0); @include text-align(center); + @include border-radius(0); position: relative; z-index: 0; @@ -39,10 +42,7 @@ align-self: center; justify-content: center; - margin: 0; - border: 0; - border-radius: 0; text-decoration: none; background: none; @@ -99,17 +99,15 @@ } [tabsLayout=icon-left] .tab-button .tab-button-icon { + @include padding-horizontal(null, 8px); @include text-align(end); - - padding-right: 8px; } [tabsLayout=icon-right] .tab-button .tab-button-icon { + @include padding-horizontal(8px, null); @include text-align(start); order: 10; - - padding-left: 8px; } .tab-hidden, @@ -123,12 +121,11 @@ // -------------------------------------------------- .tab-badge { - position: absolute; - top: 6%; - right: 4%; - right: calc(50% - 50px); + @include position(6%, 4%, null, null); // 4% fallback + @include position(null, calc(50% - 50px), null, null); + @include padding(1px, 6px); - padding: 1px 6px; + position: absolute; height: auto; @@ -137,11 +134,11 @@ } .has-icon .tab-badge { - right: calc(50% - 30px); + @include position(null, calc(50% - 30px), null, null); } [tabsLayout=icon-bottom] .tab-badge, [tabsLayout=icon-left] .tab-badge, [tabsLayout=icon-right] .tab-badge { - right: calc(50% - 50px); + @include position(null, calc(50% - 50px), null, null); } diff --git a/src/components/tabs/tabs.wp.scss b/src/components/tabs/tabs.wp.scss index 18e8a4f48f6..7a6a4e9d1e4 100644 --- a/src/components/tabs/tabs.wp.scss +++ b/src/components/tabs/tabs.wp.scss @@ -3,8 +3,20 @@ // Windows Tabs // -------------------------------------------------- -/// @prop - Padding on the tab button -$tabs-wp-tab-padding: 12px 10px 5px 10px !default; +// deprecated +$tabs-wp-tab-padding: null !default; + +/// @prop - Padding top on the tab button +$tabs-wp-tab-padding-top: 12px !default; + +/// @prop - Padding end on the tab button +$tabs-wp-tab-padding-end: 10px !default; + +/// @prop - Padding bottom on the tab button +$tabs-wp-tab-padding-bottom: 5px !default; + +/// @prop - Padding start on the tab button +$tabs-wp-tab-padding-start: 10px !default; /// @prop - Minimum height of the tab button $tabs-wp-tab-min-height: 4.8rem !default; @@ -48,16 +60,19 @@ $tabs-wp-tab-icon-size: 2.4rem !default; } .tabs-wp .tab-button { - padding: $tabs-wp-tab-padding; + @include border-radius(0); min-height: $tabs-wp-tab-min-height; border-bottom: $tabs-wp-tab-border; - border-radius: 0; font-size: $tabs-wp-tab-font-size; font-weight: $tabs-wp-tab-font-weight; color: $tabs-wp-tab-color; box-shadow: none; + + @include deprecated-variable(padding, $tabs-wp-tab-padding) { + @include padding($tabs-wp-tab-padding-top, $tabs-wp-tab-padding-end, $tabs-wp-tab-padding-bottom, $tabs-wp-tab-padding-start); + } } .tabs-wp .tab-button[aria-selected=true] { @@ -122,7 +137,7 @@ $tabs-wp-tab-icon-size: 2.4rem !default; .tabs-wp[tabsLayout=title-hide] .tab-button, .tabs-wp .tab-button.icon-only, .tabs-wp .tab-button.has-title-only { - padding: 6px 10px; + @include padding(6px, 10px); } diff --git a/src/components/toast/toast.ios.scss b/src/components/toast/toast.ios.scss index 180add91b1a..73ebad6873f 100644 --- a/src/components/toast/toast.ios.scss +++ b/src/components/toast/toast.ios.scss @@ -15,24 +15,34 @@ $toast-ios-title-color: #fff !default; /// @prop - Font size of the toast title $toast-ios-title-font-size: 1.4rem !default; -/// @prop - Padding of the toast title -$toast-ios-title-padding: 1.5rem !default; +// deprecated +$toast-ios-title-padding: null !default; + +/// @prop - Padding top of the toast title +$toast-ios-title-padding-top: 1.5rem !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; .toast-ios .toast-wrapper { + @include position-horizontal(10px, 10px); + @include margin(auto); + @include border-radius($toast-ios-border-radius); + position: absolute; - right: 10px; - left: 10px; z-index: $z-index-overlay-wrapper; display: block; - margin: auto; - max-width: $toast-max-width; - border-radius: $toast-ios-border-radius; - background: $toast-ios-background; } @@ -53,9 +63,11 @@ $toast-ios-title-padding: 1.5rem !default; } .toast-ios .toast-message { - padding: $toast-ios-title-padding; - font-size: $toast-ios-title-font-size; color: $toast-ios-title-color; + + @include deprecated-variable(padding, $toast-ios-title-padding) { + @include padding($toast-ios-title-padding-top, $toast-ios-title-padding-end, $toast-ios-title-padding-bottom, $toast-ios-title-padding-start); + } } diff --git a/src/components/toast/toast.md.scss b/src/components/toast/toast.md.scss index 208e5d0e1a5..34ebe45ea08 100644 --- a/src/components/toast/toast.md.scss +++ b/src/components/toast/toast.md.scss @@ -12,19 +12,31 @@ $toast-md-title-color: #fff !default; /// @prop - Font size of the toast title $toast-md-title-font-size: 1.5rem !default; -/// @prop - Padding of the toast title -$toast-md-title-padding: 19px 16px 17px !default; +// deprecated +$toast-md-title-padding: null !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); + position: absolute; - right: 0; - left: 0; + z-index: $z-index-overlay-wrapper; display: block; - margin: auto; - width: $toast-width; max-width: $toast-max-width; @@ -48,9 +60,11 @@ $toast-md-title-padding: 19px 16px 17px !default; } .toast-md .toast-message { - padding: $toast-md-title-padding; - font-size: $toast-md-title-font-size; color: $toast-md-title-color; + + @include deprecated-variable(padding, $toast-md-title-padding) { + @include padding($toast-md-title-padding-top, $toast-md-title-padding-end, $toast-md-title-padding-bottom, $toast-md-title-padding-start); + } } diff --git a/src/components/toast/toast.scss b/src/components/toast/toast.scss index fda3e251186..d67519128bb 100644 --- a/src/components/toast/toast.scss +++ b/src/components/toast/toast.scss @@ -12,9 +12,10 @@ $toast-max-width: 700px !default; ion-toast { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; + z-index: $z-index-overlay; display: block; @@ -38,7 +39,7 @@ ion-toast { } .toast-button { - padding: 19px 16px 17px; + @include padding(19px, 16px, 17px); font-size: 1.5rem; } diff --git a/src/components/toast/toast.wp.scss b/src/components/toast/toast.wp.scss index e0eeb970a08..d0853469eec 100644 --- a/src/components/toast/toast.wp.scss +++ b/src/components/toast/toast.wp.scss @@ -18,22 +18,34 @@ $toast-wp-title-color: #fff !default; /// @prop - Font size of the toast title $toast-wp-title-font-size: 1.4rem !default; -/// @prop - Padding of the toast title -$toast-wp-title-padding: 1.5rem !default; +// deprecated +$toast-wp-title-padding: null !default; + +/// @prop - Padding top of the toast title +$toast-wp-title-padding-top: 1.5rem !default; + +/// @prop - Padding end of the toast title +$toast-wp-title-padding-end: $toast-wp-title-padding-top !default; + +/// @prop - Padding bottom of the toast title +$toast-wp-title-padding-bottom: $toast-wp-title-padding-top !default; + +/// @prop - Padding start of the toast title +$toast-wp-title-padding-start: $toast-wp-title-padding-end !default; .toast-wp .toast-wrapper { + @include position-horizontal(0, 0); + @include margin(auto); + @include border-radius($toast-wp-border-radius); + position: absolute; - right: 0; - left: 0; + z-index: $z-index-overlay-wrapper; display: block; - margin: auto; - max-width: $toast-max-width; - border-radius: $toast-wp-border-radius; background: $toast-wp-background; } @@ -54,11 +66,13 @@ $toast-wp-title-padding: 1.5rem !default; } .toast-message { - padding: $toast-wp-title-padding; - font-size: $toast-wp-title-font-size; color: $toast-wp-title-color; + + @include deprecated-variable(padding, $toast-wp-title-padding) { + @include padding($toast-wp-title-padding-top, $toast-wp-title-padding-end, $toast-wp-title-padding-bottom, $toast-wp-title-padding-start); + } } .toast-button { diff --git a/src/components/toggle/toggle.ios.scss b/src/components/toggle/toggle.ios.scss index f613b5ca060..e798411bf7e 100644 --- a/src/components/toggle/toggle.ios.scss +++ b/src/components/toggle/toggle.ios.scss @@ -49,15 +49,34 @@ $toggle-ios-transition-duration: 300ms !default; $toggle-ios-disabled-opacity: .3 !default; // deprecated -$toggle-ios-item-left-padding: 6px 16px 5px 0 !default; -/// @prop - Padding of the toggle positioned on the left in an item -$toggle-ios-item-start-padding: $toggle-ios-item-left-padding; +$toggle-ios-item-left-padding: null !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; // deprecated -$toggle-ios-item-right-padding: 6px ($item-ios-padding-right / 2) 5px ($item-ios-padding-left) !default; -/// @prop - Padding of the toggle positioned on the right in an item -$toggle-ios-item-end-padding: $toggle-ios-item-right-padding; +$toggle-ios-item-right-padding: null !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; // iOS Toggle // ----------------------------------------- @@ -78,14 +97,14 @@ $toggle-ios-item-end-padding: $toggle-ios-item-right-padding; // ----------------------------------------- .toggle-ios .toggle-icon { + @include border-radius($toggle-ios-border-radius); + position: relative; display: block; width: 100%; height: 100%; - border-radius: $toggle-ios-border-radius; - background-color: $toggle-ios-border-color-off; transition: background-color $toggle-ios-transition-duration; @@ -97,13 +116,11 @@ $toggle-ios-item-end-padding: $toggle-ios-item-right-padding; // ----------------------------------------- .toggle-ios .toggle-icon::before { + @include position($toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width, $toggle-ios-border-width); + @include border-radius($toggle-ios-border-radius); + position: absolute; - top: $toggle-ios-border-width; - right: $toggle-ios-border-width; - bottom: $toggle-ios-border-width; - left: $toggle-ios-border-width; - border-radius: $toggle-ios-border-radius; background-color: $toggle-ios-background-color-off; content: ""; @@ -116,14 +133,14 @@ $toggle-ios-item-end-padding: $toggle-ios-item-right-padding; // ----------------------------------------- .toggle-ios .toggle-inner { + @include position($toggle-ios-border-width, null, null, $toggle-ios-border-width); + @include border-radius($toggle-ios-handle-border-radius); + position: absolute; - top: $toggle-ios-border-width; - left: $toggle-ios-border-width; width: $toggle-ios-handle-width; height: $toggle-ios-handle-height; - border-radius: $toggle-ios-handle-border-radius; background-color: $toggle-ios-handle-background-color; box-shadow: $toggle-ios-handle-box-shadow; @@ -159,6 +176,7 @@ $toggle-ios-item-end-padding: $toggle-ios-item-right-padding; } + // iOS Toggle Background Oval: Activated and Checked // ----------------------------------------- @@ -181,7 +199,7 @@ $toggle-ios-item-end-padding: $toggle-ios-item-right-padding; .toggle-ios.toggle-activated.toggle-checked .toggle-inner { // when pressing down on the toggle and IS checked // make the knob wider and move it left a bit - left: $toggle-ios-border-width - 6; + @include position-horizontal($toggle-ios-border-width - 6, null); } @@ -200,13 +218,18 @@ $toggle-ios-item-end-padding: $toggle-ios-item-right-padding; // ----------------------------------------- .item-ios .toggle-ios { - margin: $toggle-ios-media-margin; - padding: $toggle-ios-item-end-padding; + @include margin($toggle-ios-media-margin); + + @include deprecated-variable(padding, $toggle-ios-item-right-padding) { + @include padding($toggle-ios-item-end-padding-top, $toggle-ios-item-end-padding-end, $toggle-ios-item-end-padding-bottom, $toggle-ios-item-end-padding-start); + } } .item-ios .toggle-ios[item-left], // deprecated .item-ios .toggle-ios[item-start] { - padding: $toggle-ios-item-start-padding; + @include deprecated-variable(padding, $toggle-ios-item-left-padding) { + @include padding($toggle-ios-item-start-padding-top, $toggle-ios-item-start-padding-end, $toggle-ios-item-start-padding-bottom, $toggle-ios-item-start-padding-start); + } } diff --git a/src/components/toggle/toggle.md.scss b/src/components/toggle/toggle.md.scss index 0c5a6ade958..f070514eab3 100644 --- a/src/components/toggle/toggle.md.scss +++ b/src/components/toggle/toggle.md.scss @@ -36,8 +36,20 @@ $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 of the toggle -$toggle-md-media-margin: 0 !default; +// deprecated +$toggle-md-media-margin: null !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; @@ -45,19 +57,50 @@ $toggle-md-transition-duration: 300ms !default; /// @prop - Opacity of the disabled toggle $toggle-md-disabled-opacity: .3 !default; -/// @prop - Padding of standalone toggle -$toggle-md-padding: 12px !default; +// deprecated +$toggle-md-padding: null !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; // deprecated -$toggle-md-item-left-padding: 12px 18px 12px 2px !default; -/// @prop - Padding of the toggle positioned on the start in an item -$toggle-md-item-start-padding: $toggle-md-item-left-padding; +$toggle-md-item-left-padding: null !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; // deprecated -$toggle-md-item-right-padding: 12px ($item-md-padding-right / 2) 12px $item-md-padding-left !default; -/// @prop - Padding of the toggle positioned on the end in an item -$toggle-md-item-end-padding: $toggle-md-item-right-padding; +$toggle-md-item-right-padding: null !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; // Material Design Toggle // ----------------------------------------- @@ -65,14 +108,16 @@ $toggle-md-item-end-padding: $toggle-md-item-right-padding; .toggle-md { position: relative; - padding: $toggle-md-padding; - width: $toggle-md-track-width; height: $toggle-md-track-height; box-sizing: content-box; contain: strict; + + @include deprecated-variable(padding, $toggle-md-padding) { + @include padding($toggle-md-padding-top, $toggle-md-padding-end, $toggle-md-padding-bottom, $toggle-md-padding-start); + } } @@ -80,13 +125,14 @@ $toggle-md-item-end-padding: $toggle-md-item-right-padding; // ----------------------------------------- .toggle-md .toggle-icon { + @include border-radius($toggle-md-track-height); + position: relative; display: block; width: 100%; height: 100%; - border-radius: $toggle-md-track-height; background-color: $toggle-md-track-background-color-off; transition: background-color $toggle-md-transition-duration; @@ -99,14 +145,14 @@ $toggle-md-item-end-padding: $toggle-md-item-right-padding; // ----------------------------------------- .toggle-md .toggle-inner { + @include position(($toggle-md-handle-height - $toggle-md-track-height) / -2, null, null, 0); + @include border-radius($toggle-md-handle-border-radius); + position: absolute; - top: ($toggle-md-handle-height - $toggle-md-track-height) / -2; - left: 0; width: $toggle-md-handle-width; height: $toggle-md-handle-height; - border-radius: $toggle-md-handle-border-radius; background-color: $toggle-md-handle-background-color-off; box-shadow: $toggle-md-handle-box-shadow; @@ -156,19 +202,26 @@ $toggle-md-item-end-padding: $toggle-md-item-right-padding; // ----------------------------------------- .item-md .toggle-md { - margin: $toggle-md-media-margin; - padding: $toggle-md-item-end-padding; - cursor: pointer; + + @include deprecated-variable(margin, $toggle-md-media-margin) { + @include margin($toggle-md-media-margin-top, $toggle-md-media-margin-end, $toggle-md-media-margin-bottom, $toggle-md-media-margin-start); + } + + @include deprecated-variable(padding, $toggle-md-item-right-padding) { + @include padding($toggle-md-item-end-padding-top, $toggle-md-item-end-padding-end, $toggle-md-item-end-padding-bottom, $toggle-md-item-end-padding-start); + } } .item-md .toggle-md[item-left], // deprecated .item-md .toggle-md[item-start] { - padding: $toggle-md-item-start-padding; + @include deprecated-variable(padding, $toggle-md-item-left-padding) { + @include padding($toggle-md-item-start-padding-top, $toggle-md-item-start-padding-end, $toggle-md-item-start-padding-bottom, $toggle-md-item-start-padding-start); + } } .item-md.item-toggle ion-label { - margin-left: 0; + @include margin-horizontal(0, null); } diff --git a/src/components/toggle/toggle.wp.scss b/src/components/toggle/toggle.wp.scss index d239f21770e..155acc4a83b 100644 --- a/src/components/toggle/toggle.wp.scss +++ b/src/components/toggle/toggle.wp.scss @@ -61,15 +61,34 @@ $toggle-wp-transition-duration: 300ms !default; $toggle-wp-disabled-opacity: .3 !default; // deprecated -$toggle-wp-item-left-padding: 12px 18px 12px 2px !default; -/// @prop - Padding of the toggle positioned on the start in an item -$toggle-wp-item-start-padding: $toggle-wp-item-left-padding; +$toggle-wp-item-left-padding: null !default; + +/// @prop - Padding top of the toggle positioned on the start in an item +$toggle-wp-item-start-padding-top: 12px !default; + +/// @prop - Padding end of the toggle positioned on the start in an item +$toggle-wp-item-start-padding-end: 18px !default; + +/// @prop - Padding bottom of the toggle positioned on the start in an item +$toggle-wp-item-start-padding-bottom: 12px !default; + +/// @prop - Padding start the toggle positioned on the start in an item +$toggle-wp-item-start-padding-start: 2px !default; // deprecated -$toggle-wp-item-right-padding: 12px ($item-wp-padding-right / 2) 12px $item-wp-padding-left !default; -/// @prop - Padding of the toggle positioned on the end in an item -$toggle-wp-item-end-padding: $toggle-wp-item-right-padding; +$toggle-wp-item-right-padding: null !default; + +/// @prop - Padding top of the toggle positioned on the end in an item +$toggle-wp-item-end-padding-top: 12px !default; + +/// @prop - Padding end of the toggle positioned on the end in an item +$toggle-wp-item-end-padding-end: ($item-wp-padding-end / 2) !default; +/// @prop - Padding bottom of the toggle positioned on the end in an item +$toggle-wp-item-end-padding-bottom: 12px !default; + +/// @prop - Padding start of the toggle positioned on the end in an item +$toggle-wp-item-end-padding-start: $item-wp-padding-start !default; // Windows Toggle // ----------------------------------------- @@ -90,6 +109,8 @@ $toggle-wp-item-end-padding: $toggle-wp-item-right-padding; // ----------------------------------------- .toggle-wp .toggle-icon { + @include border-radius($toggle-wp-track-height); + position: relative; display: block; @@ -97,7 +118,6 @@ $toggle-wp-item-end-padding: $toggle-wp-item-right-padding; height: 100%; border: $toggle-wp-track-border-width solid $toggle-wp-track-border-color-off; - border-radius: $toggle-wp-track-height; background-color: $toggle-wp-track-background-color-off; pointer-events: none; @@ -110,14 +130,14 @@ $toggle-wp-item-end-padding: $toggle-wp-item-right-padding; // ----------------------------------------- .toggle-wp .toggle-inner { + @include position($toggle-wp-handle-top, null, null, $toggle-wp-handle-left); + @include border-radius($toggle-wp-handle-border-radius); + position: absolute; - top: $toggle-wp-handle-top; - left: $toggle-wp-handle-left; width: $toggle-wp-handle-width; height: $toggle-wp-handle-height; - border-radius: $toggle-wp-handle-border-radius; background-color: $toggle-wp-handle-background-color-off; transition-duration: $toggle-wp-transition-duration; @@ -164,19 +184,24 @@ $toggle-wp-item-end-padding: $toggle-wp-item-right-padding; // ----------------------------------------- .item-wp .toggle-wp { - margin: $toggle-wp-media-margin; - padding: $toggle-wp-item-end-padding; + @include margin($toggle-wp-media-margin); cursor: pointer; + + @include deprecated-variable(padding, $toggle-wp-item-right-padding) { + @include padding($toggle-wp-item-end-padding-top, $toggle-wp-item-end-padding-end, $toggle-wp-item-end-padding-bottom, $toggle-wp-item-end-padding-start); + } } .item-wp .toggle-wp[item-left], // deprecated .item-wp .toggle-wp[item-start] { - padding: $toggle-wp-item-start-padding; + @include deprecated-variable(padding, $toggle-wp-item-left-padding) { + @include padding($toggle-wp-item-start-padding-top, $toggle-wp-item-start-padding-end, $toggle-wp-item-start-padding-bottom, $toggle-wp-item-start-padding-start); + } } .item-wp.item-toggle ion-label { - margin-left: 0; + @include margin-horizontal(0, null); } diff --git a/src/components/toolbar/toolbar-button.scss b/src/components/toolbar/toolbar-button.scss index 1a26357c03f..d88cc79044f 100644 --- a/src/components/toolbar/toolbar-button.scss +++ b/src/components/toolbar/toolbar-button.scss @@ -4,15 +4,14 @@ // -------------------------------------------------- .bar-button { + @include margin(0); + @include padding(0); @include text-align(center); @include appearance(none); position: relative; display: inline-block; - margin: 0; - padding: 0; - line-height: 1; text-overflow: ellipsis; text-transform: none; @@ -27,12 +26,10 @@ } .bar-button::after { + @include position(-7px, -2px, -6px, -2px); + // used to make the button's hit area larger position: absolute; - top: -7px; - right: -2px; - bottom: -6px; - left: -2px; content: ""; } diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss index 766592f93e4..60aab685e66 100644 --- a/src/components/toolbar/toolbar.ios.scss +++ b/src/components/toolbar/toolbar.ios.scss @@ -46,7 +46,7 @@ $toolbar-button-ios-strong-font-weight: 600 !default; .toolbar-ios { - padding: $toolbar-ios-padding; + @include padding($toolbar-ios-padding); min-height: $toolbar-ios-height; } @@ -107,11 +107,10 @@ $toolbar-button-ios-strong-font-weight: 600 !default; } .toolbar-ios ion-title { - position: absolute; - top: 0; - left: 0; + @include position(0, null, null, 0); + @include padding(0, 90px, 1px); - padding: 0 90px 1px; + position: absolute; width: 100%; height: 100%; @@ -173,12 +172,12 @@ $toolbar-button-ios-strong-font-weight: 600 !default; // -------------------------------------------------- .bar-button-ios { - padding: 0 4px; + @include padding(0, 4px); + @include border-radius($toolbar-ios-button-border-radius); height: 32px; border: 0; - border-radius: $toolbar-ios-button-border-radius; font-size: $toolbar-ios-button-font-size; } @@ -277,7 +276,7 @@ $toolbar-button-ios-strong-font-weight: 600 !default; // -------------------------------------------------- .bar-button-ios.bar-button-icon-left ion-icon { - padding-right: .3em; + @include padding-horizontal(null, .3em); font-size: 1.4em; line-height: .67; @@ -286,7 +285,7 @@ $toolbar-button-ios-strong-font-weight: 600 !default; } .bar-button-ios.bar-button-icon-right ion-icon { - padding-left: .4em; + @include padding-horizontal(.4em, null); font-size: 1.4em; line-height: .67; @@ -295,13 +294,13 @@ $toolbar-button-ios-strong-font-weight: 600 !default; } .bar-button-ios[icon-only] { - padding: 0; + @include padding(0); min-width: .9em; } .bar-button-ios[icon-only] ion-icon { - padding: 0 .1em; + @include padding(0, .1em); font-size: 1.8em; line-height: .67; @@ -314,12 +313,12 @@ $toolbar-button-ios-strong-font-weight: 600 !default; // -------------------------------------------------- .back-button-ios { + @include margin(0); + overflow: visible; order: map-get($toolbar-order-ios, back-button); - margin: 0; - min-height: 3.2rem; line-height: 1; @@ -327,9 +326,10 @@ $toolbar-button-ios-strong-font-weight: 600 !default; } .back-button-icon-ios { + @include margin(0); + display: inherit; - margin: 0; margin-top: -1px; min-width: 18px; @@ -346,15 +346,15 @@ $toolbar-button-ios-strong-font-weight: 600 !default; // -------------------------------------------------- .bar-button-menutoggle-ios { - order: map-get($toolbar-order-ios, menu-toggle-start); + @include margin(0, 6px); + @include padding(0); - margin: 0 6px; - padding: 0; + order: map-get($toolbar-order-ios, menu-toggle-start); min-width: 36px; ion-icon { - padding: 0 6px; + @include padding(0, 6px); font-size: 2.8rem; } diff --git a/src/components/toolbar/toolbar.md.scss b/src/components/toolbar/toolbar.md.scss index 98b9b1c3d0b..71cad963625 100644 --- a/src/components/toolbar/toolbar.md.scss +++ b/src/components/toolbar/toolbar.md.scss @@ -40,7 +40,7 @@ $toolbar-button-md-strong-font-weight: bold !default; .toolbar-md { - padding: $toolbar-md-padding; + @include padding($toolbar-md-padding); min-height: $toolbar-md-height; } @@ -65,9 +65,9 @@ $toolbar-button-md-strong-font-weight: bold !default; // using datauri png background image for improved scroll performance // rather than using `box-shadow: 0 2px 5px rgba(0,0,0,0.26);` // noticable performance difference on older Android devices + @include position(null, null, -5px, 0); + position: absolute; - bottom: -5px; - left: 0; width: 100%; height: 5px; @@ -81,8 +81,7 @@ $toolbar-button-md-strong-font-weight: bold !default; .footer-md::before, .tabs-md[tabsPlacement="bottom"] > .tabbar::before { - top: -2px; - bottom: auto; + @include position(-2px, null, auto, null); height: 2px; @@ -108,7 +107,7 @@ $toolbar-button-md-strong-font-weight: bold !default; } .toolbar-title-md { - padding: 0 12px; + @include padding(0, 12px); font-size: $toolbar-md-title-font-size; font-weight: 500; @@ -165,7 +164,7 @@ $toolbar-button-md-strong-font-weight: bold !default; } .bar-button-md:first-child { - margin-left: 0; + @include margin-horizontal(0, null); } .bar-buttons-md[end] { @@ -185,16 +184,13 @@ $toolbar-button-md-strong-font-weight: bold !default; // -------------------------------------------------- .bar-button-md { - margin-top: 0; - margin-right: .2rem; - margin-bottom: 0; - margin-left: .2rem; - padding: 0 5px; + @include margin(0, .2rem, 0, .2rem); + @include padding(0, 5px); + @include border-radius($toolbar-md-button-border-radius); height: 32px; border: 0; - border-radius: $toolbar-md-button-border-radius; font-size: $toolbar-md-button-font-size; font-weight: 500; text-transform: uppercase; @@ -301,7 +297,7 @@ $toolbar-button-md-strong-font-weight: bold !default; // -------------------------------------------------- .bar-button-md.bar-button-icon-left ion-icon { - padding-right: .3em; + @include padding-horizontal(null, .3em); font-size: 1.4em; line-height: .67; @@ -310,7 +306,7 @@ $toolbar-button-md-strong-font-weight: bold !default; } .bar-button-md.bar-button-icon-right ion-icon { - padding-left: .4em; + @include padding-horizontal(.4em, null); font-size: 1.4em; line-height: .67; @@ -319,11 +315,11 @@ $toolbar-button-md-strong-font-weight: bold !default; } .bar-button-md[icon-only] { - padding: 0; + @include padding(0); } .bar-button-md[icon-only] ion-icon { - padding: 0 .1em; + @include padding(0, .1em); min-width: 28px; @@ -338,7 +334,7 @@ $toolbar-button-md-strong-font-weight: bold !default; // -------------------------------------------------- .back-button-md { - margin: 0 6px; + @include margin(0, 6px); min-width: 44px; @@ -346,11 +342,10 @@ $toolbar-button-md-strong-font-weight: bold !default; } .back-button-icon-md { + @include margin(0); + @include padding(0, 6px); @include text-align(start); - margin: 0; - padding: 0 6px; - font-size: 2.4rem; font-weight: normal; } @@ -360,25 +355,25 @@ $toolbar-button-md-strong-font-weight: bold !default; // -------------------------------------------------- .bar-button-menutoggle-md { - order: map-get($toolbar-order-md, menu-toggle-start); + @include margin(0, 6px); + @include padding(0, 2px); - margin: 0 6px; - padding: 0 2px; + order: map-get($toolbar-order-md, menu-toggle-start); min-width: 44px; } .bar-button-menutoggle-md ion-icon { - padding: 0 6px; + @include padding(0, 6px); font-size: 2.4rem; } .bar-button-menutoggle-md[end], .bar-button-menutoggle-md[right] { - order: map-get($toolbar-order-md, menu-toggle-end); + @include margin(0, 2px); - margin: 0 2px; + order: map-get($toolbar-order-md, menu-toggle-end); min-width: 28px; } diff --git a/src/components/toolbar/toolbar.scss b/src/components/toolbar/toolbar.scss index 7127f294e44..896e0fb51ca 100644 --- a/src/components/toolbar/toolbar.scss +++ b/src/components/toolbar/toolbar.scss @@ -22,9 +22,9 @@ ion-toolbar { } .toolbar-background { + @include position(0, null, null, 0); + position: absolute; - top: 0; - left: 0; z-index: $z-index-toolbar-background; width: 100%; @@ -58,9 +58,9 @@ ion-title { } ion-buttons { - display: block; + @include margin(0, .2rem); - margin: 0 .2rem; + display: block; transform: translateZ(0); diff --git a/src/components/toolbar/toolbar.wp.scss b/src/components/toolbar/toolbar.wp.scss index bdeca672a01..b3ffcf34286 100644 --- a/src/components/toolbar/toolbar.wp.scss +++ b/src/components/toolbar/toolbar.wp.scss @@ -15,8 +15,20 @@ $toolbar-order-wp: ( menu-toggle-end: 7, ); -/// @prop - Padding of the toolbar title -$toolbar-wp-title-padding: 0 6px !default; +// deprecated +$toolbar-wp-title-padding: null !default; + +/// @prop - Padding top of the toolbar title +$toolbar-wp-title-padding-top: 0 !default; + +/// @prop - Padding end of the toolbar title +$toolbar-wp-title-padding-end: 6px !default; + +/// @prop - Padding bottom of the toolbar title +$toolbar-wp-title-padding-bottom: $toolbar-wp-title-padding-top !default; + +/// @prop - Padding start of the toolbar title +$toolbar-wp-title-padding-start: $toolbar-wp-title-padding-end !default; /// @prop - Font size of the toolbar title $toolbar-wp-title-font-size: 1.5rem !default; @@ -49,7 +61,7 @@ $toolbar-button-wp-strong-font-weight: bold !default; .toolbar-wp { - padding: $toolbar-wp-padding; + @include padding($toolbar-wp-padding); min-height: $toolbar-wp-height; } @@ -76,12 +88,14 @@ $toolbar-button-wp-strong-font-weight: bold !default; } .toolbar-title-wp { - padding: $toolbar-wp-title-padding; - font-size: $toolbar-wp-title-font-size; font-weight: $toolbar-wp-title-font-weight; text-transform: $toolbar-wp-title-text-transform; color: $toolbar-wp-title-text-color; + + @include deprecated-variable(padding, $toolbar-wp-title-padding) { + @include padding($toolbar-wp-title-padding-top, $toolbar-wp-title-padding-end, $toolbar-wp-title-padding-bottom, $toolbar-wp-title-padding-start); + } } @mixin wp-toolbar-theme($color-name, $color-base, $color-contrast) { @@ -125,7 +139,7 @@ $toolbar-button-wp-strong-font-weight: bold !default; } .bar-buttons-wp[left] .bar-button:first-child { - margin-left: 0; + @include margin-horizontal(0, null); } .bar-buttons-wp[end] { @@ -145,16 +159,13 @@ $toolbar-button-wp-strong-font-weight: bold !default; // -------------------------------------------------- .bar-button-wp { - margin-top: 0; - margin-right: .2rem; - margin-bottom: 0; - margin-left: .2rem; - padding: 0 5px; + @include margin(0, .2rem); + @include padding(0, 5px); + @include border-radius($toolbar-wp-button-border-radius); height: 32px; border: 0; - border-radius: $toolbar-wp-button-border-radius; font-size: $toolbar-wp-button-font-size; font-weight: 500; text-transform: uppercase; @@ -255,7 +266,7 @@ $toolbar-button-wp-strong-font-weight: bold !default; // -------------------------------------------------- .bar-button-wp.bar-button-icon-left ion-icon { - padding-right: .3em; + @include padding-horizontal(null, .3em); font-size: 1.4em; line-height: .67; @@ -264,7 +275,7 @@ $toolbar-button-wp-strong-font-weight: bold !default; } .bar-button-wp.bar-button-icon-right ion-icon { - padding-left: .4em; + @include padding-horizontal(.4em, null); font-size: 1.4em; line-height: .67; @@ -273,10 +284,10 @@ $toolbar-button-wp-strong-font-weight: bold !default; } .bar-button-wp[icon-only] { - padding: 0; + @include padding(0); ion-icon { - padding: 0 .1em; + @include padding(0, .1em); min-width: 28px; @@ -292,7 +303,7 @@ $toolbar-button-wp-strong-font-weight: bold !default; // -------------------------------------------------- .back-button-wp { - margin: 0 6px; + @include margin(0, 6px); min-width: 44px; @@ -301,9 +312,8 @@ $toolbar-button-wp-strong-font-weight: bold !default; .back-button-icon-wp { @include text-align(start); - - margin: 0; - padding: 0 6px; + @include margin(0); + @include padding(0, 6px); font-size: 2.4rem; font-weight: normal; @@ -314,15 +324,15 @@ $toolbar-button-wp-strong-font-weight: bold !default; // -------------------------------------------------- .bar-button-menutoggle-wp { - order: map-get($toolbar-order-wp, menu-toggle-start); + @include margin(0, 6px); + @include padding(0, 2px); - margin: 0 6px; - padding: 0 2px; + order: map-get($toolbar-order-wp, menu-toggle-start); min-width: 44px; ion-icon { - padding: 0 6px; + @include padding(0, 6px); font-size: 2.4rem; } @@ -330,9 +340,9 @@ $toolbar-button-wp-strong-font-weight: bold !default; .bar-button-menutoggle-wp[end], .bar-button-menutoggle-wp[right] { - order: map-get($toolbar-order-wp, menu-toggle-end); + @include margin(0, 2px); - margin: 0 2px; + order: map-get($toolbar-order-wp, menu-toggle-end); min-width: 28px; } diff --git a/src/components/virtual-scroll/virtual-scroll.scss b/src/components/virtual-scroll/virtual-scroll.scss index 25d0fc0e012..99d39298bd2 100644 --- a/src/components/virtual-scroll/virtual-scroll.scss +++ b/src/components/virtual-scroll/virtual-scroll.scss @@ -14,10 +14,9 @@ .virtual-scroll .virtual-position, .virtual-scroll .virtual-position.item { - position: absolute; + @include position(0, null, null, 0); - top: 0; - left: 0; + position: absolute; transition-duration: 0ms; diff --git a/src/themes/ionic.functions.scss b/src/themes/ionic.functions.scss index b25acc66fd5..682ea4734b9 100644 --- a/src/themes/ionic.functions.scss +++ b/src/themes/ionic.functions.scss @@ -2,6 +2,41 @@ // Color Functions // -------------------------------------------------- +@function color-error($color-value, $color-name: null) { + $error-msg: " + + The value `#{$color-value}` must be a color. + If you are setting the value as a map make sure + both the base and contrast are defined as colors. + + For example: + + $colors: ( + primary: #327eff, + secondary: (base: #32db64, contrast: #000), + );"; + + // If there was a name passed it means the value doesn't exist + // so error that the value isn't defined + @if ($color-name) { + $error-msg: " + + The map color `#{$color-name}` is not defined. + Please make sure the color exists in your + `$colors` map. + + For example: + + $colors: ( + #{$color-name}: #327eff + );"; + } + + @error $error-msg; + + @return null; +} + @function color-brightness($color-value) { @if (type-of($color-value) != color) { @return color-error($color-value); @@ -76,41 +111,6 @@ @return mix($shade, $color-value, $amount); } -@function color-error($color-value, $color-name: null) { - $error-msg: " - - The value `#{$color-value}` must be a color. - If you are setting the value as a map make sure - both the base and contrast are defined as colors. - - For example: - - $colors: ( - primary: #327eff, - secondary: (base: #32db64, contrast: #000), - );"; - - // If there was a name passed it means the value doesn't exist - // so error that the value isn't defined - @if ($color-name) { - $error-msg: " - - The map color `#{$color-name}` is not defined. - Please make sure the color exists in your - `$colors` map. - - For example: - - $colors: ( - #{$color-name}: #327eff - );"; - } - - @error $error-msg; - - @return null; -} - // Copy Colors Map // -------------------------------------------------- @@ -291,19 +291,3 @@ @return $colors-list; } - -// Sets correct text align with support for old browsers -// @param {string} $direction - text direction -// @param {string} $decorator - !important -// ---------------------------------------------------------- -@mixin text-align($direction, $decorator: null) { - @if $direction == start { - text-align: left; - text-align: start $decorator; - } @else if $direction == end { - text-align: right; - text-align: end $decorator; - } @else { - text-align: $direction $decorator; - } -} diff --git a/src/themes/ionic.mixins.scss b/src/themes/ionic.mixins.scss index c3a5fc1e919..218f1ea99ae 100644 --- a/src/themes/ionic.mixins.scss +++ b/src/themes/ionic.mixins.scss @@ -155,4 +155,240 @@ } @else { @content; } +} + +$include-rtl: true !default; + +@mixin rtl() { + @if $include-rtl { + $root: #{&}; + @at-root [dir="rtl"] { + #{$root} { + @content; + } + } + } +} + +// If deprecated variable exists, use it, otherwise, use alternative +// @param {string} $property - property to default +// @param {string} $variable - the deprecated variable +// ---------------------------------------------------------- +@mixin deprecated-variable($property, $variable) { + @if $variable == null { + @content; + } @else { + // TODO find variable name + @warn "you are using a deprecated variable"; + #{$property}: $variable; + } +} + +// Add padding horizontal +// @param {string} $start - amount to pad start +// @param {string} $end - amount to pad end +// ---------------------------------------------------------- +@mixin padding-horizontal($start, $end: $start) { + @if $start != null { + padding-left: $start; + } + + @if $end != null { + padding-right: $end; + } + + @if $start != $end { + @include rtl() { + @if $start != null { + padding-right: $start; + } @else if $end != null { + padding-right: initial; + } + + @if $end != null { + padding-left: $end; + } @else if $start != null { + padding-left: initial; + } + } + } +} + +// Add padding for all sides +// @param {string} $top +// @param {string} $end +// @param {string} $bottom +// @param {string} $start +// ---------------------------------------------------------- +@mixin padding($top, $end: $top, $bottom: $top, $start: $end) { + @if ($top == $end and $top == $bottom and $top == $start) { + padding: $top; + } @else { + @include padding-horizontal($start, $end); + padding-top: $top; + padding-bottom: $bottom; + } +} + +// Add margin horizontal +// @param {string} $start - amount to margin start +// @param {string} $end - amount to margin end +// ---------------------------------------------------------- +@mixin margin-horizontal($start, $end: $start) { + @if $start != null { + margin-left: $start; + } + + @if $end != null { + margin-right: $end; + } + + @if $start != $end { + @include rtl() { + @if $start != null { + margin-right: $start; + } @else if $end != null { + margin-right: initial; + } + + @if $end != null { + margin-left: $end; + } @else if $start != null { + margin-left: initial; + } + } + } +} + +// Add margin for all sides +// @param {string} $top +// @param {string} $end +// @param {string} $bottom +// @param {string} $start +// ---------------------------------------------------------- +@mixin margin($top, $end: $top, $bottom: $top, $start: $end) { + @if ($top == $end and $top == $bottom and $top == $start) { + margin: $top; + } @else { + @include margin-horizontal($start, $end); + margin-top: $top; + margin-bottom: $bottom; + } +} + +// Add position horizontal +// @param {string} $start - amount to position start +// @param {string} $end - amount to left: 0; end +// ---------------------------------------------------------- +@mixin position-horizontal($start: null, $end: null) { + @if $start != null { + left: $start; + } + + @if $end != null { + right: $end; + } + + @if $start != $end { + @include rtl() { + @if $start != null { + right: $start; + } @else if $end != null { + right: auto; + } + + @if $end != null { + left: $end; + } @else if $start != null { + left: auto; + } + } + } +} + +// Add position for all sides +// @param {string} $top +// @param {string} $end +// @param {string} $bottom +// @param {string} $start +// ---------------------------------------------------------- +@mixin position($top: null, $end: null, $bottom: null, $start: null) { + @include position-horizontal($start, $end); + @if $top != null { + top: $top; + } + @if $bottom != null { + bottom: $bottom; + } +} + +// Add correct border radius for ltr and rtl +// @param {string} $top-start +// @param {string} $top-end +// @param {string} $bottom-end +// @param {string} $bottom-start +// ---------------------------------------------------------- +@mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) { + @if ($top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start) { + border-radius: $top-start; + } @else { + @if $top-start != null { + border-top-left-radius: $top-start; + } + + @if $top-end != null { + border-top-right-radius: $top-end; + } + + @if $bottom-end != null { + border-bottom-right-radius: $bottom-end; + } + + @if $bottom-start != null { + border-bottom-left-radius: $bottom-start; + } + + @include rtl() { + @if $top-start != null { + border-top-right-radius: $top-start; + } @else if $top-end != null { + border-top-right-radius: 0; + } + + @if $top-end != null { + border-top-left-radius: $top-end; + } @else if $top-start != null { + border-top-left-radius: 0; + } + + @if $bottom-end != null { + border-bottom-left-radius: $bottom-end; + } @else if $bottom-start != null { + border-bottom-left-radius: 0; + } + + @if $bottom-start != null { + border-bottom-right-radius: $bottom-start; + } @else if $bottom-end != null { + border-bottom-right-radius: 0; + } + } + } +} + + +// Sets correct text align with support for old browsers +// @param {string} $direction - text direction +// @param {string} $decorator - !important +// ---------------------------------------------------------- +@mixin text-align($direction, $decorator: null) { + @if $direction == start { + text-align: left; + text-align: start $decorator; + } @else if $direction == end { + text-align: right; + text-align: end $decorator; + } @else { + text-align: $direction $decorator; + } } \ No newline at end of file diff --git a/src/themes/ionic.theme.dark.ios.scss b/src/themes/ionic.theme.dark.ios.scss index b5d9736a016..b2eb14bbc42 100644 --- a/src/themes/ionic.theme.dark.ios.scss +++ b/src/themes/ionic.theme.dark.ios.scss @@ -69,9 +69,13 @@ $item-ios-divider-color: $text-color !default; // -------------------------------------------------- $item-ios-padding-top: 11px !default; +// deprecated $item-ios-padding-right: 16px !default; +$item-ios-padding-end: $item-ios-padding-right; $item-ios-padding-bottom: 11px !default; +// deprecated $item-ios-padding-left: 16px !default; +$item-ios-padding-start: $item-ios-padding-left; $item-ios-padding-media-top: 10px !default; $item-ios-padding-media-bottom: 10px !default; $item-ios-padding-icon-top: 9px !default; diff --git a/src/themes/ionic.theme.dark.md.scss b/src/themes/ionic.theme.dark.md.scss index baf96ed4a23..acaa2d3881e 100644 --- a/src/themes/ionic.theme.dark.md.scss +++ b/src/themes/ionic.theme.dark.md.scss @@ -58,9 +58,13 @@ $list-md-activated-background-color: #d9d9d9 !default; // -------------------------------------------------- $item-md-padding-top: 13px !default; +// deprecated $item-md-padding-right: 16px !default; +$item-md-padding-end: $item-md-padding-right; $item-md-padding-bottom: 13px !default; +// deprecated $item-md-padding-left: 16px !default; +$item-md-padding-start: $item-md-padding-left; $item-md-padding-media-top: 9px !default; $item-md-padding-media-bottom: 9px !default; $item-md-padding-icon-top: 11px !default; diff --git a/src/themes/ionic.theme.dark.wp.scss b/src/themes/ionic.theme.dark.wp.scss index b24a7b51abe..9cd8876f52e 100644 --- a/src/themes/ionic.theme.dark.wp.scss +++ b/src/themes/ionic.theme.dark.wp.scss @@ -59,9 +59,13 @@ $list-wp-activated-background-color: #d9d9d9 !default; // -------------------------------------------------- $item-wp-padding-top: 13px !default; +// deprecated $item-wp-padding-right: 16px !default; +$item-wp-padding-end: $item-wp-padding-right; $item-wp-padding-bottom: 13px !default; +// deprecated $item-wp-padding-left: 16px !default; +$item-wp-padding-start: $item-wp-padding-left; $item-wp-padding-media-top: 9px !default; $item-wp-padding-media-bottom: 9px !default; $item-wp-padding-icon-top: 11px !default; diff --git a/src/themes/ionic.theme.default.ios.scss b/src/themes/ionic.theme.default.ios.scss index be748e992b1..af9cc1d8fa2 100644 --- a/src/themes/ionic.theme.default.ios.scss +++ b/src/themes/ionic.theme.default.ios.scss @@ -51,9 +51,13 @@ $list-ios-activated-background-color: #d9d9d9 !default; // -------------------------------------------------- $item-ios-padding-top: 11px !default; +// deprecated $item-ios-padding-right: 16px !default; +$item-ios-padding-end: $item-ios-padding-right; $item-ios-padding-bottom: 11px !default; +// deprecated $item-ios-padding-left: 16px !default; +$item-ios-padding-start: $item-ios-padding-left; $item-ios-padding-media-top: 8px !default; $item-ios-padding-media-bottom: 8px !default; $item-ios-padding-icon-top: 9px !default; diff --git a/src/themes/ionic.theme.default.md.scss b/src/themes/ionic.theme.default.md.scss index f0696efc063..3a839202a73 100644 --- a/src/themes/ionic.theme.default.md.scss +++ b/src/themes/ionic.theme.default.md.scss @@ -50,9 +50,13 @@ $list-md-activated-background-color: #f1f1f1 !default; // -------------------------------------------------- $item-md-padding-top: 13px !default; +// deprecated $item-md-padding-right: 16px !default; +$item-md-padding-end: $item-md-padding-right; $item-md-padding-bottom: 13px !default; +// deprecated $item-md-padding-left: 16px !default; +$item-md-padding-start: $item-md-padding-left; $item-md-padding-media-top: 9px !default; $item-md-padding-media-bottom: 9px !default; $item-md-padding-icon-top: 11px !default; diff --git a/src/themes/ionic.theme.default.wp.scss b/src/themes/ionic.theme.default.wp.scss index fa2daefcb07..8cf8ac72543 100644 --- a/src/themes/ionic.theme.default.wp.scss +++ b/src/themes/ionic.theme.default.wp.scss @@ -51,9 +51,13 @@ $list-wp-activated-background-color: #aaa !default; // -------------------------------------------------- $item-wp-padding-top: 13px !default; +// deprecated $item-wp-padding-right: 16px !default; +$item-wp-padding-end: $item-wp-padding-right; $item-wp-padding-bottom: 13px !default; +// deprecated $item-wp-padding-left: 16px !default; +$item-wp-padding-start: $item-wp-padding-left; $item-wp-padding-media-top: 9px !default; $item-wp-padding-media-bottom: 9px !default; $item-wp-padding-icon-top: 11px !default; diff --git a/src/themes/util.scss b/src/themes/util.scss index 79ef88ed278..c0a79391d92 100755 --- a/src/themes/util.scss +++ b/src/themes/util.scss @@ -52,11 +52,10 @@ ion-input :focus { } .click-block-enabled { + @include position(0, 0, 0, 0); + position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; + z-index: $z-index-click-block; display: block;