1
  2/**
  3 * Utility Classes
  4 * --------------------------------------------------
  5 */
  6
  7.hide {
  8  display: none;
  9}
 10.opacity-hide {
 11  opacity: 0;
 12}
 13.grade-b .opacity-hide,
 14.grade-c .opacity-hide {
 15  opacity: 1;
 16  display: none;
 17}
 18.show {
 19  display: block;
 20}
 21.opacity-show {
 22  opacity: 1;
 23}
 24.invisible {
 25  visibility: hidden;
 26}
 27
 28.keyboard-open .hide-on-keyboard-open {
 29  display: none;
 30}
 31
 32.keyboard-open .tabs.hide-on-keyboard-open + .pane .has-tabs,
 33.keyboard-open .bar-footer.hide-on-keyboard-open + .pane .has-footer {
 34  bottom: 0;
 35}
 36
 37.inline {
 38  display: inline-block;
 39}
 40
 41.disable-pointer-events {
 42  pointer-events: none;
 43}
 44
 45.enable-pointer-events {
 46  pointer-events: auto;
 47}
 48
 49.disable-user-behavior {
 50  // used to prevent the browser from doing its native behavior. this doesnt
 51  // prevent the scrolling, but cancels the contextmenu, tap highlighting, etc
 52
 53  @include user-select(none);
 54  @include touch-callout(none);
 55  @include tap-highlight-transparent();
 56
 57  -webkit-user-drag: none;
 58
 59  -ms-touch-action: none;
 60  -ms-content-zooming: none;
 61}
 62
 63// Fill the screen to block clicks (a better pointer-events: none) for the body
 64// to avoid full-page reflows and paints which can cause flickers
 65.click-block {
 66  position: absolute;
 67  top: 0;
 68  right: 0;
 69  bottom: 0;
 70  left: 0;
 71  opacity: 0;
 72  z-index: $z-index-click-block;
 73  @include translate3d(0, 0, 0);
 74  overflow: hidden;
 75}
 76.click-block-hide {
 77  @include translate3d(-9999px, 0, 0);
 78}
 79
 80.no-resize {
 81  resize: none;
 82}
 83
 84.block {
 85  display: block;
 86  clear: both;
 87  &:after {
 88    display: block;
 89    visibility: hidden;
 90    clear: both;
 91    height: 0;
 92    content: ".";
 93  }
 94}
 95
 96.full-image {
 97  width: 100%;
 98}
 99
100.clearfix {
101  *zoom: 1;
102  &:before,
103  &:after {
104    display: table;
105    content: "";
106    // Fixes Opera/contenteditable bug:
107    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
108    line-height: 0;
109  }
110  &:after {
111    clear: both;
112  }
113}
114
115/**
116 * Content Padding
117 * --------------------------------------------------
118 */
119
120.padding {
121  padding: $content-padding;
122}
123
124.padding-top,
125.padding-vertical {
126  padding-top: $content-padding;
127}
128
129.padding-right,
130.padding-horizontal {
131  padding-right: $content-padding;
132}
133
134.padding-bottom,
135.padding-vertical {
136  padding-bottom: $content-padding;
137}
138
139.padding-left,
140.padding-horizontal {
141  padding-left: $content-padding;
142}
143
144
145/**
146 * Scrollable iFrames
147 * --------------------------------------------------
148 */
149
150.iframe-wrapper {
151  position: fixed;
152  -webkit-overflow-scrolling: touch;
153  overflow: scroll;
154
155  iframe {
156    height: 100%;
157    width: 100%;
158  }
159}
160
161
162/**
163 * Rounded
164 * --------------------------------------------------
165 */
166
167.rounded {
168  border-radius: $border-radius-base;
169}
170
171
172/**
173 * Utility Colors
174 * --------------------------------------------------
175 * Utility colors are added to help set a naming convention. You'll
176 * notice we purposely do not use words like "red" or "blue", but
177 * instead have colors which represent an emotion or generic theme.
178 */
179
180.light, a.light {
181  color: $light;
182}
183.light-bg {
184  background-color: $light;
185}
186.light-border {
187  border-color: $button-light-border;
188}
189
190.stable, a.stable {
191  color: $stable;
192}
193.stable-bg {
194  background-color: $stable;
195}
196.stable-border {
197  border-color: $button-stable-border;
198}
199
200.positive, a.positive {
201  color: $positive;
202}
203.positive-bg {
204  background-color: $positive;
205}
206.positive-border {
207  border-color: $button-positive-border;
208}
209
210.calm, a.calm {
211  color: $calm;
212}
213.calm-bg {
214  background-color: $calm;
215}
216.calm-border {
217  border-color: $button-calm-border;
218}
219
220.assertive, a.assertive {
221  color: $assertive;
222}
223.assertive-bg {
224  background-color: $assertive;
225}
226.assertive-border {
227  border-color: $button-assertive-border;
228}
229
230.balanced, a.balanced {
231  color: $balanced;
232}
233.balanced-bg {
234  background-color: $balanced;
235}
236.balanced-border {
237  border-color: $button-balanced-border;
238}
239
240.energized, a.energized {
241  color: $energized;
242}
243.energized-bg {
244  background-color: $energized;
245}
246.energized-border {
247  border-color: $button-energized-border;
248}
249
250.royal, a.royal {
251  color: $royal;
252}
253.royal-bg {
254  background-color: $royal;
255}
256.royal-border {
257  border-color: $button-royal-border;
258}
259
260.dark, a.dark {
261  color: $dark;
262}
263.dark-bg {
264  background-color: $dark;
265}
266.dark-border {
267  border-color: $button-dark-border;
268}
269
270[collection-repeat] {
271  /* Position is set by transforms */
272  left: 0 !important;
273  top: 0 !important;
274  position: absolute !important;
275  z-index: 1;
276}
277.collection-repeat-container {
278  position: relative;
279  z-index: 1; //make sure it's above the after-container
280}
281.collection-repeat-after-container {
282  z-index: 0;
283  display: block;
284
285  /* when scrolling horizontally, make sure the after container doesn't take up 100% width */
286  &.horizontal {
287    display: inline-block;
288  }
289}
290
291// ng-show fix for windows phone
292// https://www.hoessl.eu/2014/12/on-using-the-ionic-framework-for-windows-phone-8-1-apps/
293[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak,
294.x-ng-cloak, .ng-hide:not(.ng-hide-animate) {
295  display: none !important;
296}