styles/base/mixins.scss

3   @if $breakpoint == "x-small" {
4     @media (min-width: 25em) {
10     @media (min-width: 47.938em) {
15     @media (min-width: 64em) {
20     @media (min-width: 85.375em) {
24   } @else if $breakpoint == "x-large" {
25     @media (min-width: 100em) {
34   font-family: Helvetica, Arial, Verdana, sans-serif;
35   font-weight: 200;
39   font-family: Helvetica, Arial, Verdana, sans-serif;
40   font-weight: 700;
44   font-family: "Courier New", Helvetica, arial, sans-serif;
45   font-weight: 700;
49 @mixin fastTransition-all {
50   transition: all $duration--fast-02 ease;
53 @mixin slowTransition-all {
54   transition: all $duration--slow-02 ease;
57 @mixin page-transition {
58   transition: 110ms cubic-bezier(0.4, 0.14, 1, 1);
61 @mixin page-transition-visibility {
63   opacity: 0;
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);
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);
83 @mixin calcColumn-5 {
84   min-width: calc(100% * (1 / 5) - 5px);
87 @mixin calcColumn-4($offset: 0) {
88   min-width: calc(100% * (1 / 4) - #{$offset});
91 @mixin calcColumn-3 {
92   min-width: calc(100% * (1 / 3) - 5px);
96   min-width: calc(100% * (1 / 2) - 5px);
101   transform: translateY(-50%);
104 @mixin indeterminate-bar {
105   background-image: repeating-linear-gradient(
106     -45deg,
109     rgba(244, 176, 0, 0.45) 25px,
110     rgba(244, 176, 0, 0.45) 50px
112   -webkit-animation: progress 2s linear infinite;
113   -moz-animation: progress 2s linear infinite;
115   background-size: 165% 100%;
117   @-webkit-keyframes progress {
118     0% {
119       background-position: -70px 0;
121     100% {
122       background-position: 0 0;
126   @-moz-keyframes progress {
127     0% {
128       background-position: -70px 0;
130     100% {
131       background-position: 0 0;
135   @-ms-keyframes progress {
136     0% {
137       background-position: -70px 0;
139     100% {
140       background-position: 0 0;
145     0% {
146       background-position: -70px 0;
148     100% {
149       background-position: 0 0;
154 @mixin table-row-save {
155   @-webkit-keyframes row-flash {
157       background-color: $background-02;
160       background-color: inherit;
163   @-moz-keyframes row-flash {
165       background-color: $background-02;
168       background-color: inherit;
171   @-o-keyframes row-flash {
173       background-color: $background-02;
176       background-color: inherit;
179   @keyframes row-flash {
181       background-color: $background-02;
184       background-color: inherit;
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+ */
196   color: $text-02;
197   text-transform: uppercase;
198   font-weight: 700;
199   font-size: 0.75em;
200   margin-bottom: 0.5rem;