matcha-theme 18.0.28 → 18.1.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,1738 +1,11 @@
1
1
  // -----------------------------------------------------------------------------------------------------
2
- // @ Position helpers
3
- // -----------------------------------------------------------------------------------------------------
4
- $position-class-names: relative, absolute, static, sticky, fixed, inherit, initial, revert, revert-layer, unset;
5
- @mixin helper-position($helper-breakpoints){
6
- @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
7
- @include media-breakpoint($materialBreakpoint) {
8
- $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
9
- @each $position in $position-class-names {
10
- .position#{$infix}-#{$position} {
11
- position: #{$position} !important;
12
- }
13
- }
14
- }
15
- }
16
- }
17
- @include helper-position($helper-breakpoints);
18
-
19
-
20
- // -----------------------------------------------------------------------------------------------------
21
- // @ Absolute position alignment helpers
22
- // -----------------------------------------------------------------------------------------------------
23
- $align-class-names: top, right, bottom, left;
24
- @mixin helper-alignment-position($helper-breakpoints){
25
- @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
26
- @include media-breakpoint($materialBreakpoint) {
27
- $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
28
- @each $align in $align-class-names {
29
- .align#{$infix}-#{$align} {
30
- #{$align}: 0 !important;
31
- }
32
- }
33
- }
34
- }
35
- }
36
- @include helper-alignment-position($helper-breakpoints);
37
-
38
- // -----------------------------------------------------------------------------------------------------
39
- // @ Size helpers
40
- // -----------------------------------------------------------------------------------------------------
41
- .w-auto {
42
- width: auto !important;
43
- min-width: auto !important;
44
- max-width: auto !important
45
- }
46
-
47
- .h-auto {
48
- height: auto !important;
49
- min-height: auto !important;
50
- max-height: auto !important
51
- }
52
-
53
- .w-264 {
54
- width: 264px !important;
55
- min-width: 264px !important;
56
- max-width: 264px !important
57
- }
58
-
59
- .w-300 {
60
- width: 300px !important;
61
- min-width: 300px !important;
62
- max-width: 300px !important
63
- }
64
-
65
- .w-400 {
66
- width: 400px !important;
67
- min-width: 400px !important;
68
- max-width: 400px !important
69
- }
70
-
71
- .w-500 {
72
- width: 500px !important;
73
- min-width: 500px !important;
74
- max-width: 500px !important
75
- }
76
-
77
- .w-600 {
78
- width: 600px !important;
79
- min-width: 600px !important;
80
- max-width: 600px !important
81
- }
82
-
83
- .h-264 {
84
- height: 264px !important;
85
- min-height: 264px !important;
86
- max-height: 264px !important
87
- }
88
-
89
- .h-300 {
90
- height: 300px !important;
91
- min-height: 300px !important;
92
- max-height: 300px !important
93
- }
94
-
95
- .h-400 {
96
- height: 400px !important;
97
- min-height: 400px !important;
98
- max-height: 400px !important
99
- }
100
-
101
- .h-500 {
102
- height: 500px !important;
103
- min-height: 500px !important;
104
- max-height: 500px !important
105
- }
106
-
107
- .h-600 {
108
- height: 600px !important;
109
- min-height: 600px !important;
110
- max-height: 600px !important
111
- }
112
-
113
- @media only screen and (min-width:600px) {
114
- .w-sm-auto {
115
- width: auto !important;
116
- min-width: auto !important;
117
- max-width: auto !important
118
- }
119
-
120
- .h-sm-auto {
121
- height: auto !important;
122
- min-height: auto !important;
123
- max-height: auto !important
124
- }
125
-
126
- .w-sm-264 {
127
- width: 264px !important;
128
- min-width: 264px !important;
129
- max-width: 264px !important
130
- }
131
-
132
- .w-sm-300 {
133
- width: 300px !important;
134
- min-width: 300px !important;
135
- max-width: 300px !important
136
- }
137
-
138
- .w-sm-400 {
139
- width: 400px !important;
140
- min-width: 400px !important;
141
- max-width: 400px !important
142
- }
143
-
144
- .w-sm-500 {
145
- width: 500px !important;
146
- min-width: 500px !important;
147
- max-width: 500px !important
148
- }
149
-
150
- .w-sm-600 {
151
- width: 600px !important;
152
- min-width: 600px !important;
153
- max-width: 600px !important
154
- }
155
-
156
- .h-sm-264 {
157
- height: 264px !important;
158
- min-height: 264px !important;
159
- max-height: 264px !important
160
- }
161
-
162
- .h-sm-300 {
163
- height: 300px !important;
164
- min-height: 300px !important;
165
- max-height: 300px !important
166
- }
167
-
168
- .h-sm-400 {
169
- height: 400px !important;
170
- min-height: 400px !important;
171
- max-height: 400px !important
172
- }
173
-
174
- .h-sm-500 {
175
- height: 500px !important;
176
- min-height: 500px !important;
177
- max-height: 500px !important
178
- }
179
-
180
- .h-sm-600 {
181
- height: 600px !important;
182
- min-height: 600px !important;
183
- max-height: 600px !important
184
- }
185
- }
186
-
187
- @media only screen and (min-width:1024px) {
188
- .w-md-auto {
189
- width: auto !important;
190
- min-width: auto !important;
191
- max-width: auto !important
192
- }
193
-
194
- .h-md-auto {
195
- height: auto !important;
196
- min-height: auto !important;
197
- max-height: auto !important
198
- }
199
-
200
- .w-md-264 {
201
- width: 264px !important;
202
- min-width: 264px !important;
203
- max-width: 264px !important
204
- }
205
-
206
- .w-md-300 {
207
- width: 300px !important;
208
- min-width: 300px !important;
209
- max-width: 300px !important
210
- }
211
-
212
- .w-md-400 {
213
- width: 400px !important;
214
- min-width: 400px !important;
215
- max-width: 400px !important
216
- }
217
-
218
- .w-md-500 {
219
- width: 500px !important;
220
- min-width: 500px !important;
221
- max-width: 500px !important
222
- }
223
-
224
- .w-md-600 {
225
- width: 600px !important;
226
- min-width: 600px !important;
227
- max-width: 600px !important
228
- }
229
-
230
- .h-md-264 {
231
- height: 264px !important;
232
- min-height: 264px !important;
233
- max-height: 264px !important
234
- }
235
-
236
- .h-md-300 {
237
- height: 300px !important;
238
- min-height: 300px !important;
239
- max-height: 300px !important
240
- }
241
-
242
- .h-md-400 {
243
- height: 400px !important;
244
- min-height: 400px !important;
245
- max-height: 400px !important
246
- }
247
-
248
- .h-md-500 {
249
- height: 500px !important;
250
- min-height: 500px !important;
251
- max-height: 500px !important
252
- }
253
-
254
- .h-md-600 {
255
- height: 600px !important;
256
- min-height: 600px !important;
257
- max-height: 600px !important
258
- }
259
- }
260
-
261
- @media only screen and (min-width:1440px) {
262
- .w-lg-auto {
263
- width: auto !important;
264
- min-width: auto !important;
265
- max-width: auto !important
266
- }
267
-
268
- .h-lg-auto {
269
- height: auto !important;
270
- min-height: auto !important;
271
- max-height: auto !important
272
- }
273
-
274
- .w-lg-264 {
275
- width: 264px !important;
276
- min-width: 264px !important;
277
- max-width: 264px !important
278
- }
279
-
280
- .w-lg-300 {
281
- width: 300px !important;
282
- min-width: 300px !important;
283
- max-width: 300px !important
284
- }
285
-
286
- .w-lg-400 {
287
- width: 400px !important;
288
- min-width: 400px !important;
289
- max-width: 400px !important
290
- }
291
-
292
- .w-lg-500 {
293
- width: 500px !important;
294
- min-width: 500px !important;
295
- max-width: 500px !important
296
- }
297
-
298
- .w-lg-600 {
299
- width: 600px !important;
300
- min-width: 600px !important;
301
- max-width: 600px !important
302
- }
303
-
304
- .h-lg-264 {
305
- height: 264px !important;
306
- min-height: 264px !important;
307
- max-height: 264px !important
308
- }
309
-
310
- .h-lg-300 {
311
- height: 300px !important;
312
- min-height: 300px !important;
313
- max-height: 300px !important
314
- }
315
-
316
- .h-lg-400 {
317
- height: 400px !important;
318
- min-height: 400px !important;
319
- max-height: 400px !important
320
- }
321
-
322
- .h-lg-500 {
323
- height: 500px !important;
324
- min-height: 500px !important;
325
- max-height: 500px !important
326
- }
327
-
328
- .h-lg-600 {
329
- height: 600px !important;
330
- min-height: 600px !important;
331
- max-height: 600px !important
332
- }
333
- }
334
-
335
- @media only screen and (min-width:1920px) {
336
- .w-xl-auto {
337
- width: auto !important;
338
- min-width: auto !important;
339
- max-width: auto !important
340
- }
341
-
342
- .h-xl-auto {
343
- height: auto !important;
344
- min-height: auto !important;
345
- max-height: auto !important
346
- }
347
-
348
- .w-xl-264 {
349
- width: 264px !important;
350
- min-width: 264px !important;
351
- max-width: 264px !important
352
- }
353
-
354
- .w-xl-300 {
355
- width: 300px !important;
356
- min-width: 300px !important;
357
- max-width: 300px !important
358
- }
359
-
360
- .w-xl-400 {
361
- width: 400px !important;
362
- min-width: 400px !important;
363
- max-width: 400px !important
364
- }
365
-
366
- .w-xl-500 {
367
- width: 500px !important;
368
- min-width: 500px !important;
369
- max-width: 500px !important
370
- }
371
-
372
- .w-xl-600 {
373
- width: 600px !important;
374
- min-width: 600px !important;
375
- max-width: 600px !important
376
- }
377
-
378
- .h-xl-264 {
379
- height: 264px !important;
380
- min-height: 264px !important;
381
- max-height: 264px !important
382
- }
383
-
384
- .h-xl-300 {
385
- height: 300px !important;
386
- min-height: 300px !important;
387
- max-height: 300px !important
388
- }
389
-
390
- .h-xl-400 {
391
- height: 400px !important;
392
- min-height: 400px !important;
393
- max-height: 400px !important
394
- }
395
-
396
- .h-xl-500 {
397
- height: 500px !important;
398
- min-height: 500px !important;
399
- max-height: 500px !important
400
- }
401
-
402
- .h-xl-600 {
403
- height: 600px !important;
404
- min-height: 600px !important;
405
- max-height: 600px !important
406
- }
407
- }
408
-
409
-
410
- // -----------------------------------------------------------------------------------------------------
411
- // @ Space helpers
412
- // -----------------------------------------------------------------------------------------------------
413
- .m-auto {
414
- margin: auto !important
415
- }
416
-
417
- .mt-auto {
418
- margin-top: auto !important
419
- }
420
-
421
- .mr-auto {
422
- margin-right: auto !important
423
- }
424
-
425
- .mb-auto {
426
- margin-bottom: auto !important
427
- }
428
-
429
- .ml-auto {
430
- margin-left: auto !important
431
- }
432
-
433
- .mx-auto {
434
- margin-right: auto !important;
435
- margin-left: auto !important
436
- }
437
-
438
- .my-auto {
439
- margin-top: auto !important;
440
- margin-bottom: auto !important
441
- }
442
-
443
- @media screen and (min-width:600px) {
444
- .mx-sm-auto {
445
- margin-right: auto !important;
446
- margin-left: auto !important
447
- }
448
-
449
- .my-sm-auto {
450
- margin-top: auto !important;
451
- margin-bottom: auto !important
452
- }
453
- }
454
-
455
- @media screen and (min-width:1024px) {
456
- .m-md-auto {
457
- margin: auto !important
458
- }
459
-
460
- .mt-md-auto {
461
- margin-top: auto !important
462
- }
463
-
464
- .mr-md-auto {
465
- margin-right: auto !important
466
- }
467
-
468
- .mb-md-auto {
469
- margin-bottom: auto !important
470
- }
471
-
472
- .ml-md-auto {
473
- margin-left: auto !important
474
- }
475
-
476
- .mx-md-auto {
477
- margin-right: auto !important;
478
- margin-left: auto !important
479
- }
480
-
481
- .my-md-auto {
482
- margin-top: auto !important;
483
- margin-bottom: auto !important
484
- }
485
- }
486
-
487
- @media screen and (min-width:1440px) {}
488
-
489
- @media screen and (min-width:1920px) {
490
- .m-xl-auto {
491
- margin: auto !important
492
- }
493
-
494
- .mt-xl-auto {
495
- margin-top: auto !important
496
- }
497
-
498
- .mr-xl-auto {
499
- margin-right: auto !important
500
- }
501
-
502
- .mb-xl-auto {
503
- margin-bottom: auto !important
504
- }
505
-
506
- .ml-xl-auto {
507
- margin-left: auto !important
508
- }
509
-
510
- .mx-xl-auto {
511
- margin-right: auto !important;
512
- margin-left: auto !important
513
- }
514
-
515
- .my-xl-auto {
516
- margin-top: auto !important;
517
- margin-bottom: auto !important
518
- }
519
- }
520
-
521
-
522
-
523
- // -----------------------------------------------------------------------------------------------------
524
- // @ Text Helpers
525
- // -----------------------------------------------------------------------------------------------------
526
- // Text format helpers text-md-center, text-md-left, text-md-right, text-md-justify, text-md-nowrap, text-md-truncate, text-md-lowercase, text-md-uppercase, text-md-capitalize
527
-
528
- @mixin helper-text-format($helper-breakpoints){
529
- @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
530
- @include media-breakpoint($materialBreakpoint) {
531
- $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
532
-
533
- .text#{$infix}-decoration-strike,
534
- .text#{$infix}-strike,
535
- .text#{$infix}-line-through {
536
- text-decoration: line-through !important
537
- }
538
-
539
- .text#{$infix}-decoration-none,
540
- .text#{$infix}-none {
541
- text-decoration: none !important
542
- }
543
-
544
- .text#{$infix}-super {
545
- vertical-align: super !important
546
- }
547
-
548
- .text#{$infix}-sub {
549
- vertical-align: sub !important
550
- }
551
-
552
- .text#{$infix}-capitalize {
553
- text-transform: capitalize !important
554
- }
555
-
556
- .text#{$infix}-lowercase {
557
- text-transform: lowercase !important
558
- }
559
-
560
- .text#{$infix}-uppercase {
561
- text-transform: uppercase !important
562
- }
563
-
564
- .text#{$infix}-nowrap {
565
- white-space: nowrap
566
- }
567
-
568
- .text#{$infix}-left {
569
- text-align: left !important
570
- }
571
-
572
- .text#{$infix}-center {
573
- text-align: center !important
574
- }
575
-
576
- .text#{$infix}-right {
577
- text-align: right !important
578
- }
579
-
580
- .text#{$infix}-boxed {
581
- border-radius: 2px;
582
- padding: 4px 8px;
583
- margin: 0 8px;
584
- font-size: 11px;
585
- font-weight: 600;
586
- white-space: nowrap
587
- }
588
-
589
- .text#{$infix}-truncate,
590
- .text#{$infix}-ellipsis {
591
- display: block;
592
- overflow: hidden;
593
- text-overflow: ellipsis;
594
- white-space: nowrap
595
- }
596
- }
597
- }
598
- }
599
- @include helper-text-format($helper-breakpoints);
600
-
601
- // -----------------------------------------------------------------------------------------------------
602
- // @ Border helpers
603
- // -----------------------------------------------------------------------------------------------------
604
- // none:0 thin:2 thick:4 thicker:8
605
-
606
- @mixin helper-border-size($helper-breakpoints){
607
- @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
608
- @include media-breakpoint($materialBreakpoint) {
609
- $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
610
-
611
- @for $i from 0 through 4 {
612
- $border-value: $i * 2;
613
- $border-suffix: "-#{$border-value}";
614
- // Gerar classes para todos os cantos
615
- .border#{$infix}#{$border-suffix},
616
- .b#{$infix}#{$border-suffix} {
617
- border: #{$border-value}px solid!important;
618
- }
619
-
620
- @if($border-value != 0){
621
- @each $direction, $abbrev in (bottom:bb, top:bt, left:bl, right:br) {
622
- .border-#{$direction}#{$infix}#{$border-suffix},
623
- .#{$abbrev}#{$infix}#{$border-suffix}{
624
- border-#{$direction}:
625
- if($direction == "bottom",#{$border-value}px solid,
626
- if($direction == "top", #{$border-value}px solid,
627
- if($direction == "left", #{$border-value}px solid,
628
- #{$border-value}px solid
629
- )
630
- )
631
- ) !important;
632
- }
633
- }
634
- }
635
- }
636
- }
637
- }
638
- }
639
- @include helper-border-size($helper-breakpoints);
640
- .border-none {
641
- border: none !important
642
- }
643
-
644
- // -----------------------------------------------------------------------------------------------------
645
- // @ Border Radius helpers
646
- // -----------------------------------------------------------------------------------------------------
647
- @mixin helper-border-radius($helper-breakpoints){
648
- @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
649
- @include media-breakpoint($materialBreakpoint) {
650
- $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
651
-
652
- @for $i from 0 through 8 {
653
- $radius-value: $i * 2;
654
- $radius-suffix: "-#{$radius-value}";
655
- //Exemplo de classe gerada: .border-radius-md-4 ou .border-radius-4
656
- .border-radius#{$infix}#{$radius-suffix} {
657
- border-radius: #{$radius-value}px !important;
658
- }
659
-
660
- @if($radius-value != 0){
661
- @each $direction, $abbrev in (bottom:b, top:t, left:l, right:r) {
662
- //Exemplo de classe gerada: .border-radius-bottom-md-4 e .border-radius-b-md-4 ou .border-radius-bottom-4 e .border-radius-b-4
663
- .border-radius-#{$direction}#{$infix}#{$radius-suffix},
664
- .border-radius-#{$abbrev}#{$infix}#{$radius-suffix}{
665
- border-radius:
666
- if($direction == "bottom", 0 0 #{$radius-value}px #{$radius-value}px,
667
- if($direction == "top", #{$radius-value}px #{$radius-value}px 0 0,
668
- if($direction == "left", #{$radius-value}px 0 0 #{$radius-value}px,
669
- 0 #{$radius-value}px #{$radius-value}px 0
670
- )
671
- )
672
- )!important;
673
- }
674
- }
675
- }
676
- }
677
- .border-radius#{$infix}-circle,
678
- .border-radius#{$infix}-full,
679
- .border-radius#{$infix}-round {
680
- border-radius: 999px !important;
681
- }
682
- }
683
- }
684
- }
685
- @include helper-border-radius($helper-breakpoints);
686
-
687
-
688
-
689
- // -----------------------------------------------------------------------------------------------------
690
- // @ Overflow helpers
691
- // -----------------------------------------------------------------------------------------------------
692
- .overflow-auto {
693
- overflow: auto
694
- }
695
-
696
- .overflow-scroll {
697
- overflow: scroll
698
- }
699
-
700
- .overflow-hidden {
701
- overflow: hidden
702
- }
703
-
704
- .overflow-overlay {
705
- overflow: overlay
706
- }
707
-
708
- .overflow-x-auto {
709
- overflow-x: auto;
710
- overflow-y: hidden
711
- }
712
-
713
- .overflow-x-scroll {
714
- overflow-x: scroll;
715
- overflow-y: hidden
716
- }
717
-
718
- .overflow-x-hidden {
719
- overflow-x: hidden;
720
- overflow-y: hidden
721
- }
722
-
723
- .overflow-x-overlay {
724
- overflow-x: overlay;
725
- overflow-y: hidden
726
- }
727
-
728
- .overflow-y-auto {
729
- overflow-y: auto;
730
- overflow-x: hidden
731
- }
732
-
733
- .overflow-y-scroll {
734
- overflow-y: scroll;
735
- overflow-x: hidden
736
- }
737
-
738
- .overflow-y-hidden {
739
- overflow-y: hidden;
740
- overflow-x: hidden
741
- }
742
-
743
- .overflow-y-overlay {
744
- overflow-y: overlay;
745
- overflow-x: hidden
746
- }
747
-
748
-
749
- // -----------------------------------------------------------------------------------------------------
750
- // @ Container helpers
751
- // -----------------------------------------------------------------------------------------------------
752
- .matcha-container {
753
- width: 100%;
754
- max-width: 1128px;
755
- margin-left:auto;
756
- margin-right:auto;
757
- }
758
-
759
- // -----------------------------------------------------------------------------------------------------
760
- // @ Display helpers
761
- // -----------------------------------------------------------------------------------------------------
762
- .d-none {
763
- display: none !important;
764
- }
765
-
766
- .d-inline {
767
- display: inline !important;
768
- }
769
-
770
- .d-inline-block {
771
- display: inline-block !important;
772
- }
773
-
774
- .d-block {
775
- display: block !important;
776
- }
777
-
778
- .d-grid {
779
- display: grid !important;
780
- }
781
-
782
- .d-table {
783
- display: table !important;
784
- }
785
-
786
- .d-table-cell {
787
- display: table-cell !important;
788
- }
789
-
790
- .d-table-row {
791
- display: table-row !important;
792
- }
793
-
794
- .d-inline-flex {
795
- display: inline-flex !important;
796
- }
797
-
798
- .d-flex {
799
- display: flex !important;
800
- }
801
-
802
- .d-flex-center-center {
803
- display: flex !important;
804
- justify-content: center !important;
805
- align-items: center !important;
806
- }
807
-
808
- .d-flex-row {
809
- display: flex !important;
810
- flex-direction: row !important;
811
- }
812
-
813
- .d-flex-column {
814
- display: flex !important;
815
- flex-direction: column !important;
816
- }
817
-
818
- .d-flex-row-reverse {
819
- display: flex !important;
820
- flex-direction: row-reverse !important;
821
- }
822
-
823
- .d-flex-column-reverse {
824
- display: flex !important;
825
- flex-direction: column-reverse !important;
826
- }
827
-
828
- .d-flex-nowrap {
829
- flex-wrap: nowrap !important;
830
- }
831
-
832
- .d-flex-wrap {
833
- flex-wrap: wrap !important;
834
- }
835
-
836
- .d-flex-align-center {
837
- display: flex !important;
838
- align-items: center !important;
839
- }
840
-
841
- .d-flex-align-start {
842
- display: flex !important;
843
- align-items: flex-start !important;
844
- }
845
-
846
- .d-flex-align-end {
847
- display: flex !important;
848
- align-items: flex-end !important;
849
- }
850
-
851
- .d-flex-align-self-end {
852
- align-self: flex-end !important;
853
- }
854
-
855
- .d-flex-align-self-start {
856
- align-self: flex-start !important;
857
- }
858
-
859
- .d-flex-center {
860
- display: flex !important;
861
- justify-content: center !important;
862
- }
863
-
864
- .d-flex-flex-end,
865
- .d-flex-end {
866
- display: flex !important;
867
- justify-content: flex-end !important;
868
- }
869
-
870
- .d-flex-flex-start,
871
- .d-flex-start {
872
- display: flex !important;
873
- justify-content: flex-start !important;
874
- }
875
-
876
- .d-flex-inherit {
877
- display: flex !important;
878
- justify-content: inherit !important;
879
- }
880
-
881
- .d-flex-initial {
882
- display: flex !important;
883
- justify-content: initial !important;
884
- }
885
-
886
- .d-flex-left {
887
- display: flex !important;
888
- justify-content: left !important;
889
- }
890
-
891
- .d-flex-normal {
892
- display: flex !important;
893
- justify-content: normal !important;
894
- }
895
-
896
- .d-flex-revert {
897
- display: flex !important;
898
- justify-content: revert !important;
899
- }
900
-
901
- .d-flex-right {
902
- display: flex !important;
903
- justify-content: right !important;
904
- }
905
-
906
- .d-flex-space-around {
907
- display: flex !important;
908
- justify-content: space-around !important;
909
- }
910
-
911
- .d-flex-space-between {
912
- display: flex !important;
913
- justify-content: space-between !important;
914
- }
915
-
916
- .d-flex-space-evenly {
917
- display: flex !important;
918
- justify-content: space-evenly !important;
919
- }
920
-
921
- .d-flex-stretch {
922
- display: flex !important;
923
- justify-content: stretch !important;
924
- }
925
-
926
- .d-flex-unset {
927
- display: flex !important;
928
- justify-content: unset !important;
929
- }
930
-
931
- @media only screen and (max-width: 599px) {
932
- .d-none-xs {
933
- display: none !important;
934
- }
935
-
936
- .d-inline-xs {
937
- display: inline !important;
938
- }
939
-
940
- .d-inline-block-xs {
941
- display: inline-block !important;
942
- }
943
-
944
- .d-block-xs {
945
- display: block !important;
946
- }
947
-
948
- .d-grid-xs {
949
- display: grid !important;
950
- }
951
-
952
- .d-table-xs {
953
- display: table !important;
954
- }
955
-
956
- .d-table-cell-xs {
957
- display: table-cell !important;
958
- }
959
-
960
- .d-table-row-xs {
961
- display: table-row !important;
962
- }
963
-
964
- .d-inline-flex-xs {
965
- display: inline-flex !important;
966
- }
967
-
968
- .d-flex-xs {
969
- display: flex !important;
970
- }
971
-
972
- .d-flex-xs-center-center {
973
- display: flex !important;
974
- justify-content: center !important;
975
- align-items: center !important;
976
- }
977
-
978
- .d-flex-xs-row {
979
- display: flex !important;
980
- flex-direction: row !important;
981
- }
982
-
983
- .d-flex-xs-column {
984
- display: flex !important;
985
- flex-direction: column !important;
986
- }
987
-
988
- .d-flex-xs-nowrap {
989
- flex-wrap: nowrap !important;
990
- }
991
-
992
- .d-flex-xs-align-center {
993
- display: flex !important;
994
- align-items: center !important;
995
- }
996
-
997
- .d-flex-xs-align-start {
998
- display: flex !important;
999
- align-items: flex-start !important;
1000
- }
1001
-
1002
- .d-flex-xs-align-end {
1003
- display: flex !important;
1004
- align-items: flex-end !important;
1005
- }
1006
-
1007
- .d-flex-xs-align-self-end {
1008
- align-self: flex-end !important;
1009
- }
1010
-
1011
- .d-flex-xs-align-self-start {
1012
- align-self: flex-start !important;
1013
- }
1014
-
1015
- .d-flex-xs-center {
1016
- display: flex !important;
1017
- justify-content: center !important;
1018
- }
1019
-
1020
- .d-flex-xs-flex-end,
1021
- .d-flex-xs-end {
1022
- display: flex !important;
1023
- justify-content: flex-end !important;
1024
- }
1025
-
1026
- .d-flex-xs-flex-start,
1027
- .d-flex-xs-start {
1028
- display: flex !important;
1029
- justify-content: flex-start !important;
1030
- }
1031
-
1032
- .d-flex-xs-inherit {
1033
- display: flex !important;
1034
- justify-content: inherit !important;
1035
- }
1036
-
1037
- .d-flex-xs-initial {
1038
- display: flex !important;
1039
- justify-content: initial !important;
1040
- }
1041
-
1042
- .d-flex-xs-left {
1043
- display: flex !important;
1044
- justify-content: left !important;
1045
- }
1046
-
1047
- .d-flex-xs-normal {
1048
- display: flex !important;
1049
- justify-content: normal !important;
1050
- }
1051
-
1052
- .d-flex-xs-revert {
1053
- display: flex !important;
1054
- justify-content: revert !important;
1055
- }
1056
-
1057
- .d-flex-xs-right {
1058
- display: flex !important;
1059
- justify-content: right !important;
1060
- }
1061
-
1062
- .d-flex-xs-space-around {
1063
- display: flex !important;
1064
- justify-content: space-around !important;
1065
- }
1066
-
1067
- .d-flex-xs-space-between {
1068
- display: flex !important;
1069
- justify-content: space-between !important;
1070
- }
1071
-
1072
- .d-flex-xs-space-evenly {
1073
- display: flex !important;
1074
- justify-content: space-evenly !important;
1075
- }
1076
-
1077
- .d-flex-xs-stretch {
1078
- display: flex !important;
1079
- justify-content: stretch !important;
1080
- }
1081
-
1082
- .d-flex-xs-unset {
1083
- display: flex !important;
1084
- justify-content: unset !important;
1085
- }
1086
- }
1087
-
1088
- @media only screen and (min-width: 600px) {
1089
- .d-none-sm {
1090
- display: none !important;
1091
- }
1092
-
1093
- .d-inline-sm {
1094
- display: inline !important;
1095
- }
1096
-
1097
- .d-inline-block-sm {
1098
- display: inline-block !important;
1099
- }
1100
-
1101
- .d-block-sm {
1102
- display: block !important;
1103
- }
1104
-
1105
- .d-grid-sm {
1106
- display: grid !important;
1107
- }
1108
-
1109
- .d-table-sm {
1110
- display: table !important;
1111
- }
1112
-
1113
- .d-table-cell-sm {
1114
- display: table-cell !important;
1115
- }
1116
-
1117
- .d-table-row-sm {
1118
- display: table-row !important;
1119
- }
1120
-
1121
- .d-inline-flex-sm {
1122
- display: inline-flex !important;
1123
- }
1124
-
1125
- .d-flex-sm {
1126
- display: flex !important;
1127
- }
1128
-
1129
- .d-flex-sm-center-center {
1130
- display: flex !important;
1131
- justify-content: center !important;
1132
- align-items: center !important;
1133
- }
1134
-
1135
- .d-flex-sm-row {
1136
- display: flex !important;
1137
- flex-direction: row !important;
1138
- }
1139
-
1140
- .d-flex-sm-column {
1141
- display: flex !important;
1142
- flex-direction: column !important;
1143
- }
1144
-
1145
- .d-flex-sm-nowrap {
1146
- flex-wrap: nowrap !important;
1147
- }
1148
-
1149
- .d-flex-sm-align-center {
1150
- display: flex !important;
1151
- align-items: center !important;
1152
- }
1153
-
1154
- .d-flex-sm-align-start {
1155
- display: flex !important;
1156
- align-items: flex-start !important;
1157
- }
1158
-
1159
- .d-flex-sm-align-end {
1160
- display: flex !important;
1161
- align-items: flex-end !important;
1162
- }
1163
-
1164
- .d-flex-sm-align-self-end {
1165
- align-self: flex-end !important;
1166
- }
1167
-
1168
- .d-flex-sm-align-self-start {
1169
- align-self: flex-start !important;
1170
- }
1171
-
1172
- .d-flex-sm-center {
1173
- display: flex !important;
1174
- justify-content: center !important;
1175
- }
1176
-
1177
- .d-flex-sm-flex-end,
1178
- .d-flex-sm-end {
1179
- display: flex !important;
1180
- justify-content: flex-end !important;
1181
- }
1182
-
1183
- .d-flex-sm-flex-start,
1184
- .d-flex-sm-start {
1185
- display: flex !important;
1186
- justify-content: flex-start !important;
1187
- }
1188
-
1189
- .d-flex-sm-inherit {
1190
- display: flex !important;
1191
- justify-content: inherit !important;
1192
- }
1193
-
1194
- .d-flex-sm-initial {
1195
- display: flex !important;
1196
- justify-content: initial !important;
1197
- }
1198
-
1199
- .d-flex-sm-left {
1200
- display: flex !important;
1201
- justify-content: left !important;
1202
- }
1203
-
1204
- .d-flex-sm-normal {
1205
- display: flex !important;
1206
- justify-content: normal !important;
1207
- }
1208
-
1209
- .d-flex-sm-revert {
1210
- display: flex !important;
1211
- justify-content: revert !important;
1212
- }
1213
-
1214
- .d-flex-sm-right {
1215
- display: flex !important;
1216
- justify-content: right !important;
1217
- }
1218
-
1219
- .d-flex-sm-space-around {
1220
- display: flex !important;
1221
- justify-content: space-around !important;
1222
- }
1223
-
1224
- .d-flex-sm-space-between {
1225
- display: flex !important;
1226
- justify-content: space-between !important;
1227
- }
1228
-
1229
- .d-flex-sm-space-evenly {
1230
- display: flex !important;
1231
- justify-content: space-evenly !important;
1232
- }
1233
-
1234
- .d-flex-sm-stretch {
1235
- display: flex !important;
1236
- justify-content: stretch !important;
1237
- }
1238
-
1239
- .d-flex-sm-unset {
1240
- display: flex !important;
1241
- justify-content: unset !important;
1242
- }
1243
- }
1244
-
1245
- @media only screen and (min-width: 1024px) {
1246
- .d-none-md {
1247
- display: none !important;
1248
- }
1249
-
1250
- .d-inline-md {
1251
- display: inline !important;
1252
- }
1253
-
1254
- .d-inline-block-md {
1255
- display: inline-block !important;
1256
- }
1257
-
1258
- .d-block-md {
1259
- display: block !important;
1260
- }
1261
-
1262
- .d-grid-md {
1263
- display: grid !important;
1264
- }
1265
-
1266
- .d-table-md {
1267
- display: table !important;
1268
- }
1269
-
1270
- .d-table-cell-md {
1271
- display: table-cell !important;
1272
- }
1273
-
1274
- .d-table-row-md {
1275
- display: table-row !important;
1276
- }
1277
-
1278
- .d-inline-flex-md {
1279
- display: inline-flex !important;
1280
- }
1281
-
1282
- .d-flex-md {
1283
- display: flex !important;
1284
- }
1285
-
1286
- .d-flex-md-center-center {
1287
- display: flex !important;
1288
- justify-content: center !important;
1289
- align-items: center !important;
1290
- }
1291
-
1292
- .d-flex-md-row {
1293
- display: flex !important;
1294
- flex-direction: row !important;
1295
- }
1296
-
1297
- .d-flex-md-column {
1298
- display: flex !important;
1299
- flex-direction: column !important;
1300
- }
1301
-
1302
- .d-flex-md-nowrap {
1303
- flex-wrap: nowrap !important;
1304
- }
1305
-
1306
- .d-flex-md-align-center {
1307
- display: flex !important;
1308
- align-items: center !important;
1309
- }
1310
-
1311
- .d-flex-md-align-start {
1312
- display: flex !important;
1313
- align-items: flex-start !important;
1314
- }
1315
-
1316
- .d-flex-md-align-end {
1317
- display: flex !important;
1318
- align-items: flex-end !important;
1319
- }
1320
-
1321
- .d-flex-md-align-self-end {
1322
- align-self: flex-end !important;
1323
- }
1324
-
1325
- .d-flex-md-align-self-start {
1326
- align-self: flex-start !important;
1327
- }
1328
-
1329
- .d-flex-md-center {
1330
- display: flex !important;
1331
- justify-content: center !important;
1332
- }
1333
-
1334
- .d-flex-md-flex-end,
1335
- .d-flex-md-end {
1336
- display: flex !important;
1337
- justify-content: flex-end !important;
1338
- }
1339
-
1340
- .d-flex-md-flex-start,
1341
- .d-flex-md-start {
1342
- display: flex !important;
1343
- justify-content: flex-start !important;
1344
- }
1345
-
1346
- .d-flex-md-inherit {
1347
- display: flex !important;
1348
- justify-content: inherit !important;
1349
- }
1350
-
1351
- .d-flex-md-initial {
1352
- display: flex !important;
1353
- justify-content: initial !important;
1354
- }
1355
-
1356
- .d-flex-md-left {
1357
- display: flex !important;
1358
- justify-content: left !important;
1359
- }
1360
-
1361
- .d-flex-md-normal {
1362
- display: flex !important;
1363
- justify-content: normal !important;
1364
- }
1365
-
1366
- .d-flex-md-revert {
1367
- display: flex !important;
1368
- justify-content: revert !important;
1369
- }
1370
-
1371
- .d-flex-md-right {
1372
- display: flex !important;
1373
- justify-content: right !important;
1374
- }
1375
-
1376
- .d-flex-md-space-around {
1377
- display: flex !important;
1378
- justify-content: space-around !important;
1379
- }
1380
-
1381
- .d-flex-md-space-between {
1382
- display: flex !important;
1383
- justify-content: space-between !important;
1384
- }
1385
-
1386
- .d-flex-md-space-evenly {
1387
- display: flex !important;
1388
- justify-content: space-evenly !important;
1389
- }
1390
-
1391
- .d-flex-md-stretch {
1392
- display: flex !important;
1393
- justify-content: stretch !important;
1394
- }
1395
-
1396
- .d-flex-md-unset {
1397
- display: flex !important;
1398
- justify-content: unset !important;
1399
- }
1400
- }
1401
-
1402
- @media only screen and (min-width: 1440px) {
1403
- .d-none-lg {
1404
- display: none !important;
1405
- }
1406
-
1407
- .d-inline-lg {
1408
- display: inline !important;
1409
- }
1410
-
1411
- .d-inline-block-lg {
1412
- display: inline-block !important;
1413
- }
1414
-
1415
- .d-block-lg {
1416
- display: block !important;
1417
- }
1418
-
1419
- .d-grid-lg {
1420
- display: grid !important;
1421
- }
1422
-
1423
- .d-table-lg {
1424
- display: table !important;
1425
- }
1426
-
1427
- .d-table-cell-lg {
1428
- display: table-cell !important;
1429
- }
1430
-
1431
- .d-table-row-lg {
1432
- display: table-row !important;
1433
- }
1434
-
1435
- .d-inline-flex-lg {
1436
- display: inline-flex !important;
1437
- }
1438
-
1439
- .d-flex-lg {
1440
- display: flex !important;
1441
- }
1442
-
1443
- .d-flex-lg-center-center {
1444
- display: flex !important;
1445
- justify-content: center !important;
1446
- align-items: center !important;
1447
- }
1448
-
1449
- .d-flex-lg-row {
1450
- display: flex !important;
1451
- flex-direction: row !important;
1452
- }
1453
-
1454
- .d-flex-lg-column {
1455
- display: flex !important;
1456
- flex-direction: column !important;
1457
- }
1458
-
1459
- .d-flex-lg-nowrap {
1460
- flex-wrap: nowrap !important;
1461
- }
1462
-
1463
- .d-flex-lg-align-center {
1464
- display: flex !important;
1465
- align-items: center !important;
1466
- }
1467
-
1468
- .d-flex-lg-align-start {
1469
- display: flex !important;
1470
- align-items: flex-start !important;
1471
- }
1472
-
1473
- .d-flex-lg-align-end {
1474
- display: flex !important;
1475
- align-items: flex-end !important;
1476
- }
1477
-
1478
- .d-flex-lg-align-self-end {
1479
- align-self: flex-end !important;
1480
- }
1481
-
1482
- .d-flex-lg-align-self-start {
1483
- align-self: flex-start !important;
1484
- }
1485
-
1486
- .d-flex-lg-center {
1487
- display: flex !important;
1488
- justify-content: center !important;
1489
- }
1490
-
1491
- .d-flex-lg-flex-end,
1492
- .d-flex-lg-end {
1493
- display: flex !important;
1494
- justify-content: flex-end !important;
1495
- }
1496
-
1497
- .d-flex-lg-flex-start,
1498
- .d-flex-lg-start {
1499
- display: flex !important;
1500
- justify-content: flex-start !important;
1501
- }
1502
-
1503
- .d-flex-lg-inherit {
1504
- display: flex !important;
1505
- justify-content: inherit !important;
1506
- }
1507
-
1508
- .d-flex-lg-initial {
1509
- display: flex !important;
1510
- justify-content: initial !important;
1511
- }
1512
-
1513
- .d-flex-lg-left {
1514
- display: flex !important;
1515
- justify-content: left !important;
1516
- }
1517
-
1518
- .d-flex-lg-normal {
1519
- display: flex !important;
1520
- justify-content: normal !important;
1521
- }
1522
-
1523
- .d-flex-lg-revert {
1524
- display: flex !important;
1525
- justify-content: revert !important;
1526
- }
1527
-
1528
- .d-flex-lg-right {
1529
- display: flex !important;
1530
- justify-content: right !important;
1531
- }
1532
-
1533
- .d-flex-lg-space-around {
1534
- display: flex !important;
1535
- justify-content: space-around !important;
1536
- }
1537
-
1538
- .d-flex-lg-space-between {
1539
- display: flex !important;
1540
- justify-content: space-between !important;
1541
- }
1542
-
1543
- .d-flex-lg-space-evenly {
1544
- display: flex !important;
1545
- justify-content: space-evenly !important;
1546
- }
1547
-
1548
- .d-flex-lg-stretch {
1549
- display: flex !important;
1550
- justify-content: stretch !important;
1551
- }
1552
-
1553
- .d-flex-lg-unset {
1554
- display: flex !important;
1555
- justify-content: unset !important;
1556
- }
1557
- }
1558
-
1559
- @media only screen and (min-width: 1920px) {
1560
- .d-none-xl {
1561
- display: none !important;
1562
- }
1563
-
1564
- .d-inline-xl {
1565
- display: inline !important;
1566
- }
1567
-
1568
- .d-inline-block-xl {
1569
- display: inline-block !important;
1570
- }
1571
-
1572
- .d-block-xl {
1573
- display: block !important;
1574
- }
1575
-
1576
- .d-grid-xl {
1577
- display: grid !important;
1578
- }
1579
-
1580
- .d-table-xl {
1581
- display: table !important;
1582
- }
1583
-
1584
- .d-table-cell-xl {
1585
- display: table-cell !important;
1586
- }
1587
-
1588
- .d-table-row-xl {
1589
- display: table-row !important;
1590
- }
1591
-
1592
- .d-inline-flex-xl {
1593
- display: inline-flex !important;
1594
- }
1595
-
1596
- .d-flex-xl {
1597
- display: flex !important;
1598
- }
1599
-
1600
- .d-flex-xl-center-center {
1601
- display: flex !important;
1602
- justify-content: center !important;
1603
- align-items: center !important;
1604
- }
1605
-
1606
- .d-flex-xl-row {
1607
- display: flex !important;
1608
- flex-direction: row !important;
1609
- }
1610
-
1611
- .d-flex-xl-column {
1612
- display: flex !important;
1613
- flex-direction: column !important;
1614
- }
1615
-
1616
- .d-flex-xl-nowrap {
1617
- flex-wrap: nowrap !important;
1618
- }
1619
-
1620
- .d-flex-xl-align-center {
1621
- display: flex !important;
1622
- align-items: center !important;
1623
- }
1624
-
1625
- .d-flex-xl-align-start {
1626
- display: flex !important;
1627
- align-items: flex-start !important;
1628
- }
1629
-
1630
- .d-flex-xl-align-end {
1631
- display: flex !important;
1632
- align-items: flex-end !important;
1633
- }
1634
-
1635
- .d-flex-xl-align-self-end {
1636
- align-self: flex-end !important;
1637
- }
1638
-
1639
- .d-flex-xl-align-self-start {
1640
- align-self: flex-start !important;
1641
- }
1642
-
1643
- .d-flex-xl-center {
1644
- display: flex !important;
1645
- justify-content: center !important;
1646
- }
1647
-
1648
- .d-flex-xl-flex-end,
1649
- .d-flex-xl-end {
1650
- display: flex !important;
1651
- justify-content: flex-end !important;
1652
- }
1653
-
1654
- .d-flex-xl-flex-start,
1655
- .d-flex-xl-start {
1656
- display: flex !important;
1657
- justify-content: flex-start !important;
1658
- }
1659
-
1660
- .d-flex-xl-inherit {
1661
- display: flex !important;
1662
- justify-content: inherit !important;
1663
- }
1664
-
1665
- .d-flex-xl-initial {
1666
- display: flex !important;
1667
- justify-content: initial !important;
1668
- }
1669
-
1670
- .d-flex-xl-left {
1671
- display: flex !important;
1672
- justify-content: left !important;
1673
- }
1674
-
1675
- .d-flex-xl-normal {
1676
- display: flex !important;
1677
- justify-content: normal !important;
1678
- }
1679
-
1680
- .d-flex-xl-revert {
1681
- display: flex !important;
1682
- justify-content: revert !important;
1683
- }
1684
-
1685
- .d-flex-xl-right {
1686
- display: flex !important;
1687
- justify-content: right !important;
1688
- }
1689
-
1690
- .d-flex-xl-space-around {
1691
- display: flex !important;
1692
- justify-content: space-around !important;
1693
- }
1694
-
1695
- .d-flex-xl-space-between {
1696
- display: flex !important;
1697
- justify-content: space-between !important;
1698
- }
1699
-
1700
- .d-flex-xl-space-evenly {
1701
- display: flex !important;
1702
- justify-content: space-evenly !important;
1703
- }
1704
-
1705
- .d-flex-xl-stretch {
1706
- display: flex !important;
1707
- justify-content: stretch !important;
1708
- }
1709
-
1710
- .d-flex-xl-unset {
1711
- display: flex !important;
1712
- justify-content: unset !important;
1713
- }
1714
- }
1715
-
1716
- .flex-grow-1 {
1717
- flex-grow: 1;
1718
- ;
1719
- }
1720
-
1721
- .flex-shrink-1 {
1722
- flex-shrink: 1;
1723
- ;
1724
- }
1725
-
1726
- .flex-basis-1 {
1727
- flex-basis: 100%;
1728
- ;
1729
- }
1730
-
1731
- .flex-full {
1732
- flex-grow: 1;
1733
- flex-shrink: 1;
1734
- flex-basis: 100%;
1735
- ;
2
+ // @ Container helpers
3
+ // -----------------------------------------------------------------------------------------------------
4
+ .matcha-container {
5
+ width: 100%;
6
+ max-width: 1128px;
7
+ margin-left:auto;
8
+ margin-right:auto;
1736
9
  }
1737
10
 
1738
11
  // -----------------------------------------------------------------------------------------------------
@@ -1758,9 +31,7 @@ $align-class-names: top, right, bottom, left;
1758
31
  text-overflow: ellipsis;
1759
32
  word-break: break-word;
1760
33
  white-space: initial;
1761
-
1762
34
  -webkit-box-orient: vertical;
1763
-
1764
35
  }
