@appartmint/mint 0.14.14 → 0.15.0

package/dist/css/mint.css

@@ -11,7 +11,7 @@
   transform: none !important;
 }
 
-.mint-btn,
+.mint-btn, .mint-select,
 .mint-btn-icon,
 .mint-pill {
   width: fit-content;
@@ -24,7 +24,7 @@
   transition: color var(--mint-delay-default), background-color var(--mint-delay-default), border-color var(--mint-delay-default);
 }
 
-.mint-btn,
+.mint-btn, .mint-select,
 .mint-btn-group,
 .mint-pill {
   display: inline-block;
@@ -35,35 +35,35 @@
   text-align: center;
 }
 @media (min-width: 480px) {
-  .mint-btn,
+  .mint-btn, .mint-select,
   .mint-btn-group,
   .mint-pill {
     width: fit-content;
   }
 }
-.mint-btn:hover,
+.mint-btn:hover, .mint-select:hover,
 .mint-btn-group:hover,
 .mint-pill:hover {
   color: var(--mint-back);
   background: var(--mint-brand-4);
 }
-.mint-btn:hover i,
+.mint-btn:hover i, .mint-select:hover i,
 .mint-btn-group:hover i,
 .mint-pill:hover i {
   color: inherit !important;
 }
-.mint-btn:focus-visible,
+.mint-btn:focus-visible, .mint-select:focus-visible,
 .mint-btn-group:focus-visible,
 .mint-pill:focus-visible {
   color: var(--mint-back);
   background: var(--mint-brand-4);
 }
-.mint-btn:focus-visible i,
+.mint-btn:focus-visible i, .mint-select:focus-visible i,
 .mint-btn-group:focus-visible i,
 .mint-pill:focus-visible i {
   color: inherit !important;
 }
-.mint-btn:active, .mint-btn.mint-active,
+.mint-btn:active, .mint-select:active, .mint-btn.mint-active, .mint-active.mint-select,
 .mint-btn-group:active,
 .mint-btn-group.mint-active,
 .mint-pill:active,
@@ -71,32 +71,32 @@
   color: var(--mint-back);
   background: var(--mint-brand-4);
 }
-.mint-btn:active i, .mint-btn.mint-active i,
+.mint-btn:active i, .mint-select:active i, .mint-btn.mint-active i, .mint-active.mint-select i,
 .mint-btn-group:active i,
 .mint-btn-group.mint-active i,
 .mint-pill:active i,
 .mint-pill.mint-active i {
   color: inherit !important;
 }
-.mint-btn.mint-reverse,
+.mint-btn.mint-reverse, .mint-reverse.mint-select,
 .mint-btn-group.mint-reverse,
 .mint-pill.mint-reverse {
   color: var(--mint-back);
   background: var(--mint-brand-4);
 }
-.mint-btn.mint-reverse:hover,
+.mint-btn.mint-reverse:hover, .mint-reverse.mint-select:hover,
 .mint-btn-group.mint-reverse:hover,
 .mint-pill.mint-reverse:hover {
   color: var(--mint-fore);
   background: var(--mint-brand-2);
 }
-.mint-btn.mint-reverse:focus-visible,
+.mint-btn.mint-reverse:focus-visible, .mint-reverse.mint-select:focus-visible,
 .mint-btn-group.mint-reverse:focus-visible,
 .mint-pill.mint-reverse:focus-visible {
   color: var(--mint-fore);
   background: var(--mint-brand-2);
 }
-.mint-btn.mint-reverse:active, .mint-btn.mint-reverse.mint-active,
+.mint-btn.mint-reverse:active, .mint-reverse.mint-select:active, .mint-btn.mint-reverse.mint-active, .mint-reverse.mint-active.mint-select,
 .mint-btn-group.mint-reverse:active,
 .mint-btn-group.mint-reverse.mint-active,
 .mint-pill.mint-reverse:active,
@@ -104,27 +104,27 @@
   color: var(--mint-fore);
   background: var(--mint-brand-2);
 }
-.mint-btn.mint-alt,
+.mint-btn.mint-alt, .mint-alt.mint-select,
 .mint-btn-group.mint-alt,
 .mint-pill.mint-alt {
   color: var(--mint-brand-4);
   background: var(--mint-trans);
 }
