@appartmint/mint 2.5.0 → 2.6.1

package/dist/css/mint.css

@@ -168,32 +168,9 @@
   width: 100%;
   color: var(--mint-header-fore);
   background-color: var(--mint-header-back);
-  z-index: 10000;
+  z-index: 1000;
   height: var(--mint-header-height);
 }
-#mint-header.mint-right #mint-wrapper {
-  top: var(--mint-header-height);
-  right: -100%;
-  left: unset;
-}
-#mint-header.mint-right #mint-wrapper.mint-open {
-  right: 0;
-}
-#mint-header.mint-bottom #mint-wrapper {
-  top: unset;
-  bottom: -100%;
-}
-#mint-header.mint-bottom #mint-wrapper.mint-open {
-  top: unset;
-  bottom: 0;
-}
-#mint-header.mint-left #mint-wrapper {
-  top: var(--mint-header-height);
-  left: -100%;
-}
-#mint-header.mint-left #mint-wrapper.mint-open {
-  left: 0;
-}
 @media (min-width: 768px) {
   #mint-header.mint-expand .mint-buttons {
     width: auto;
@@ -301,31 +278,22 @@
 #mint-header.mint-spread:not(.mint-expand) #mint-wrapper [aria-controls] + ul > li:first-child {
   font-size: 1.5em;
 }
-#mint-header.mint-tray #mint-wrapper {
-  gap: 1.5rem;
-  font-size: 0.5em;
-}
-@media (min-width: 768px) {
-  #mint-header.mint-tray #mint-wrapper {
-    max-width: 512px;
-  }
-}
-#mint-header.mint-tray #mint-wrapper a, #mint-header.mint-tray #mint-wrapper button {
+#mint-header .mint-tray #mint-wrapper a, #mint-header .mint-tray #mint-wrapper button {
   padding: 0.75rem;
   margin: 0.25rem 0;
   line-height: 1;
-  font-size: 4em;
+  font-size: 2em;
   width: 100%;
 }
-#mint-header.mint-tray #mint-wrapper button {
-  font-size: 6em;
+#mint-header .mint-tray #mint-wrapper button {
+  font-size: 3em;
 }
-#mint-header.mint-tray #mint-wrapper nav > ul {
+#mint-header .mint-tray #mint-wrapper nav > ul {
   flex-direction: column;
   flex-wrap: nowrap;
   justify-content: flex-start;
 }
-#mint-header.mint-tray #mint-wrapper nav li {
+#mint-header .mint-tray #mint-wrapper nav li {
   width: 100%;
 }
 #mint-header:not(.mint-border)::before {
@@ -340,33 +308,10 @@
   height: var(--mint-header-height);
   z-index: -1;
 }
-#mint-header nav > ul {
-  display: flex;
-  flex-direction: column;
-}
-#mint-header ul {
-  list-style: none;
-  margin-top: 0;
-  margin-bottom: 1rem;
-  padding-left: 0;
-}
-#mint-header a,
-#mint-header button {
-  margin: 0;
-  border: 0;
-  color: var(--mint-fore);
-  background: var(--mint-trans);
-  transition-property: color, background;
-  transition-duration: var(--mint-delay-default);
-}
-#mint-header a:hover,
-#mint-header button:hover {
-  color: var(--mint-back);
-}
 #mint-header #mint-navbar {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   height: 100%;
 }
 #mint-header .mint-logo {
@@ -378,8 +323,14 @@
   white-space: nowrap;
 }
 #mint-header .mint-logo span {
+  display: none;
   margin: 0;
 }
+@media (min-width: 480px) {
+  #mint-header .mint-logo span {
+    display: inline;
+  }
+}
 #mint-header .mint-logo img {
   max-height: var(--mint-header-height);
   width: auto;
@@ -431,24 +382,6 @@
 #mint-header [aria-controls=mint-wrapper][aria-expanded=true] .mint-menu-icon::after {
   transform: translate(-50%, 0) rotate(-45deg);
 }
-#mint-header #mint-wrapper {
-  display: flex;
-  flex-direction: column;
-  position: fixed;
-  top: -100%;
-  left: 0;
-  width: 100%;
-  height: calc(100vh - var(--mint-header-height));
-  height: calc(100dvh - var(--mint-header-height));
-  z-index: -2;
-  background: var(--mint-header-back);
-  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 {
   flex-grow: 1;
   height: auto;
@@ -466,6 +399,8 @@
   margin-bottom: 0;
 }
 #mint-header #mint-wrapper nav > ul {
+  display: flex;
+  flex-direction: column;
   height: 100%;
   overflow: visible;
 }
@@ -492,6 +427,10 @@
   margin: 0.5rem 0;
   text-align: center;
   border-radius: 1rem;
+  color: var(--mint-fore);
+  background: var(--mint-trans);
+  transition-property: color, background;
+  transition-duration: var(--mint-delay-default);
 }
 @media (min-width: 480px) {
   #mint-header #mint-wrapper a,
@@ -517,6 +456,12 @@
 #mint-header #mint-wrapper button.mint-active {
   text-decoration: underline;
 }
+#mint-header #mint-wrapper ul {
+  list-style: none;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  padding-left: 0;
+}
 #mint-header #mint-wrapper ul li:last-child {
   margin-bottom: 0;
 }
@@ -529,12 +474,6 @@
   justify-content: flex-end;
   margin-left: auto;
 }
-#mint-header .mint-buttons a:not([aria-controls=mint-wrapper]),
-#mint-header .mint-buttons button:not([aria-controls=mint-wrapper]) {
-  display: flex;
-  width: auto;
-  padding: 0.5rem;
-}
 #mint-header .mint-dropdown {
   background: var(--mint-header-back);
 }
