@appartmint/mint 0.12.15 → 0.12.16
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 +113 -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 +36 -3
- 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/package.json +1 -1
- package/src/scss/imports/components/_cards.scss +3 -3
- package/src/scss/imports/components/_header.scss +95 -4
- package/src/scss/imports/util/_util.scss +7 -5
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,78 @@ 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
|
+
}
|
|
572
644
|
#mint-header::before {
|
|
573
645
|
content: "";
|
|
574
646
|
position: absolute;
|
|
@@ -610,7 +682,6 @@ app-footer::before {
|
|
|
610
682
|
}
|
|
611
683
|
#mint-header #mint-navbar {
|
|
612
684
|
display: flex;
|
|
613
|
-
flex-direction: column;
|
|
614
685
|
align-items: center;
|
|
615
686
|
flex-direction: row;
|
|
616
687
|
height: 100%;
|
|
@@ -725,10 +796,12 @@ app-footer::before {
|
|
|
725
796
|
#mint-header #mint-wrapper a:hover,
|
|
726
797
|
#mint-header #mint-wrapper button:hover {
|
|
727
798
|
background-color: var(--mint-shadow-5);
|
|
799
|
+
color: var(--mint-back);
|
|
728
800
|
}
|
|
729
|
-
#mint-header #mint-wrapper a:focus,
|
|
730
|
-
#mint-header #mint-wrapper button:focus {
|
|
801
|
+
#mint-header #mint-wrapper a:focus-visible,
|
|
802
|
+
#mint-header #mint-wrapper button:focus-visible {
|
|
731
803
|
background-color: var(--mint-shadow-5);
|
|
804
|
+
color: var(--mint-back);
|
|
732
805
|
}
|
|
733
806
|
#mint-header #mint-wrapper a:active, #mint-header #mint-wrapper a.mint-active,
|
|
734
807
|
#mint-header #mint-wrapper button:active,
|
|
@@ -746,7 +819,8 @@ app-footer::before {
|
|
|
746
819
|
justify-content: flex-end;
|
|
747
820
|
width: 100%;
|
|
748
821
|
}
|
|
749
|
-
#mint-header .mint-buttons a:not([aria-controls=mint-wrapper]),
|
|
822
|
+
#mint-header .mint-buttons a:not([aria-controls=mint-wrapper]),
|
|
823
|
+
#mint-header .mint-buttons button:not([aria-controls=mint-wrapper]) {
|
|
750
824
|
display: flex;
|
|
751
825
|
width: auto;
|
|
752
826
|
padding: 0.5rem;
|
|
@@ -856,7 +930,7 @@ app-footer::before {
|
|
|
856
930
|
transition-duration: 300ms;
|
|
857
931
|
transform: translate(100%, -100%);
|
|
858
932
|
}
|
|
859
|
-
.mint-shine:focus::after {
|
|
933
|
+
.mint-shine:focus-visible::after {
|
|
860
934
|
transition-duration: 300ms;
|
|
861
935
|
transform: translate(100%, -100%);
|
|
862
936
|
}
|
|
@@ -2432,44 +2506,44 @@ a:hover .fa-ethereum {
|
|
|
2432
2506
|
a:hover .fa-vimeo {
|
|
2433
2507
|
color: var(--mint-venmo);
|
|
2434
2508
|
}
|
|
2435
|
-
a:focus {
|
|
2509
|
+
a:focus-visible {
|
|
2436
2510
|
color: var(--mint-accent-2);
|
|
2437
2511
|
}
|
|
2438
|
-
a:focus .fa-facebook,
|
|
2439
|
-
a:focus .fa-square-facebook {
|
|
2512
|
+
a:focus-visible .fa-facebook,
|
|
2513
|
+
a:focus-visible .fa-square-facebook {
|
|
2440
2514
|
color: var(--mint-facebook);
|
|
2441
2515
|
}
|
|
2442
|
-
a:focus .fa-instagram::after {
|
|
2516
|
+
a:focus-visible .fa-instagram::after {
|
|
2443
2517
|
opacity: 1;
|
|
2444
2518
|
}
|
|
2445
|
-
a:focus .fa-twitter {
|
|
2519
|
+
a:focus-visible .fa-twitter {
|
|
2446
2520
|
color: var(--mint-twitter);
|
|
2447
2521
|
}
|
|
2448
|
-
a:focus .fa-youtube {
|
|
2522
|
+
a:focus-visible .fa-youtube {
|
|
2449
2523
|
color: var(--mint-youtube);
|
|
2450
2524
|
}
|
|
2451
|
-
a:focus .fa-spotify {
|
|
2525
|
+
a:focus-visible .fa-spotify {
|
|
2452
2526
|
color: var(--mint-spotify);
|
|
2453
2527
|
}
|
|
2454
|
-
a:focus .fa-apple {
|
|
2528
|
+
a:focus-visible .fa-apple {
|
|
2455
2529
|
color: var(--mint-apple-music);
|
|
2456
2530
|
}
|
|
2457
|
-
a:focus .fa-soundcloud {
|
|
2531
|
+
a:focus-visible .fa-soundcloud {
|
|
2458
2532
|
color: var(--mint-soundcloud);
|
|
2459
2533
|
}
|
|
2460
|
-
a:focus .fa-bandcamp {
|
|
2534
|
+
a:focus-visible .fa-bandcamp {
|
|
2461
2535
|
color: var(--mint-bandcamp);
|
|
2462
2536
|
}
|
|
2463
|
-
a:focus .fa-github {
|
|
2537
|
+
a:focus-visible .fa-github {
|
|
2464
2538
|
color: var(--mint-white-1);
|
|
2465
2539
|
}
|
|
2466
|
-
a:focus .fa-bitcoin {
|
|
2540
|
+
a:focus-visible .fa-bitcoin {
|
|
2467
2541
|
color: var(--mint-bitcoin);
|
|
2468
2542
|
}
|
|
2469
|
-
a:focus .fa-ethereum {
|
|
2543
|
+
a:focus-visible .fa-ethereum {
|
|
2470
2544
|
color: var(--mint-ethereum);
|
|
2471
2545
|
}
|
|
2472
|
-
a:focus .fa-vimeo {
|
|
2546
|
+
a:focus-visible .fa-vimeo {
|
|
2473
2547
|
color: var(--mint-venmo);
|
|
2474
2548
|
}
|
|
2475
2549
|
a:active, a.mint-active {
|