1 | @mixin hidden {
|
2 | position: absolute;
|
3 | width: 1px;
|
4 | height: 1px;
|
5 | padding: 0;
|
6 | margin: -1px;
|
7 | overflow: hidden;
|
8 | clip: rect(0, 0, 0, 0);
|
9 | border: 0;
|
10 | visibility: visible;
|
11 | white-space: nowrap;
|
12 | }
|
13 |
|
14 | @mixin skeleton {
|
15 | position: relative;
|
16 | border: none;
|
17 | padding: 0;
|
18 | box-shadow: none;
|
19 | pointer-events: none;
|
20 | background: $light-gray-2;
|
21 |
|
22 | &:hover,
|
23 | &:focus,
|
24 | &:active {
|
25 | border: none;
|
26 | outline: none;
|
27 | cursor: default;
|
28 | }
|
29 |
|
30 | &:before {
|
31 | content: '';
|
32 | width: 0%;
|
33 | height: 100%;
|
34 | position: absolute;
|
35 | top: 0;
|
36 | left: 0;
|
37 | background: $light-gray-1;
|
38 | animation: 3000ms ease-in-out skeleton infinite;
|
39 | }
|
40 | }
|
41 |
|
42 | @keyframes skeleton {
|
43 | 0% {
|
44 | width: 0%;
|
45 | left: 0;
|
46 | right: auto;
|
47 | opacity: 0.3;
|
48 | }
|
49 | 20% {
|
50 | width: 100%;
|
51 | left: 0;
|
52 | right: auto;
|
53 | opacity: 1;
|
54 | }
|
55 | 28% {
|
56 | width: 100%;
|
57 | left: auto;
|
58 | right: 0;
|
59 | }
|
60 | 51% {
|
61 | width: 0%;
|
62 | left: auto;
|
63 | right: 0;
|
64 | }
|
65 | 58% {
|
66 | width: 0%;
|
67 | left: auto;
|
68 | right: 0;
|
69 | }
|
70 | 82% {
|
71 | width: 100%;
|
72 | left: auto;
|
73 | right: 0;
|
74 | }
|
75 | 83% {
|
76 | width: 100%;
|
77 | left: 0;
|
78 | right: auto;
|
79 | }
|
80 | 96% {
|
81 | width: 0%;
|
82 | left: 0;
|
83 | right: auto;
|
84 | }
|
85 | 100% {
|
86 | width: 0%;
|
87 | left: 0;
|
88 | right: auto;
|
89 | opacity: 0.3;
|
90 | }
|
91 | }
|
92 |
|
93 |
|
94 |
|
95 |
|
96 |
|
97 |
|
98 |
|
99 |
|
100 |
|
101 | @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
102 | $n: index($breakpoint-names, $name);
|
103 | @if not $n {
|
104 | @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
|
105 | }
|
106 | @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
107 | }
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 | @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
114 | $min: map-get($breakpoints, $name);
|
115 | @return if($min != 0, $min, null);
|
116 | }
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 |
|
126 |
|
127 | @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
128 | $next: breakpoint-next($name, $breakpoints);
|
129 | @return if($next, breakpoint-min($next, $breakpoints) - .02, null);
|
130 | }
|
131 |
|
132 |
|
133 |
|
134 |
|
135 |
|
136 |
|
137 |
|
138 |
|
139 | @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
|
140 | @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
|
141 | }
|
142 |
|
143 |
|
144 |
|
145 | @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
|
146 | $min: breakpoint-min($name, $breakpoints);
|
147 | @if $min {
|
148 | @media (min-width: $min) {
|
149 | @content;
|
150 | }
|
151 | } @else {
|
152 | @content;
|
153 | }
|
154 | }
|
155 |
|
156 |
|
157 |
|
158 | @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
|
159 | $max: breakpoint-max($name, $breakpoints);
|
160 | @if $max {
|
161 | @media (max-width: $max) {
|
162 | @content;
|
163 | }
|
164 | } @else {
|
165 | @content;
|
166 | }
|
167 | }
|