javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(all): safe margins for fab, item-header, tabbar

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-09-26 20:53:25 +02:00
parent 171ef04773
commit 62eff0a5dc
8 changed files with 26 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
core/src/components/fab/fab.scss
View File

@ -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))
);
}

4
core/src/components/item-divider/item-divider.ios.scss
View File

@ -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);
}
}

8
core/src/components/item-option/item-option.ios.scss
View File

@ -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
core/src/components/item-option/item-option.scss
View File

@ -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"]) {

2
core/src/components/list-header/list-header.ios.scss
View File

@ -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;

2
core/src/components/list-header/list-header.md.scss
View File

@ -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;

7
core/src/components/tabbar/tabbar.scss
View File

@ -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);

112
core/src/themes/ionic.mixins.scss
View File

@ -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;
}
}
}