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

fix(page): set page css on tabs, nav, page individually

Browse Source
This commit is contained in:
Adam Bradley
2017-12-31 18:39:04 -06:00
parent 616fa6989c
commit ce01077b9f
4 changed files with 43 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/core/src/components/nav/nav.scss
View File

@ -2,6 +2,19 @@
// -------------------------------------------------- // --------------------------------------------------
@import "../../themes/util"; @import "../../themes/util";
ion-nav { ion-nav {
@extend .ion-page position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $z-index-page-container;
width: 100%;
height: 100%;
contain: layout size style;
} }

15
packages/core/src/components/page/page.scss
View File

@ -2,7 +2,20 @@
// -------------------------------------------------- // --------------------------------------------------
@import "../../themes/util"; @import "../../themes/util";
ion-page { ion-page {
@extend .ion-page position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $z-index-page-container;
width: 100%;
height: 100%;
contain: layout size style;
} }

24
packages/core/src/components/tabs/tabs.scss
View File

@ -8,9 +8,23 @@
// -------------------------------------------------- // --------------------------------------------------
ion-tabs { ion-tabs {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: $z-index-page-container;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
height: 100%;
contain: layout size style;
} }
.tabs-inner { .tabs-inner {
@ -65,6 +79,7 @@ ion-tabbar.placement-top {
} }
ion-tab-button { ion-tab-button {
box-sizing: border-box;
@include margin(0); @include margin(0);
@include text-align(center); @include text-align(center);
@include border-radius(0); @include border-radius(0);
@ -219,12 +234,3 @@ ion-tabbar.scrollable .scroll-inner {
ion-tabbar.scrollable ion-button.inactive { ion-tabbar.scrollable ion-button.inactive {
visibility: hidden; visibility: hidden;
} }
ion-tabs {
@extend .ion-page
}
ion-tab-button {
box-sizing: border-box;
}

16
packages/core/src/themes/ionic.globals.scss
View File

@ -47,19 +47,3 @@ $z-index-item-options: 1; // scss-lint:disable DefaultRule
$z-index-item-divider: 100; // scss-lint:disable DefaultRule $z-index-item-divider: 100; // scss-lint:disable DefaultRule
$z-index-reorder-selected: 100; // scss-lint:disable DefaultRule $z-index-reorder-selected: 100; // scss-lint:disable DefaultRule
.ion-page {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: $z-index-page-container;
width: 100%;
height: 100%;
contain: layout size style;
}