@appartmint/mint 2.5.0 → 2.6.0

package/dist/css/mint.css

@@ -171,29 +171,6 @@
   z-index: 10000;
   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,15 +278,6 @@
 #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 {
   padding: 0.75rem;
   margin: 0.25rem 0;
@@ -378,8 +346,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 +405,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;
@@ -562,6 +518,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 +1010,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 +1376,73 @@ 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;
+  font-size: 0.5em;
+}
+@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-table-wrap {
   max-height: 50vh;
   overflow-y: auto;