@appartmint/mint 0.10.20 → 0.10.22

package/dist/css/mint.css

@@ -11,12 +11,14 @@
 }
 
 .mint-btn,
-.mint-pill,
-.mint-btn-icon {
+.mint-btn-icon,
+.mint-pill {
+  max-width: 100%;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
+  user-select: none;
   transition: color var(--mint-delay-default), background-color var(--mint-delay-default), border-color var(--mint-delay-default);
 }
 
@@ -74,6 +76,32 @@
 .mint-pill.mint-active i {
   color: inherit !important;
 }
+.mint-btn.mint-reverse,
+.mint-btn-group.mint-reverse,
+.mint-pill.mint-reverse {
+  color: var(--mint-back);
+  background: var(--mint-brand-3);
+}
+.mint-btn.mint-reverse:hover,
+.mint-btn-group.mint-reverse:hover,
+.mint-pill.mint-reverse:hover {
+  color: var(--mint-fore);
+  background: var(--mint-brand-5);
+}
+.mint-btn.mint-reverse:focus,
+.mint-btn-group.mint-reverse:focus,
+.mint-pill.mint-reverse:focus {
+  color: var(--mint-fore);
+  background: var(--mint-brand-5);
+}
+.mint-btn.mint-reverse:active, .mint-btn.mint-reverse.mint-active,
+.mint-btn-group.mint-reverse:active,
+.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-5);
+}
 .mint-btn.mint-alt,
 .mint-btn-group.mint-alt,
 .mint-pill.mint-alt {
@@ -103,6 +131,36 @@
   background: var(--mint-accent-2);
   border-color: var(--mint-accent-2);
 }
+.mint-btn.mint-alt.mint-reverse,
+.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-group.mint-alt.mint-reverse:hover,
+.mint-pill.mint-alt.mint-reverse:hover {
+  color: var(--mint-brand-3);
+  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 {
+  color: var(--mint-brand-3);
+  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-group.mint-alt.mint-reverse:active,
+.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-3);
+  background: var(--mint-trans);
+  border-color: var(--mint-trans);
+}
 
 .mint-btn {
   padding: 0.5rem 1.75rem;
@@ -176,6 +234,14 @@ a.mint-pill, button.mint-pill {
   min-width: 5rem;
 }
 
+p .mint-pill, p .mint-btn {
+  line-height: 1.5rem;
+  vertical-align: middle;
+}
+
+.mint-buttons {
+  gap: 1rem;
+}
 .mint-buttons {
   display: flex;
   align-items: center;
@@ -210,6 +276,9 @@ a.mint-pill, button.mint-pill {
     margin: 0.5rem;
   }
 }
+.mint-buttons.mint-even {
+  justify-content: space-evenly;
+}
 .mint-buttons .mint-buttons .mint-pill {
   width: 100%;
 }
@@ -222,11 +291,6 @@ a.mint-pill, button.mint-pill {
   }
 }
 
