arnaucube
arnaucube/commonroutesServerPublic Self-hosted repository
commonroutesServer/app/www/lib/ionic/scss/_variables.scss
app/www/lib/ionic/scss/_variables.scssRaw
  1
  2// Colors
  3// -------------------------------
  4
  5$light:                           #fff !default;
  6$stable:                          #f8f8f8 !default;
  7$positive:                        #387ef5 !default;
  8$calm:                            #11c1f3 !default;
  9$balanced:                        #33cd5f !default;
 10$energized:                       #ffc900 !default;
 11$assertive:                       #ef473a !default;
 12$royal:                           #886aea !default;
 13$dark:                            #444 !default;
 14
 15
 16// Base
 17// -------------------------------
 18
 19$font-family-sans-serif:           '-apple-system', "Helvetica Neue", "Roboto", "Segoe UI", sans-serif !default;
 20
 21$font-family-light-sans-serif:    '-apple-system', "HelveticaNeue-Light", "Roboto-Light", "Segoe UI-Light", sans-serif-light !default;
 22$font-family-serif:               serif !default;
 23$font-family-monospace:           monospace !default;
 24
 25$font-family-base:                $font-family-sans-serif !default;
 26$font-size-base:                  14px !default;
 27$font-size-large:                 18px !default;
 28$font-size-small:                 11px !default;
 29
 30$line-height-base:                1.428571429 !default; // 20/14
 31$line-height-computed:            floor($font-size-base * $line-height-base) !default; // ~20px
 32$line-height-large:               1.33 !default;
 33$line-height-small:               1.5 !default;
 34
 35$headings-font-family:            $font-family-base !default;
 36$headings-font-weight:            500 !default;
 37$headings-line-height:            1.2 !default;
 38
 39$base-background-color:           #fff !default;
 40$base-color:                      #000 !default;
 41
 42$link-color:                      $positive !default;
 43$link-hover-color:                darken($link-color, 15%) !default;
 44
 45$content-padding:                 10px !default;
 46
 47$padding-base-vertical:           6px !default;
 48$padding-base-horizontal:         12px !default;
 49
 50$padding-large-vertical:          10px !default;
 51$padding-large-horizontal:        16px !default;
 52
 53$padding-small-vertical:          5px !default;
 54$padding-small-horizontal:        10px !default;
 55
 56$border-radius-base:              4px !default;
 57$border-radius-large:             6px !default;
 58$border-radius-small:             3px !default;
 59
 60
 61// Content
 62// -------------------------------
 63
 64$scroll-refresh-icon-color:       #666666 !default;
 65
 66
 67// Buttons
 68// -------------------------------
 69
 70$button-color:                    #222 !default;
 71$button-block-margin:             10px !default;
 72$button-clear-padding:            6px !default;
 73$button-border-radius:            4px !default;
 74$button-border-width:             1px !default;
 75
 76$button-font-size:                16px !default;
 77$button-height:                   42px !default;
 78$button-padding:                  12px !default;
 79$button-icon-size:                24px !default;
 80
 81$button-large-font-size:          20px !default;
 82$button-large-height:             54px !default;
 83$button-large-padding:            16px !default;
 84$button-large-icon-size:          32px !default;
 85
 86$button-small-font-size:          12px !default;
 87$button-small-height:             28px !default;
 88$button-small-padding:            4px !default;
 89$button-small-icon-size:          16px !default;
 90
 91$button-bar-button-font-size:     13px !default;
 92$button-bar-button-height:        32px !default;
 93$button-bar-button-padding:       8px !default;
 94$button-bar-button-icon-size:     20px !default;
 95
 96$button-default-border:       transparent;
 97$button-default-active-border:null;
 98
 99$button-light-bg:                 $light !default;
