1 | @import "../../themes/ionic.globals";
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | ion-content {
|
7 | @include position(0, null, null, 0);
|
8 |
|
9 | position: relative;
|
10 | display: block;
|
11 |
|
12 | width: 100%;
|
13 | height: 100%;
|
14 |
|
15 | contain: size style;
|
16 | }
|
17 |
|
18 | .ion-page > ion-content {
|
19 | position: absolute;
|
20 | }
|
21 |
|
22 | a {
|
23 | color: $link-color;
|
24 | }
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 | .scroll-content {
|
31 | @include position(0, 0, 0, 0);
|
32 |
|
33 | position: absolute;
|
34 | z-index: $z-index-scroll-content;
|
35 | display: block;
|
36 |
|
37 | overflow-x: hidden;
|
38 | overflow-y: scroll;
|
39 | -webkit-overflow-scrolling: touch;
|
40 | will-change: scroll-position;
|
41 |
|
42 | contain: size style layout;
|
43 | }
|
44 |
|
45 | ion-content.js-scroll > .scroll-content {
|
46 | position: relative;
|
47 |
|
48 | min-height: 100%;
|
49 |
|
50 | overflow-x: initial;
|
51 | overflow-y: initial;
|
52 | -webkit-overflow-scrolling: auto;
|
53 | will-change: initial;
|
54 | }
|
55 |
|
56 | .disable-scroll .ion-page {
|
57 | pointer-events: none;
|
58 | touch-action: none;
|
59 | }
|
60 |
|
61 | ion-content.has-refresher > .scroll-content {
|
62 | background-color: inherit;
|
63 | }
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 | .fixed-content {
|
70 | @include position(0, 0, 0, 0);
|
71 |
|
72 | position: absolute;
|
73 | display: block;
|
74 | }
|
75 |
|
76 | [ion-fixed] {
|
77 | position: absolute;
|
78 |
|
79 | z-index: $z-index-fixed-content;
|
80 |
|
81 | transform: translateZ(0);
|
82 | }
|
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 | ion-app [no-padding],
|
89 | ion-app [no-padding] .scroll-content {
|
90 | @include padding(0);
|
91 | }
|
92 |
|
93 | @mixin content-padding($mode, $content-padding) {
|
94 | ion-app.#{$mode} [padding] {
|
95 | @include padding($content-padding);
|
96 | }
|
97 |
|
98 | ion-app.#{$mode} [padding-top] {
|
99 | @include padding($content-padding, null, null, null);
|
100 | }
|
101 |
|
102 | ion-app.#{$mode} [padding-left] {
|
103 | @include padding-horizontal($content-padding, null);
|
104 | }
|
105 |
|
106 | ion-app.#{$mode} [padding-right] {
|
107 | @include padding-horizontal(null, $content-padding);
|
108 | }
|
109 |
|
110 | ion-app.#{$mode} [padding-bottom] {
|
111 | @include padding(null, null, $content-padding, null);
|
112 | }
|
113 |
|
114 | ion-app.#{$mode} [padding-vertical] {
|
115 | @include padding($content-padding, null, $content-padding, null);
|
116 | }
|
117 |
|
118 | ion-app.#{$mode} [padding-horizontal] {
|
119 | @include padding-horizontal($content-padding);
|
120 | }
|
121 |
|
122 |
|
123 | ion-app.#{$mode} [padding] .scroll-content {
|
124 | @include safe-area-padding($content-padding);
|
125 | }
|
126 |
|
127 | ion-app.#{$mode} [padding-top] .scroll-content {
|
128 | @include safe-area-padding($content-padding, null, null, null);
|
129 | }
|
130 |
|
131 | ion-app.#{$mode} [padding-left] .scroll-content {
|
132 | @include safe-area-padding-horizontal($content-padding, null);
|
133 | }
|
134 |
|
135 | ion-app.#{$mode} [padding-right] .scroll-content {
|
136 | @include safe-area-padding-horizontal(null, $content-padding);
|
137 | }
|
138 |
|
139 | ion-app.#{$mode} [padding-bottom] .scroll-content {
|
140 | @include safe-area-padding(null, null, $content-padding, null);
|
141 | }
|
142 |
|
143 | ion-app.#{$mode} [padding-vertical] .scroll-content {
|
144 | @include safe-area-padding($content-padding, null, $content-padding, null);
|
145 | }
|
146 |
|
147 | ion-app.#{$mode} [padding-horizontal] .scroll-content {
|
148 | @include safe-area-padding-horizontal($content-padding);
|
149 | }
|
150 | }
|
151 |
|
152 |
|
153 |
|
154 |
|
155 |
|
156 | ion-app [no-margin],
|
157 | ion-app [no-margin] .scroll-content {
|
158 | @include margin(0);
|
159 | }
|
160 |
|
161 | @mixin content-margin($mode, $content-margin) {
|
162 | ion-app.#{$mode} [margin],
|
163 | ion-app.#{$mode} [margin] .scroll-content {
|
164 | @include margin($content-margin);
|
165 | }
|
166 |
|
167 | ion-app.#{$mode} [margin-top],
|
168 | ion-app.#{$mode} [margin-top] .scroll-content {
|
169 | @include margin($content-margin, null, null, null);
|
170 | }
|
171 |
|
172 | ion-app.#{$mode} [margin-left],
|
173 | ion-app.#{$mode} [margin-left] .scroll-content {
|
174 |
|
175 | margin-left: $content-margin;
|
176 | }
|
177 |
|
178 | ion-app.#{$mode} [margin-start],
|
179 | ion-app.#{$mode} [margin-start] .scroll-content {
|
180 | @include margin-horizontal($content-margin, null);
|
181 | }
|
182 |
|
183 | ion-app.#{$mode} [margin-right],
|
184 | ion-app.#{$mode} [margin-right] .scroll-content {
|
185 |
|
186 | margin-right: $content-margin;
|
187 | }
|
188 |
|
189 | ion-app.#{$mode} [margin-end],
|
190 | ion-app.#{$mode} [margin-end] .scroll-content {
|
191 | @include margin-horizontal(null, $content-margin);
|
192 | }
|
193 |
|
194 | ion-app.#{$mode} [margin-bottom],
|
195 | ion-app.#{$mode} [margin-bottom] .scroll-content {
|
196 | @include margin(null, null, $content-margin, null);
|
197 | }
|
198 |
|
199 | ion-app.#{$mode} [margin-vertical],
|
200 | ion-app.#{$mode} [margin-vertical] .scroll-content {
|
201 | @include margin($content-margin, null, $content-margin, null);
|
202 | }
|
203 |
|
204 | ion-app.#{$mode} [margin-horizontal],
|
205 | ion-app.#{$mode} [margin-horizontal] .scroll-content {
|
206 | @include margin-horizontal($content-margin);
|
207 | }
|
208 | }
|