@appartmint/mint 2.10.15 → 2.10.18

package/dist/css/mint.css

@@ -634,40 +634,40 @@ body.mint-fixed #mint-header {
   justify-content: flex-start;
   gap: var(--mint-flex-gap);
 }
-.mint-flex-row-reverse {
+.mint-flex.mint-row-reverse {
   flex-direction: row-reverse;
 }
-.mint-flex-column {
+.mint-flex.mint-column {
   flex-direction: column;
 }
-.mint-flex-column-reverse {
+.mint-flex.mint-column-reverse {
   flex-direction: column-reverse;
 }
-.mint-flex-wrap {
+.mint-flex.mint-wrap {
   flex-wrap: wrap;
 }
-.mint-flex-wrap-reverse {
+.mint-flex.mint-wrap-reverse {
   flex-wrap: wrap-reverse;
 }
-.mint-flex-center {
+.mint-flex.mint-center {
   justify-content: center;
 }
-.mint-flex-end {
+.mint-flex.mint-end {
   justify-content: flex-end;
 }
-.mint-flex-between {
+.mint-flex.mint-between {
   justify-content: space-between;
 }
-.mint-flex-around {
+.mint-flex.mint-around {
   justify-content: space-around;
 }
-.mint-flex-even {
+.mint-flex.mint-even {
   justify-content: space-evenly;
 }
-.mint-flex-align-start {
+.mint-flex.mint-align-start {
   align-items: flex-start;
 }
-.mint-flex-align-end {
+.mint-flex.mint-align-end {
   align-items: flex-end;
 }
 
@@ -1265,8 +1265,8 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   height: 100%;
   max-width: 100%;
   margin: 0;
-  border-radius: 1rem;
-  box-shadow: 0 0 2rem -0.5rem var(--mint-glow-2);
+  border-radius: var(--mint-card-radius);
+  box-shadow: var(--mint-card-shadow-size) var(--mint-card-shadow-color);
   overflow: hidden;
 }
 @media (min-width: 768px) {
@@ -1281,7 +1281,7 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   box-shadow: none;
 }
 .mint-card:has(.mint-carousel) .mint-content, :root:root [data-amplify-authenticator] [data-amplify-container]:has(.mint-carousel) .mint-content, :root:root .mint-card:has(.mint-carousel) [data-amplify-authenticator] [data-amplify-container] [data-amplify-router], :root:root [data-amplify-authenticator] [data-amplify-container] .mint-card:has(.mint-carousel) [data-amplify-router], :root:root [data-amplify-authenticator] [data-amplify-container]:has(.mint-carousel) [data-amplify-router] {
-  box-shadow: 0 0 2rem -0.5rem var(--mint-glow-2);
+  box-shadow: var(--mint-card-shadow-size) var(--mint-card-shadow-color);
 }
 .mint-card.mint-center .mint-title, :root:root [data-amplify-authenticator] .mint-center[data-amplify-container] .mint-title {
   justify-content: center;
@@ -1321,21 +1321,21 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
     overflow: visible;
   }
   .mint-card.mint-stagger > .mint-image, :root:root [data-amplify-authenticator] .mint-stagger[data-amplify-container] > .mint-image {
-    width: calc(50% + 1.5rem);
+    width: calc(50% + var(--mint-card-padding));
     height: fit-content;
-    margin-right: -3rem;
-    border-radius: 1rem;
+    margin-right: calc(var(--mint-card-padding) * -2);
+    border-radius: var(--mint-card-radius);
   }
   .mint-card.mint-stagger > .mint-image img, :root:root [data-amplify-authenticator] .mint-stagger[data-amplify-container] > .mint-image img {
     height: 100%;
     object-fit: cover;
   }
   .mint-card.mint-stagger > .mint-content, :root:root [data-amplify-authenticator] .mint-stagger[data-amplify-container] > .mint-content, :root:root [data-amplify-authenticator] [data-amplify-container] .mint-card.mint-stagger > [data-amplify-router], :root:root [data-amplify-authenticator] .mint-stagger[data-amplify-container] > [data-amplify-router] {
-    width: calc(50% + 1.5rem);
     height: fit-content;
-    margin-top: 3rem;
-    border-radius: 1rem;
-    box-shadow: 0 0 2rem -0.5rem var(--mint-glow-2);
+    width: calc(50% + var(--mint-card-padding));
+    margin-top: calc(2 * var(--mint-card-padding));
+    border-radius: var(--mint-card-radius);
+    box-shadow: var(--mint-card-shadow-size) var(--mint-card-shadow-color);
   }
 }
 @media (min-width: 768px) {
@@ -1344,7 +1344,7 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   }
   .mint-card.mint-stagger.mint-reverse > .mint-image, :root:root [data-amplify-authenticator] .mint-stagger.mint-reverse[data-amplify-container] > .mint-image {
     margin-right: 0;
-    margin-left: -3rem;
+    margin-left: calc(var(--mint-card-padding) * -2);
   }
 }
 .mint-card > .mint-image, :root:root [data-amplify-authenticator] [data-amplify-container] > .mint-image {
@@ -1368,8 +1368,8 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   flex-direction: column;
   gap: 1rem;
   position: relative;
-  padding: 1.5rem;
-  background: var(--mint-back);
+  padding: var(--mint-card-padding);
+  background: var(--mint-card-back);
   width: 100%;
   overflow: hidden;
 }
@@ -1382,7 +1382,7 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   flex-direction: column;
   align-items: center;
   height: fit-content;
-  gap: 1.5rem;
+  gap: var(--mint-card-padding);
   text-align: center;
 }
 @media (min-width: 480px) {
@@ -1397,12 +1397,12 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
 .mint-card .mint-title > .mint-image, :root:root [data-amplify-authenticator] [data-amplify-container] .mint-title > .mint-image {
   width: 100%;
   height: 100%;
-  max-width: 4rem;
-  max-height: 4rem;
+  max-width: var(--mint-card-logo-size);
+  max-height: var(--mint-card-logo-size);
 }
 .mint-card .mint-title > .mint-image.mint-large, :root:root [data-amplify-authenticator] [data-amplify-container] .mint-title > .mint-image.mint-large {
-  max-width: 8rem;
-  max-height: 8rem;
+  max-width: calc(2 * var(--mint-card-logo-size));
+  max-height: calc(2 * var(--mint-card-logo-size));
 }
 .mint-card .mint-title > .mint-image img, :root:root [data-amplify-authenticator] [data-amplify-container] .mint-title > .mint-image img {
   display: block;
@@ -1414,10 +1414,10 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 4rem;
-  max-width: 4rem;
+  min-width: var(--mint-card-logo-size);
+  max-width: var(--mint-card-logo-size);
   margin: 0;
-  font-size: 3rem;
+  font-size: calc(var(--mint-card-logo-size) - 1rem);
 }
 .mint-card .mint-title > div, :root:root [data-amplify-authenticator] [data-amplify-container] .mint-title > div {
   width: 100%;
@@ -1435,7 +1435,7 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
 }
 .mint-card-grid {
   position: relative;
-  background: var(--mint-back);
+  background: var(--mint-card-back);
 }
 .mint-card-grid:has(.mint-image) .mint-content, :root:root .mint-card-grid:has(.mint-image) [data-amplify-authenticator] [data-amplify-container] [data-amplify-router], :root:root [data-amplify-authenticator] [data-amplify-container] .mint-card-grid:has(.mint-image) [data-amplify-router] {
   margin-top: 25%;
@@ -3545,7 +3545,7 @@ p, .mint-p {
 
 .mint-frame {
   height: fit-content;
-  background-color: var(--mint-back);
+  background-color: var(--mint-card-back);
 }
 
 .mint-card-grid .mint-image {
@@ -3662,6 +3662,12 @@ p, .mint-p {
   --mint-info-6: rgb(100, 123.1884057971, 26.8115942029);
   --mint-spacing: 0.25rem;
   --mint-flex-gap: calc(var(--mint-spacing) * 2);
+  --mint-card-padding: 1.5rem;
+  --mint-card-radius: 1rem;
+  --mint-card-shadow-color: glow-2;
+  --mint-card-shadow-size: 0 0 2rem -0.5rem;
+  --mint-card-logo-size: 4rem;
+  --mint-card-back: var(--mint-back);
   --mint-tooltip-fore: var(--mint-fore);
   --mint-tooltip-back: var(--mint-black-2);
   --mint-tooltip-radius: 1rem;