@appartmint/mint 0.12.14 → 0.12.16

package/dist/css/mint.css

@@ -50,15 +50,15 @@
 .mint-pill:hover i {
   color: inherit !important;
 }
-.mint-btn:focus,
-.mint-btn-group:focus,
-.mint-pill:focus {
+.mint-btn:focus-visible,
+.mint-btn-group:focus-visible,
+.mint-pill:focus-visible {
   color: var(--mint-back);
   background: var(--mint-brand-4);
 }
-.mint-btn:focus i,
-.mint-btn-group:focus i,
-.mint-pill:focus i {
+.mint-btn:focus-visible i,
+.mint-btn-group:focus-visible i,
+.mint-pill:focus-visible i {
   color: inherit !important;
 }
 .mint-btn:active, .mint-btn.mint-active,
@@ -88,9 +88,9 @@
   color: var(--mint-fore);
   background: var(--mint-brand-2);
 }
-.mint-btn.mint-reverse:focus,
-.mint-btn-group.mint-reverse:focus,
-.mint-pill.mint-reverse:focus {
+.mint-btn.mint-reverse:focus-visible,
+.mint-btn-group.mint-reverse:focus-visible,
+.mint-pill.mint-reverse:focus-visible {
   color: var(--mint-fore);
   background: var(--mint-brand-2);
 }
@@ -115,9 +115,9 @@
   background: var(--mint-accent-2);
   border-color: var(--mint-accent-2);
 }
-.mint-btn.mint-alt:focus,
-.mint-btn-group.mint-alt:focus,
-.mint-pill.mint-alt:focus {
+.mint-btn.mint-alt:focus-visible,
+.mint-btn-group.mint-alt:focus-visible,
+.mint-pill.mint-alt:focus-visible {
   color: var(--mint-back);
   background: var(--mint-accent-2);
   border-color: var(--mint-accent-2);
@@ -145,9 +145,9 @@
   background: var(--mint-trans);
   border-color: var(--mint-trans);
 }
-.mint-btn.mint-alt.mint-reverse:focus,
-.mint-btn-group.mint-alt.mint-reverse:focus,
-.mint-pill.mint-alt.mint-reverse:focus {
+.mint-btn.mint-alt.mint-reverse:focus-visible,
+.mint-btn-group.mint-alt.mint-reverse:focus-visible,
+.mint-pill.mint-alt.mint-reverse:focus-visible {
   color: var(--mint-brand-4);
   background: var(--mint-trans);
   border-color: var(--mint-trans);
@@ -187,7 +187,7 @@
 .mint-btn-icon:hover i {
   color: var(--mint-accent-2);
 }
-.mint-btn-icon:focus i {
+.mint-btn-icon:focus-visible i {
   color: var(--mint-accent-2);
 }
 .mint-btn-icon:active i, .mint-btn-icon.mint-active i {
@@ -233,7 +233,7 @@
 .mint-btn-group button:hover {
   background: var(--mint-brand-5);
 }
-.mint-btn-group button:focus {
+.mint-btn-group button:focus-visible {
   background: var(--mint-brand-5);
 }
 .mint-btn-group button:active, .mint-btn-group button.mint-active {
@@ -254,29 +254,17 @@ p .mint-pill, p .mint-btn {
   vertical-align: middle;
 }
 
-.mint-buttons {
-  gap: 1rem;
-}
 .mint-buttons {
   display: flex;
   align-items: center;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-}
-.mint-buttons.mint-center {
   justify-content: center;
+  flex-wrap: wrap;
+  gap: 1rem;
 }
-.mint-buttons.mint-end {
-  justify-content: flex-end;
-}
-.mint-buttons.mint-between {
-  justify-content: space-between;
-}
-.mint-buttons.mint-around {
-  justify-content: space-around;
-}
-.mint-buttons.mint-even {
-  justify-content: space-evenly;
+@media (min-width: 480px) {
+  .mint-buttons {
+    justify-content: flex-start;
+  }
 }
 .mint-buttons > * {
   width: 100%;
@@ -289,9 +277,6 @@ p .mint-pill, p .mint-btn {
     width: auto;
   }
 }
-.mint-buttons.mint-even {
-  justify-content: space-evenly;
-}
 .mint-buttons .mint-buttons .mint-pill {
   width: 100%;
 }
@@ -341,7 +326,7 @@ p .mint-pill, p .mint-btn {
     overflow: visible;
   }
   .mint-card.mint-stagger > .mint-image, .mint-card.mint-stagger > mint-image .mint-image {
-    width: 50%;
+    width: calc(50% + 1.5rem);
     height: fit-content;
     margin-right: -3rem;
     border-radius: 1rem;
@@ -352,7 +337,7 @@ p .mint-pill, p .mint-btn {
     object-fit: cover;
   }
   .mint-card.mint-stagger > .mint-content {
-    width: 50%;
+    width: calc(50% + 1.5rem);
     height: fit-content;
     margin-top: 3rem;
     border-radius: 1rem;
@@ -364,7 +349,7 @@ p .mint-pill, p .mint-btn {
     flex-direction: row-reverse;
   }
   .mint-card.mint-stagger.mint-reverse > .mint-image, .mint-card.mint-stagger.mint-reverse > mint-image .mint-image {
-    margin-right: 3rem;
+    margin-right: 0;
     margin-left: -3rem;
   }
 }
@@ -584,6 +569,78 @@ app-footer::before {
 #mint-header.mint-left #mint-wrapper.mint-open {
   left: 0;
 }
+@media (min-width: 768px) {
+  #mint-header.mint-expand .mint-buttons {
+    width: auto;
+  }
+  #mint-header.mint-expand .mint-buttons [aria-controls=mint-wrapper] {
+    display: none;
+  }
+  #mint-header.mint-expand #mint-wrapper {
+    position: static;
+    display: flex !important;
+    height: 100%;
+    padding: 0;
+    z-index: 0;
+  }
+  #mint-header.mint-expand #mint-wrapper, #mint-header.mint-expand #mint-wrapper nav {
+    background: var(--mint-glow-0) !important;
+    overflow: visible;
+  }
+  #mint-header.mint-expand #mint-wrapper nav {
+    border: none;
+  }
+  #mint-header.mint-expand #mint-wrapper nav > ul {
+    flex-direction: row;
+    justify-content: flex-end;
+    flex-wrap: nowrap;
+  }
+  #mint-header.mint-expand #mint-wrapper nav > ul > li {
+    position: relative;
+    width: 100%;
+    max-width: 200px;
+    text-align: center;
+  }
+  #mint-header.mint-expand #mint-wrapper nav > ul > li button,
+  #mint-header.mint-expand #mint-wrapper nav > ul > li ul {
+    width: 100%;
+    max-width: 200px;
+  }
+  #mint-header.mint-expand #mint-wrapper nav > ul > li button {
+    font-size: 1.5rem;
+    padding-right: 2rem;
+  }
+  #mint-header.mint-expand #mint-wrapper nav > ul > li button::after {
+    content: "\f054";
+    font-family: "Font Awesome 6 Pro";
+    font-weight: 900;
+    font-size: 1rem;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: 1rem;
+    transition: transform var(--mint-delay-default);
+  }
+  #mint-header.mint-expand #mint-wrapper nav > ul > li button:hover::after {
+    transform: translateY(-50%) rotate(90deg);
+  }
+  #mint-header.mint-expand #mint-wrapper nav > ul > li button:focus-visible::after {
+    transform: translateY(-50%) rotate(90deg);
+  }
+  #mint-header.mint-expand #mint-wrapper nav > ul > li button[aria-expanded=true]::after {
+    transform: translateY(-50%) rotate(90deg);
+  }
+  #mint-header.mint-expand #mint-wrapper nav > ul > li ul {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: var(--mint-brand-2);
+  }
+  #mint-header.mint-expand #mint-wrapper a {
+    font-size: 1.25rem;
+  }
+}
 #mint-header::before {
   content: "";
   position: absolute;
