Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

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