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