@appartmint/mint 2.1.3 → 2.1.5

package/dist/css/mint.css

@@ -89,18 +89,25 @@
 .mint-pill:focus-visible i {
   color: inherit !important;
 }
-.mint-btn:active, :root:root [amplify-button]:active, .mint-select:active, .mint-btn.mint-active, :root:root .mint-active[amplify-button], .mint-active.mint-select,
+.mint-btn:active, :root:root [amplify-button]:active, .mint-select:active,
 .mint-btn-group:active,
+.mint-pill:active {
+  color: var(--mint-back);
+  background: var(--mint-brand-4);
+}
+.mint-btn:active i, :root:root [amplify-button]:active i, .mint-select:active i,
+.mint-btn-group:active i,
+.mint-pill:active i {
+  color: inherit !important;
+}
+.mint-btn.mint-active, :root:root .mint-active[amplify-button], .mint-active.mint-select,
 .mint-btn-group.mint-active,
-.mint-pill:active,
 .mint-pill.mint-active {
   color: var(--mint-back);
   background: var(--mint-brand-4);
 }
-.mint-btn:active i, :root:root [amplify-button]:active i, .mint-select:active i, .mint-btn.mint-active i, :root:root .mint-active[amplify-button] i, .mint-active.mint-select i,
-.mint-btn-group:active i,
+.mint-btn.mint-active i, :root:root .mint-active[amplify-button] i, .mint-active.mint-select i,
 .mint-btn-group.mint-active i,
-.mint-pill:active i,
 .mint-pill.mint-active i {
   color: inherit !important;
 }
@@ -122,10 +129,14 @@
   color: var(--mint-fore);
   background: var(--mint-brand-2);
 }
-.mint-btn.mint-reverse:active, :root:root .mint-reverse[amplify-button]:active, .mint-reverse.mint-select:active, .mint-btn.mint-reverse.mint-active, :root:root .mint-reverse.mint-active[amplify-button], .mint-reverse.mint-active.mint-select,
+.mint-btn.mint-reverse:active, :root:root .mint-reverse[amplify-button]:active, .mint-reverse.mint-select:active,
 .mint-btn-group.mint-reverse:active,
+.mint-pill.mint-reverse:active {
+  color: var(--mint-fore);
+  background: var(--mint-brand-2);
+}
+.mint-btn.mint-reverse.mint-active, :root:root .mint-reverse.mint-active[amplify-button], .mint-reverse.mint-active.mint-select,
 .mint-btn-group.mint-reverse.mint-active,
-.mint-pill.mint-reverse:active,
 .mint-pill.mint-reverse.mint-active {
   color: var(--mint-fore);
   background: var(--mint-brand-2);
@@ -150,10 +161,15 @@
   background: var(--mint-accent-2);
   border-color: var(--mint-accent-2);
 }
-.mint-btn.mint-alt:active, :root:root .mint-alt[amplify-button]:active, .mint-alt.mint-select:active, .mint-btn.mint-alt.mint-active, :root:root .mint-alt.mint-active[amplify-button], .mint-alt.mint-active.mint-select,
+.mint-btn.mint-alt:active, :root:root .mint-alt[amplify-button]:active, .mint-alt.mint-select:active,
 .mint-btn-group.mint-alt:active,
+.mint-pill.mint-alt:active {
+  color: var(--mint-back);
+  background: var(--mint-accent-2);
+  border-color: var(--mint-accent-2);
+}
+.mint-btn.mint-alt.mint-active, :root:root .mint-alt.mint-active[amplify-button], .mint-alt.mint-active.mint-select,
 .mint-btn-group.mint-alt.mint-active,
-.mint-pill.mint-alt:active,
 .mint-pill.mint-alt.mint-active {
   color: var(--mint-back);
   background: var(--mint-accent-2);
@@ -180,10 +196,15 @@
   background: var(--mint-trans);
   border-color: var(--mint-trans);
 }
