javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +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);