100$button-light-text:               #444 !default;
101$button-light-border:             #ddd !default;
102$button-light-active-bg:          #fafafa !default;
103$button-light-active-border:      #ccc !default;
104
105$button-stable-bg:                $stable !default;
106$button-stable-text:              #444 !default;
107$button-stable-border:            #b2b2b2 !default;
108$button-stable-active-bg:         #e5e5e5 !default;
109$button-stable-active-border:     #a2a2a2 !default;
110
111$button-positive-bg:              $positive !default;
112$button-positive-text:            #fff !default;
113$button-positive-border:          darken($positive, 10%) !default;
114$button-positive-active-bg:       darken($positive, 10%) !default;
115$button-positive-active-border:   darken($positive, 10%) !default;
116
117$button-calm-bg:                  $calm !default;
118$button-calm-text:                #fff !default;
119$button-calm-border:              darken($calm, 10%) !default;
120$button-calm-active-bg:           darken($calm, 10%) !default;
121$button-calm-active-border:       darken($calm, 10%) !default;
122
123$button-assertive-bg:             $assertive !default;
124$button-assertive-text:           #fff !default;
125$button-assertive-border:         darken($assertive, 10%) !default;
126$button-assertive-active-bg:      darken($assertive, 10%) !default;
127$button-assertive-active-border:  darken($assertive, 10%) !default;
128
129$button-balanced-bg:              $balanced !default;
130$button-balanced-text:            #fff !default;
131$button-balanced-border:          darken($balanced, 10%) !default;
132$button-balanced-active-bg:       darken($balanced, 10%) !default;
133$button-balanced-active-border:   darken($balanced, 10%) !default;
134
135$button-energized-bg:             $energized !default;
136$button-energized-text:           #fff !default;
137$button-energized-border:         darken($energized, 5%) !default;
138$button-energized-active-bg:      darken($energized, 5%) !default;
139$button-energized-active-border:  darken($energized, 5%) !default;
140
141$button-royal-bg:                 $royal !default;
142$button-royal-text:               #fff !default;
143$button-royal-border:             darken($royal, 8%) !default;
144$button-royal-active-bg:          darken($royal, 8%) !default;
145$button-royal-active-border:      darken($royal, 8%) !default;
146
147$button-dark-bg:                  $dark !default;
148$button-dark-text:                #fff !default;
149$button-dark-border:              #111 !default;
150$button-dark-active-bg:           #262626 !default;
151$button-dark-active-border:       #000 !default;
152
153$button-default-bg:               $button-stable-bg !default;
154$button-default-text:             $button-stable-text !default;
155$button-default-border:           $button-stable-border !default;
156$button-default-active-bg:        $button-stable-active-bg !default;
157$button-default-active-border:    $button-stable-active-border !default;
158
159
160// Bars
161// -------------------------------
162
163$bar-height:                      44px !default;
164$bar-title-font-size:             17px !default;
165$bar-padding-portrait:            5px !default;
166$bar-padding-landscape:           5px !default;
167$bar-transparency:                1 !default;
168
169$bar-footer-height:               $bar-height !default;
170$bar-subheader-height:            $bar-height !default;
171$bar-subfooter-height:            $bar-height !default;
172
173$bar-light-bg:                    rgba($button-light-bg, $bar-transparency) !default;
174$bar-light-text:                  $button-light-text !default;
175$bar-light-border:                $button-light-border !default;
176$bar-light-active-bg:             $button-light-active-bg !default;
177$bar-light-active-border:         $button-light-active-border !default;
178
179$bar-stable-bg:                   rgba($button-stable-bg, $bar-transparency) !default;
180$bar-stable-text:                 $button-stable-text !default;
181$bar-stable-border:               $button-stable-border !default;
182$bar-stable-active-bg:            $button-stable-active-bg !default;
183$bar-stable-active-border:        $button-stable-active-border !default;
184
185$bar-positive-bg:                 rgba($button-positive-bg, $bar-transparency) !default;
186$bar-positive-text:               $button-positive-text !default;
187$bar-positive-border:             $button-positive-border !default;
188$bar-positive-active-bg:          $button-positive-active-bg !default;
189$bar-positive-active-border:      $button-positive-active-border !default;
190
191$bar-calm-bg:                     rgba($button-calm-bg, $bar-transparency) !default;
192$bar-calm-text:                   $button-calm-text !default;
193$bar-calm-border:                 $button-calm-border !default;
194$bar-calm-active-bg:              $button-calm-active-bg !default;
195$bar-calm-active-border:          $button-calm-active-border !default;
196
197$bar-assertive-bg:                rgba($button-assertive-bg, $bar-transparency) !default;
198$bar-assertive-text:              $button-assertive-text !default;
199$bar-assertive-border:            $button-assertive-border !default;
200$bar-assertive-active-bg:         $button-assertive-active-bg !default;
201$bar-assertive-active-border:     $button-assertive-active-border !default;
202
203$bar-balanced-bg:                 rgba($button-balanced-bg, $bar-transparency) !default;
204$bar-balanced-text:               $button-balanced-text !default;
205$bar-balanced-border:             $button-balanced-border !default;
206$bar-balanced-active-bg:          $button-balanced-active-bg !default;
207$bar-balanced-active-border:      $button-balanced-active-border !default;
208
209$bar-energized-bg:                rgba($button-energized-bg, $bar-transparency) !default;
210$bar-energized-text:              $button-energized-text !default;
211$bar-energized-border:            $button-energized-border !default;
212$bar-energized-active-bg:         $button-energized-active-bg !default;
213$bar-energized-active-border:     $button-energized-active-border !default;
214
215$bar-royal-bg:                    rgba($button-royal-bg, $bar-transparency) !default;
216$bar-royal-text:                  $button-royal-text !default;
217$bar-royal-border:                $button-royal-border !default;
218$bar-royal-active-bg:             $button-royal-active-bg !default;
219$bar-royal-active-border:         $button-royal-active-border !default;
220
221$bar-dark-bg:                     rgba($button-dark-bg, $bar-transparency) !default;
222$bar-dark-text:                   $button-dark-text !default;
223$bar-dark-border:                 $button-dark-border !default;
224$bar-dark-active-bg:              $button-dark-active-bg !default;
225$bar-dark-active-border:          $button-dark-active-border !default;
226
227$bar-default-bg:                  $bar-light-bg !default;
228$bar-default-text:                $bar-light-text !default;
229$bar-default-border:              $bar-light-border !default;
230$bar-default-active-bg:           $bar-light-active-bg !default;
231$bar-default-active-border:       $bar-light-active-border !default;
232
233
234// Tabs
235// -------------------------------
236
237$tabs-height:                     49px !default;
238$tabs-text-font-size:             14px !default;
239$tabs-text-font-size-side-icon:   10px !default;
240$tabs-icon-size:                  32px !default;
241$tabs-badge-padding:              1px 6px !default;
242$tabs-badge-font-size:            12px !default;
243
244$tabs-light-bg:                   $button-light-bg !default;
245$tabs-light-border:               $button-light-border !default;
246$tabs-light-text:                 $button-light-text !default;
247
248$tabs-stable-bg:                  $button-stable-bg !default;
249$tabs-stable-border:              $button-stable-border !default;
250$tabs-stable-text:                $button-stable-text !default;
251
252$tabs-positive-bg:                $button-positive-bg !default;
253$tabs-positive-border:            $button-positive-border !default;
254$tabs-positive-text:              $button-positive-text !default;
255
256$tabs-calm-bg:                    $button-calm-bg !default;
257$tabs-calm-border:                $button-calm-border !default;
258$tabs-calm-text:                  $button-calm-text !default;
259
260$tabs-assertive-bg:               $button-assertive-bg !default;
261$tabs-assertive-border:           $button-assertive-border !default;
262$tabs-assertive-text:             $button-assertive-text !default;
263
264$tabs-balanced-bg:                $button-balanced-bg !default;
265$tabs-balanced-border:            $button-balanced-border !default;
266$tabs-balanced-text:              $button-balanced-text !default;
267
268$tabs-energized-bg:               $button-energized-bg !default;
269$tabs-energized-border:           $button-energized-border !default;
270$tabs-energized-text:             $button-energized-text !default;
271
272$tabs-royal-bg:                   $button-royal-bg !default;
273$tabs-royal-border:               $button-royal-border !default;
274$tabs-royal-text:                 $button-royal-text !default;
275
276$tabs-dark-bg:                    $button-dark-bg !default;
277$tabs-dark-border:                $button-dark-border !default;
278$tabs-dark-text:                  $button-dark-text !default;
279
280$tabs-default-bg:                 $tabs-stable-bg !default;
281$tabs-default-border:             $tabs-stable-border !default;
282$tabs-default-text:               $tabs-stable-text !default;
283
284$tab-item-max-width:              150px !default;
285
286$tabs-off-opacity:                0.4 !default;
287$tabs-striped-off-opacity:        $tabs-off-opacity !default;
288$tabs-striped-off-color:          #000 !default;
289$tabs-striped-border-width:       2px !default;
290
291
292// Items
293// -------------------------------
294
295$item-font-size:                  16px !default;
296$item-border-width:               1px !default;
297$item-padding:                    16px !default;
298
299$item-button-font-size:           18px !default;
300$item-button-line-height:         32px !default;
301$item-icon-font-size:             32px !default;
302$item-icon-fill-font-size:        28px !default;
303
304$item-icon-accessory-color:       #ccc !default;
305$item-icon-accessory-font-size:   16px !default;
306
307$item-avatar-width:               40px !default;
308$item-avatar-height:              40px !default;
309$item-avatar-border-radius:       50% !default;
310
311$item-thumbnail-width:            80px !default;
312$item-thumbnail-height:           80px !default;
313$item-thumbnail-margin:           10px !default;
314
315$item-divider-bg:                 #f5f5f5 !default;
316$item-divider-color:              #222 !default;
317$item-divider-padding:            5px 15px !default;
318
319$item-light-bg:                   $button-light-bg !default;
320$item-light-border:               $button-light-border !default;
321$item-light-text:                 $button-light-text !default;
322$item-light-active-bg:            $button-light-active-bg !default;
323$item-light-active-border:        $button-light-active-border !default;
324
325$item-stable-bg:                  $button-stable-bg !default;
326$item-stable-border:              $button-stable-border !default;
327$item-stable-text:                $button-stable-text !default;
328$item-stable-active-bg:           $button-stable-active-bg !default;
329$item-stable-active-border:       $button-stable-active-border !default;
330
331$item-positive-bg:                $button-positive-bg !default;
332$item-positive-border:            $button-positive-border !default;
333$item-positive-text:              $button-positive-text !default;
334$item-positive-active-bg:         $button-positive-active-bg !default;
335$item-positive-active-border:     $button-positive-active-border !default;
336
337$item-calm-bg:                    $button-calm-bg !default;
338$item-calm-border:                $button-calm-border !default;
339$item-calm-text:                  $button-calm-text !default;
340$item-calm-active-bg:             $button-calm-active-bg !default;
341$item-calm-active-border:         $button-calm-active-border !default;
342
343$item-assertive-bg:               $button-assertive-bg !default;
344$item-assertive-border:           $button-assertive-border !default;
345$item-assertive-text:             $button-assertive-text !default;
346$item-assertive-active-bg:        $button-assertive-active-bg !default;
347$item-assertive-active-border:    $button-assertive-active-border !default;
348
349$item-balanced-bg:                $button-balanced-bg !default;
350$item-balanced-border:            $button-balanced-border !default;
351$item-balanced-text:              $button-balanced-text !default;
352$item-balanced-active-bg:         $button-balanced-active-bg !default;
353$item-balanced-active-border:     $button-balanced-active-border !default;
354
355$item-energized-bg:               $button-energized-bg !default;
356$item-energized-border:           $button-energized-border !default;
357$item-energized-text:             $button-energized-text !default;
358$item-energized-active-bg:        $button-energized-active-bg !default;
359$item-energized-active-border:    $button-energized-active-border !default;
360
361$item-royal-bg:                   $button-royal-bg !default;
362$item-royal-border:               $button-royal-border !default;
363$item-royal-text:                 $button-royal-text !default;
364$item-royal-active-bg:            $button-royal-active-bg !default;
365$item-royal-active-border:        $button-royal-active-border !default;
366
367$item-dark-bg:                    $button-dark-bg !default;
368$item-dark-border:                $button-dark-border !default;
369$item-dark-text:                  $button-dark-text !default;
370$item-dark-active-bg:             $button-dark-active-bg !default;
371$item-dark-active-border:         $button-dark-active-border !default;
372
373$item-default-bg:                 $item-light-bg !default;
374$item-default-border:             $item-light-border !default;
375$item-default-text:               $item-light-text !default;
376$item-default-active-bg:          #D9D9D9 !default;
377$item-default-active-border:      $item-light-active-border !default;
378
379
380// Item Editing
381// -------------------------------
382
383$item-edit-transition-duration:   250ms !default;
384$item-edit-transition-function:   ease-in-out !default;
385
386$item-remove-transition-duration:   300ms !default;
387$item-remove-transition-function:   ease-in !default;
388$item-remove-descendents-transition-function:  cubic-bezier(.25,.81,.24,1) !default;
389
390$item-left-edit-left:             8px !default;  // item's left side edit's "left" property
391
392$item-right-edit-open-width:      50px !default;
393$item-left-edit-open-width:       50px !default;
394
395$item-delete-icon-size:           24px !default;
396$item-delete-icon-color:          $assertive !default;
397
398$item-reorder-icon-size:          32px !default;
399$item-reorder-icon-color:         $dark !default;
400
401
402// Lists
403// -------------------------------
404
405$list-header-bg:                  transparent !default;
406$list-header-color:               #222 !default;
407$list-header-padding:             5px 15px !default;
408$list-header-margin-top:          20px !default;
409
410
411// Cards
412// -------------------------------
413
414$card-header-bg:                  #F5F5F5 !default;
415$card-body-bg:                    #fff !default;
416$card-footer-bg:                  #F5F5F5 !default;
417
418$card-padding:                    10px !default;
419$card-border-width:               1px !default;
420
421$card-border-color:               #ccc !default;
422$card-border-radius:              2px !default;
423$card-box-shadow:                 0 1px 3px rgba(0, 0, 0, .3) !default;
424
425
426// Forms
427// -------------------------------
428
429$input-height-base:               ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
430$input-height-large:              (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
431$input-height-small:              (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
432
433$input-bg:                        $light !default;
434$input-bg-disabled:               $stable !default;
435
436$input-color:                     #111 !default;
437$input-border:                    $item-default-border !default;
438$input-border-width:              $item-border-width !default;
439$input-label-color:               $dark !default;
440$input-color-placeholder:         lighten($dark, 40%) !default;
441
442
443// Progress
444// -------------------------------
445
446$progress-width:                  100% !default;
447$progress-margin:                 15px auto !default;
448
449
450// Toggle
451// -------------------------------
452
453$toggle-width:                    51px !default;
454$toggle-height:                   31px !default;
455$toggle-border-width:             2px !default;
456$toggle-border-radius:            20px !default;
457
458$toggle-handle-width:             $toggle-height - ($toggle-border-width * 2) !default;
459$toggle-handle-height:            $toggle-handle-width !default;
460$toggle-handle-radius:            $toggle-handle-width !default;
461$toggle-handle-dragging-bg-color: darken(#fff, 5%) !default;
462
463$toggle-off-bg-color:             #fff !default;
464$toggle-off-border-color:         #e6e6e6 !default;
465
466$toggle-on-light-bg:              $button-light-border !default;
467$toggle-on-light-border:          $toggle-on-light-bg !default;
468$toggle-on-stable-bg:             $button-stable-border !default;
469$toggle-on-stable-border:         $toggle-on-stable-bg !default;
470$toggle-on-positive-bg:           $positive !default;
471$toggle-on-positive-border:       $toggle-on-positive-bg !default;
472$toggle-on-calm-bg:               $calm !default;
473$toggle-on-calm-border:           $toggle-on-calm-bg !default;
474$toggle-on-assertive-bg:          $assertive !default;
475$toggle-on-assertive-border:      $toggle-on-assertive-bg !default;
476$toggle-on-balanced-bg:           $balanced !default;
477$toggle-on-balanced-border:       $toggle-on-balanced-bg !default;
478$toggle-on-energized-bg:          $energized !default;
479$toggle-on-energized-border:      $toggle-on-energized-bg !default;
480$toggle-on-royal-bg:              $royal !default;
481$toggle-on-royal-border:          $toggle-on-royal-bg !default;
482$toggle-on-dark-bg:               $dark !default;
483$toggle-on-dark-border:           $toggle-on-dark-bg !default;
484$toggle-on-default-bg:            #4cd964 !default;
485$toggle-on-default-border:        $toggle-on-default-bg !default;
486
487$toggle-handle-off-bg-color:      $light !default;
488$toggle-handle-on-bg-color:       $toggle-handle-off-bg-color !default;
489
490$toggle-transition-duration:      .3s !default;
491
492$toggle-hit-area-expansion:   5px;
493
494
495// Checkbox
496// -------------------------------
497
498$checkbox-width:                  28px !default;
499$checkbox-height:                 28px !default;
500$checkbox-border-radius:          $checkbox-width !default;
501$checkbox-border-width:           1px !default;
502
503$checkbox-off-bg-color:           #fff !default;
504$checkbox-off-border-light:       $button-light-border !default;
505$checkbox-on-bg-light:            $button-light-border !default;
506$checkbox-off-border-stable:      $button-stable-border !default;
507$checkbox-on-bg-stable:           $button-stable-border !default;
508$checkbox-off-border-positive:    $positive !default;
509$checkbox-on-bg-positive:         $positive !default;
510$checkbox-off-border-calm:        $calm !default;
511$checkbox-on-bg-calm:             $calm !default;
512$checkbox-off-border-assertive:   $assertive !default;
513$checkbox-on-bg-assertive:        $assertive !default;
514$checkbox-off-border-balanced:    $balanced !default;
515$checkbox-on-bg-balanced:         $balanced !default;
516$checkbox-off-border-energized:   $energized !default;
517$checkbox-on-bg-energized:        $energized !default;
518$checkbox-off-border-royal:       $royal !default;
519$checkbox-on-bg-royal:            $royal !default;
520$checkbox-off-border-dark:        $dark !default;
521$checkbox-on-bg-dark:             $dark !default;
522$checkbox-off-border-default:     $button-light-border !default;
523$checkbox-on-bg-default:          $positive !default;
524$checkbox-on-border-default:      $positive !default;
525
526$checkbox-check-width:            1px !default;
527$checkbox-check-color:            #fff !default;
528
529
530// Range
531// -------------------------------
532
533$range-track-height:              2px !default;
534$range-slider-width:              28px !default;
535$range-slider-height:             28px !default;
536$range-slider-border-radius:      50% !default;
537$range-icon-size:                 24px !default;
538$range-slider-box-shadow:         0 0 2px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,0.2) !default;
539
540$range-light-track-bg:            $button-light-border !default;
541$range-stable-track-bg:           $button-stable-border !default;
542$range-positive-track-bg:         $button-positive-bg !default;
543$range-calm-track-bg:             $button-calm-bg !default;
544$range-balanced-track-bg:         $button-balanced-bg !default;
545$range-assertive-track-bg:        $button-assertive-bg !default;
546$range-energized-track-bg:        $button-energized-bg !default;
547$range-royal-track-bg:            $button-royal-bg !default;
548$range-dark-track-bg:             $button-dark-bg !default;
549$range-default-track-bg:          #ccc !default;
550
551
552// Menus
553// -------------------------------
554
555$menu-bg:                         #fff !default;
556$menu-width:                      275px !default;
557$menu-animation-speed:            200ms !default;
558
559$menu-side-shadow:                -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !default;
560
561
562// Modals
563// -------------------------------
564
565$modal-bg-color:                  #fff !default;
566$modal-backdrop-bg-active:        #000 !default;
567$modal-backdrop-bg-inactive:      rgba(0,0,0,0) !default;
568
569$modal-inset-mode-break-point:    680px !default;  // @media min-width
570$modal-inset-mode-top:            20% !default;
571$modal-inset-mode-right:          20% !default;
572$modal-inset-mode-bottom:         20% !default;
573$modal-inset-mode-left:           20% !default;
574$modal-inset-mode-min-height:     240px !default;
575
576
577// Popovers
578// -------------------------------
579
580$popover-bg-color:                $light !default;
581$popover-backdrop-bg-active:      rgba(0,0,0,0.1) !default;
582$popover-backdrop-bg-inactive:    rgba(0,0,0,0) !default;
583$popover-width:                   220px !default;
584$popover-height:                  280px !default;
585$popover-large-break-point:       680px !default;
586$popover-large-width:             360px !default;
587
588$popover-box-shadow:              0 1px 3px rgba(0,0,0,0.4) !default;
589$popover-border-radius:           2px !default;
590
591$popover-box-shadow-ios:          0 0 40px rgba(0,0,0,0.08) !default;
592$popover-border-radius-ios:       10px !default;
593
594$popover-bg-color-android:        #fafafa !default;
595$popover-box-shadow-android:      0 2px 6px rgba(0,0,0,0.35) !default;
596
597
598// Grids
599// -------------------------------
600
601$grid-padding-width:              10px !default;
602$grid-responsive-sm-break:        567px !default;  // smaller than landscape phone
603$grid-responsive-md-break:        767px !default;  // smaller than portrait tablet
604$grid-responsive-lg-break:        1023px !default; // smaller than landscape tablet
605
606
607// Action Sheets
608// -------------------------------
609
610$sheet-margin:                    8px !default;
611$sheet-border-radius:             4px !default;
612
613$sheet-options-bg-color:          #f1f2f3 !default;
614$sheet-options-bg-active-color:   #e4e5e7 !default;
615$sheet-options-text-color:        #007aff !default;
616$sheet-options-border-color:      #d1d3d6 !default;
617
618
619// Popups
620// -------------------------------
621
622$popup-width:                     250px !default;
623$popup-enter-animation:           superScaleIn !default;
624$popup-enter-animation-duration:  0.2s !default;
625$popup-leave-animation-duration:  0.1s !default;
626
627$popup-border-radius:             0px !default;
628$popup-background-color:          rgba(255,255,255,0.9) !default;
629
630$popup-button-border-radius:      2px !default;
631$popup-button-line-height:        20px !default;
632$popup-button-min-height:         45px !default;
633
634
635// Loading
636// -------------------------------
637
638$loading-text-color:              #fff !default;
639$loading-bg-color:                rgba(0,0,0,0.7) !default;
640$loading-padding:                 20px !default;
641$loading-border-radius:           5px !default;
642$loading-font-size:               15px !default;
643
644$loading-backdrop-fadein-duration:0.1s !default;
645$loading-backdrop-bg-color:       rgba(0,0,0,0.4) !default;
646
647
648// Badges
649// -------------------------------
650
651$badge-font-size:                 14px !default;
652$badge-line-height:               16px !default;
653$badge-font-weight:               bold !default;
654$badge-border-radius:             10px !default;
655
656$badge-light-bg:                  $button-light-bg !default;
657$badge-light-text:                $button-light-text !default;
658
659$badge-stable-bg:                 $button-stable-bg !default;
660$badge-stable-text:               $button-stable-text !default;
661
662$badge-positive-bg:               $button-positive-bg !default;
663$badge-positive-text:             $button-positive-text !default;
664
665$badge-calm-bg:                   $button-calm-bg !default;
666$badge-calm-text:                 $button-calm-text !default;
667
668$badge-balanced-bg:               $button-balanced-bg !default;
669$badge-balanced-text:             $button-balanced-text !default;
670
671$badge-assertive-bg:              $button-assertive-bg !default;
672$badge-assertive-text:            $button-assertive-text !default;
673
674$badge-energized-bg:              $button-energized-bg !default;
675$badge-energized-text:            $button-energized-text !default;
676
677$badge-royal-bg:                  $button-royal-bg !default;
678$badge-royal-text:                $button-royal-text !default;
679
680$badge-dark-bg:                   $button-dark-bg !default;
681$badge-dark-text:                 $button-dark-text !default;
682
683$badge-default-bg:                transparent !default;
684$badge-default-text:              #AAAAAA !default;
685
686
687// Spinners
688// -------------------------------
689
690$spinner-width:                   28px !default;
691$spinner-height:                  28px !default;
692
693$spinner-light-stroke:            $light !default;
694$spinner-light-fill:              $light !default;
695
696$spinner-stable-stroke:           $stable !default;
697$spinner-stable-fill:             $stable !default;
698
699$spinner-positive-stroke:         $positive !default;
700$spinner-positive-fill:           $positive !default;
701
702$spinner-calm-stroke:             $calm !default;
703$spinner-calm-fill:               $calm !default;
704
705$spinner-balanced-stroke:         $balanced !default;
706$spinner-balanced-fill:           $balanced !default;
707
708$spinner-assertive-stroke:        $assertive !default;
709$spinner-assertive-fill:          $assertive !default;
710
711$spinner-energized-stroke:        $energized !default;
712$spinner-energized-fill:          $energized !default;
713
714$spinner-royal-stroke:            $royal !default;
715$spinner-royal-fill:              $royal !default;
716
717$spinner-dark-stroke:             $dark !default;
718$spinner-dark-fill:               $dark !default;
719
720$spinner-default-stroke:          $dark !default;
721$spinner-default-fill:            $dark !default;
722
723
724// Z-Indexes
725// -------------------------------
726
727$z-index-bar-title:               0 !default;
728$z-index-item-drag:               0 !default;
729$z-index-item-edit:               0 !default;
730$z-index-menu:                    0 !default;
731$z-index-badge:                   1 !default;
732$z-index-bar-button:              1 !default;
733$z-index-item-options:            1 !default;
734$z-index-pane:                    1 !default;
735$z-index-slider-pager:            1 !default;
736$z-index-view:                    1 !default;
737$z-index-view-below:              2 !default;
738$z-index-item:                    2 !default;
739$z-index-item-checkbox:           3 !default;
740$z-index-item-radio:              3 !default;
741$z-index-item-reorder:            3 !default;
742$z-index-item-toggle:             3 !default;
743$z-index-view-above:              3 !default;
744$z-index-tabs:                    5 !default;
745$z-index-item-reordering:         9 !default;
746$z-index-bar:                     9 !default;
747$z-index-bar-above:               10 !default;
748$z-index-menu-scroll-content:     10 !default;
749$z-index-modal:                   10 !default;
750$z-index-popover:                 10 !default;
751$z-index-action-sheet:            11 !default;
752$z-index-backdrop:                11 !default;
753$z-index-menu-bar-header:         11 !default;
754$z-index-scroll-content-false:    11 !default;
755$z-index-popup:                   12 !default;
756$z-index-loading:                 13 !default;
757$z-index-scroll-bar:              9999 !default;
758$z-index-click-block:             99999 !default;
759
760
761// Platform
762// -------------------------------
763
764$ios-statusbar-height:           20px !default;