Skip to content

Commit

Permalink
fix(all): safe margins for fab, item-header, tabbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@manucorporat
manucorporat committed Sep 26, 2018
1 parent 171ef04 commit 62eff0a
Show file tree
Hide file tree
Showing 8 changed files with 26 additions and 138 deletions.
10 changes: 6 additions & 4 deletions core/src/components/fab/fab.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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))
);
}


Expand Down
4 changes: 0 additions & 4 deletions core/src/components/item-divider/item-divider.ios.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}


Expand Down
8 changes: 0 additions & 8 deletions core/src/components/item-option/item-option.ios.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
19 changes: 12 additions & 7 deletions core/src/components/item-option/item-option.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -52,13 +64,6 @@

width: 100%;
height: 100%;

font-family: inherit;
font-size: inherit;
font-weight: inherit;

letter-spacing: inherit;

}

::slotted([slot="icon-only"]) {
Expand Down
2 changes: 1 addition & 1 deletion core/src/components/list-header/list-header.ios.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
2 changes: 1 addition & 1 deletion core/src/components/list-header/list-header.md.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
7 changes: 6 additions & 1 deletion core/src/components/tabbar/tabbar.scss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
@import "../../themes/ionic.globals";

:host {
@include padding-horizontal(
var(--ion-safe-area-left),
var(--ion-safe-area-right)
);

display: flex;
position: relative;

align-items: center;
justify-content: center;
order: 1;

width: 100%;
width: auto;

background: var(--background);
color: var(--color);

This comment has been minimized.

Sign in to view

Copy link
@suyogn

suyogn Oct 7, 2018

if possible please add height: var(--tabbar-height);
as well as ion-tabs > ion-icon: var(--font-size);
Expand Down
112 changes: 0 additions & 112 deletions core/src/themes/ionic.mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}

0 comments on commit 62eff0a

Please sign in to comment.