-.mint-btn.mint-alt:hover,
+.mint-btn.mint-alt:hover, .mint-alt.mint-select:hover,
 .mint-btn-group.mint-alt:hover,
 .mint-pill.mint-alt:hover {
   color: var(--mint-back);
   background: var(--mint-accent-2);
   border-color: var(--mint-accent-2);
 }
-.mint-btn.mint-alt:focus-visible,
+.mint-btn.mint-alt:focus-visible, .mint-alt.mint-select: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);
 }
-.mint-btn.mint-alt:active, .mint-btn.mint-alt.mint-active,
+.mint-btn.mint-alt:active, .mint-alt.mint-select:active, .mint-btn.mint-alt.mint-active, .mint-alt.mint-active.mint-select,
 .mint-btn-group.mint-alt:active,
 .mint-btn-group.mint-alt.mint-active,
 .mint-pill.mint-alt:active,
@@ -133,28 +133,28 @@
   background: var(--mint-accent-2);
   border-color: var(--mint-accent-2);
 }
-.mint-btn.mint-alt.mint-reverse,
+.mint-btn.mint-alt.mint-reverse, .mint-alt.mint-reverse.mint-select,
 .mint-btn-group.mint-alt.mint-reverse,
 .mint-pill.mint-alt.mint-reverse {
   color: var(--mint-back);
   background: var(--mint-accent-2);
   border-color: var(--mint-accent-2);
 }
-.mint-btn.mint-alt.mint-reverse:hover,
+.mint-btn.mint-alt.mint-reverse:hover, .mint-alt.mint-reverse.mint-select:hover,
 .mint-btn-group.mint-alt.mint-reverse:hover,
 .mint-pill.mint-alt.mint-reverse:hover {
   color: var(--mint-brand-4);
   background: var(--mint-trans);
   border-color: var(--mint-trans);
 }
-.mint-btn.mint-alt.mint-reverse:focus-visible,
+.mint-btn.mint-alt.mint-reverse:focus-visible, .mint-alt.mint-reverse.mint-select: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);
 }
-.mint-btn.mint-alt.mint-reverse:active, .mint-btn.mint-alt.mint-reverse.mint-active,
+.mint-btn.mint-alt.mint-reverse:active, .mint-alt.mint-reverse.mint-select:active, .mint-btn.mint-alt.mint-reverse.mint-active, .mint-alt.mint-reverse.mint-active.mint-select,
 .mint-btn-group.mint-alt.mint-reverse:active,
 .mint-btn-group.mint-alt.mint-reverse.mint-active,
 .mint-pill.mint-alt.mint-reverse:active,
@@ -163,23 +163,23 @@
   background: var(--mint-trans);
   border-color: var(--mint-trans);
 }
-.mint-btn a,
+.mint-btn a, .mint-select a,
 .mint-btn-group a,
 .mint-pill a {
   color: inherit;
 }
-.mint-btn a:hover,
+.mint-btn a:hover, .mint-select a:hover,
 .mint-btn-group a:hover,
 .mint-pill a:hover {
   color: inherit;
 }
-.mint-btn a i,
+.mint-btn a i, .mint-select a i,
 .mint-btn-group a i,
 .mint-pill a i {
   display: none;
 }
 
