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}