1765
36
 
1766
37
  .combo-image-text .avatar,
@@ -1811,160 +82,24 @@ $align-class-names: top, right, bottom, left;
1811
82
  text-overflow: ellipsis;
1812
83
  word-break: break-word;
1813
84
  white-space: initial;
1814
-
1815
85
  -webkit-box-orient: vertical;
1816
-
1817
86
  }
1818
-
1819
87
  .word-break {
1820
88
  word-break: break-word
1821
89
  }
1822
-
1823
90
  .word-break-all {
1824
91
  word-break: break-all
1825
92
  }
1826
93
 
1827
- // -----------------------------------------------------------------------------------------------------
1828
- // @ Font Weight
1829
- // -----------------------------------------------------------------------------------------------------
1830
- @mixin helper-font-weight($helper-breakpoints){
1831
- @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
1832
- @include media-breakpoint($materialBreakpoint) {
1833
- $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
1834
-
1835
- @for $index from 1 through 9 {
1836
- $weight: $index * 100;
1837
- .font-weight#{$infix}-#{$weight},
1838
- .fw#{$infix}-#{$weight} {
1839
- font-weight: $weight !important;
1840
- }
1841
- }
1842
- }
1843
- }
1844
- }
1845
- @include helper-font-weight($helper-breakpoints);
1846
-
1847
- // -----------------------------------------------------------------------------------------------------
1848
- // @ Font Size
1849
- // -----------------------------------------------------------------------------------------------------
1850
- @mixin helper-font-size($helper-breakpoints){
1851
- @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
1852
- @include media-breakpoint($materialBreakpoint) {
1853
- $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
1854
-
1855
- $index: 0;
1856
- @while $index <= 18 {
1857
- $size: $index * 4;
1858
- .font-size#{$infix}-#{$size},
1859
- .fs#{$infix}-#{$size} {
1860
- font-size: #{$size}px !important;
1861
- }
1862
- $index: $index + 1;
1863
- }
1864
- }
1865
- }
1866
- }
1867
- @include helper-font-size($helper-breakpoints);
1868
-
1869
- // -----------------------------------------------------------------------------------------------------
1870
- // @ Line Height
1871
- // -----------------------------------------------------------------------------------------------------
1872
- @mixin helper-line-height($helper-breakpoints){
1873
- @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
1874
- @include media-breakpoint($materialBreakpoint) {
1875
- $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
1876
-
1877
- $index: 0;
1878
- @while $index <= 36 {
1879
- $height: $index * 2;
1880
- .line-height#{$infix}-#{$height},
1881
- .lh#{$infix}-#{$height} {
1882
- line-height: #{$height}px !important;
1883
- }
1884
- $index: $index + 1;
1885
- }
1886
- }
1887
- }
1888
- }
1889
- @include helper-line-height($helper-breakpoints);
1890
-
1891
-
1892
- // -----------------------------------------------------------------------------------------------------
1893
- // @ aspect ratio
1894
- // -----------------------------------------------------------------------------------------------------
1895
- .aspect-ratio-auto {
1896
- aspect-ratio: auto;
1897
- }
1898
- .aspect-ratio-auto-1x1 {
1899
- aspect-ratio: auto 1 / 1;
1900
- }
1901
- .aspect-ratio-auto-1x2 {
1902
- aspect-ratio: auto 1 / 2;
1903
- }
1904
- .aspect-ratio-auto-2x1 {
1905
- aspect-ratio: auto 2 / 1;
1906
- }
1907
- .aspect-ratio-auto-3x4 {
1908
- aspect-ratio: auto 3 / 4;
1909
- }
1910
- .aspect-ratio-auto-4x3 {
1911
- aspect-ratio: auto 4 / 3;
1912
- }
1913
- .aspect-ratio-auto-9x16 {
1914
- aspect-ratio: auto 9 / 16;
1915
- }
1916
- .aspect-ratio-auto-16x9 {
1917
- aspect-ratio: auto 16 / 9;
1918
- }
1919
-
1920
- .aspect-ratio-1x1 {
1921
- aspect-ratio: 1 / 1;
1922
- }
1923
- .aspect-ratio-1x2 {
1924
- aspect-ratio: 1 / 2;
1925
- }
1926
- .aspect-ratio-2x1 {
1927
- aspect-ratio: 2 / 1;
1928
- }
1929
- .aspect-ratio-3x4 {
1930
- aspect-ratio: 3 / 4;
1931
- }
1932
- .aspect-ratio-4x3 {
1933
- aspect-ratio: 4 / 3;
1934
- }
1935
- .aspect-ratio-9x16 {
1936
- aspect-ratio: 9 / 16;
1937
- }
1938
- .aspect-ratio-16x9 {
1939
- aspect-ratio: 16 / 9;
1940
- }
1941
-
1942
- .aspect-ratio-half {
1943
- aspect-ratio: 0.5;
1944
- }
1945
-
1946
- .aspect-ratio-inherit {
1947
- aspect-ratio: inherit;
1948
- }
1949
- .aspect-ratio-initial {
1950
- aspect-ratio: initial;
1951
- }
1952
- .aspect-ratio-unset {
1953
- aspect-ratio: unset;
1954
- }
1955
-
1956
-
1957
94
  // -----------------------------------------------------------------------------------------------------