@@ -625,7 +682,6 @@ app-footer::before {
 }
 #mint-header #mint-navbar {
   display: flex;
-  flex-direction: column;
   align-items: center;
   flex-direction: row;
   height: 100%;
@@ -740,10 +796,12 @@ app-footer::before {
 #mint-header #mint-wrapper a:hover,
 #mint-header #mint-wrapper button:hover {
   background-color: var(--mint-shadow-5);
+  color: var(--mint-back);
 }
-#mint-header #mint-wrapper a:focus,
-#mint-header #mint-wrapper button:focus {
+#mint-header #mint-wrapper a:focus-visible,
+#mint-header #mint-wrapper button:focus-visible {
   background-color: var(--mint-shadow-5);
+  color: var(--mint-back);
 }
 #mint-header #mint-wrapper a:active, #mint-header #mint-wrapper a.mint-active,
 #mint-header #mint-wrapper button:active,
@@ -761,7 +819,8 @@ app-footer::before {
   justify-content: flex-end;
   width: 100%;
 }
-#mint-header .mint-buttons a:not([aria-controls=mint-wrapper]), #mint-header .mint-buttons button:not([aria-controls=mint-wrapper]) {
+#mint-header .mint-buttons a:not([aria-controls=mint-wrapper]),
+#mint-header .mint-buttons button:not([aria-controls=mint-wrapper]) {
   display: flex;
   width: auto;
   padding: 0.5rem;
