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