@appartmint/mint 0.12.4 → 0.12.6

package/dist/css/mint.css

@@ -28,8 +28,8 @@
   display: inline-block;
   border-radius: 1rem;
   color: var(--mint-fore);
-  background: var(--mint-brand-1);
-  border: 0.125rem solid var(--mint-brand-3);
+  background: var(--mint-brand-2);
+  border: 0.125rem solid var(--mint-brand-4);
   text-align: center;
 }
 @media (min-width: 480px) {
@@ -43,7 +43,7 @@
 .mint-btn-group:hover,
 .mint-pill:hover {
   color: var(--mint-back);
-  background: var(--mint-brand-3);
+  background: var(--mint-brand-4);
 }
 .mint-btn:hover i,
 .mint-btn-group:hover i,
@@ -54,7 +54,7 @@
 .mint-btn-group:focus,
 .mint-pill:focus {
   color: var(--mint-back);
-  background: var(--mint-brand-3);
+  background: var(--mint-brand-4);
 }
 .mint-btn:focus i,
 .mint-btn-group:focus i,
@@ -67,7 +67,7 @@
 .mint-pill:active,
 .mint-pill.mint-active {
   color: var(--mint-back);
-  background: var(--mint-brand-3);
+  background: var(--mint-brand-4);
 }
 .mint-btn:active i, .mint-btn.mint-active i,
 .mint-btn-group:active i,
@@ -80,19 +80,19 @@
 .mint-btn-group.mint-reverse,
 .mint-pill.mint-reverse {
   color: var(--mint-back);
-  background: var(--mint-brand-3);
+  background: var(--mint-brand-4);
 }
 .mint-btn.mint-reverse:hover,
 .mint-btn-group.mint-reverse:hover,
 .mint-pill.mint-reverse:hover {
   color: var(--mint-fore);
-  background: var(--mint-brand-1);
+  background: var(--mint-brand-2);
 }
 .mint-btn.mint-reverse:focus,
 .mint-btn-group.mint-reverse:focus,
 .mint-pill.mint-reverse:focus {
   color: var(--mint-fore);
-  background: var(--mint-brand-1);
+  background: var(--mint-brand-2);
 }
 .mint-btn.mint-reverse:active, .mint-btn.mint-reverse.mint-active,
 .mint-btn-group.mint-reverse:active,
@@ -100,12 +100,12 @@
 .mint-pill.mint-reverse:active,
 .mint-pill.mint-reverse.mint-active {
   color: var(--mint-fore);
-  background: var(--mint-brand-1);
+  background: var(--mint-brand-2);
 }
 .mint-btn.mint-alt,
 .mint-btn-group.mint-alt,
 .mint-pill.mint-alt {
-  color: var(--mint-brand-3);
+  color: var(--mint-brand-4);
   background: var(--mint-trans);
 }
 .mint-btn.mint-alt:hover,
@@ -141,14 +141,14 @@
 .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);
+  color: var(--mint-brand-4);
   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);
+  color: var(--mint-brand-4);
   background: var(--mint-trans);
   border-color: var(--mint-trans);
 }
@@ -157,7 +157,7 @@
 .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);
+  color: var(--mint-brand-4);
   background: var(--mint-trans);
   border-color: var(--mint-trans);
 }
@@ -185,7 +185,7 @@
 }
 .mint-btn-icon i {
   margin: 0 !important;
-  color: var(--mint-brand-3);
+  color: var(--mint-brand-4);
   font-size: 4rem;
 }
 .mint-btn-icon i::before {
@@ -535,48 +535,23 @@ app-footer::before {
 
 :root {
   --mint-header-height: 4rem;
-  --mint-header-bg: var(--mint-brand-4);
-  --mint-header-fg: var(--mint-back);
+  --mint-header-bg: var(--mint-brand-2);
+  --mint-header-fg: var(--mint-fore);
 }
 
 #mint-header {
-  display: flex;
-  flex-direction: column;
   position: relative;
   width: 100%;
   color: var(--mint-header-fg);
   background-color: var(--mint-header-bg);
   z-index: 10000;
-}
-#mint-header.mint-js {
-  align-items: center;
-  flex-direction: row;
   height: var(--mint-header-height);
 }
-#mint-header.mint-js [aria-controls=mint-wrapper] {
-  display: inline-block;
-}
-#mint-header.mint-js [aria-controls]:not([aria-controls=mint-wrapper]) + ul {
-  display: flex;
-  flex-direction: column;
-  height: 0;
-  overflow: hidden;
-  transition: height var(--mint-delay-default), margin var(--mint-delay-default);
-}
-#mint-header.mint-js [aria-controls]:not([aria-controls=mint-wrapper])[aria-expanded]:not([aria-expanded=true]) + ul {
-  margin: 0;
-}
-#mint-header.mint-js.mint-fixed {
+#mint-header.mint-fixed {
   position: fixed;
   top: 0;
   left: 0;
 }
