@appartmint/mint 0.15.6 → 0.15.8

package/dist/css/mint.css

@@ -579,7 +579,110 @@ app-footer::before {
   display: flex;
   flex-grow: 1;
   height: 100%;
-  background: css-var(trans);
+  background: var(--mint-trans);
+}
+
+.mint-footer {
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  background: var(--mint-back);
+  transition: transform 300ms;
+  z-index: 999;
+  overflow: hidden;
+}
+.mint-footer.mint-hide {
+  transform: translateY(100%);
+}
+.mint-footer * {
+  max-width: 100%;
+}
+.mint-footer p {
+  margin: 0;
+}
+.mint-footer-content {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+@media (min-width: 768px) {
+  .mint-footer-content {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+}
+.mint-footer-content > p {
+  margin: 0 auto;
+  text-align: center;
+}
+.mint-footer-content > p a {
+  display: block;
+}
+.mint-footer-content [label=Footer] {
+  width: 100%;
+  margin: auto;
+}
+@media (min-width: 768px) {
+  .mint-footer-content [label=Footer] {
+    width: auto;
+  }
+}
+.mint-footer-content [label=Footer] > ul {
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  text-align: center;
+}
+@media (min-width: 480px) {
+  .mint-footer-content [label=Footer] > ul {
+    flex-direction: row;
+  }
+}
+.mint-footer-content [label=Footer] > ul > ul li:last-child .mint-pill {
+  margin-bottom: 0;
+}
+.mint-footer-content [label=Footer] .mint-pill {
+  margin-bottom: 0.5rem;
+}
+.mint-footer-heel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.4rem 1rem;
+  color: var(--mint-back);
+  background: var(--mint-brand-6);
+  text-align: center;
+}
+@media (min-width: 768px) {
+  .mint-footer-heel {
+    flex-direction: row;
+  }
+}
+.mint-footer-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+@media (min-width: 480px) {
+  .mint-footer-message {
+    flex-wrap: nowrap;
+  }
+}
+.mint-footer-message > .mint-pill {
+  margin: 0 0.25rem;
+}
+.mint-footer-message > * {
+  margin: 0 0.5rem;
+}
+.mint-footer-message > *:first-child {
+  margin-left: 0;
+}
+.mint-footer-message > *:last-child {
+  margin-right: 0;
 }
 
 :root {
@@ -1004,6 +1107,10 @@ app-footer::before {
   width: 100%;
 }
 
+.grecaptcha-badge {
+  visibility: hidden;
+}
+
 @keyframes instafade {
   0% {
     color: var(--mint-instagram-0);
@@ -1257,18 +1364,161 @@ iframe {
   padding: 0;
 }
 
+.mint-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+@media (min-width: 768px) {
+  .mint-grid.mint-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .mint-grid.mint-2 > :last-child:nth-child(odd) .mint-card {
+    grid-column: span 2;
+    width: 50%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+@media (min-width: 768px) {
+  .mint-grid.mint-3 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .mint-grid.mint-3 > :last-child:nth-child(odd) .mint-card {
+    grid-column: span 2;
+    width: 50%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+@media (min-width: 1200px) {
+  .mint-grid.mint-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .mint-grid.mint-3 > :last-child:nth-child(odd) .mint-card {
+    grid-column: span 1;
+    width: 100%;
+  }
+  .mint-grid.mint-3 > :last-child:nth-child(3n+1) .mint-card {
+    grid-column: 2;
+  }
+  .mint-grid.mint-3 > :last-child:nth-child(3n+2) .mint-card {
+    grid-column: 3;
+  }
+  .mint-grid.mint-3 > :nth-last-child(2):nth-child(3n+1) .mint-card {
+    grid-column: 1;
+  }
+}
+@media (min-width: 768px) {
+  .mint-grid.mint-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .mint-grid.mint-4 > :last-child:nth-child(odd) .mint-card {
+    grid-column: span 2;
+    width: 50%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+@media (min-width: 1200px) {
+  .mint-grid.mint-4 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .mint-grid.mint-4 > :last-child:nth-child(odd) .mint-card {
+    grid-column: span 1;
+    width: 100%;
+  }
+  .mint-grid.mint-4 > :last-child:nth-child(3n+1) .mint-card {
+    grid-column: 2;
+  }
+  .mint-grid.mint-4 > :last-child:nth-child(3n+2) .mint-card {
+    grid-column: 3;
+  }
+  .mint-grid.mint-4 > :nth-last-child(2):nth-child(3n+1) .mint-card {
+    grid-column: 1;
+  }
+}
+@media (min-width: 1440px) {
+  .mint-grid.mint-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  .mint-grid.mint-4 > :last-child:nth-child(odd) .mint-card, .mint-grid.mint-4 > :last-child:nth-child(3n+1) .mint-card, .mint-grid.mint-4 > :last-child:nth-child(3n+2) .mint-card, .mint-grid.mint-4 > :nth-last-child(2):nth-child(3n+1) .mint-card {
+    grid-column: span 1;
+    width: 100%;
+  }
+  .mint-grid.mint-4 > :last-child:nth-child(4n+1) .mint-card {
+    grid-column: 2/span 2;
+    width: 50%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .mint-grid.mint-4 > :last-child:nth-child(4n+2) .mint-card {
+    grid-column: 3/span 2;
+    width: 50%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .mint-grid.mint-4 > :nth-last-child(2):nth-child(4n+1) .mint-card {
+    grid-column: 1/span 2;
+    width: 50%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .mint-grid.mint-4 > :last-child:nth-child(4n+3) .mint-card {
+    grid-column: 4;
+  }
+  .mint-grid.mint-4 > :nth-last-child(2):nth-child(4n+2) .mint-card {
+    grid-column: 2/span 2;
+    width: 50%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .mint-grid.mint-4 > :nth-last-child(3):nth-child(4n+1) .mint-card {
+    grid-column: 1;
+  }
+}
+.mint-grid .mint-portrait {
+  grid-row: span 2;
+}
+
 i.fa-envelope {
   transform: translateY(5%);
 }
 
+input,
+textarea,
+select {
+  width: 100%;
+  padding: 0.5rem;
+  border: 2px solid #ccc;
+  border-radius: 1rem;
+}
+
+@media (min-width: 480px) {
+  select {
+    width: auto;
+  }
+}
+
+textarea {
+  resize: vertical;
+}
+
 .mint-toggle {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.mint-toggle div {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
 }
 @media (min-width: 480px) {
-  .mint-toggle {
+  .mint-toggle div {
     flex-direction: row;
   }
 }
@@ -1307,12 +1557,29 @@ i.fa-envelope {
   filter: grayscale(1);
   transition: filter 300ms, background-color 300ms, left 300ms;
 }
+.mint-check + span {
+  width: 1.5rem;
+  text-align: center;
+}
 
 .mint-dropdown {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  gap: 1rem;
+}
+@media (min-width: 480px) {
+  .mint-dropdown {
+    gap: 1rem;
+  }
+}
+
+.mint-error {
+  line-height: 0;
+  filter: opacity(0);
+  transition: filter 0.3s;
+}
+.mint-error.mint-show {
+  filter: opacity(1);
 }
 
 .mint-pad-auto {
@@ -1479,6 +1746,9 @@ i.fa-envelope {
 .mint-pad-t6 {
   padding-top: 6rem;
 }
+.mint-pad-t50 {
+  padding-top: 50vh;
+}
 .mint-pad-b {
   padding-bottom: 1rem;
 }
@@ -1934,6 +2204,9 @@ i.fa-envelope {
 .mint-margin-t6 {
   margin-top: 6rem;
 }
+.mint-margin-t50 {
+  margin-top: 50vh;
+}
 .mint-margin-b {
   margin-bottom: 1rem;
 }
@@ -2225,6 +2498,90 @@ i.fa-envelope {
   }
 }
 
+.mint-hide {
+  display: initial;
+}
+.mint-hide-xs {
+  display: none;
+}
+@media (min-width: 480px) {
+  .mint-hide-xs {
+    display: initial;
+  }
+}
+.mint-hide-to-xs {
+  display: initial;
+}
+@media (min-width: 480px) {
+  .mint-hide-to-xs {
+    display: none;
+  }
+}
+.mint-hide-sm {
+  display: none;
+}
+@media (min-width: 768px) {
+  .mint-hide-sm {
+    display: initial;
+  }
+}
+.mint-hide-to-sm {
+  display: initial;
+}
+@media (min-width: 768px) {
+  .mint-hide-to-sm {
+    display: none;
+  }
+}
+.mint-hide-md {
+  display: none;
+}
+@media (min-width: 1024px) {
+  .mint-hide-md {
+    display: initial;
+  }
+}
+.mint-hide-to-md {
+  display: initial;
+}
+@media (min-width: 1024px) {
+  .mint-hide-to-md {
+    display: none;
+  }
+}
+.mint-hide-lg {
+  display: none;
+}
+@media (min-width: 1200px) {
+  .mint-hide-lg {
+    display: initial;
+  }
+}
+.mint-hide-to-lg {
+  display: initial;
+}
+@media (min-width: 1200px) {
+  .mint-hide-to-lg {
+    display: none;
+  }
+}
+.mint-hide-xl {
+  display: none;
+}
+@media (min-width: 1440px) {
+  .mint-hide-xl {
+    display: initial;
+  }
+}
+.mint-hide-to-xl {
+  display: initial;
+}
+@media (min-width: 1440px) {
+  .mint-hide-to-xl {
+    display: none;
+  }
+}
+
 .mint-max-xs {
   width: 100%;
   max-width: 480px;
@@ -2276,35 +2633,6 @@ i.fa-envelope {
   margin-right: auto;
 }
 
-section {
-  width: 100%;
-}
-section.mint-smaller {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 480px;
-}
-section.mint-small {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 768px;
-}
-section.mint-default {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 1024px;
-}
-section.mint-big {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 1200px;
-}
-section.mint-bigger {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 1440px;
-}
-
 .mint-center {
   align-items: center;
   justify-content: center;
@@ -2316,125 +2644,6 @@ section.mint-bigger {
   text-align: center;
 }
 
-.mint-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 2rem;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-@media (min-width: 768px) {
-  .mint-grid.mint-2 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .mint-grid.mint-2 > :last-child:nth-child(odd) .mint-card {
-    grid-column: span 2;
-    width: 50%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-@media (min-width: 768px) {
-  .mint-grid.mint-3 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .mint-grid.mint-3 > :last-child:nth-child(odd) .mint-card {
-    grid-column: span 2;
-    width: 50%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-@media (min-width: 1200px) {
-  .mint-grid.mint-3 {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  .mint-grid.mint-3 > :last-child:nth-child(odd) .mint-card {
-    grid-column: span 1;
-    width: 100%;
-  }
-  .mint-grid.mint-3 > :last-child:nth-child(3n+1) .mint-card {
-    grid-column: 2;
-  }
-  .mint-grid.mint-3 > :last-child:nth-child(3n+2) .mint-card {
-    grid-column: 3;
-  }
-  .mint-grid.mint-3 > :nth-last-child(2):nth-child(3n+1) .mint-card {
-    grid-column: 1;
-  }
-}
-@media (min-width: 768px) {
-  .mint-grid.mint-4 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .mint-grid.mint-4 > :last-child:nth-child(odd) .mint-card {
-    grid-column: span 2;
-    width: 50%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-@media (min-width: 1200px) {
-  .mint-grid.mint-4 {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  .mint-grid.mint-4 > :last-child:nth-child(odd) .mint-card {
-    grid-column: span 1;
-    width: 100%;
-  }
-  .mint-grid.mint-4 > :last-child:nth-child(3n+1) .mint-card {
-    grid-column: 2;
-  }
-  .mint-grid.mint-4 > :last-child:nth-child(3n+2) .mint-card {
-    grid-column: 3;
-  }
-  .mint-grid.mint-4 > :nth-last-child(2):nth-child(3n+1) .mint-card {
-    grid-column: 1;
-  }
-}
-@media (min-width: 1440px) {
-  .mint-grid.mint-4 {
-    grid-template-columns: repeat(4, 1fr);
-  }
-  .mint-grid.mint-4 > :last-child:nth-child(odd) .mint-card, .mint-grid.mint-4 > :last-child:nth-child(3n+1) .mint-card, .mint-grid.mint-4 > :last-child:nth-child(3n+2) .mint-card, .mint-grid.mint-4 > :nth-last-child(2):nth-child(3n+1) .mint-card {
-    grid-column: span 1;
-    width: 100%;
-  }
-  .mint-grid.mint-4 > :last-child:nth-child(4n+1) .mint-card {
-    grid-column: 2/span 2;
-    width: 50%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .mint-grid.mint-4 > :last-child:nth-child(4n+2) .mint-card {
-    grid-column: 3/span 2;
-    width: 50%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .mint-grid.mint-4 > :nth-last-child(2):nth-child(4n+1) .mint-card {
-    grid-column: 1/span 2;
-    width: 50%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .mint-grid.mint-4 > :last-child:nth-child(4n+3) .mint-card {
-    grid-column: 4;
-  }
-  .mint-grid.mint-4 > :nth-last-child(2):nth-child(4n+2) .mint-card {
-    grid-column: 2/span 2;
-    width: 50%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .mint-grid.mint-4 > :nth-last-child(3):nth-child(4n+1) .mint-card {
-    grid-column: 1;
-  }
-}
-.mint-grid .mint-portrait {
-  grid-row: span 2;
-}
-
 .mint-fit {
   width: fit-content;
   height: fit-content;