UNPKG

4.71 kBSCSSView Raw
1@import "../../themes/ionic.globals";
2
3// Content
4// --------------------------------------------------
5
6ion-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
22a {
23 color: $link-color;
24}
25
26
27// Scrollable Content
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
45ion-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
61ion-content.has-refresher > .scroll-content {
62 background-color: inherit;
63}
64
65
66// Fixed Content (ion-fixed and ion-fab)
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// Content Padding
86// --------------------------------------------------
87
88ion-app [no-padding],
89ion-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 // Scroll content should use safe-area-padding
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// Content Margin
154// --------------------------------------------------
155
156ion-app [no-margin],
157ion-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 // scss-lint:disable PropertySpelling
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 // scss-lint:disable PropertySpelling
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}