-.mint-btn {
+.mint-btn, .mint-select {
   padding: 0.5rem 1.75rem;
 }
 .mint-btn-icon {
@@ -253,7 +253,7 @@ a.mint-pill, button.mint-pill {
   min-width: 5rem;
 }
 
-p .mint-pill, p .mint-btn {
+p .mint-pill, p .mint-btn, p .mint-select {
   line-height: 1.5rem;
   vertical-align: middle;
 }
@@ -273,7 +273,7 @@ p .mint-pill, p .mint-btn {
 .mint-buttons > * {
   width: 100%;
 }
-.mint-buttons > * .mint-btn, .mint-buttons > * .mint-pill {
+.mint-buttons > * .mint-btn, .mint-buttons > * .mint-select, .mint-buttons > * .mint-pill {
   display: block;
 }
 @media (min-width: 480px) {
@@ -313,6 +313,7 @@ p .mint-pill, p .mint-btn {
 }
 .mint-card.mint-center .mint-title {
   justify-content: center;
+  text-align: center;
 }
 .mint-card.mint-center .mint-title > div {
   width: auto;
@@ -325,6 +326,7 @@ p .mint-pill, p .mint-btn {
 }
 .mint-card.mint-center-title .mint-title {
   justify-content: center;
+  text-align: center;
 }
 .mint-card.mint-center-title .mint-title > div {
   width: auto;
@@ -1122,15 +1124,8 @@ body {
   min-height: 100vh;
   margin: 0;
   padding: 0;
-  word-break: break-word;
   scroll-behavior: smooth;
 }
-@media (min-width: 480px) {
-  html,
-  body {
-    word-break: initial;
-  }
-}
 
 body.mint-fixed #mint-header {
   position: fixed;
@@ -1161,13 +1156,13 @@ main {
   overflow: hidden;
   z-index: 1000;
 }
+main > router-outlet {
+  flex-grow: 0;
+}
 main > router-outlet + * {
   width: 100%;
   flex-grow: 1;
 }
-main router-outlet {
-  flex-grow: 0;
-}
 
 nav a {
   display: block;
@@ -2470,7 +2465,12 @@ h6:last-child,
 
 h1, .mint-h1 {
   margin: 1rem 0;
-  font-size: 2.5rem;
+  font-size: min(15vw, 2.5rem);
+}
+@media (min-width: 480px) {
+  h1, .mint-h1 {
+    font-size: 2.5rem;
+  }
 }
 @media (min-width: 1024px) {
   h1, .mint-h1 {
@@ -2480,7 +2480,12 @@ h1, .mint-h1 {
 
 h2, .mint-h2 {
   margin: 1rem 0;
-  font-size: 2rem;
+  font-size: min(12vw, 2rem);
+}
+@media (min-width: 480px) {
+  h2, .mint-h2 {
+    font-size: 2rem;
+  }
 }
 @media (min-width: 1024px) {
   h2, .mint-h2 {
@@ -2490,7 +2495,12 @@ h2, .mint-h2 {
 
 h3, .mint-h3 {
   margin: 1rem 0;
-  font-size: 1.75rem;
+  font-size: min(10vw, 1.75rem);
+}
+@media (min-width: 480px) {
+  h3, .mint-h3 {
+    font-size: 1.75rem;
+  }
 }
 @media (min-width: 1024px) {
   h3, .mint-h3 {
@@ -2500,7 +2510,12 @@ h3, .mint-h3 {
 
 h4, .mint-h4 {
   margin: 1rem 0;
-  font-size: 1.5rem;
+  font-size: min(8vw, 1.5rem);
+}
+@media (min-width: 480px) {
+  h4, .mint-h4 {
+    font-size: 1.5rem;
+  }
 }
 @media (min-width: 1024px) {
   h4, .mint-h4 {
@@ -2510,7 +2525,12 @@ h4, .mint-h4 {
 
 h5, .mint-h5 {
   margin: 1rem 0;
-  font-size: 1.25rem;
+  font-size: min(7vw, 1.25rem);
+}
+@media (min-width: 480px) {
+  h5, .mint-h5 {
+    font-size: 1.25rem;
+  }
 }
 @media (min-width: 1024px) {
   h5, .mint-h5 {
@@ -2520,7 +2540,12 @@ h5, .mint-h5 {
 
 h6, .mint-h6 {
   margin: 1rem 0;
-  font-size: 1.125rem;
+  font-size: min(6vw, 1.125rem);
+}
+@media (min-width: 480px) {
+  h6, .mint-h6 {
+    font-size: 1.125rem;
+  }
 }
 @media (min-width: 1024px) {
   h6, .mint-h6 {
@@ -2532,6 +2557,11 @@ p, .mint-p {
   margin: 1rem 0;
   font-size: 1rem;
 }
+@media (min-width: 480px) {
+  p, .mint-p {
+    font-size: 1rem;
+  }
+}
 @media (min-width: 1024px) {
   p, .mint-p {
     font-size: 1.125rem;