From 62eff0a5dc7255447a26733ed96f07e1f0dc3955 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Wed, 26 Sep 2018 20:53:25 +0200 Subject: [PATCH] fix(all): safe margins for fab, item-header, tabbar --- core/src/components/fab/fab.scss | 10 +- .../item-divider/item-divider.ios.scss | 4 - .../item-option/item-option.ios.scss | 8 -- .../components/item-option/item-option.scss | 19 +-- .../list-header/list-header.ios.scss | 2 +- .../list-header/list-header.md.scss | 2 +- core/src/components/tabbar/tabbar.scss | 7 +- core/src/themes/ionic.mixins.scss | 112 ------------------ 8 files changed, 26 insertions(+), 138 deletions(-) diff --git a/core/src/components/fab/fab.scss b/core/src/components/fab/fab.scss index 78434e1c062..950be056554 100644 --- a/core/src/components/fab/fab.scss +++ b/core/src/components/fab/fab.scss @@ -19,13 +19,15 @@ } :host(.fab-horizontal-start) { - @include position-horizontal($fab-content-margin, null); - @include safe-position-horizontal($fab-content-margin, null); + @include position-horizontal( + calc(#{$fab-content-margin} + var(--ion-safe-area-left, 0px)), null + ); } :host(.fab-horizontal-end) { - @include position-horizontal(null, $fab-content-margin); - @include safe-position-horizontal(null, $fab-content-margin); + @include position-horizontal( + null, calc(#{$fab-content-margin} + var(--ion-safe-area-right, 0px)) + ); } diff --git a/core/src/components/item-divider/item-divider.ios.scss b/core/src/components/item-divider/item-divider.ios.scss index a9cf735df36..484cdd9238c 100644 --- a/core/src/components/item-divider/item-divider.ios.scss +++ b/core/src/components/item-divider/item-divider.ios.scss @@ -18,10 +18,6 @@ .item-divider-inner { @include padding-horizontal(null, $item-ios-divider-padding-end / 2); - - @media screen and (orientation: landscape) { - @include safe-area-padding-horizontal(null, $item-ios-divider-padding-end / 2); - } } diff --git a/core/src/components/item-option/item-option.ios.scss b/core/src/components/item-option/item-option.ios.scss index 071f8e1c244..6249ee79853 100644 --- a/core/src/components/item-option/item-option.ios.scss +++ b/core/src/components/item-option/item-option.ios.scss @@ -15,11 +15,3 @@ :host(.ion-color.activated) { background: current-color(shade); } - -:host(.in-list.item-options-end:last-child) { - @include safe-area-padding-horizontal(null, .7em); -} - -:host(.in-list.item-options-start:first-child) { - @include safe-area-padding-horizontal(.7em, null); -} diff --git a/core/src/components/item-option/item-option.scss b/core/src/components/item-option/item-option.scss index cdf9f7e3cd0..aa9a9ed1265 100644 --- a/core/src/components/item-option/item-option.scss +++ b/core/src/components/item-option/item-option.scss @@ -17,6 +17,18 @@ font-family: $font-family-base; } +:host(.in-list.item-options-end:last-child) { + @include padding-horizontal( + null, calc(.7em + var(--ion-safe-area-right)) + ); +} + +:host(.in-list.item-options-start:first-child) { + @include padding-horizontal( + calc(.7em + var(--ion-safe-area-left)), null + ); +} + :host(.ion-color) { background: current-color(base); color: current-color(contrast); @@ -52,13 +64,6 @@ width: 100%; height: 100%; - - font-family: inherit; - font-size: inherit; - font-weight: inherit; - - letter-spacing: inherit; - } ::slotted([slot="icon-only"]) { diff --git a/core/src/components/list-header/list-header.ios.scss b/core/src/components/list-header/list-header.ios.scss index de2efd36750..834d67767bc 100644 --- a/core/src/components/list-header/list-header.ios.scss +++ b/core/src/components/list-header/list-header.ios.scss @@ -8,7 +8,7 @@ --background: #{$list-ios-header-background-color}; --color: #{$list-ios-header-color}; - @include padding-horizontal(calc(var(--ion-safe-area-left, 0px) + #{$list-ios-header-padding-start}), null) + @include padding-horizontal(calc(var(--ion-safe-area-left, 0px) + #{$list-ios-header-padding-start}), null); position: relative; diff --git a/core/src/components/list-header/list-header.md.scss b/core/src/components/list-header/list-header.md.scss index 04ba9bbb9c6..d000face114 100644 --- a/core/src/components/list-header/list-header.md.scss +++ b/core/src/components/list-header/list-header.md.scss @@ -8,7 +8,7 @@ --background: transparent; --color: #{$list-md-header-color}; - @include padding-horizontal($list-md-header-padding-start, null); + @include padding-horizontal(calc(var(--ion-safe-area-left, 0px) + #{$list-md-header-padding-start}), null); @include margin(null, null, $list-md-header-margin-bottom, null); min-height: $list-md-header-min-height; diff --git a/core/src/components/tabbar/tabbar.scss b/core/src/components/tabbar/tabbar.scss index 3e2f5c6483f..929ebbaa237 100644 --- a/core/src/components/tabbar/tabbar.scss +++ b/core/src/components/tabbar/tabbar.scss @@ -1,6 +1,11 @@ @import "../../themes/ionic.globals"; :host { + @include padding-horizontal( + var(--ion-safe-area-left), + var(--ion-safe-area-right) + ); + display: flex; position: relative; @@ -8,7 +13,7 @@ justify-content: center; order: 1; - width: 100%; + width: auto; background: var(--background); color: var(--color); diff --git a/core/src/themes/ionic.mixins.scss b/core/src/themes/ionic.mixins.scss index 3821aaeefb8..21b2f97a712 100644 --- a/core/src/themes/ionic.mixins.scss +++ b/core/src/themes/ionic.mixins.scss @@ -505,115 +505,3 @@ } } } - - -// Add safe-area-padding for all directions -// @param {string} $top -// @param {string} $end -// @param {string} $bottom -// @param {string} $start -// ---------------------------------------------------------- -@mixin safe-area-padding($top, $end: $top, $bottom: $top, $start: $end) { - // two groups for older constant and newer env - $safe-area-top: null; - $safe-area-start: null; - $safe-area-bottom: null; - $safe-area-end: null; - - $safe-area-top-env: null; - $safe-area-start-env: null; - $safe-area-bottom-env: null; - $safe-area-end-env: null; - - @if ($start) { - $safe-area-start: unquote("calc(constant(safe-area-inset-left) + #{$start})"); - $safe-area-start-env: unquote("calc(env(safe-area-inset-left) + #{$start})"); - } - @if ($end) { - $safe-area-end: unquote("calc(constant(safe-area-inset-right) + #{$end})"); - $safe-area-end-env: unquote("calc(env(safe-area-inset-right) + #{$end})"); - } - @if ($top){ - $safe-area-top: unquote("calc(constant(safe-area-inset-top) + #{$top})"); - $safe-area-top-env: unquote("calc(env(safe-area-inset-top) + #{$top})"); - } - @if ($bottom){ - $safe-area-bottom: unquote("calc(constant(safe-area-inset-bottom) + #{$bottom})"); - $safe-area-bottom-env: unquote("calc(env(safe-area-inset-bottom) + #{$bottom})"); - } - - @include padding($safe-area-top, $safe-area-end, $safe-area-bottom, $safe-area-start); - @include padding($safe-area-top-env, $safe-area-end-env, $safe-area-bottom-env, $safe-area-start-env); - -} - -// Add safe area padding horizontal -// @param {string} $start -// @param {string} $end -// ---------------------------------------------------------- -@mixin safe-area-padding-horizontal($start, $end: $start) { - $safe-area-end: null; - $safe-area-start: null; - $safe-area-start-env: null; - $safe-area-end-env: null; - - @if ($end) { - $safe-area-end: unquote("calc(constant(safe-area-inset-right) + #{$end})"); - $safe-area-end-env: unquote("calc(env(safe-area-inset-right) + #{$end})"); - } - @if ($start) { - $safe-area-start: unquote("calc(constant(safe-area-inset-left) + #{$start})"); - $safe-area-start-env: unquote("calc(env(safe-area-inset-left) + #{$start})"); - } - - @include padding-horizontal($safe-area-start, $safe-area-end); - @include padding-horizontal($safe-area-start-env, $safe-area-end-env); -} - - -// Add safe position horizontal -// @param {string} $start - amount to position start -// @param {string} $end - amount to left: 0; end -// ---------------------------------------------------------- -@mixin safe-position-horizontal($start: null, $end: null){ - $safe-area-start: null; - $safe-area-end: null; - $safe-area-start-env: null; - $safe-area-end-env: null; - @if ($start) { - $safe-area-start: unquote("calc(constant(safe-area-inset-left) + #{$start})"); - $safe-area-start-env: unquote("calc(env(safe-area-inset-left) + #{$start})"); - } - @if ($end) { - $safe-area-end: unquote("calc(constant(safe-area-inset-right) + #{$end})"); - $safe-area-end-env: unquote("calc(env(safe-area-inset-right) + #{$end})"); - } - - @if $safe-area-start == $safe-area-end { - @include multi-dir() { - left: $safe-area-start; - right: $safe-area-end; - } - @include multi-dir() { - left: $safe-area-start-env; - right: $safe-area-end-env; - } - } @else { - @include ltr() { - left: $safe-area-start; - right: $safe-area-end; - } - @include ltr() { - left: $safe-area-start-env; - right: $safe-area-end-env; - } - @include rtl() { - left: $safe-area-end; - right: $safe-area-start; - } - @include rtl() { - left: $safe-area-end-env; - right: $safe-area-start-env; - } - } -}