1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | @mixin clearfix {
|
13 | &:after {
|
14 | visibility: hidden;
|
15 | display: block;
|
16 | height: 0;
|
17 | font-size: 0;
|
18 | content: '\0020';
|
19 | clear: both;
|
20 | }
|
21 | }
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 | @mixin ellipsis($width: 100%) {
|
45 | display: inline-block;
|
46 | max-width: $width;
|
47 | overflow: hidden;
|
48 | text-overflow: ellipsis;
|
49 | white-space: nowrap;
|
50 | word-wrap: normal;
|
51 | }
|
52 |
|
53 |
|
54 |
|
55 |
|
56 |
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 |
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 |
|
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 |
|
91 |
|
92 | @mixin multi-line-ellipsis(
|
93 | $line-height: 1.2em,
|
94 | $line-count: 2,
|
95 | $bg-color: #fff
|
96 | ) {
|
97 | overflow: hidden;
|
98 | position: relative;
|
99 | line-height: $line-height;
|
100 | max-height: $line-height * $line-count;
|
101 | text-align: justify;
|
102 | padding-right: 0;
|
103 |
|
104 | &:before {
|
105 | content: '...';
|
106 | position: absolute;
|
107 | right: 0;
|
108 | bottom: 0;
|
109 | background: $bg-color;
|
110 | }
|
111 |
|
112 | &:after {
|
113 | content: '';
|
114 | position: absolute;
|
115 | right: 0;
|
116 | width: 1em;
|
117 | height: 1em;
|
118 | margin-top: .2em;
|
119 | background: $bg-color;
|
120 | }
|
121 | }
|
122 |
|
123 |
|
124 |
|
125 |
|
126 |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 |
|
132 |
|
133 |
|
134 |
|
135 | @mixin hide-text {
|
136 | font: 0/0 a;
|
137 | text-shadow: none;
|
138 | color: transparent;
|
139 | }
|
140 |
|
141 |
|
142 |
|
143 |
|
144 |
|
145 |
|
146 |
|
147 |
|
148 |
|
149 |
|
150 |
|
151 |
|
152 |
|
153 |
|
154 |
|
155 |
|
156 |
|
157 |
|
158 |
|
159 |
|
160 |
|
161 |
|
162 |
|
163 | @mixin center-tl(
|
164 | $inner-selector: '.inner',
|
165 | $horizontal: true
|
166 | ) {
|
167 |
|
168 | position: relative;
|
169 |
|
170 | & > #{$inner-selector} {
|
171 | position: absolute;
|
172 | top: 50%;
|
173 | $translate-val: translateY(-50%);
|
174 |
|
175 | @if $horizontal {
|
176 | left: 50%;
|
177 | $translate-val: translate(-50%, -50%);
|
178 | }
|
179 |
|
180 | transform: $translate-val;
|
181 | }
|
182 | }
|
183 |
|
184 |
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 |
|
199 |
|
200 |
|
201 |
|
202 |
|
203 |
|
204 |
|
205 | @mixin center-td(
|
206 | $inner-selector: '.inner',
|
207 | $horizontal: true
|
208 | ) {
|
209 |
|
210 | @if $horizontal {
|
211 | text-align: center;
|
212 | }
|
213 |
|
214 | display: table;
|
215 |
|
216 | & > #{$inner-selector} {
|
217 | display: table-cell;
|
218 | vertical-align: middle;
|
219 | }
|
220 | }
|
221 |
|
222 |
|
223 |
|
224 |
|
225 |
|
226 |
|
227 |
|
228 |
|
229 |
|
230 |
|
231 |
|
232 |
|
233 |
|
234 |
|
235 |
|
236 |
|
237 | @mixin size($size) {
|
238 |
|
239 | @if length($size) == 1 {
|
240 | width: $size;
|
241 | height: $size;
|
242 | } @else if length($size) == 2 {
|
243 | width: nth($size, 1);
|
244 | height: nth($size, 2);
|
245 | }
|
246 | }
|
247 |
|
248 |
|
249 |
|
250 |
|
251 |
|
252 |
|
253 |
|
254 |
|
255 |
|
256 |
|
257 |
|
258 |
|
259 |
|
260 |
|
261 |
|
262 |
|
263 |
|
264 |
|
265 |
|
266 |
|
267 |
|
268 |
|
269 |
|
270 | @mixin position($position: relative, $coordinates: null null null null) {
|
271 |
|
272 |
|
273 | @if type-of($position) == list {
|
274 | $coordinates: $position;
|
275 | $position: relative;
|
276 | }
|
277 |
|
278 | $coordinates: unpack($coordinates);
|
279 |
|
280 | $offsets: (
|
281 | top: nth($coordinates, 1),
|
282 | right: nth($coordinates, 2),
|
283 | bottom: nth($coordinates, 3),
|
284 | left: nth($coordinates, 4)
|
285 | );
|
286 |
|
287 | position: $position;
|
288 |
|
289 | @each $offset, $value in $offsets {
|
290 |
|
291 |
|
292 | @if is-length($value) {
|
293 | #{$offset}: $value;
|
294 | }
|
295 | }
|
296 | }
|
297 |
|
298 |
|
299 |
|
300 |
|
301 |
|
302 |
|
303 |
|
304 |
|
305 |
|
306 |
|
307 |
|
308 |
|
309 |
|
310 |
|
311 |
|
312 |
|
313 |
|
314 |
|
315 |
|
316 |
|
317 |
|
318 |
|
319 |
|
320 |
|
321 |
|
322 |
|
323 |
|
324 |
|
325 |
|
326 |
|
327 |
|
328 | @mixin triangle($size, $color, $direction) {
|
329 | $width: nth($size, 1);
|
330 | $height: nth($size, length($size));
|
331 | $foreground-color: nth($color, 1);
|
332 | $background-color: if(length($color) == 2, nth($color, 2), transparent);
|
333 | height: 0;
|
334 | width: 0;
|
335 |
|
336 | @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
|
337 | $width: $width / 2;
|
338 | $height: if(length($size) > 1, $height, $height/2);
|
339 |
|
340 | @if $direction == up {
|
341 | border-bottom: $height solid $foreground-color;
|
342 | border-left: $width solid $background-color;
|
343 | border-right: $width solid $background-color;
|
344 | } @else if $direction == right {
|
345 | border-bottom: $width solid $background-color;
|
346 | border-left: $height solid $foreground-color;
|
347 | border-top: $width solid $background-color;
|
348 | } @else if $direction == down {
|
349 | border-left: $width solid $background-color;
|
350 | border-right: $width solid $background-color;
|
351 | border-top: $height solid $foreground-color;
|
352 | } @else if $direction == left {
|
353 | border-bottom: $width solid $background-color;
|
354 | border-right: $height solid $foreground-color;
|
355 | border-top: $width solid $background-color;
|
356 | }
|
357 | } @else if ($direction == up-right) or ($direction == up-left) {
|
358 | border-top: $height solid $foreground-color;
|
359 |
|
360 | @if $direction == up-right {
|
361 | border-left: $width solid $background-color;
|
362 | } @else if $direction == up-left {
|
363 | border-right: $width solid $background-color;
|
364 | }
|
365 | } @else if ($direction == down-right) or ($direction == down-left) {
|
366 | border-bottom: $height solid $foreground-color;
|
367 |
|
368 | @if $direction == down-right {
|
369 | border-left: $width solid $background-color;
|
370 | } @else if $direction == down-left {
|
371 | border-right: $width solid $background-color;
|
372 | }
|
373 | } @else if ($direction == inset-up) {
|
374 | border-color: $background-color $background-color $foreground-color;
|
375 | border-style: solid;
|
376 | border-width: $height $width;
|
377 | } @else if ($direction == inset-down) {
|
378 | border-color: $foreground-color $background-color $background-color;
|
379 | border-style: solid;
|
380 | border-width: $height $width;
|
381 | } @else if ($direction == inset-right) {
|
382 | border-color: $background-color $background-color $background-color $foreground-color;
|
383 | border-style: solid;
|
384 | border-width: $width $height;
|
385 | } @else if ($direction == inset-left) {
|
386 | border-color: $background-color $foreground-color $background-color $background-color;
|
387 | border-style: solid;
|
388 | border-width: $width $height;
|
389 | }
|
390 | }
|
391 |
|
392 | @mixin box-sizing {
|
393 | box-sizing: border-box;
|
394 | *,
|
395 | *:before,
|
396 | *:after {
|
397 | box-sizing: border-box;
|
398 | }
|
399 | }
|
400 |
|
401 | @mixin icon-size($size, $marginLeft: false, $marginRight: false, $transform: false) {
|
402 | $size-static: get-compiling-value($size);
|
403 | $icon-s-static: get-compiling-value($icon-s);
|
404 | @if ($transform) {
|
405 | transform: $transform;
|
406 | }
|
407 | @if ($marginLeft) {
|
408 | margin-left: $marginLeft;
|
409 | }
|
410 | @if ($marginRight) {
|
411 | margin-right: $marginRight;
|
412 | }
|
413 |
|
414 | &:before,
|
415 | & .#{$css-prefix}icon-remote {
|
416 | width: $size;
|
417 | font-size: $size;
|
418 | line-height: inherit;
|
419 | }
|
420 |
|
421 |
|
422 | @if (type-of($size-static) == 'number') {
|
423 | @if ($size-static < 12) {
|
424 | @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
|
425 | @if ($transform) {
|
426 | transform: scale(divide($size-static, $icon-s-static)) $transform;
|
427 | } @else {
|
428 | transform: scale(divide($size-static, $icon-s-static));
|
429 | }
|
430 | @if ($marginLeft) {
|
431 | margin-left: calc(#{$marginLeft} - (#{$icon-s} - #{$size}) / 2);
|
432 | } @else {
|
433 | margin-left: calc(0px - (#{$icon-s} - #{$size}) / 2);
|
434 | }
|
435 | @if ($marginRight) {
|
436 | margin-right: calc(#{$marginRight} - (#{$icon-s} - #{$size}) / 2);
|
437 | } @else {
|
438 | margin-right: calc(0px - (#{$icon-s} - #{$size}) / 2);
|
439 | }
|
440 |
|
441 | &:before {
|
442 | width: $icon-s;
|
443 | font-size: $icon-s;
|
444 | }
|
445 | }
|
446 | }
|
447 | }
|
448 | }
|
449 |
|
450 | @mixin icon-square-size($size, $marginTop: false, $marginRight: false, $marginBottom: false, $marginLeft: false, $transform: false) {
|
451 | $size-static: get-compiling-value($size);
|
452 | $icon-s-static: get-compiling-value($icon-s);
|
453 | @if ($transform) {
|
454 | transform: $transform;
|
455 | }
|
456 | @if ($marginTop) {
|
457 | margin-top: $marginTop;
|
458 | }
|
459 | @if ($marginRight) {
|
460 | margin-right: $marginRight;
|
461 | }
|
462 | @if ($marginBottom) {
|
463 | margin-bottom: $marginBottom;
|
464 | }
|
465 | @if ($marginLeft) {
|
466 | margin-left: $marginLeft;
|
467 | }
|
468 |
|
469 | width: $size;
|
470 | height: $size;
|
471 | line-height: 1em;
|
472 |
|
473 | &:before {
|
474 | width: $size;
|
475 | height: $size;
|
476 | font-size: $size;
|
477 | line-height: 1em;
|
478 | }
|
479 |
|
480 |
|
481 | @if (type-of($size-static) == 'number') {
|
482 | @if ($size-static < 12) {
|
483 | @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
|
484 | @if ($transform) {
|
485 | transform: scale(divide($size-static, $icon-s-static)) $transform;
|
486 | } @else {
|
487 | transform: scale(divide($size-static, $icon-s-static));
|
488 | }
|
489 | @if ($marginTop) {
|
490 | margin-top: calc(#{$marginTop} - (#{$icon-s} - #{$size}) / 2);
|
491 | } @else {
|
492 | margin-top: calc(0px - (#{$icon-s} - #{$size}) / 2);
|
493 | }
|
494 | @if ($marginRight) {
|
495 | margin-right: calc(#{$marginRight} - (#{$icon-s} - #{$size}) / 2);
|
496 | } @else {
|
497 | margin-right: calc(0px - (#{$icon-s} - #{$size}) / 2);
|
498 | }
|
499 | @if ($marginBottom) {
|
500 | margin-bottom: calc(#{$marginBottom} - (#{$icon-s} - #{$size}) / 2);
|
501 | } @else {
|
502 | margin-bottom: calc(0px - (#{$icon-s} - #{$size}) / 2);
|
503 | }
|
504 | @if ($marginLeft) {
|
505 | margin-left: calc(#{$marginLeft} - (#{$icon-s} - #{$size}) / 2);
|
506 | } @else {
|
507 | margin-left: calc(0px - (#{$icon-s} - #{$size}) / 2);
|
508 | }
|
509 |
|
510 | width: $icon-s;
|
511 | height: $icon-s;
|
512 | line-height: $icon-s;
|
513 |
|
514 | &:before {
|
515 | width: $icon-s;
|
516 | height: $icon-s;
|
517 | font-size: $icon-s;
|
518 | line-height: $icon-s;
|
519 | }
|
520 | }
|
521 | }
|
522 | }
|
523 | }
|
524 |
|
525 | @mixin font-face-handler($name, $url) {
|
526 | @if ($name != Roboto) and ($name != "") {
|
527 | @font-face {
|
528 | font-family: "#{$name}";
|
529 | src: url("#{$url}");
|
530 | font-display: swap;
|
531 | }
|
532 | }
|
533 | }
|
534 |
|
535 |
|
536 |
|
537 |
|
538 |
|
539 |
|
540 |
|
541 |
|
542 |
|
543 |
|
544 |
|
545 |
|
546 | @mixin button-color($color, $color-hover, $color-active, $bg-color: transparent, $bg-color-hover: transparent, $bg-color-active: transparent, $border-color: transparent, $border-color-hover: transparent, $border-color-active: transparent) {
|
547 | background: $bg-color;
|
548 | border-color: $border-color;
|
549 |
|
550 | &,
|
551 | &:link,
|
552 | &:visited,
|
553 | &.visited {
|
554 | color: $color;
|
555 | }
|
556 |
|
557 | &:focus,
|
558 | &:hover,
|
559 | &.hover {
|
560 | color: $color-hover;
|
561 | background: $bg-color-hover;
|
562 | border-color: $border-color-hover;
|
563 | text-decoration: none;
|
564 | }
|
565 |
|
566 | &:active,
|
567 | &.active {
|
568 | color: $color-active;
|
569 | background: $bg-color-active;
|
570 | border-color: $border-color-active;
|
571 | text-decoration: none;
|
572 | }
|
573 | }
|
574 |
|
575 |
|
576 |
|
577 |
|
578 |
|
579 |
|
580 |
|
581 | @mixin button-size($padding, $height, $font-size, $border-width) {
|
582 | padding: 0 $padding;
|
583 | height: $height;
|
584 | font-size: $font-size;
|
585 | border-width: $border-width;
|
586 | }
|