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(): add first round of ios11 support

Browse Source
This commit is contained in:
mhartington
2017-11-09 14:34:33 -05:00
parent 41d80ed555
commit 264d7cf489
6 changed files with 105 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/core/src/components/item-sliding/item-sliding.ios.scss
View File

@ -27,6 +27,16 @@ $item-ios-sliding-button-icon-color: color-contrast($colors-ios, $item-i
.list-ios ion-item-options {
border-bottom: $hairlines-width solid $list-ios-border-color;
ion-item-option:last-child,
&[side="right"] ion-item-option:last-child {
@include safe-area-padding-horizontal(null, .7em);
}
&[side="left"] ion-item-option:first-child {
@include safe-area-padding-horizontal(.7em, null);
}
}
.item-option-ios {

2
packages/core/src/components/item-sliding/test/basic.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Ionic Item Sliding</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>

9
packages/core/src/components/item/item.ios.scss
View File

@ -50,6 +50,7 @@ $item-ios-detail-push-svg: "<svg xmlns='http://www.w3.org/2000/sv
.item-ios {
@include padding-horizontal($item-ios-padding-start, null);
@include safe-area-padding-horizontal($item-ios-padding-start, null);
@include border-radius(0);
position: relative;
@ -112,6 +113,7 @@ $item-ios-detail-push-svg: "<svg xmlns='http://www.w3.org/2000/sv
.item-ios.item-block .item-inner {
@include padding-horizontal(null, $item-ios-padding-end / 2);
@include safe-area-padding-horizontal(null, $item-ios-padding-end / 2);
border-bottom: $hairlines-width solid $list-ios-border-color;
}
@ -199,9 +201,16 @@ $item-ios-detail-push-svg: "<svg xmlns='http://www.w3.org/2000/sv
.item-ios[detail-push] .item-inner,
button.item-ios:not([detail-none]) .item-inner,
a.item-ios:not([detail-none]) .item-inner {
$safe-area-position: calc(#{$item-ios-padding-end - 2} + constant(safe-area-inset-right));
$safe-area-position-env: calc(#{$item-ios-padding-end - 2} + env(safe-area-inset-right));
@include svg-background-image($item-ios-detail-push-svg, true);
@include padding-horizontal(null, 32px);
@include background-position(end, $item-ios-padding-end - 2, center);
@include background-position(end, $safe-area-position, center);
@include background-position(end, $safe-area-position-env, center);
background-repeat: no-repeat;
background-size: 14px 14px;

27
packages/core/src/components/item/test/basic.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Ionic Slides 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>
<body>
@ -65,6 +65,31 @@
<ion-button default slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item-group>
<ion-item-divider color="light">Divider</ion-item-divider>
<ion-item>
<ion-label>Item Large Button</ion-label>
<ion-button large slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
</ion-item>
<ion-item>
<ion-label>Item Large Button</ion-label>
<ion-button large slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Small Button</ion-label>
<ion-button small slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
<ion-button small slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
<ion-item>
<ion-label>Item Default Button</ion-label>
<ion-button default slot="start"><ion-icon name="star" slot="end"></ion-icon>Start Button</ion-button>
<ion-button default slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
</ion-item>
</ion-item-group>
</ion-content>
</ion-page>
</ion-app>

1
packages/core/src/components/toolbar/toolbar.ios.scss
View File

@ -36,6 +36,7 @@ $navbar-ios-height: $toolbar-ios-height !default;
.toolbar-ios {
@include padding($toolbar-ios-padding);
@include safe-area-padding($toolbar-ios-padding);
min-height: $toolbar-ios-height;
}

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

@ -552,3 +552,61 @@
}
}
}
// 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) {
$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-env: calc(constant(safe-area-inset-right) + #{$end});
$safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
}
@include padding($top, $end, $bottom, $start);
@media screen and (orientation: landscape) {
@include padding($top, $safe-area-end, $bottom, $safe-area-start);
@include padding($top, $safe-area-end-env, $bottom, $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: calc(constant(safe-area-inset-right) + #{$end});
$safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
}
@if ($start) {
$safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
$safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
}
@include padding-horizontal($start, $end);
@media screen and (orientation: landscape) {
@include padding-horizontal($safe-area-start, $safe-area-end);
@include padding-horizontal($safe-area-start-env, $safe-area-end-env);
}
}