@appartmint/mint 2.5.0 → 2.6.1

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

@@ -21,44 +21,9 @@
 	width: 100%;
 	color: css-var(header-fore);
 	background-color: css-var(header-back);
-	z-index: 10000;
+	z-index: 1000;
 	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)} {
@@ -197,25 +162,19 @@
 		}
 	}
 
-	&#{class(tray)} {
+	#{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;
 				line-height: 1;
-				font-size: 4em;
+				font-size: 2em;
 				width: 100%;
 			}
 
 			button {
-				font-size: 6em;
+				font-size: 3em;
 			}
 
 			nav {
@@ -248,38 +207,10 @@
 		z-index: -1;
 	}
 
-	nav {
-		&>ul {
-			display: flex;
-			flex-direction: column;
-		}
-	}
-
-	ul {
-		list-style: none;
-		margin-top: 0;
-		margin-bottom: 1rem;
-		padding-left: 0;
-	}
-
-	a,
-	button {
-		margin: 0;
-		border: 0;
-		color: css-var($header-link-fore);
-		background: css-var(trans);
-		transition-property: color, background;
-		transition-duration: css-var(delay-default);
-
-		@include states(hover) {
-			color: css-var($header-link-fore-hover);
-		}
-	}
-
 	#{id(navbar)} {
 		display: flex;
 		align-items: center;
-		justify-content: space-between;
+		justify-content: flex-end;
 		height: 100%;
 	}
 
@@ -292,7 +223,12 @@
 		white-space: nowrap;
 
 		span {
+			display: none;
 			margin: 0;
+
+			@include break(xs) {
+				display: inline;
+			}
 		}
 
 		img {
@@ -368,24 +304,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;
@@ -403,6 +321,8 @@
 			}
 
 			&>ul {
+				display: flex;
+				flex-direction: column;
 				height: 100%;
 				overflow: visible;
 
@@ -423,7 +343,6 @@
 
 		a,
 		button {
-			//display: flex;
 			align-items: center;
 			justify-content: center;
 			font-family: $font-secondary, $font-backups !important;
@@ -432,6 +351,10 @@
 			margin: 0.5rem 0;
 			text-align: center;
 			border-radius: $header-link-border-radius;
+			color: css-var($header-link-fore);
+			background: css-var(trans);
+			transition-property: color, background;
+			transition-duration: css-var(delay-default);
 
 			@include break(xs) {
 				padding: 1rem 1.5rem;
@@ -452,6 +375,11 @@
 		}
 
 		ul {
+			list-style: none;
+			margin-top: 0;
+			margin-bottom: 1rem;
+			padding-left: 0;
+
 			li {
 				&:last-child {
 					margin-bottom: 0;
@@ -469,15 +397,6 @@
 		flex-shrink: 0;
 		justify-content: flex-end;
 		margin-left: auto;
-
-		a,
-		button {
-			&#{neg(controls(wrapper))} {
-				display: flex;
-				width: auto;
-				padding: 0.5rem;
-			}
-		}
 	}
 
 	#{class(dropdown)} {
@@ -514,4 +433,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,100 @@
+/// _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;
+
+			@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;
+			}
+		}
+	}
+
+	#{class(title)} {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+	}
+}

package/src/scss/imports/global/_global.scss

@@ -86,7 +86,7 @@ main {
 	width: 100%;
 	min-height: calc(100vh - css-var(header-height));
 	overflow: hidden;
-	z-index: 1000;
+	z-index: 999;
 
 	&>router-outlet {
 		flex-grow: 0;

package/dist/js/imports/components/tray.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tray.d.ts","sourceRoot":"","sources":["../../../../src/ts/imports/components/tray.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AASjD;;;GAGG;AACH,qBAAa,QAAS,SAAQ,kBAAkB;IAE/C;;OAEM;IACF,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAI5B;IAEF;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC,CAAM;IAG5C;;OAEG;gBACU,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAiB3C;;OAEG;IACH,cAAc,IAAM,IAAI;IAQxB;;OAEG;IACH,YAAY,IAAM,IAAI;IAatB;;OAEG;IACH,UAAU,IAAM,IAAI;IAkBpB;;;OAGG;IACH,OAAO,CAAE,IAAI,GAAE,OAAe,GAAI,IAAI;IAsDtC;;OAEG;IACH,UAAU,IAAM,IAAI;IAIpB;;OAEG;IACH,aAAa,IAAM,IAAI;IAgCvB;;;OAGG;IACH,QAAQ,CAAE,CAAC,EAAE,aAAa,GAAI,IAAI;IAelC;;OAEG;IACH,OAAO,IAAM,IAAI;IAIpB;;OAEG;IACH,MAAM,IAAM,IAAI;IAIb;;OAEG;IACH,cAAc,IAAM,IAAI;CAK3B"}