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 fontCourierBold {
34  font-family: "Courier New", Helvetica, arial, sans-serif;
35  font-weight: 700;
36}
37
38//Transitions mixin
39@mixin fastTransition-all {
40  transition: all .5s ease;
41}
42
43@mixin slowTransition-all {
44  transition: all 1.5s ease;
45}
46
47//Custom SVG arrow
48@mixin bgImage__arrowDown-primary {
49  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>");
50}
51
52@mixin bgImage__arrowDown-accent {
53  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>");
54}
55
56@mixin bgImage__arrowDown-grey {
57  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>");
58}
59
60@mixin indeterminate-bar {
61  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);
62  -webkit-animation: progress 2s linear infinite;
63  -moz-animation: progress 2s linear infinite;
64  animation: progress 2s linear infinite;
65  background-size: 130% 100%;
66
67  @-webkit-keyframes progress {
68    0% {
69      background-position: 0 0;
70    }
71    100% {
72      background-position: -70px 0;
73    }
74  }
75
76  @-moz-keyframes progress {
77    0% {
78      background-position: 0 0;
79    }
80    100% {
81      background-position: -70px 0;
82    }
83  }
84
85  @-ms-keyframes progress {
86    0% {
87      background-position: 0 0;
88    }
89    100% {
90      background-position: -70px 0;
91    }
92  }
93
94  @keyframes progress {
95    0% {
96      background-position: 0 0;
97    }
98    100% {
99      background-position: -70px 0;
100    }
101  }
102}
103