-#mint-header.mint-js #mint-wrapper {
-  background: var(--mint-bg);
-  transition-duration: var(--mint-delay-default);
-  transition-property: top, right, bottom, left;
-  overflow: auto;
-}
 #mint-header.mint-right #mint-wrapper {
   top: var(--mint-header-height);
   right: -100%;
@@ -641,7 +616,7 @@ app-footer::before {
   max-width: var(--mint-header-height);
 }
 #mint-header [aria-controls=mint-wrapper] {
-  display: none;
+  display: inline-block;
   position: relative;
   padding: 0.6rem;
   width: 4.4rem;
@@ -650,6 +625,7 @@ app-footer::before {
   border-radius: 1rem;
   background: var(--mint-shadow-6);
   box-shadow: 0 0 2rem -0.5rem var(--mint-glow-2);
+  z-index: 1000;
 }
 #mint-header [aria-controls=mint-wrapper] .mint-menu-icon {
   top: 50%;
@@ -689,12 +665,25 @@ app-footer::before {
   left: 0;
   width: 100%;
   height: calc(100vh - var(--mint-header-height));
-  transition: none;
   z-index: -2;
+  background: var(--mint-header-bg);
+  transition-duration: var(--mint-delay-default);
+  transition-property: top, right, bottom, left;
+  overflow: auto;
 }
 #mint-header #mint-wrapper.mint-open {
   top: var(--mint-header-height);
 }
+#mint-header #mint-wrapper nav {
+  height: 100%;
+  background: var(--mint-back);
+  overflow: auto;
+  background-repeat: repeat;
+}
+#mint-header #mint-wrapper a, #mint-header #mint-wrapper button {
+  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" !important;
+  font-size: 4em;
+}
 #mint-header #mint-widgets {
   position: absolute;
   top: 0;
@@ -717,6 +706,23 @@ app-footer::before {
   line-height: 1;
   cursor: pointer;
 }
+#mint-header [aria-controls]:not([aria-controls=mint-wrapper]) + ul {
+  display: flex;
+  flex-direction: column;
+  height: 0;
+  overflow: hidden;
+  transition: height var(--mint-delay-default), margin var(--mint-delay-default);
+}
+#mint-header [aria-controls]:not([aria-controls=mint-wrapper])[aria-expanded]:not([aria-expanded=true]) + ul {
+  margin: 0;
+}
+
+#mint-navbar {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-direction: row;
+}
 
 .mint-image.mint-error::after {
   content: "❌ Image failed to load. This is a placeholder.";
@@ -1855,6 +1861,37 @@ i.fa-envelope {
   }
 }
 
+.mint-max-xs {
+  width: 100%;
+  max-width: 480px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-max-sm {
+  width: 100%;
+  max-width: 768px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-max-md {
+  width: 100%;
+  max-width: 1024px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-max-lg {
+  width: 100%;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mint-max-xl {
+  width: 100%;
+  max-width: 1440px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 section {
   width: 100%;
 }
@@ -2260,7 +2297,7 @@ p, .mint-p {
 }
 
 a {
-  color: var(--mint-brand);
+  color: var(--mint-brand-4);
   transition: color var(--mint-delay-default);
 }
 a .fa-instagram {
@@ -2286,7 +2323,7 @@ a .fa-instagram::after {
   }
 }
 a:hover {
-  color: var(--mint-accent-0);
+  color: var(--mint-accent-2);
 }
 a:hover .fa-facebook, a:hover .fa-square-facebook {
   color: var(--mint-facebook);
@@ -2325,7 +2362,7 @@ a:hover .fa-vimeo {
   color: var(--mint-venmo);
 }
 a:focus {
-  color: var(--mint-accent-0);
+  color: var(--mint-accent-2);
 }
 a:focus .fa-facebook, a:focus .fa-square-facebook {
   color: var(--mint-facebook);
@@ -2364,7 +2401,7 @@ a:focus .fa-vimeo {
   color: var(--mint-venmo);
 }
 a:active, a.mint-active {
-  color: var(--mint-accent-0);
+  color: var(--mint-accent-2);
 }
 a:active .fa-facebook, a:active .fa-square-facebook, a.mint-active .fa-facebook, a.mint-active .fa-square-facebook {
   color: var(--mint-facebook);