-.mint-btn.mint-alt.mint-reverse:active, :root:root .mint-alt.mint-reverse[amplify-button]:active, .mint-alt.mint-reverse.mint-select:active, .mint-btn.mint-alt.mint-reverse.mint-active, :root:root .mint-alt.mint-reverse.mint-active[amplify-button], .mint-alt.mint-reverse.mint-active.mint-select,
+.mint-btn.mint-alt.mint-reverse:active, :root:root .mint-alt.mint-reverse[amplify-button]:active, .mint-alt.mint-reverse.mint-select:active,
 .mint-btn-group.mint-alt.mint-reverse:active,
+.mint-pill.mint-alt.mint-reverse:active {
+  color: var(--mint-brand-4);
+  background: var(--mint-trans);
+  border-color: var(--mint-trans);
+}
+.mint-btn.mint-alt.mint-reverse.mint-active, :root:root .mint-alt.mint-reverse.mint-active[amplify-button], .mint-alt.mint-reverse.mint-active.mint-select,
 .mint-btn-group.mint-alt.mint-reverse.mint-active,
-.mint-pill.mint-alt.mint-reverse:active,
 .mint-pill.mint-alt.mint-reverse.mint-active {
   color: var(--mint-brand-4);
   background: var(--mint-trans);
@@ -220,7 +241,10 @@
 .mint-btn-icon:focus-visible i {
   color: var(--mint-accent-2);
 }
-.mint-btn-icon:active i, .mint-btn-icon.mint-active i {
+.mint-btn-icon:active i {
+  color: var(--mint-accent-2);
+}
+.mint-btn-icon.mint-active i {
   color: var(--mint-accent-2);
 }
 @media (min-width: 480px) {
@@ -271,7 +295,10 @@
 .mint-btn-group button:focus-visible {
   background: var(--mint-brand-5);
 }
-.mint-btn-group button:active, .mint-btn-group button.mint-active {
+.mint-btn-group button:active {
+  background: var(--mint-brand-5);
+}
+.mint-btn-group button.mint-active {
   background: var(--mint-brand-5);
 }
 
@@ -726,6 +753,7 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
     position: static;
     display: flex !important;
     height: 100%;
+    max-width: unset !important;
     padding: 0;
     z-index: 0;
   }
@@ -741,7 +769,7 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
     display: none;
   }
   #mint-header.mint-expand #mint-wrapper nav > ul {
-    flex-direction: row;
+    flex-direction: row !important;
     justify-content: flex-end;
     flex-wrap: nowrap;
     overflow: visible;
@@ -796,14 +824,14 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
     margin: 0.25rem 0;
   }
 }
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   #mint-header.mint-spread #mint-wrapper [aria-controls] {
     display: none;
   }
   #mint-header.mint-spread #mint-wrapper [aria-controls] + ul {
     display: flex !important;
     height: auto !important;
-    margin-bottom: 3rem !important;
+    margin-bottom: 3rem;
   }
   #mint-header.mint-spread #mint-wrapper [aria-controls] + ul > li:first-child {
     font-size: 1.5em;
@@ -834,6 +862,10 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   margin: 0.25rem 0;
   line-height: 1;
   font-size: 4em;
+  width: 100%;
+}
+#mint-header.mint-tray #mint-wrapper button {
+  font-size: 6em;
 }
 #mint-header.mint-tray #mint-wrapper nav > ul {
   flex-direction: column;
@@ -965,9 +997,9 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   top: var(--mint-header-height);
 }
 #mint-header #mint-wrapper nav {
-  height: calc(100vh - var(--mint-header-height));
-  height: calc(100dvh - var(--mint-header-height));
-  overflow: auto;
+  flex-grow: 1;
+  height: auto;
+  overflow: visible;
   background: var(--mint-back);
 }
 @media (min-width: 1440px) {
@@ -982,7 +1014,7 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
 }
 #mint-header #mint-wrapper nav > ul {
   height: 100%;
-  overflow: auto;
+  overflow: visible;
 }
 @media (min-width: 1024px) {
   #mint-header #mint-wrapper nav > ul {
@@ -1028,8 +1060,7 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   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,
+#mint-header #mint-wrapper a.mint-active,
 #mint-header #mint-wrapper button.mint-active {
   text-decoration: underline;
 }
@@ -1037,7 +1068,7 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   margin-bottom: 0;
 }
 #mint-header #mint-wrapper ul li:last-child ul {