1958
95
  // @ Letter spacing helpers
1959
96
  // -----------------------------------------------------------------------------------------------------
1960
97
  .letter-spacing-condensed {
1961
98
  letter-spacing: -.08em !important;
1962
99
  }
1963
-
1964
100
  .letter-spacing-normal {
1965
101
  letter-spacing: normal !important;
1966
102
  }
1967
-
1968
103
  .letter-spacing-relaxed {
1969
104
  letter-spacing: .08em !important;
1970
105
  }
@@ -1972,38 +107,9 @@ $align-class-names: top, right, bottom, left;
1972
107
  // -----------------------------------------------------------------------------------------------------
1973
108
  // @ Cursor helpers
1974
109
  // -----------------------------------------------------------------------------------------------------
1975
- .cursor-pointer {
1976
- cursor: pointer
1977
- }
1978
-
1979
- .cursor-default {
1980
- cursor: default
1981
- }
1982
-
1983
- .cursor-grab {
1984
- cursor: grab
1985
- }
1986
-
1987
- .cursor-grabbing {
1988
- cursor: grabbing
1989
- }
1990
-
1991
- .cursor-move {
1992
- cursor: move
1993
- }
1994
-
1995
- .cursor-help {
1996
- cursor: help
1997
- }
1998
-
1999
- .cursor-wait {
2000
- cursor: wait
2001
- }
2002
-
2003
110
  .pointer-events-all {
2004
111
  pointer-events: all
2005
112
  }
