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

fix(all): absolute positioning

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-03-22 16:49:12 +01:00
parent b29fce1b8f
commit 4fcddadcc9
15 changed files with 16 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
core/src/components/action-sheet/action-sheet.scss
View File

@ -4,15 +4,12 @@
// -------------------------------------------------- // --------------------------------------------------
ion-action-sheet { ion-action-sheet {
@include position(0, null, null, 0); @include position(0, 0, 0, 0);
position: fixed; position: fixed;
z-index: $z-index-overlay; z-index: $z-index-overlay;
display: block; display: block;
width: $action-sheet-width;
height: $action-sheet-width;
touch-action: none; touch-action: none;
font-smoothing: antialiased; font-smoothing: antialiased;

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

@ -159,15 +159,12 @@ ion-tab,
ion-tabs, ion-tabs,
ion-nav, ion-nav,
.ion-page { .ion-page {
@include position(0); @include position(0, 0, 0, 0);
position: absolute; position: absolute;
z-index: $z-index-page-container; z-index: $z-index-page-container;
overflow: hidden; overflow: hidden;
width: 100%;
height: 100%;
contain: layout size style; contain: layout size style;
} }
@ -192,7 +189,7 @@ $navigation-ios-transition-background: #000 !default;
} }
.show-decor > .nav-decor { .show-decor > .nav-decor {
@include position(0, null, null, 0); @include position(0, 0, 0, 0);
// when ios pages transition, the leaving page grays out // when ios pages transition, the leaving page grays out
// this is the black square behind all pages so they gray out // this is the black square behind all pages so they gray out
@ -200,9 +197,6 @@ $navigation-ios-transition-background: #000 !default;
z-index: 0; z-index: 0;
display: block; display: block;
width: 100%;
height: 100%;
background: $navigation-ios-transition-background; background: $navigation-ios-transition-background;
pointer-events: none; pointer-events: none;

5
core/src/components/backdrop/backdrop.scss
View File

@ -4,15 +4,12 @@
// -------------------------------------------------- // --------------------------------------------------
ion-backdrop { ion-backdrop {
@include position(0, null, null, 0); @include position(0, 0, 0, 0);
position: absolute; position: absolute;
z-index: $z-index-backdrop; z-index: $z-index-backdrop;
display: block; display: block;
width: 100%;
height: 100%;
cursor: pointer; cursor: pointer;
opacity: .01; opacity: .01;
transform: translateZ(0); transform: translateZ(0);

5
core/src/components/checkbox/checkbox.scss
View File

@ -9,14 +9,11 @@ ion-checkbox {
} }
ion-checkbox input { ion-checkbox input {
@include position(0, null, null, 0); @include position(0, 0, 0, 0);
@include margin(0); @include margin(0);
position: absolute; position: absolute;
width: 100%;
height: 100%;
border: 0; border: 0;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;

5
core/src/components/datetime/datetime.scss
View File

@ -11,13 +11,10 @@ ion-datetime {
} }
.datetime-cover { .datetime-cover {
@include position(0, null, null, 0); @include position(0, 0, 0, 0);
position: absolute; position: absolute;
width: 100%;
height: 100%;
border: 0; border: 0;
background: transparent; background: transparent;

5
core/src/components/input/input.scss
View File

@ -63,12 +63,9 @@ input.native-input:-webkit-autofill {
// The input cover is not clickable when the input is disabled // The input cover is not clickable when the input is disabled
.input-cover { .input-cover {
@include position(0, null, null, 0); @include position(0, 0, 0, 0);
position: absolute; position: absolute;
width: 100%;
height: 100%;
} }
.input[disabled] .input-cover { .input[disabled] .input-cover {

5
core/src/components/item/item.scss
View File

@ -75,13 +75,10 @@ ion-item-group {
} }
.item-cover { .item-cover {
@include position(0, null, null, 0); @include position(0, 0, 0, 0);
position: absolute; position: absolute;
width: 100%;
height: 100%;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
} }

5
core/src/components/modal/modal.scss
View File

@ -4,15 +4,12 @@
// -------------------------------------------------- // --------------------------------------------------
ion-modal { ion-modal {
@include position(0); @include position(0, 0, 0, 0);
position: absolute; position: absolute;
display: block; display: block;
width: 100%;
height: 100%;
contain: strict; contain: strict;
} }

5
core/src/components/radio/radio.scss
View File

@ -11,14 +11,11 @@ ion-radio {
} }
ion-radio input { ion-radio input {
@include position(0, null, null, 0); @include position(0, 0, 0, 0);
@include margin(0); @include margin(0);
position: absolute; position: absolute;
width: 100%;
height: 100%;
border: 0; border: 0;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;

5
core/src/components/select/select.scss
View File

@ -14,13 +14,10 @@ ion-select {
} }
.select-cover { .select-cover {
@include position(0, null, null, 0); @include position(0, 0, 0, 0);
position: absolute; position: absolute;
width: 100%;
height: 100%;
border: 0; border: 0;
background: transparent; background: transparent;

5
core/src/components/spinner/spinner.scss
View File

@ -12,13 +12,10 @@ ion-spinner {
} }
ion-spinner svg { ion-spinner svg {
@include position(0, null, null, 0); @include position(0, 0, 0, 0);
position: absolute; position: absolute;
width: 100%;
height: 100%;
transform: translateZ(0); transform: translateZ(0);
} }

2
core/src/components/tabs/tabs.scss
View File

@ -1,7 +1,7 @@
@import "../../themes/ionic.globals"; @import "../../themes/ionic.globals";
ion-tabs { ion-tabs {
@include position(0); @include position(0, 0, 0, 0);
position: absolute; position: absolute;

5
core/src/components/title/title.ios.scss
View File

@ -5,14 +5,11 @@
// -------------------------------------------------- // --------------------------------------------------
.toolbar-ios ion-title { .toolbar-ios ion-title {
@include position(0, null, null, 0); @include position(0, 0, 0, 0);
@include padding(0, 90px, 1px); @include padding(0, 90px, 1px);
position: absolute; position: absolute;
width: 100%;
height: 100%;
transform: translateZ(0); transform: translateZ(0);
pointer-events: none; pointer-events: none;

5
core/src/components/toggle/toggle.scss
View File

@ -45,14 +45,11 @@ ion-toggle ion-gesture {
} }
ion-toggle input { ion-toggle input {
@include position(0, null, null, 0); @include position(0, 0, 0, 0);
@include margin(0); @include margin(0);
position: absolute; position: absolute;
width: 100%;
height: 100%;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
border: 0; border: 0;

5
core/src/components/toolbar/toolbar.scss
View File

@ -28,14 +28,11 @@ ion-toolbar ion-title {
} }
.toolbar-background { .toolbar-background {
@include position(0, null, null, 0); @include position(0, 0, 0, 0);
position: absolute; position: absolute;
z-index: $z-index-toolbar-background; z-index: $z-index-toolbar-background;
width: 100%;
height: 100%;
border: 0; border: 0;
transform: translateZ(0); transform: translateZ(0);