-  margin-bottom: 0;
+  margin-bottom: 0 !important;
 }
 #mint-header .mint-buttons {
   flex-wrap: nowrap;
@@ -1100,50 +1131,59 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
 
 :root .mint-landing.swiper {
   max-width: 100vw;
+}
+:root .mint-landing.swiper .swiper-slide {
+  padding: 0;
+}
+
+.mint-landing {
   top: -4px;
-  width: calc(100% + 8px);
-  left: -4px;
 }
 @media (min-width: 480px) {
-  :root .mint-landing.swiper {
+  .mint-landing {
     top: calc(-4px + -12 * (100vw - 480px) / 288);
   }
 }
 @media (min-width: 768px) {
-  :root .mint-landing.swiper {
+  .mint-landing {
     top: -16px;
   }
 }
+.mint-landing {
+  left: -4px;
+}
 @media (min-width: 480px) {
-  :root .mint-landing.swiper {
-    width: calc(100% + 8px + 24 * (100vw - 480px) / 288);
+  .mint-landing {
+    left: calc(-4px + -12 * (100vw - 480px) / 288);
   }
 }
 @media (min-width: 768px) {
-  :root .mint-landing.swiper {
-    width: calc(100% + 32px);
+  .mint-landing {
+    left: -16px;
   }
 }
+.mint-landing {
+  width: calc(100% + 8px);
+}
 @media (min-width: 480px) {
-  :root .mint-landing.swiper {
-    left: calc(-4px + -12 * (100vw - 480px) / 288);
+  .mint-landing {
+    width: calc(100% + 8px + 24 * (100vw - 480px) / 288);
   }
 }
 @media (min-width: 768px) {
-  :root .mint-landing.swiper {
-    left: -16px;
+  .mint-landing {
+    width: calc(100% + 32px);
   }
 }
-:root .mint-landing.swiper .swiper-slide {
-  padding: 0;
-}
-
 .mint-landing .mint-video-bg {
   align-items: center;
   top: 0;
+  left: 0;
   width: 100%;
   margin: 0;
   min-height: calc(100vh - var(--mint-header-height));
+}
+.mint-landing .mint-video-bg {
   padding: 16px;
 }
 @media (min-width: 480px) {
@@ -1192,9 +1232,9 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   min-height: calc(100vh - var(--mint-header-height) + 10rem);
   gap: 2rem;
   position: relative;
+}
+.mint-video-bg {
   top: -4px;
-  width: calc(100% + 8px);
-  padding: 4px;
 }
 @media (min-width: 480px) {
   .mint-video-bg {
@@ -1206,6 +1246,22 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
     top: -16px;
   }
 }
+.mint-video-bg {
+  left: -4px;
+}
+@media (min-width: 480px) {
+  .mint-video-bg {
+    left: calc(-4px + -12 * (100vw - 480px) / 288);
+  }
+}
+@media (min-width: 768px) {
+  .mint-video-bg {
+    left: -16px;
+  }
+}
+.mint-video-bg {
+  width: calc(100% + 8px);
+}
 @media (min-width: 480px) {
   .mint-video-bg {
     width: calc(100% + 8px + 24 * (100vw - 480px) / 288);
@@ -1216,6 +1272,9 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
     width: calc(100% + 32px);
   }
 }
+.mint-video-bg {
+  padding: 4px;
+}
 @media (min-width: 480px) {
   .mint-video-bg {
     padding: calc(4px + 12 * (100vw - 480px) / 288);
@@ -1306,7 +1365,11 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   transition-duration: 300ms;
   transform: translate(100%, -100%);
 }
-.mint-shine:active::after, .mint-shine.mint-active::after {
+.mint-shine:active::after {
+  transition-duration: 300ms;
+  transform: translate(100%, -100%);
+}
+.mint-shine.mint-active::after {
   transition-duration: 300ms;
   transform: translate(100%, -100%);
 }
@@ -1470,6 +1533,8 @@ main > router-outlet {
   flex-grow: 1;
   width: 100%;
   padding: 0.25rem;
+}
+:root main > router-outlet + * {
   padding: 4px;
 }
 @media (min-width: 480px) {
@@ -3114,7 +3179,7 @@ p, .mint-p {
 .mint-disclaim {
   font-size: 0.875rem;
 }
-@media (max-width: 480px) {
+@media (max-width: 479px) {
   .mint-disclaim {
     text-align: center;
   }
@@ -3370,45 +3435,84 @@ a:focus-visible .fa-ethereum {
 a:focus-visible .fa-vimeo {
   color: var(--mint-venmo);
 }
-a:active, a.mint-active {
+a:active {
   color: var(--mint-accent-2);
 }
 a:active .fa-facebook,
-a:active .fa-square-facebook, a.mint-active .fa-facebook,
+a:active .fa-square-facebook {
+  color: var(--mint-facebook);
+}
+a:active .fa-instagram::after {
+  opacity: 1;
+}
+a:active .fa-twitter {
+  color: var(--mint-twitter);
+}
+a:active .fa-youtube {
+  color: var(--mint-youtube);
+}
+a:active .fa-spotify {
+  color: var(--mint-spotify);
+}
+a:active .fa-apple {
+  color: var(--mint-apple-music);
+}
+a:active .fa-soundcloud {
+  color: var(--mint-soundcloud);
+}
+a:active .fa-bandcamp {
+  color: var(--mint-bandcamp);
+}
+a:active .fa-github {
+  color: var(--mint-white-1);
+}
+a:active .fa-bitcoin {
+  color: var(--mint-bitcoin);
+}
+a:active .fa-ethereum {
+  color: var(--mint-ethereum);
+}
+a:active .fa-vimeo {
+  color: var(--mint-venmo);
+}
+a.mint-active {
+  color: var(--mint-accent-2);
+}
+a.mint-active .fa-facebook,
 a.mint-active .fa-square-facebook {
   color: var(--mint-facebook);
 }
-a:active .fa-instagram::after, a.mint-active .fa-instagram::after {
+a.mint-active .fa-instagram::after {
   opacity: 1;
 }
-a:active .fa-twitter, a.mint-active .fa-twitter {
+a.mint-active .fa-twitter {
   color: var(--mint-twitter);
 }
-a:active .fa-youtube, a.mint-active .fa-youtube {
+a.mint-active .fa-youtube {
   color: var(--mint-youtube);
 }
-a:active .fa-spotify, a.mint-active .fa-spotify {
+a.mint-active .fa-spotify {
   color: var(--mint-spotify);
 }
-a:active .fa-apple, a.mint-active .fa-apple {
+a.mint-active .fa-apple {
   color: var(--mint-apple-music);
 }
-a:active .fa-soundcloud, a.mint-active .fa-soundcloud {
+a.mint-active .fa-soundcloud {
   color: var(--mint-soundcloud);
 }
-a:active .fa-bandcamp, a.mint-active .fa-bandcamp {
+a.mint-active .fa-bandcamp {
   color: var(--mint-bandcamp);
 }
-a:active .fa-github, a.mint-active .fa-github {
+a.mint-active .fa-github {
   color: var(--mint-white-1);
 }
-a:active .fa-bitcoin, a.mint-active .fa-bitcoin {
+a.mint-active .fa-bitcoin {
   color: var(--mint-bitcoin);
 }
-a:active .fa-ethereum, a.mint-active .fa-ethereum {
+a.mint-active .fa-ethereum {
   color: var(--mint-ethereum);
 }
-a:active .fa-vimeo, a.mint-active .fa-vimeo {
+a.mint-active .fa-vimeo {
   color: var(--mint-venmo);
 }
 
@@ -3445,7 +3549,7 @@ a:active .fa-vimeo, a.mint-active .fa-vimeo {
   justify-content: space-around;
   gap: 1rem;
 }
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   .fc .fc-toolbar-title {
     font-size: 1.25rem;
   }
@@ -3459,12 +3563,12 @@ a:active .fa-vimeo, a.mint-active .fa-vimeo {
 .fc .fc-list-table {
   --fc-list-event-hover-bg-color: var(--mint-brand-4);
 }
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   .fc .fc-list-table {
     word-break: normal;
   }
 }
-@media (max-width: 480px) {
+@media (max-width: 479px) {
   .fc .fc-list-table .fc-list-event-time {
     white-space: normal;
   }