@appartmint/mint 0.12.15 → 0.12.17
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.
- package/dist/css/mint.css +123 -39
- package/dist/css/mint.css.map +1 -1
- package/dist/css/mint.min.css +1 -1
- package/dist/css/mint.min.css.map +1 -1
- package/dist/js/imports/components/header.d.ts +5 -0
- package/dist/js/imports/components/header.d.ts.map +1 -1
- package/dist/js/index.js +45 -10
- package/dist/js/index.js.map +1 -1
- package/dist/js/index.min.js +1 -1
- package/dist/js/index.min.js.map +1 -1
- package/dist/js/util.d.ts.map +1 -1
- package/dist/js/util.js +1 -2
- package/dist/js/util.js.map +1 -1
- package/dist/js/util.min.js +1 -1
- package/dist/js/util.min.js.map +1 -1
- package/package.json +1 -1
- package/src/scss/imports/components/_cards.scss +3 -3
- package/src/scss/imports/components/_header.scss +109 -4
- package/src/scss/imports/util/_util.scss +25 -5
- package/src/scss/imports/util/_vars.scss +1 -0
package/dist/css/mint.css
CHANGED
|
@@ -50,15 +50,15 @@
|
|
|
50
50
|
.mint-pill:hover i {
|
|
51
51
|
color: inherit !important;
|
|
52
52
|
}
|
|
53
|
-
.mint-btn:focus,
|
|
54
|
-
.mint-btn-group:focus,
|
|
55
|
-
.mint-pill:focus {
|
|
53
|
+
.mint-btn:focus-visible,
|
|
54
|
+
.mint-btn-group:focus-visible,
|
|
55
|
+
.mint-pill:focus-visible {
|
|
56
56
|
color: var(--mint-back);
|
|
57
57
|
background: var(--mint-brand-4);
|
|
58
58
|
}
|
|
59
|
-
.mint-btn:focus i,
|
|
60
|
-
.mint-btn-group:focus i,
|
|
61
|
-
.mint-pill:focus i {
|
|
59
|
+
.mint-btn:focus-visible i,
|
|
60
|
+
.mint-btn-group:focus-visible i,
|
|
61
|
+
.mint-pill:focus-visible i {
|
|
62
62
|
color: inherit !important;
|
|
63
63
|
}
|
|
64
64
|
.mint-btn:active, .mint-btn.mint-active,
|
|
@@ -88,9 +88,9 @@
|
|
|
88
88
|
color: var(--mint-fore);
|
|
89
89
|
background: var(--mint-brand-2);
|
|
90
90
|
}
|
|
91
|
-
.mint-btn.mint-reverse:focus,
|
|
92
|
-
.mint-btn-group.mint-reverse:focus,
|
|
93
|
-
.mint-pill.mint-reverse:focus {
|
|
91
|
+
.mint-btn.mint-reverse:focus-visible,
|
|
92
|
+
.mint-btn-group.mint-reverse:focus-visible,
|
|
93
|
+
.mint-pill.mint-reverse:focus-visible {
|
|
94
94
|
color: var(--mint-fore);
|
|
95
95
|
background: var(--mint-brand-2);
|
|
96
96
|
}
|
|
@@ -115,9 +115,9 @@
|
|
|
115
115
|
background: var(--mint-accent-2);
|
|
116
116
|
border-color: var(--mint-accent-2);
|
|
117
117
|
}
|
|
118
|
-
.mint-btn.mint-alt:focus,
|
|
119
|
-
.mint-btn-group.mint-alt:focus,
|
|
120
|
-
.mint-pill.mint-alt:focus {
|
|
118
|
+
.mint-btn.mint-alt:focus-visible,
|
|
119
|
+
.mint-btn-group.mint-alt:focus-visible,
|
|
120
|
+
.mint-pill.mint-alt:focus-visible {
|
|
121
121
|
color: var(--mint-back);
|
|
122
122
|
background: var(--mint-accent-2);
|
|
123
123
|
border-color: var(--mint-accent-2);
|
|
@@ -145,9 +145,9 @@
|
|
|
145
145
|
background: var(--mint-trans);
|
|
146
146
|
border-color: var(--mint-trans);
|
|
147
147
|
}
|
|
148
|
-
.mint-btn.mint-alt.mint-reverse:focus,
|
|
149
|
-
.mint-btn-group.mint-alt.mint-reverse:focus,
|
|
150
|
-
.mint-pill.mint-alt.mint-reverse:focus {
|
|
148
|
+
.mint-btn.mint-alt.mint-reverse:focus-visible,
|
|
149
|
+
.mint-btn-group.mint-alt.mint-reverse:focus-visible,
|
|
150
|
+
.mint-pill.mint-alt.mint-reverse:focus-visible {
|
|
151
151
|
color: var(--mint-brand-4);
|
|
152
152
|
background: var(--mint-trans);
|
|
153
153
|
border-color: var(--mint-trans);
|
|
@@ -187,7 +187,7 @@
|
|
|
187
187
|
.mint-btn-icon:hover i {
|
|
188
188
|
color: var(--mint-accent-2);
|
|
189
189
|
}
|
|
190
|
-
.mint-btn-icon:focus i {
|
|
190
|
+
.mint-btn-icon:focus-visible i {
|
|
191
191
|
color: var(--mint-accent-2);
|
|
192
192
|
}
|
|
193
193
|
.mint-btn-icon:active i, .mint-btn-icon.mint-active i {
|
|
@@ -233,7 +233,7 @@
|
|
|
233
233
|
.mint-btn-group button:hover {
|
|
234
234
|
background: var(--mint-brand-5);
|
|
235
235
|
}
|
|
236
|
-
.mint-btn-group button:focus {
|
|
236
|
+
.mint-btn-group button:focus-visible {
|
|
237
237
|
background: var(--mint-brand-5);
|
|
238
238
|
}
|
|
239
239
|
.mint-btn-group button:active, .mint-btn-group button.mint-active {
|
|
@@ -326,7 +326,7 @@ p .mint-pill, p .mint-btn {
|
|
|
326
326
|
overflow: visible;
|
|
327
327
|
}
|
|
328
328
|
.mint-card.mint-stagger > .mint-image, .mint-card.mint-stagger > mint-image .mint-image {
|
|
329
|
-
width: 50
|
|
329
|
+
width: calc(50% + 1.5rem);
|
|
330
330
|
height: fit-content;
|
|
331
331
|
margin-right: -3rem;
|
|
332
332
|
border-radius: 1rem;
|
|
@@ -337,7 +337,7 @@ p .mint-pill, p .mint-btn {
|
|
|
337
337
|
object-fit: cover;
|
|
338
338
|
}
|
|
339
339
|
.mint-card.mint-stagger > .mint-content {
|
|
340
|
-
width: 50
|
|
340
|
+
width: calc(50% + 1.5rem);
|
|
341
341
|
height: fit-content;
|
|
342
342
|
margin-top: 3rem;
|
|
343
343
|
border-radius: 1rem;
|
|
@@ -349,7 +349,7 @@ p .mint-pill, p .mint-btn {
|
|
|
349
349
|
flex-direction: row-reverse;
|
|
350
350
|
}
|
|
351
351
|
.mint-card.mint-stagger.mint-reverse > .mint-image, .mint-card.mint-stagger.mint-reverse > mint-image .mint-image {
|
|
352
|
-
margin-right:
|
|
352
|
+
margin-right: 0;
|
|
353
353
|
margin-left: -3rem;
|
|
354
354
|
}
|
|
355
355
|
}
|
|
@@ -569,6 +569,88 @@ app-footer::before {
|
|
|
569
569
|
#mint-header.mint-left #mint-wrapper.mint-open {
|
|
570
570
|
left: 0;
|
|
571
571
|
}
|
|
572
|
+
@media (min-width: 768px) {
|
|
573
|
+
#mint-header.mint-expand .mint-buttons {
|
|
574
|
+
width: auto;
|
|
575
|
+
}
|
|
576
|
+
#mint-header.mint-expand .mint-buttons [aria-controls=mint-wrapper] {
|
|
577
|
+
display: none;
|
|
578
|
+
}
|
|
579
|
+
#mint-header.mint-expand #mint-wrapper {
|
|
580
|
+
position: static;
|
|
581
|
+
display: flex !important;
|
|
582
|
+
height: 100%;
|
|
583
|
+
padding: 0;
|
|
584
|
+
z-index: 0;
|
|
585
|
+
}
|
|
586
|
+
#mint-header.mint-expand #mint-wrapper, #mint-header.mint-expand #mint-wrapper nav {
|
|
587
|
+
background: var(--mint-glow-0) !important;
|
|
588
|
+
overflow: visible;
|
|
589
|
+
}
|
|
590
|
+
#mint-header.mint-expand #mint-wrapper nav {
|
|
591
|
+
border: none;
|
|
592
|
+
}
|
|
593
|
+
#mint-header.mint-expand #mint-wrapper nav > ul {
|
|
594
|
+
flex-direction: row;
|
|
595
|
+
justify-content: flex-end;
|
|
596
|
+
flex-wrap: nowrap;
|
|
597
|
+
}
|
|
598
|
+
#mint-header.mint-expand #mint-wrapper nav > ul > li {
|
|
599
|
+
position: relative;
|
|
600
|
+
width: 100%;
|
|
601
|
+
max-width: 200px;
|
|
602
|
+
text-align: center;
|
|
603
|
+
}
|
|
604
|
+
#mint-header.mint-expand #mint-wrapper nav > ul > li button,
|
|
605
|
+
#mint-header.mint-expand #mint-wrapper nav > ul > li ul {
|
|
606
|
+
width: 100%;
|
|
607
|
+
max-width: 200px;
|
|
608
|
+
}
|
|
609
|
+
#mint-header.mint-expand #mint-wrapper nav > ul > li button {
|
|
610
|
+
font-size: 1.5rem;
|
|
611
|
+
padding-right: 2rem;
|
|
612
|
+
}
|
|
613
|
+
#mint-header.mint-expand #mint-wrapper nav > ul > li button::after {
|
|
614
|
+
content: "\f054";
|
|
615
|
+
font-family: "Font Awesome 6 Pro";
|
|
616
|
+
font-weight: 900;
|
|
617
|
+
font-size: 1rem;
|
|
618
|
+
position: absolute;
|
|
619
|
+
top: 50%;
|
|
620
|
+
transform: translateY(-50%);
|
|
621
|
+
margin-left: 1rem;
|
|
622
|
+
transition: transform var(--mint-delay-default);
|
|
623
|
+
}
|
|
624
|
+
#mint-header.mint-expand #mint-wrapper nav > ul > li button:hover::after {
|
|
625
|
+
transform: translateY(-50%) rotate(90deg);
|
|
626
|
+
}
|
|
627
|
+
#mint-header.mint-expand #mint-wrapper nav > ul > li button:focus-visible::after {
|
|
628
|
+
transform: translateY(-50%) rotate(90deg);
|
|
629
|
+
}
|
|
630
|
+
#mint-header.mint-expand #mint-wrapper nav > ul > li button[aria-expanded=true]::after {
|
|
631
|
+
transform: translateY(-50%) rotate(90deg);
|
|
632
|
+
}
|
|
633
|
+
#mint-header.mint-expand #mint-wrapper nav > ul > li ul {
|
|
634
|
+
position: absolute;
|
|
635
|
+
top: 100%;
|
|
636
|
+
left: 50%;
|
|
637
|
+
transform: translateX(-50%);
|
|
638
|
+
background-color: var(--mint-brand-2);
|
|
639
|
+
}
|
|
640
|
+
#mint-header.mint-expand #mint-wrapper a {
|
|
641
|
+
font-size: 1.25rem;
|
|
642
|
+
}
|
|
643
|
+
}
|
|
644
|
+
@media (max-width: 768px) {
|
|
645
|
+
#mint-header.mint-spread [aria-controls]:not([aria-controls=mint-wrapper]) {
|
|
646
|
+
display: none;
|
|
647
|
+
}
|
|
648
|
+
#mint-header.mint-spread [aria-controls]:not([aria-controls=mint-wrapper]) + ul {
|
|
649
|
+
display: flex !important;
|
|
650
|
+
height: auto !important;
|
|
651
|
+
margin-bottom: 1rem !important;
|
|
652
|
+
}
|
|
653
|
+
}
|
|
572
654
|
#mint-header::before {
|
|
573
655
|
content: "";
|
|
574
656
|
position: absolute;
|
|
@@ -610,7 +692,6 @@ app-footer::before {
|
|
|
610
692
|
}
|
|
611
693
|
#mint-header #mint-navbar {
|
|
612
694
|
display: flex;
|
|
613
|
-
flex-direction: column;
|
|
614
695
|
align-items: center;
|
|
615
696
|
flex-direction: row;
|
|
616
697
|
height: 100%;
|
|
@@ -725,10 +806,12 @@ app-footer::before {
|
|
|
725
806
|
#mint-header #mint-wrapper a:hover,
|
|
726
807
|
#mint-header #mint-wrapper button:hover {
|
|
727
808
|
background-color: var(--mint-shadow-5);
|
|
809
|
+
color: var(--mint-back);
|
|
728
810
|
}
|
|
729
|
-
#mint-header #mint-wrapper a:focus,
|
|
730
|
-
#mint-header #mint-wrapper button:focus {
|
|
811
|
+
#mint-header #mint-wrapper a:focus-visible,
|
|
812
|
+
#mint-header #mint-wrapper button:focus-visible {
|
|
731
813
|
background-color: var(--mint-shadow-5);
|
|
814
|
+
color: var(--mint-back);
|
|
732
815
|
}
|
|
733
816
|
#mint-header #mint-wrapper a:active, #mint-header #mint-wrapper a.mint-active,
|
|
734
817
|
#mint-header #mint-wrapper button:active,
|
|
@@ -746,7 +829,8 @@ app-footer::before {
|
|
|
746
829
|
justify-content: flex-end;
|
|
747
830
|
width: 100%;
|
|
748
831
|
}
|
|
749
|
-
#mint-header .mint-buttons a:not([aria-controls=mint-wrapper]),
|
|
832
|
+
#mint-header .mint-buttons a:not([aria-controls=mint-wrapper]),
|
|
833
|
+
#mint-header .mint-buttons button:not([aria-controls=mint-wrapper]) {
|
|
750
834
|
display: flex;
|
|
751
835
|
width: auto;
|
|
752
836
|
padding: 0.5rem;
|
|
@@ -856,7 +940,7 @@ app-footer::before {
|
|
|
856
940
|
transition-duration: 300ms;
|
|
857
941
|
transform: translate(100%, -100%);
|
|
858
942
|
}
|
|
859
|
-
.mint-shine:focus::after {
|
|
943
|
+
.mint-shine:focus-visible::after {
|
|
860
944
|
transition-duration: 300ms;
|
|
861
945
|
transform: translate(100%, -100%);
|
|
862
946
|
}
|
|
@@ -2432,44 +2516,44 @@ a:hover .fa-ethereum {
|
|
|
2432
2516
|
a:hover .fa-vimeo {
|
|
2433
2517
|
color: var(--mint-venmo);
|
|
2434
2518
|
}
|
|
2435
|
-
a:focus {
|
|
2519
|
+
a:focus-visible {
|
|
2436
2520
|
color: var(--mint-accent-2);
|
|
2437
2521
|
}
|
|
2438
|
-
a:focus .fa-facebook,
|
|
2439
|
-
a:focus .fa-square-facebook {
|
|
2522
|
+
a:focus-visible .fa-facebook,
|
|
2523
|
+
a:focus-visible .fa-square-facebook {
|
|
2440
2524
|
color: var(--mint-facebook);
|
|
2441
2525
|
}
|
|
2442
|
-
a:focus .fa-instagram::after {
|
|
2526
|
+
a:focus-visible .fa-instagram::after {
|
|
2443
2527
|
opacity: 1;
|
|
2444
2528
|
}
|
|
2445
|
-
a:focus .fa-twitter {
|
|
2529
|
+
a:focus-visible .fa-twitter {
|
|
2446
2530
|
color: var(--mint-twitter);
|
|
2447
2531
|
}
|
|
2448
|
-
a:focus .fa-youtube {
|
|
2532
|
+
a:focus-visible .fa-youtube {
|
|
2449
2533
|
color: var(--mint-youtube);
|
|
2450
2534
|
}
|
|
2451
|
-
a:focus .fa-spotify {
|
|
2535
|
+
a:focus-visible .fa-spotify {
|
|
2452
2536
|
color: var(--mint-spotify);
|
|
2453
2537
|
}
|
|
2454
|
-
a:focus .fa-apple {
|
|
2538
|
+
a:focus-visible .fa-apple {
|
|
2455
2539
|
color: var(--mint-apple-music);
|
|
2456
2540
|
}
|
|
2457
|
-
a:focus .fa-soundcloud {
|
|
2541
|
+
a:focus-visible .fa-soundcloud {
|
|
2458
2542
|
color: var(--mint-soundcloud);
|
|
2459
2543
|
}
|
|
2460
|
-
a:focus .fa-bandcamp {
|
|
2544
|
+
a:focus-visible .fa-bandcamp {
|
|
2461
2545
|
color: var(--mint-bandcamp);
|
|
2462
2546
|
}
|
|
2463
|
-
a:focus .fa-github {
|
|
2547
|
+
a:focus-visible .fa-github {
|
|
2464
2548
|
color: var(--mint-white-1);
|
|
2465
2549
|
}
|
|
2466
|
-
a:focus .fa-bitcoin {
|
|
2550
|
+
a:focus-visible .fa-bitcoin {
|
|
2467
2551
|
color: var(--mint-bitcoin);
|
|
2468
2552
|
}
|
|
2469
|
-
a:focus .fa-ethereum {
|
|
2553
|
+
a:focus-visible .fa-ethereum {
|
|
2470
2554
|
color: var(--mint-ethereum);
|
|
2471
2555
|
}
|
|
2472
|
-
a:focus .fa-vimeo {
|
|
2556
|
+
a:focus-visible .fa-vimeo {
|
|
2473
2557
|
color: var(--mint-venmo);
|
|
2474
2558
|
}
|
|
2475
2559
|
a:active, a.mint-active {
|