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

style(): more ios11 support

Browse Source
This commit is contained in:
mhartington
2017-11-09 16:33:20 -05:00
parent 264d7cf489
commit 2c47002e68
7 changed files with 70 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/core/src/components/action-sheet/action-sheet.ios.scss
View File

@ -110,6 +110,7 @@ $action-sheet-ios-button-cancel-font-weight: 600 !default;
.action-sheet-ios .action-sheet-wrapper {
@include margin(constant(safe-area-inset-top), auto, constant(safe-area-inset-bottom), auto);
@include margin(env(safe-area-inset-top), auto, env(safe-area-inset-bottom), auto);
}
.action-sheet-ios .action-sheet-container {

4
packages/core/src/components/action-sheet/test/basic.html
View File

@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<title>Action Sheet Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<script src="/dist/ionic.js"></script>
</head>
@ -301,4 +301,4 @@
</script>
</body>
</html>
</html>

13
packages/core/src/components/fab/fab.scss
View File

@ -94,10 +94,16 @@ ion-fab {
@include multi-dir() {
right: $fab-content-margin;
}
@include multi-dir() {
right: calc(#{$fab-content-margin} + constant(safe-area-inset-right));
right: calc(#{$fab-content-margin} + env(safe-area-inset-right));
}
}
&[end] {
@include position-horizontal(null, $fab-content-margin);
@include safe-position-horizontal(null, $fab-content-margin);
}
&[bottom] {
@ -109,10 +115,17 @@ ion-fab {
@include multi-dir() {
left: $fab-content-margin;
}
@include multi-dir() {
left: calc(#{$fab-content-margin} + constant(safe-area-inset-left));
left: calc(#{$fab-content-margin} + env(safe-area-inset-left));
}
}
&[start] {
@include position-horizontal($fab-content-margin, null);
@include safe-position-horizontal($fab-content-margin, null);
}
&[top][edge] {

2
packages/core/src/components/fab/test/basic.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Ionic FAB</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<script src="/dist/ionic.js"></script>
</head>
<body>

3
packages/core/src/components/picker/picker.scss
View File

@ -51,6 +51,9 @@ ion-picker {
}
.picker-columns {
@include margin(null, null, constant(safe-area-inset-bottom), null);
@include margin(null, null, env(safe-area-inset-bottom), null);
position: relative;
display: flex;

2
packages/core/src/components/popover/test/basic.html
View File

@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<title>Ionic Popover</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<script src="/dist/ionic.js"></script>
</head>

49
packages/core/src/themes/ionic.mixins.scss
View File

@ -610,3 +610,52 @@
@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: calc(constant(safe-area-inset-left) + #{$start});
$safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
}
@if ($end) {
$safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
$safe-area-end-env: 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;
}
}
}