@appartmint/mint 2.4.4 → 2.6.0

package/src/scss/imports/components/partial/_chat.scss

@@ -0,0 +1,131 @@
+/// _chat.scss - Chatbot styles
+/// @author App Art Mint LLC
+///
+/// @group Components
+@charset 'utf-8';
+
+/// Imports
+@use '../../util' as *;
+
+/// Chatbot styles
+#{class(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 - $header-height);
+	min-height: calc(100dvh - $header-height);
+
+	@include break(xs) {
+		min-height: unset;
+	}
+
+	#{class(output)} {
+		display: flex;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: calc(100% - 75px);
+		padding: 1rem;
+		overflow-y: auto;
+	}
+
+	#{class(chat)} {
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+		width: 100%;
+		min-height: 100%;
+		padding: 1rem;
+		font-size: 1.125rem;
+		overflow-x: hidden;
+
+		&::before {
+			content: '';
+			flex-grow: 1;
+		}
+
+		$message-user: #e1e5e6;
+		$message-assistant: css-var(brand-1);
+
+		p {
+			align-self: flex-start;
+			margin: 0;
+			color: #000;
+
+			@include break(xs) {
+				max-width: 75%;
+			}
+
+			&:nth-child(even) {
+				align-self: flex-end;
+
+				span {
+					background-color: $message-assistant;
+
+					&::before {
+						left: unset;
+						right: 0;
+						transform: translate(-5%, 90%) skew(50deg, 10deg);
+						border-color: $message-assistant transparent transparent transparent;
+					}
+				}
+			}
+
+			span {
+				display: block;
+				position: relative;
+				padding: 1rem;
+				margin-bottom: 2rem;
+				background-color: $message-user;
+				border-radius: 0.5rem;
+
+				&::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: $message-user transparent transparent transparent;
+				}
+			}
+		}
+	}
+
+	#{class(input)} {
+		position: relative;
+		width: 100%;
+		max-width: 550px;
+		margin: 0 auto;
+
+		input {
+			font-size: 1.25rem;
+			padding-right: 47px;
+		}
+
+		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;
+
+			@include states(hover, focus) {
+				background: $fore !important;
+				color: $back;
+			}
+		}
+	}
+}

package/src/scss/imports/components/partial/_header.scss

@@ -24,41 +24,6 @@
 	z-index: 10000;
 	height: css-var(header-height);
 
-	&#{class(right)} {
-		#{id(wrapper)} {
-			top: css-var(header-height);
-			right: -100%;
-			left: unset;
-
-			&#{class(open)} {
-				right: 0;
-			}
-		}
-	}
-
-	&#{class(bottom)} {
-		#{id(wrapper)} {
-			top: unset;
-			bottom: -100%;
-
-			&#{class(open)} {
-				top: unset;
-				bottom: 0;
-			}
-		}
-	}
-
-	&#{class(left)} {
-		#{id(wrapper)} {
-			top: css-var(header-height);
-			left: -100%;
-
-			&#{class(open)} {
-				left: 0;
-			}
-		}
-	}
-
 	&#{class(expand)} {
 		@include break($header-break) {
 			#{class(buttons)} {
@@ -199,13 +164,6 @@
 
 	&#{class(tray)} {
 		#{id(wrapper)} {
-			gap: 1.5rem;
-			font-size: 0.5em;
-
-			@include break(sm) {
-				max-width: 512px;
-			}
-
 			a, button {
 				padding: 0.75rem;
 				margin: 0.25rem 0;
@@ -292,7 +250,12 @@
 		white-space: nowrap;
 
 		span {
+			display: none;
 			margin: 0;
+
+			@include break(xs) {
+				display: inline;
+			}
 		}
 
 		img {
@@ -368,24 +331,6 @@
 	}
 
 	#{id(wrapper)} {
-		display: flex;
-		flex-direction: column;
-		position: fixed;
-		top: -100%;
-		left: 0;
-		width: 100%;
-		height: calc(100vh - css-var(header-height));
-		height: calc(100dvh - css-var(header-height));
-		z-index: -2;
-		background: css-var(header-back);
-		transition-duration: css-var(delay-default);
-		transition-property: top, right, bottom, left;
-		overflow: auto;
-
-		&#{class(open)} {
-			top: css-var(header-height);
-		}
-
 		nav {
 			flex-grow: 1;
 			height: auto;
@@ -514,4 +459,4 @@
 			}
 		}
 	}
-}
+}

package/src/scss/imports/components/partial/_index.scss

@@ -7,3 +7,4 @@
 @use './backgrounds';
 @use './footer';
 @use './header';
+@use './chat';

package/src/scss/imports/components/widget/_button.scss

@@ -128,6 +128,8 @@
 		}
 
 		i {
+			display: inline-flex;
+			align-items: center;
 			margin: 0 !important;
 			color: css-var($btn-border);
 			font-size: 1.5rem;

package/src/scss/imports/components/widget/_index.scss

@@ -7,4 +7,6 @@
 @use './button';
 @use './card';
 @use './image';
+@use './menu';
+@use './panel';
 @use './table';

package/src/scss/imports/components/widget/_panel.scss

@@ -0,0 +1,95 @@
+/// _panel.scss - Panel styles
+/// @author App Art Mint LLC
+///
+/// @group Components
+@charset 'utf-8';
+
+/// Imports
+@use 'sass:math';
+@use '../../util' as *;
+
+/// Panel Styles
+#{class(panel)} {
+	&#{class(right)} {
+		#{class(panel-wrapper)} {
+			top: css-var(header-height);
+			right: -100%;
+			left: unset;
+
+			&#{class(open)} {
+				right: 0;
+			}
+		}
+	}
+
+	&#{class(bottom)} {
+		#{class(panel-wrapper)} {
+			top: unset;
+			bottom: -100%;
+
+			&#{class(open)} {
+				top: unset;
+				bottom: 0;
+			}
+		}
+	}
+
+	&#{class(left)} {
+		#{class(panel-wrapper)} {
+			top: css-var(header-height);
+			left: -100%;
+
+			&#{class(open)} {
+				left: 0;
+			}
+		}
+	}
+
+	&#{class(tray)} {
+		#{class(panel-wrapper)} {
+			gap: 1.5rem;
+			font-size: 0.5em;
+
+			@include break(sm) {
+				max-width: 512px;
+			}
+		}
+	}
+
+	#{class(panel-wrapper)} {
+		display: flex;
+		flex-direction: column;
+		position: fixed;
+		top: -100%;
+		left: 0;
+		width: 100%;
+		height: calc(100vh - css-var(header-height));
+		height: calc(100dvh - css-var(header-height));
+		z-index: -2;
+		background: css-var(header-back);
+		transition-duration: css-var(delay-default);
+		transition-property: top, right, bottom, left;
+		overflow: auto;
+
+		&#{class(open)} {
+			top: css-var(header-height);
+		}
+
+		nav {
+			flex-grow: 1;
+			height: auto;
+			overflow: visible;
+			background: css-var(back);
+
+			@include break(xl) {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			&> :last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+}