commonroutesServer/app/www/lib/ionic/scss/_mixins.scss
app/www/lib/ionic/scss/_mixins.scssRaw
1
2// Button Mixins
3// --------------------------------------------------
4
5@mixin button-style($bg-color, $border-color, $active-bg-color, $active-border-color, $color) {
6 border-color: $border-color;
7 background-color: $bg-color;
8 color: $color;
9
10 // Give desktop users something to play with
11 &:hover {
12 color: $color;
13 text-decoration: none;
14 }
15 &.active,
16 &.activated {
17 @if $active-border-color != ""{
18 border-color: $active-border-color;
19 }
20 background-color: $active-bg-color;
21 //box-shadow: inset 0 1px 4px rgba(0,0,0,0.1);
22 }
23}
24
25@mixin button-clear($color, $font-size:"") {
26 &.button-clear {
27 border-color: transparent;
28 background: none;
29 box-shadow: none;
30 color: $color;
31
32 @if $font-size != "" {
33 font-size: $font-size;
34 }
35 }
36 &.button-icon {
37 border-color: transparent;
38 background: none;
39 }
40}
41
42@mixin button-outline($color, $text-color:"") {
43 &.button-outline {
44 border-color: $color;
45 background: transparent;
46 @if $text-color == "" {
47 $text-color: $color;
48 }
49 color: $text-color;
50 &.active,
51 &.activated {
52 background-color: $color;
53 box-shadow: none;
54 color: #fff;
55 }
56 }
57}
58
59
60// Bar Mixins
61// --------------------------------------------------
62
63@mixin bar-style($bg-color, $border-color, $color) {
64 border-color: $border-color;
65 background-color: $bg-color;
66 background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
67 color: $color;
68
69 .title {
70 color: $color;
71 }
72}
73
74
75// Tab Mixins
76// --------------------------------------------------
77
78@mixin tab-style($bg-color, $border-color, $color) {
79 border-color: $border-color;
80 background-color: $bg-color;
81 background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
82 color: $color;
83}
84
85@mixin tab-badge-style($bg-color, $color) {
86 .tab-item .badge {
87 background-color: $bg-color;
88 color: $color;
89 }
90}
91
92
93// Item Mixins
94// --------------------------------------------------
95
96@mixin item-style($bg-color, $border-color, $color) {
97 border-color: $border-color;
98 background-color: $bg-color;
99 color: $color;
100}
101
102@mixin item-active-style($active-bg-color, $active-border-color) {
103 border-color: $active-border-color;
104 background-color: $active-bg-color;
105 &.item-complex > .item-content {
106 border-color: $active-border-color;
107 background-color: $active-bg-color;
108 }
109}
110
111
112// Badge Mixins
113// --------------------------------------------------
114
115@mixin badge-style($bg-color, $color) {
116 background-color: $bg-color;
117 color: $color;
118}
119
120
121// Range Mixins
122// --------------------------------------------------
123
124@mixin range-style($track-bg-color) {
125 &::-webkit-slider-thumb:before {
126 background: $track-bg-color;
127 }
128 &::-ms-fill-lower{
129 background: $track-bg-color;
130 }
131}
132
133
134// Checkbox Mixins
135// --------------------------------------------------
136
137@mixin checkbox-style($off-border-color, $on-bg-color, $on-border-color) {
138 & input:before,
139 & .checkbox-icon:before {
140 border-color: $off-border-color;
141 }
142
143 // what the background looks like when its checked
144 & input:checked:before,
145 & input:checked + .checkbox-icon:before {
146 background: $on-bg-color;
147 border-color: $on-border-color;
148 }
149}
150
151
152// Toggle Mixins
153// --------------------------------------------------
154
155@mixin toggle-style($on-border-color, $on-bg-color) {
156 // the track when the toggle is "on"
157 & input:checked + .track {
158 border-color: $on-border-color;
159 background-color: $on-bg-color;
160 }
161}
162@mixin toggle-small-style($on-bg-color) {
163 // the track when the toggle is "on"
164 & input:checked + .track {
165 background-color: rgba($on-bg-color, .5);
166 }
167 & input:checked + .track .handle {
168 background-color: $on-bg-color;
169 }
170}
171
172
173// Clearfix
174// --------------------------------------------------
175
176@mixin clearfix {
177 *zoom: 1;
178 &:before,
179 &:after {
180 display: table;
181 content: "";
182 line-height: 0;
183 }
184 &:after {
185 clear: both;
186 }
187}
188
189
190// Placeholder text
191// --------------------------------------------------
192
193@mixin placeholder($color: $input-color-placeholder, $text-indent: 0) {
194 &::-moz-placeholder { // Firefox 19+
195 color: $color;
196 }
197 &:-ms-input-placeholder {
198 color: $color;
199 }
200 &::-webkit-input-placeholder {
201 color: $color;
202 // Safari placeholder margin issue
203 text-indent: $text-indent;
204 }
205}
206
207
208// Text Mixins
209// --------------------------------------------------
210
211@mixin text-size-adjust($value: none) {
212 -webkit-text-size-adjust: $value;
213 -moz-text-size-adjust: $value;
214 text-size-adjust: $value;
215}
216@mixin tap-highlight-transparent() {
217 -webkit-tap-highlight-color: rgba(0,0,0,0);
218 -webkit-tap-highlight-color: transparent; // For some Androids
219}
220@mixin touch-callout($value: none) {
221 -webkit-touch-callout: $value;
222}
223
224
225// Font Mixins
226// --------------------------------------------------
227
228@mixin font-family-serif() {
229 font-family: $serif-font-family;
230}
231@mixin font-family-sans-serif() {
232 font-family: $sans-font-family;
233}
234@mixin font-family-monospace() {
235 font-family: $mono-font-family;
236}
237@mixin font-shorthand($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
238 font-weight: $weight;
239 font-size: $size;
240 line-height: $line-height;
241}
242@mixin font-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
243 @include font-family-serif();
244 @include font-shorthand($size, $weight, $line-height);
245}
246@mixin font-sans-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
247 @include font-family-sans-serif();
248 @include font-shorthand($size, $weight, $line-height);
249}
250@mixin font-monospace($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
251 @include font-family-monospace();
252 @include font-shorthand($size, $weight, $line-height);
253}
254@mixin font-smoothing($font-smoothing) {
255 -webkit-font-smoothing: $font-smoothing;
256 font-smoothing: $font-smoothing;
257}
258
259
260// Appearance
261// --------------------------------------------------
262
263@mixin appearance($val) {
264 -webkit-appearance: $val;
265 -moz-appearance: $val;
266 appearance: $val;
267}
268
269
270// Border Radius Mixins
271// --------------------------------------------------
272
273@mixin border-radius($radius) {
274 -webkit-border-radius: $radius;
275 border-radius: $radius;
276}
277
278// Single Corner Border Radius
279@mixin border-top-left-radius($radius) {
280 -webkit-border-top-left-radius: $radius;
281 border-top-left-radius: $radius;
282}
283@mixin border-top-right-radius($radius) {
284 -webkit-border-top-right-radius: $radius;
285 border-top-right-radius: $radius;
286}
287@mixin border-bottom-right-radius($radius) {
288 -webkit-border-bottom-right-radius: $radius;
289 border-bottom-right-radius: $radius;
290}
291@mixin border-bottom-left-radius($radius) {
292 -webkit-border-bottom-left-radius: $radius;
293 border-bottom-left-radius: $radius;
294}
295
296// Single Side Border Radius
297@mixin border-top-radius($radius) {
298 @include border-top-right-radius($radius);
299 @include border-top-left-radius($radius);
300}
301@mixin border-right-radius($radius) {
302 @include border-top-right-radius($radius);
303 @include border-bottom-right-radius($radius);
304}
305@mixin border-bottom-radius($radius) {
306 @include border-bottom-right-radius($radius);
307 @include border-bottom-left-radius($radius);
308}
309@mixin border-left-radius($radius) {
310 @include border-top-left-radius($radius);
311 @include border-bottom-left-radius($radius);
312}
313
314
315// Box shadows
316// --------------------------------------------------
317
318@mixin box-shadow($shadow...) {
319 -webkit-box-shadow: $shadow;
320 box-shadow: $shadow;
321}
322
323
324// Transition Mixins
325// --------------------------------------------------
326
327@mixin transition($transition...) {
328 -webkit-transition: $transition;
329 transition: $transition;
330}
331@mixin transition-delay($transition-delay) {
332 -webkit-transition-delay: $transition-delay;
333 transition-delay: $transition-delay;
334}
335@mixin transition-duration($transition-duration) {
336 -webkit-transition-duration: $transition-duration;
337 transition-duration: $transition-duration;
338}
339@mixin transition-timing-function($transition-timing) {
340 -webkit-transition-timing-function: $transition-timing;
341 transition-timing-function: $transition-timing;
342 }
343 @mixin transition-property($property) {
344 -webkit-transition-property: $property;
345 transition-property: $property;
346}
347@mixin transition-transform($properties...) {
348 // special case cuz of transform vendor prefixes
349 -webkit-transition: -webkit-transform $properties;
350 transition: transform $properties;
351}
352
353
354// Animation Mixins
355// --------------------------------------------------
356
357@mixin animation($animation) {
358 -webkit-animation: $animation;
359 animation: $animation;
360}
361@mixin animation-duration($duration) {
362 -webkit-animation-duration: $duration;
363 animation-duration: $duration;
364}
365@mixin animation-direction($direction) {
366 -webkit-animation-direction: $direction;
367 animation-direction: $direction;
368}
369@mixin animation-timing-function($animation-timing) {
370 -webkit-animation-timing-function: $animation-timing;
371 animation-timing-function: $animation-timing;
372}
373@mixin animation-fill-mode($fill-mode) {
374 -webkit-animation-fill-mode: $fill-mode;
375 animation-fill-mode: $fill-mode;
376}
377@mixin animation-name($name...) {
378 -webkit-animation-name: $name;
379 animation-name: $name;
380}
381@mixin animation-iteration-count($count) {
382 -webkit-animation-iteration-count: $count;
383 animation-iteration-count: $count;
384}
385
386
387// Transformation Mixins
388// --------------------------------------------------
389
390@mixin rotate($degrees) {
391 @include transform( rotate($degrees) );
392}
393@mixin scale($ratio) {
394 @include transform( scale($ratio) );
395}
396@mixin translate($x, $y) {
397 @include transform( translate($x, $y) );
398}
399@mixin skew($x, $y) {
400 @include transform( skew($x, $y) );
401 -webkit-backface-visibility: hidden;
402}
403@mixin translate3d($x, $y, $z) {
404 @include transform( translate3d($x, $y, $z) );
405}
406@mixin translateZ($z) {
407 @include transform( translateZ($z) );
408}
409@mixin transform($val) {
410 -webkit-transform: $val;
411 transform: $val;
412}
413
414@mixin transform-origin($left, $top) {
415 -webkit-transform-origin: $left $top;
416 transform-origin: $left $top;
417}
418
419
420// Backface visibility
421// --------------------------------------------------
422// Prevent browsers from flickering when using CSS 3D transforms.
423// Default value is `visible`, but can be changed to `hidden
424
425@mixin backface-visibility($visibility){
426 -webkit-backface-visibility: $visibility;
427 backface-visibility: $visibility;
428}
429
430
431// Background clipping
432// --------------------------------------------------
433
434@mixin background-clip($clip) {
435 -webkit-background-clip: $clip;
436 background-clip: $clip;
437}
438
439
440// Background sizing
441// --------------------------------------------------
442
443@mixin background-size($size) {
444 -webkit-background-size: $size;
445 background-size: $size;
446}
447
448
449// Box sizing
450// --------------------------------------------------
451
452@mixin box-sizing($boxmodel) {
453 -webkit-box-sizing: $boxmodel;
454 -moz-box-sizing: $boxmodel;
455 box-sizing: $boxmodel;
456}
457
458
459// User select
460// --------------------------------------------------
461
462@mixin user-select($select) {
463 -webkit-user-select: $select;
464 -moz-user-select: $select;
465 -ms-user-select: $select;
466 user-select: $select;
467}
468
469
470// Content Columns
471// --------------------------------------------------
472
473@mixin content-columns($columnCount, $columnGap: $grid-gutter-width) {
474 -webkit-column-count: $columnCount;
475 -moz-column-count: $columnCount;
476 column-count: $columnCount;
477 -webkit-column-gap: $columnGap;
478 -moz-column-gap: $columnGap;
479 column-gap: $columnGap;
480}
481
482
483// Flexbox Mixins
484// --------------------------------------------------
485// http://philipwalton.github.io/solved-by-flexbox/
486// https://github.com/philipwalton/solved-by-flexbox
487
488@mixin display-flex {
489 display: -webkit-box;
490 display: -webkit-flex;
491 display: -moz-box;
492 display: -moz-flex;
493 display: -ms-flexbox;
494 display: flex;
495}
496
497@mixin display-inline-flex {
498 display: -webkit-inline-box;
499 display: -webkit-inline-flex;
500 display: -moz-inline-flex;
501 display: -ms-inline-flexbox;
502 display: inline-flex;
503}
504
505@mixin flex-direction($value: row) {
506 @if $value == row-reverse {
507 -webkit-box-direction: reverse;
508 -webkit-box-orient: horizontal;
509 } @else if $value == column {
510 -webkit-box-direction: normal;
511 -webkit-box-orient: vertical;
512 } @else if $value == column-reverse {
513 -webkit-box-direction: reverse;
514 -webkit-box-orient: vertical;
515 } @else {
516 -webkit-box-direction: normal;
517 -webkit-box-orient: horizontal;
518 }
519 -webkit-flex-direction: $value;
520 -moz-flex-direction: $value;
521 -ms-flex-direction: $value;
522 flex-direction: $value;
523}
524
525@mixin flex-wrap($value: nowrap) {
526 // No Webkit Box fallback.
527 -webkit-flex-wrap: $value;
528 -moz-flex-wrap: $value;
529 @if $value == nowrap {
530 -ms-flex-wrap: none;
531 } @else {
532 -ms-flex-wrap: $value;
533 }
534 flex-wrap: $value;
535}
536
537@mixin flex($fg: 1, $fs: null, $fb: null) {
538 -webkit-box-flex: $fg;
539 -webkit-flex: $fg $fs $fb;
540 -moz-box-flex: $fg;
541 -moz-flex: $fg $fs $fb;
542 -ms-flex: $fg $fs $fb;
543 flex: $fg $fs $fb;
544}
545
546@mixin flex-flow($values: (row nowrap)) {
547 // No Webkit Box fallback.
548 -webkit-flex-flow: $values;
549 -moz-flex-flow: $values;
550 -ms-flex-flow: $values;
551 flex-flow: $values;
552}
553
554@mixin align-items($value: stretch) {
555 @if $value == flex-start {
556 -webkit-box-align: start;
557 -ms-flex-align: start;
558 } @else if $value == flex-end {
559 -webkit-box-align: end;
560 -ms-flex-align: end;
561 } @else {
562 -webkit-box-align: $value;
563 -ms-flex-align: $value;
564 }
565 -webkit-align-items: $value;
566 -moz-align-items: $value;
567 align-items: $value;
568}
569
570@mixin align-self($value: auto) {
571 -webkit-align-self: $value;
572 -moz-align-self: $value;
573 @if $value == flex-start {
574 -ms-flex-item-align: start;
575 } @else if $value == flex-end {
576 -ms-flex-item-align: end;
577 } @else {
578 -ms-flex-item-align: $value;
579 }
580 align-self: $value;
581}
582
583@mixin align-content($value: stretch) {
584 -webkit-align-content: $value;
585 -moz-align-content: $value;
586 @if $value == flex-start {
587 -ms-flex-line-pack: start;
588 } @else if $value == flex-end {
589 -ms-flex-line-pack: end;
590 } @else {
591 -ms-flex-line-pack: $value;
592 }
593 align-content: $value;
594}
595
596@mixin justify-content($value: stretch) {
597 @if $value == flex-start {
598 -webkit-box-pack: start;
599 -ms-flex-pack: start;
600 } @else if $value == flex-end {
601 -webkit-box-pack: end;
602 -ms-flex-pack: end;
603 } @else if $value == space-between {
604 -webkit-box-pack: justify;
605 -ms-flex-pack: justify;
606 } @else {
607 -webkit-box-pack: $value;
608 -ms-flex-pack: $value;
609 }
610 -webkit-justify-content: $value;
611 -moz-justify-content: $value;
612 justify-content: $value;
613}
614
615@mixin flex-order($n) {
616 -webkit-order: $n;
617 -ms-flex-order: $n;
618 order: $n;
619 -webkit-box-ordinal-group: $n;
620}
621
622@mixin responsive-grid-break($selector, $max-width) {
623 @media (max-width: $max-width) {
624 #{$selector} {
625 -webkit-box-direction: normal;
626 -moz-box-direction: normal;
627 -webkit-box-orient: vertical;
628 -moz-box-orient: vertical;
629 -webkit-flex-direction: column;
630 -ms-flex-direction: column;
631 flex-direction: column;
632
633 .col, .col-10, .col-20, .col-25, .col-33, .col-34, .col-50, .col-66, .col-67, .col-75, .col-80, .col-90 {
634 @include flex(1);
635 margin-bottom: ($grid-padding-width * 3) / 2;
636 margin-left: 0;
637 max-width: 100%;
638 width: 100%;
639 }
640 }
641 }
642}