1//Breakpoints mixin
2@mixin mediaQuery($breakpoint) {
3  @if $breakpoint == "x-small" {
4    @media (min-width: 25.000em) { //400px
5      @content;
6    }
7  }
8  @if $breakpoint == "small" {
9    @media (min-width: 47.938em) { //767px
10      @content;
11    }
12  } @else if $breakpoint == "medium" {
13    @media (min-width: 64.000em) { //1024px
14      @content;
15    }
16  } @else if $breakpoint == "large" {
17    @media (min-width: 85.375em) { //1366px
18      @content;
19    }
20  } @else if $breakpoint == "x-large" {
21    @media (min-width: 100.000em) { //1600px
22      @content;
23    }
24  }
25}
26
27//Fonts mixin
28@mixin fontFamily {
29  font-family: Helvetica, Arial, Verdana, sans-serif;
30  font-weight: 200;
31}
32
33@mixin fontFamilyBold {
34  font-family: Helvetica, Arial, Verdana, sans-serif;
35  font-weight: 700;
36}
37
38@mixin fontCourierBold {
39  font-family: "Courier New", Helvetica, arial, sans-serif;
40  font-weight: 700;
41}
42
43
44//Transitions mixin
45@mixin fastTransition-all {
46  transition: all .5s ease;
47}
48
49@mixin slowTransition-all {
50  transition: all 1.5s ease;
51}
52
53//Custom SVG arrow
54@mixin bgImage__arrowDown-primary {
55  background-image: url(../assets/images/icon-caret-down.svg);
56  background-size: 0.8em;
57  background-repeat: no-repeat;
58  background-position-y: center;
59  background-position-x: calc(100% - .5em);
60}
61
62@mixin bgImage__arrowDown-disabled {
63  background-image: url(../assets/images/icon-caret-down-disabled.svg);
64  background-size: 0.8em;
65  background-repeat: no-repeat;
66  background-position-y: center;
67  background-position-x: calc(100% - .5em);
68}
69
70@mixin calcColumn-5 {
71  min-width: calc(100% * (1/5) - 5px);
72}
73
74@mixin calcColumn-4 ($offset: 0) {
75  min-width: calc(100% * (1/4) - #{$offset});
76}
77
78@mixin calcColumn-3 {
79  min-width: calc(100% * (1/3) - 5px);
80}
81
82@mixin calcSplitColumn {
83  min-width: calc(100% * (1/2) - 5px);
84}
85
86@mixin vertCenter {
87  top: 50%;
88  transform: translateY(-50%);
89}
90
91@mixin indeterminate-bar {
92  background-image: repeating-linear-gradient(-45deg, rgba(251, 234, 174, 0.35), rgba(251, 234, 174, 0.35) 25px, rgba(244, 176, 0, 0.45) 25px, rgba(244, 176, 0, 0.45) 50px);
93  -webkit-animation: progress 2s linear infinite;
94  -moz-animation: progress 2s linear infinite;
95  animation: progress 2s linear infinite;
96  background-size: 165% 100%;
97
98  @-webkit-keyframes progress {
99    0% {
100      background-position: -70px 0;
101    }
102    100% {
103      background-position: 0 0;
104    }
105  }
106
107  @-moz-keyframes progress {
108    0% {
109      background-position: -70px 0;
110    }
111    100% {
112      background-position: 0 0;
113    }
114  }
115
116  @-ms-keyframes progress {
117    0% {
118      background-position: -70px 0;
119    }
120    100% {
121      background-position: 0 0;
122    }
123  }
124
125  @keyframes progress {
126    0% {
127      background-position: -70px 0;
128    }
129    100% {
130      background-position: 0 0;
131    }
132  }
133}
134
135@mixin table-row-save {
136  @-webkit-keyframes row-flash {
137    from { background-color: $lightblue; }
138    to { background-color: inherit; }
139  }
140  @-moz-keyframes row-flash {
141    from { background-color: $lightblue; }
142    to { background-color: inherit; }
143  }
144  @-o-keyframes row-flash {
145    from { background-color: $lightblue; }
146    to { background-color: inherit; }
147  }
148  @keyframes row-flash {
149    from { background-color: $lightblue; }
150    to { background-color: inherit; }
151  }
152  .row-flash {
153    -webkit-animation: row-flash 1s infinite; /* Safari 4+ */
154    -moz-animation:    row-flash 1s infinite; /* Fx 5+ */
155    -o-animation:      row-flash 1s infinite; /* Opera 12+ */
156    animation:         row-flash 1s infinite; /* IE 10+ */
157  }
158}