2006
-
2007
113
  .pointer-events-none {
2008
114
  pointer-events: none
2009
115
  }
@@ -2025,134 +131,22 @@ $align-class-names: top, right, bottom, left;
2025
131
  opacity: .5;
2026
132
  pointer-events: none
2027
133
  }
2028
-
2029
134
  .enabled {
2030
135
  transition: opacity 100ms linear;
2031
136
  opacity: 1
2032
137
  }
2033
138
 
2034
139
 
2035
- // -----------------------------------------------------------------------------------------------------
2036
- // @ Opacity
2037
- // -----------------------------------------------------------------------------------------------------
2038
- /* <integer> values */
2039
- .opacity-0 {
2040
- opacity: 0;
2041
- }
2042
-
2043
- .opacity-01 {
2044
- opacity: 0.1;
2045
- }
2046
-
2047
- .opacity-02 {
2048
- opacity: 0.2;
2049
- }
2050
-
2051
- .opacity-03 {
2052
- opacity: 0.3;
2053
- }
2054
-
2055
- .opacity-04 {
2056
- opacity: 0.4;
2057
- }
2058
-
2059
- .opacity-05 {
2060
- opacity: 0.5;
2061
- }
2062
-
2063
- .opacity-06 {
2064
- opacity: 0.6;
2065
- }
2066
-
2067
- .opacity-07 {
2068
- opacity: 0.7;
2069
- }
2070
-
2071
- .opacity-08 {
2072
- opacity: 0.8;
2073
- }
2074
-
2075
- .opacity-09 {
2076
- opacity: 0.9;
2077
- }
2078
-
2079
- .opacity-10,
2080
- .opacity-1 {
2081
- opacity: 1.0;
2082
- }
2083
-
2084
140
  // -----------------------------------------------------------------------------------------------------