@@ -871,7 +930,7 @@ app-footer::before {
   transition-duration: 300ms;
   transform: translate(100%, -100%);
 }
-.mint-shine:focus::after {
+.mint-shine:focus-visible::after {
   transition-duration: 300ms;
   transform: translate(100%, -100%);
 }
@@ -2447,44 +2506,44 @@ a:hover .fa-ethereum {
 a:hover .fa-vimeo {
   color: var(--mint-venmo);
 }
-a:focus {
+a:focus-visible {
   color: var(--mint-accent-2);
 }
-a:focus .fa-facebook,
-a:focus .fa-square-facebook {
+a:focus-visible .fa-facebook,
+a:focus-visible .fa-square-facebook {
   color: var(--mint-facebook);
 }
-a:focus .fa-instagram::after {
+a:focus-visible .fa-instagram::after {
   opacity: 1;
 }
-a:focus .fa-twitter {
+a:focus-visible .fa-twitter {
   color: var(--mint-twitter);
 }
-a:focus .fa-youtube {
+a:focus-visible .fa-youtube {
   color: var(--mint-youtube);
 }
-a:focus .fa-spotify {
+a:focus-visible .fa-spotify {
   color: var(--mint-spotify);
 }
-a:focus .fa-apple {
+a:focus-visible .fa-apple {
   color: var(--mint-apple-music);
 }
-a:focus .fa-soundcloud {
+a:focus-visible .fa-soundcloud {
   color: var(--mint-soundcloud);
 }
-a:focus .fa-bandcamp {
+a:focus-visible .fa-bandcamp {
   color: var(--mint-bandcamp);
 }
-a:focus .fa-github {
+a:focus-visible .fa-github {
   color: var(--mint-white-1);
 }
-a:focus .fa-bitcoin {
+a:focus-visible .fa-bitcoin {
   color: var(--mint-bitcoin);
 }
-a:focus .fa-ethereum {
+a:focus-visible .fa-ethereum {
   color: var(--mint-ethereum);
 }
-a:focus .fa-vimeo {
+a:focus-visible .fa-vimeo {
   color: var(--mint-venmo);
 }
 a:active, a.mint-active {