@@ -562,6 +501,118 @@
   margin: 0;
 }
 
+.mint-chatbot {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: flex-end;
+  position: relative;
+  gap: 1rem;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.8);
+  min-height: calc(100vh - 4rem);
+  min-height: calc(100dvh - 4rem);
+}
+@media (min-width: 480px) {
+  .mint-chatbot {
+    min-height: unset;
+  }
+}
+.mint-chatbot .mint-output {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 75px);
+  padding: 1rem;
+  overflow-y: auto;
+}
+.mint-chatbot .mint-chat {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  min-height: 100%;
+  padding: 1rem;
+  font-size: 1.125rem;
+  overflow-x: hidden;
+}
+.mint-chatbot .mint-chat::before {
+  content: "";
+  flex-grow: 1;
+}
+.mint-chatbot .mint-chat p {
+  align-self: flex-start;
+  margin: 0;
+  color: #000;
+}
+@media (min-width: 480px) {
+  .mint-chatbot .mint-chat p {
+    max-width: 75%;
+  }
+}
+.mint-chatbot .mint-chat p:nth-child(even) {
+  align-self: flex-end;
+}
+.mint-chatbot .mint-chat p:nth-child(even) span {
+  background-color: var(--mint-brand-1);
+}
+.mint-chatbot .mint-chat p:nth-child(even) span::before {
+  left: unset;
+  right: 0;
+  transform: translate(-5%, 90%) skew(50deg, 10deg);
+  border-color: var(--mint-brand-1) transparent transparent transparent;
+}
+.mint-chatbot .mint-chat p span {
+  display: block;
+  position: relative;
+  padding: 1rem;
+  margin-bottom: 2rem;
+  background-color: #e1e5e6;
+  border-radius: 0.5rem;
+}
+.mint-chatbot .mint-chat p span::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  transform: translate(5%, 90%) skew(-50deg, 10deg);
+  width: 0;
+  height: 0;
+  border: 0.5rem solid;
+  border-color: #e1e5e6 transparent transparent transparent;
+}
+.mint-chatbot .mint-input {
+  position: relative;
+  width: 100%;
+  max-width: 550px;
+  margin: 0 auto;
+}
+.mint-chatbot .mint-input input {
+  font-size: 1.25rem;
+  padding-right: 47px;
+}
+.mint-chatbot .mint-input button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  padding: 0 1rem;
+  border-top-right-radius: 1rem;
+  border-bottom-right-radius: 1rem;
+  border: none;
+  transition: all 0.3s ease-in-out;
+}
+.mint-chatbot .mint-input button:hover {
+  background: rgb(25.5, 25.5, 25.5) !important;
+  color: rgb(229.5, 229.5, 229.5);
+}
+.mint-chatbot .mint-input button:focus-visible {
+  background: rgb(25.5, 25.5, 25.5) !important;
+  color: rgb(229.5, 229.5, 229.5);
+}
+
 .mint-section-full {
   display: flex;
   flex-direction: column;
@@ -942,6 +993,8 @@
   font-size: 4rem;
 }
 .mint-btn-icon i {
+  display: inline-flex;
+  align-items: center;
   margin: 0 !important;
   color: var(--mint-brand-4);
   font-size: 1.5rem;
@@ -1306,6 +1359,77 @@ p .mint-pill, p .mint-btn, :root:root p [amplify-button], p .mint-select {
   width: 100%;
 }
 
+.mint-panel.mint-right .mint-panel-wrapper {
+  top: var(--mint-header-height);
+  right: -100%;
+  left: unset;
+}
+.mint-panel.mint-right .mint-panel-wrapper.mint-open {
+  right: 0;
+}
+.mint-panel.mint-bottom .mint-panel-wrapper {
+  top: unset;
+  bottom: -100%;
+}
+.mint-panel.mint-bottom .mint-panel-wrapper.mint-open {
+  top: unset;
+  bottom: 0;
+}
+.mint-panel.mint-left .mint-panel-wrapper {
+  top: var(--mint-header-height);
+  left: -100%;
+}
+.mint-panel.mint-left .mint-panel-wrapper.mint-open {
+  left: 0;
+}
+.mint-panel.mint-tray .mint-panel-wrapper {
+  gap: 1.5rem;
+}
+@media (min-width: 768px) {
+  .mint-panel.mint-tray .mint-panel-wrapper {
+    max-width: 512px;
+  }
+}
+.mint-panel .mint-panel-wrapper {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: -100%;
+  left: 0;
+  width: 100%;
+  height: calc(100vh - var(--mint-header-height));
+  height: calc(100dvh - var(--mint-header-height));
+  z-index: -2;
+  background: var(--mint-header-back);
+  transition-duration: var(--mint-delay-default);
+  transition-property: top, right, bottom, left;
+  overflow: auto;
+}
+.mint-panel .mint-panel-wrapper.mint-open {
+  top: var(--mint-header-height);
+}
+.mint-panel .mint-panel-wrapper nav {
+  flex-grow: 1;
+  height: auto;
+  overflow: visible;
+  background: var(--mint-back);
+}
+@media (min-width: 1440px) {
+  .mint-panel .mint-panel-wrapper nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+.mint-panel .mint-panel-wrapper nav > :last-child {
+  margin-bottom: 0;
+}
+.mint-panel .mint-title {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
 .mint-table-wrap {
   max-height: 50vh;
   overflow-y: auto;
@@ -1546,7 +1670,7 @@ main {
   width: 100%;
   min-height: calc(100vh - var(--mint-header-height));
   overflow: hidden;
-  z-index: 1000;
+  z-index: 999;
 }
 main > router-outlet {
   flex-grow: 0;