2085
141
  // @ Hover - Show/Hide
2086
142
  // -----------------------------------------------------------------------------------------------------
2087
143
  .on-hover-show:hover {
2088
144
  opacity: 1;
2089
145
  }
2090
-
2091
146
  .on-hover-hide:hover {
2092
147
  opacity: 0;
2093
148
  }
2094
149
 
2095
- // -----------------------------------------------------------------------------------------------------
2096
- // @ Transition
2097
- // write mixin using the time tokens
2098
- // -----------------------------------------------------------------------------------------------------
2099
- .ts-100-l {
2100
- transition: all 100ms linear;
2101
- }
2102
-
2103
- .ts-300-l {
2104
- transition: all 300ms linear;
2105
- }
2106
-
2107
- .ts-100-ei {
2108
- transition: all 100ms ease-in;
2109
- }
2110
-
2111
- .ts-300-ei {
2112
- transition: all 300ms ease-in;
2113
- }
2114
-
2115
- .ts-100-eo {
2116
- transition: all 100ms ease-out;
2117
- }
2118
-
2119
- .ts-300-eo {
2120
- transition: all 300ms ease-out;
2121
- }
2122
-
2123
- .ts-100-eio {
2124
- transition: all 100ms ease-in-out;
2125
- }
2126
-
2127
- .ts-300-eio {
2128
- transition: all 300ms ease-in-out;
2129
- }
2130
-
2131
- // -----------------------------------------------------------------------------------------------------
2132
- // @ Rotate Animation
2133
- // -----------------------------------------------------------------------------------------------------
2134
- .rotate-infinity-1s {
2135
- animation: spin 1s infinite;
2136
- }
2137
-
2138
- .rotate-infinity-2s {
2139
- animation: spin 2s infinite;
2140
- }
2141
-
2142
- .rotate-infinity-3s {
2143
- animation: spin 3s infinite;
2144
- }
2145
-
2146
- @keyframes spin {
2147
- 0% {
2148
- rotate: 0deg;
2149
- }
2150
-
2151
- 100% {
2152
- rotate: 360deg;
2153
- }
2154
- }
2155
-
2156
150
  // -----------------------------------------------------------------------------------------------------
2157
151
  // @ Float
2158
152
  // -----------------------------------------------------------------------------------------------------
@@ -2161,20 +155,16 @@ $align-class-names: top, right, bottom, left;
2161
155
  clear: both;
2162
156
  display: table;
2163
157
  }
2164
-
2165
158
  .left {
2166
159
  float: left;
2167
160
  }
2168
-
2169
161
  .right {
2170
162
  float: right;
2171
163
  }
2172
-
2173
164
  .list,
2174
165
  .list-style-none {
2175
166
  list-style: none;
2176
167
  }
2177
-
2178
168
  .list-style-disc,
2179
169
  .list-style-dot {
2180
170
  list-style: disc;