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, monospace, arial, sans-serif;
40  font-weight: 700;
41}
42
43//Navigation icons
44@mixin navIcons {
45  color: $white;
46  fill: $white;
47  max-height: 40px;
48  stroke-width: .5;
49  display: block;
50  width: 40px;
51  margin: 0 auto .5em auto;
52  .st0 {
53    fill: none;
54    stroke: #fff;
55    stroke-width: 2;
56    stroke-miterlimit: 10;
57  }
58  .st1 {
59    fill: none;
60    stroke: #fff;
61    stroke-width: 4;
62    stroke-miterlimit: 10;
63  }
64}
65
66//Transitions mixin
67@mixin fastTransition-all {
68  transition: all .5s ease;
69}
70
71@mixin slowTransition-all {
72  transition: all 1.5s ease;
73}
74
75//Custom SVG arrow
76@mixin bgImage__arrowDown-primary {
77  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #19273c'></polygon></svg>");
78}
79
80@mixin bgImage__arrowDown-accent {
81  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #3c6df0'></polygon></svg>");
82}
83
84@mixin bgImage__arrowDown-grey {
85  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #b8c1c1'></polygon></svg>");
86}
87
88@mixin calcColumn-5 {
89  min-width: calc(100% * (1/5) - 5px);
90}
91
92@mixin calcColumn-4 ($offset: 0) {
93  min-width: calc(100% * (1/4) - #{$offset});
94}
95
96@mixin calcColumn-3 {
97  min-width: calc(100% * (1/3) - 5px);
98}
99
100@mixin calcSplitColumn {
101  min-width: calc(100% * (1/2) - 5px);
102}
103
104@mixin vertCenter {
105  top: 50%;
106  transform: translateY(-50%);
107}
108
109@mixin indeterminate-bar {
110  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);
111  -webkit-animation: progress 2s linear infinite;
112  -moz-animation: progress 2s linear infinite;
113  animation: progress 2s linear infinite;
114  background-size: 165% 100%;
115
116  @-webkit-keyframes progress {
117    0% {
118      background-position: -70px 0;
119    }
120    100% {
121      background-position: 0 0;
122    }
123  }
124
125  @-moz-keyframes progress {
126    0% {
127      background-position: -70px 0;
128    }
129    100% {
130      background-position: 0 0;
131    }
132  }
133
134  @-ms-keyframes progress {
135    0% {
136      background-position: -70px 0;
137    }
138    100% {
139      background-position: 0 0;
140    }
141  }
142
143  @keyframes progress {
144    0% {
145      background-position: -70px 0;
146    }
147    100% {
148      background-position: 0 0;
149    }
150  }
151}
152
153@mixin table-row-save {
154  @-webkit-keyframes row-flash {
155    from { background-color: $lightblue; }
156    to { background-color: inherit; }
157  }
158  @-moz-keyframes row-flash {
159    from { background-color: $lightblue; }
160    to { background-color: inherit; }
161  }
162  @-o-keyframes row-flash {
163    from { background-color: $lightblue; }
164    to { background-color: inherit; }
165  }
166  @keyframes row-flash {
167    from { background-color: $lightblue; }
168    to { background-color: inherit; }
169  }
170  .row-flash {
171    -webkit-animation: row-flash 1s infinite; /* Safari 4+ */
172    -moz-animation:    row-flash 1s infinite; /* Fx 5+ */
173    -o-animation:      row-flash 1s infinite; /* Opera 12+ */
174    animation:         row-flash 1s infinite; /* IE 10+ */
175  }
176}