1
  2/**
  3 * Scaffolding
  4 * --------------------------------------------------
  5 */
  6
  7*,
  8*:before,
  9*:after {
 10  @include box-sizing(border-box);
 11}
 12
 13html {
 14  overflow: hidden;
 15  -ms-touch-action: pan-y;
 16  touch-action: pan-y;
 17}
 18
 19body,
 20.ionic-body {
 21  @include touch-callout(none);
 22  @include font-smoothing(antialiased);
 23  @include text-size-adjust(none);
 24  @include tap-highlight-transparent();
 25  @include user-select(none);
 26
 27  top: 0;
 28  right: 0;
 29  bottom: 0;
 30  left: 0;
 31  overflow: hidden;
 32
 33  margin: 0;
 34  padding: 0;
 35
 36  color: $base-color;
 37  word-wrap: break-word;
 38  font-size: $font-size-base;
 39  font-family: -apple-system;
 40  font-family: $font-family-base;
 41  line-height: $line-height-computed;
 42  text-rendering: optimizeLegibility;
 43  -webkit-backface-visibility: hidden;
 44  -webkit-user-drag: none;
 45  -ms-content-zooming: none;
 46}
 47
 48body.grade-b,
 49body.grade-c {
 50  // disable optimizeLegibility for low end devices
 51  text-rendering: auto;
 52}
 53
 54.content {
 55  // used for content areas not using the content directive
 56  position: relative;
 57}
 58
 59.scroll-content {
 60  position: absolute;
 61  top: 0;
 62  right: 0;
 63  bottom: 0;
 64  left: 0;
 65  overflow: hidden;
 66
 67  // Hide the top border if any
 68  margin-top: -1px;
 69
 70  // Prevents any distortion of lines
 71  padding-top: 1px;
 72  margin-bottom: -1px;
 73
 74  width: auto;
 75  height: auto;
 76}
 77
 78.menu .scroll-content.scroll-content-false{
 79  z-index: $z-index-scroll-content-false;
 80}
 81
 82.scroll-view {
 83  position: relative;
 84  display: block;
 85  overflow: hidden;
 86
 87  &.overflow-scroll {
 88    position: relative;
 89  }
 90
 91  &.scroll-x { overflow-x: scroll; overflow-y: hidden; }
 92  &.scroll-y { overflow-x: hidden; overflow-y: scroll; }
 93  &.scroll-xy { overflow-x: scroll; overflow-y: scroll; }
 94
 95  // Hide the top border if any
 96  margin-top: -1px;
 97}
 98
 99/**
100 * Scroll is the scroll view component available for complex and custom
101 * scroll view functionality.
102 */
103.scroll {
104  @include user-select(none);
105  @include touch-callout(none);
106  @include text-size-adjust(none);
107  @include transform-origin(left, top);
108}
109/**
110 * Set ms-viewport to prevent MS "page squish" and allow fluid scrolling
111 * https://msdn.microsoft.com/en-us/library/ie/hh869615(v=vs.85).aspx
112 */
113@-ms-viewport { width: device-width; }
114
115// Scroll bar styles
116.scroll-bar {
117  position: absolute;
118  z-index: $z-index-scroll-bar;
119}
120// hide the scroll-bar during animations
121.ng-animate .scroll-bar {
122  visibility: hidden;
123}
124.scroll-bar-h {
125  right: 2px;
126  bottom: 3px;
127  left: 2px;
128  height: 3px;
129
130  .scroll-bar-indicator {
131    height: 100%;
132  }
133}
134
135.scroll-bar-v {
136  top: 2px;
137  right: 3px;
138  bottom: 2px;
139  width: 3px;
140
141  .scroll-bar-indicator {
142    width: 100%;
143  }
144}
145.scroll-bar-indicator {
146  position: absolute;
147  border-radius: 4px;
148  background: rgba(0,0,0,0.3);
149  opacity: 1;
150  @include transition(opacity .3s linear);
151
152  &.scroll-bar-fade-out {
153    opacity: 0;
154  }
155}
156.platform-android .scroll-bar-indicator {
157  // android doesn't have rounded ends on scrollbar
158  border-radius: 0;
159}
160.grade-b .scroll-bar-indicator,
161.grade-c .scroll-bar-indicator {
162  // disable rgba background and border radius for low end devices
163  background: #aaa;
164
165  &.scroll-bar-fade-out {
166    @include transition(none);
167  }
168}
169
170ion-infinite-scroll {
171  height: 60px;
172  width: 100%;
173  display: block;
174
175  @include display-flex();
176  @include flex-direction(row);
177  @include justify-content(center);
178  @include align-items(center);
179
180  .icon {
181    color: #666666;
182    font-size: 30px;
183    color: $scroll-refresh-icon-color;
184  }
185  &:not(.active){
186    .spinner,
187    .icon:before{
188      display:none;
189    }
190  }
191}
192
193.overflow-scroll {
194  overflow-x: hidden;
195  overflow-y: scroll;
196  -webkit-overflow-scrolling: touch;
197
198  // Make sure the scrollbar doesn't take up layout space on edge
199  -ms-overflow-style: -ms-autohiding-scrollbar;
200
201  top: 0;
202  right: 0;
203  bottom: 0;
204  left: 0;
205  position: absolute;
206
207  &.pane {
208    overflow-x: hidden;
209    overflow-y: scroll;
210  }
211
212  .scroll {
213    position: static;
214    height: 100%;
215    -webkit-transform: translate3d(0, 0, 0);   // fix iOS bug where relative children of scroller disapear while scrolling.  see: http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela
216  }
217}
218
219
220// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
221// Note: For these to work, content must come after both bars in the markup
222/* If you change these, change platform.scss as well */
223.has-header {
224  top: $bar-height;
225}
226// Force no header
227.no-header {
228  top: 0;
229}
230
231.has-subheader {
232  top: $bar-height + $bar-subheader-height;
233}
234.has-tabs-top {
235  top: $bar-height + $tabs-height;
236}
237.has-header.has-subheader.has-tabs-top {
238  top: $bar-height + $bar-subheader-height + $tabs-height;
239}
240
241.has-footer {
242  bottom: $bar-footer-height;
243}
244.has-subfooter {
245  bottom: $bar-footer-height + $bar-subfooter-height;
246}
247
248.has-tabs,
249.bar-footer.has-tabs {
250  bottom: $tabs-height;
251  &.pane{
252    bottom: $tabs-height;
253    height:auto;
254  }
255}
256
257.bar-subfooter.has-tabs {
258  bottom: $tabs-height + $bar-footer-height;
259}
260
261.has-footer.has-tabs {
262  bottom: $tabs-height + $bar-footer-height;
263}
264
265// A full screen section with a solid background
266.pane {
267  @include translate3d(0,0,0);
268  @include transition-duration(0);
269  z-index: $z-index-pane;
270}
271.view {
272  z-index: $z-index-view;
273}
274.pane,
275.view {
276  position: absolute;
277  top: 0;
278  right: 0;
279  bottom: 0;
280  left: 0;
281  width: 100%;
282  height: 100%;
283  background-color: $base-background-color;
284  overflow: hidden;
285}
286.view-container {
287  position: absolute;
288  display: block;
289  width: 100%;
290  height: 100%;
291}