-p .mint-pill {
-  line-height: 1.5rem;
-  vertical-align: middle;
-}
-
 .mint-card {
   display: flex;
   flex-direction: column;
@@ -247,6 +311,9 @@ p .mint-pill {
 .mint-card.mint-center .mint-content > * {
   text-align: center;
 }
+.mint-card.mint-center .mint-buttons {
+  justify-content: center;
+}
 .mint-card.mint-stagger {
   position: relative;
 }
@@ -308,6 +375,7 @@ p .mint-pill {
   padding: 1.5rem;
   background: var(--mint-black-2);
   width: 100%;
+  overflow: hidden;
 }
 .mint-card .mint-content > * {
   margin-top: 0;
@@ -782,6 +850,9 @@ nav ul > li > ul {
 a[href^="mailto:"], a[href^="tel:"], a[href^="sms:"] {
   white-space: nowrap;
 }
+a i:first-child {
+  margin-right: 0.25rem;
+}
 a i:last-child {
   margin-left: 0.25rem;
 }
@@ -1026,53 +1097,245 @@ i.fa-envelope {
 .mint-margin-auto-v6 {
   margin: 6rem auto;
 }
+.mint-margin-auto-t {
+  margin-top: 1rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-margin-auto-t0 {
+  margin-top: 0rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-margin-auto-t1 {
+  margin-top: 1rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-margin-auto-t2 {
+  margin-top: 2rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-margin-auto-t3 {
+  margin-top: 3rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-margin-auto-t4 {
+  margin-top: 4rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-margin-auto-t5 {
+  margin-top: 5rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-margin-auto-t6 {
+  margin-top: 6rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-margin-auto-b {
+  margin-bottom: 1rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-margin-auto-b0 {
+  margin-bottom: 0rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-margin-auto-b1 {
+  margin-bottom: 1rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-margin-auto-b2 {
+  margin-bottom: 2rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-margin-auto-b3 {
+  margin-bottom: 3rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-margin-auto-b4 {
+  margin-bottom: 4rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-margin-auto-b5 {
+  margin-bottom: 5rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-margin-auto-b6 {
+  margin-bottom: 6rem;
+  margin-left: auto;
+  margin-right: auto;
+}
 .mint-margin-v {
-  margin: 1rem 0;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 .mint-margin-v0 {
-  margin: 0rem 0;
+  margin-top: 0rem;
+  margin-bottom: 0rem;
 }
 .mint-margin-v1 {
-  margin: 1rem 0;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 .mint-margin-v2 {
-  margin: 2rem 0;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 }
 .mint-margin-v3 {
-  margin: 3rem 0;
+  margin-top: 3rem;
+  margin-bottom: 3rem;
 }
 .mint-margin-v4 {
-  margin: 4rem 0;
+  margin-top: 4rem;
+  margin-bottom: 4rem;
 }
 .mint-margin-v5 {
-  margin: 5rem 0;
+  margin-top: 5rem;
+  margin-bottom: 5rem;
 }
 .mint-margin-v6 {
-  margin: 6rem 0;
+  margin-top: 6rem;
+  margin-bottom: 6rem;
+}
+.mint-margin-t {
+  margin-top: 1rem;
+}
+.mint-margin-t0 {
+  margin-top: 0rem;
+}
+.mint-margin-t1 {
+  margin-top: 1rem;
+}
+.mint-margin-t2 {
+  margin-top: 2rem;
+}
+.mint-margin-t3 {
+  margin-top: 3rem;
+}
+.mint-margin-t4 {
+  margin-top: 4rem;
+}
+.mint-margin-t5 {
+  margin-top: 5rem;
+}
+.mint-margin-t6 {
+  margin-top: 6rem;
+}
+.mint-margin-b {
+  margin-bottom: 1rem;
+}
+.mint-margin-b0 {
+  margin-bottom: 0rem;
+}
+.mint-margin-b1 {
+  margin-bottom: 1rem;
+}
+.mint-margin-b2 {
+  margin-bottom: 2rem;
+}
+.mint-margin-b3 {
+  margin-bottom: 3rem;
+}
+.mint-margin-b4 {
+  margin-bottom: 4rem;
+}
+.mint-margin-b5 {
+  margin-bottom: 5rem;
+}
+.mint-margin-b6 {
+  margin-bottom: 6rem;
 }
 .mint-margin-h {
-  margin: 0 1rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
 }
 .mint-margin-h0 {
-  margin: 0 0rem;
+  margin-left: 0rem;
+  margin-right: 0rem;
 }
 .mint-margin-h1 {
-  margin: 0 1rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
 }
 .mint-margin-h2 {
-  margin: 0 2rem;
+  margin-left: 2rem;
+  margin-right: 2rem;
 }
 .mint-margin-h3 {
-  margin: 0 3rem;
+  margin-left: 3rem;
+  margin-right: 3rem;
 }
 .mint-margin-h4 {
-  margin: 0 4rem;
+  margin-left: 4rem;
+  margin-right: 4rem;
 }
 .mint-margin-h5 {
-  margin: 0 5rem;
+  margin-left: 5rem;
+  margin-right: 5rem;
 }
 .mint-margin-h6 {
-  margin: 0 6rem;
+  margin-left: 6rem;
+  margin-right: 6rem;
+}
+.mint-margin-l {
+  margin-left: 1rem;
+}
+.mint-margin-l0 {
+  margin-left: 0rem;
+}
+.mint-margin-l1 {
+  margin-left: 1rem;
+}
+.mint-margin-l2 {
+  margin-left: 2rem;
+}
+.mint-margin-l3 {
+  margin-left: 3rem;
+}
+.mint-margin-l4 {
+  margin-left: 4rem;
+}
+.mint-margin-l5 {
+  margin-left: 5rem;
+}
+.mint-margin-l6 {
+  margin-left: 6rem;
+}
+.mint-margin-r {
+  margin-right: 1rem;
+}
+.mint-margin-r0 {
+  margin-right: 0rem;
+}
+.mint-margin-r1 {
+  margin-right: 1rem;
+}
+.mint-margin-r2 {
+  margin-right: 2rem;
+}
+.mint-margin-r3 {
+  margin-right: 3rem;
+}
+.mint-margin-r4 {
+  margin-right: 4rem;
+}
+.mint-margin-r5 {
+  margin-right: 5rem;
+}
+.mint-margin-r6 {
+  margin-right: 6rem;
 }
 
 section {
@@ -1155,6 +1418,13 @@ section.mint-bigger {
   }
 }
 
+.mint-fit {
+  width: fit-content;
+  height: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 html, body {
   font-family: sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;
@@ -1174,36 +1444,84 @@ h1,
   font-family: serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   line-height: 1;
 }
+h1:first-child,
+.mint-h1:first-child {
+  margin-top: 0;
+}
+h1:last-child,
+.mint-h1:last-child {
+  margin-bottom: 0;
+}
 
 h2,
 .mint-h2 {
   font-family: serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   line-height: 1;
 }
+h2:first-child,
+.mint-h2:first-child {
+  margin-top: 0;
+}
+h2:last-child,
+.mint-h2:last-child {
+  margin-bottom: 0;
+}
 
 h3,
 .mint-h3 {
   font-family: serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   line-height: 1;
 }
+h3:first-child,
+.mint-h3:first-child {
+  margin-top: 0;
+}
+h3:last-child,
+.mint-h3:last-child {
+  margin-bottom: 0;
+}
 
 h4,
 .mint-h4 {
   font-family: serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   line-height: 1;
 }
+h4:first-child,
+.mint-h4:first-child {
+  margin-top: 0;
+}
+h4:last-child,
+.mint-h4:last-child {
+  margin-bottom: 0;
+}
 
 h5,
 .mint-h5 {
   font-family: serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   line-height: 1;
 }
+h5:first-child,
+.mint-h5:first-child {
+  margin-top: 0;
+}
+h5:last-child,
+.mint-h5:last-child {
+  margin-bottom: 0;
+}
 
 h6,
 .mint-h6 {
   font-family: serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   line-height: 1;
 }
+h6:first-child,
+.mint-h6:first-child {
+  margin-top: 0;
+}
+h6:last-child,
+.mint-h6:last-child {
+  margin-bottom: 0;
+}
 
 h1, .mint-h1 {
   margin: 1rem 0;
@@ -1411,6 +1729,7 @@ p, .mint-p {
 
 a {
   color: var(--mint-brand);
+  transition: color var(--mint-delay-default);
 }
 a .fa-instagram {
   position: relative;