@appartmint/css-mint 0.0.40 → 1.0.0

package/src/components/index.scss

@@ -1,4 +1,5 @@
 @use './form';
+@use './partial';
 @use './section';
 @use './ui';
 @use './widget';

package/src/components/partial/background.scss

@@ -0,0 +1,43 @@
+/// background.scss - Static background styles
+/// @author App Art Mint LLC
+/// 
+/// @group Partial
+@charset 'utf-8';
+
+/// Imports
+@use '../../util' as *;
+
+/// Background Styles
+
+:root {
+	@include css-var(bg-blur, 10vw);
+	@include css-var(bg-blur-active, 0.15vw);
+}
+
+#{class(bg)} {
+	display: block;
+	opacity: 0;
+	height: 0;
+	width: 0;
+	z-index: -1;
+	transform: none !important;
+}
+
+#{class(background)} {
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100vw;
+	height: 100vh;
+	object-fit: cover;
+	background-size: cover;
+	background-position: center;
+	background-repeat: no-repeat;
+	z-index: 0;
+	filter: opacity(0) blur(css-var(bg-blur));
+	transition: filter 1000ms ease-out;
+
+	&.active {
+		filter: opacity(1) blur(css-var(bg-blur-active));
+	}
+}

package/src/components/partial/chat.scss

@@ -0,0 +1,130 @@
+/// chat.scss - Chatbot styles
+/// @author App Art Mint LLC
+///
+/// @group Components
+@charset 'utf-8';
+
+/// Imports
+@use '../../util/break' as *;
+@use '../../util/selector' as *;
+
+:root {
+	@include css-var-ref(chat-user, c-bg-1);
+	@include css-var-ref(chat-bot, c-brand-1);
+}
+
+#{class(chatbot)} {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	justify-content: flex-end;
+	position: relative;
+	gap: 1rem;
+	min-height: calc(100vh - css-var(header-h));
+	min-height: calc(100dvh - css-var(header-h));
+
+	@include break(xs) {
+		min-height: unset;
+	}
+
+	#{class(output)} {
+		display: flex;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: calc(100% - 75px);
+		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;
+		}
+
+		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: css-var(chat-bot);
+
+					&::before {
+						left: unset;
+						right: 0;
+						transform: translate(-5%, 90%) skew(50deg, 10deg);
+						border-color: css-var(chat-bot) transparent transparent transparent;
+					}
+				}
+			}
+
+			span {
+				display: block;
+				position: relative;
+				padding: 1rem;
+				margin-bottom: 2rem;
+				background-color: css-var(chat-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: css-var(chat-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: css-var(c-fg) !important;
+				color: css-var(c-bg);
+			}
+		}
+	}
+}

package/src/components/partial/footer.scss

@@ -0,0 +1,169 @@
+/// footer.scss - Footer styles
+/// @author App Art Mint LLC
+/// 
+/// @group Components
+@charset 'utf-8';
+
+/// Imports
+@use '../../util/break' as *;
+@use '../../util/selector' as *;
+@use '../../util/time' as *;
+
+:root {
+	@include css-var-ref(footer-bg, c-bg);
+	@include css-var-ref(footer-heel-bg, c-brand-6);
+	@include css-var-ref(footer-heel-fg, c-fg);
+	@include css-var-ref(footer-shadow-c, shadow-c);
+	@include css-var-ref(footer-shadow-s, shadow-s);
+}
+
+#{class(theme)} {
+	&-dark {
+		@include css-var-ref(footer-heel-bg, c-brand-4);
+	}
+}
+
+#{class(footer)} {
+	display: flex;
+	flex-direction: column;
+	max-width: 100%;
+    background: css-var(footer-bg);
+	box-shadow: css-var(footer-shadow-s) css-var(footer-shadow-c);
+	transition: transform time(default);
+	z-index: 999;
+	overflow: hidden;
+
+	&#{class(hide)} {
+		display: flex;
+		transform: translateY(100%);
+		transition: transform time(instant);
+	}
+
+	* {
+		max-width: 100%;
+	}
+
+	p {
+		margin: 0;
+	}
+
+	&-content {
+		display: flex;
+		flex-direction: column;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+
+		@include break(sm) {
+			flex-direction: row;
+			align-items: flex-start;
+		}
+
+		&>p {
+			margin: 0 auto;
+			text-align: center;
+			align-self: center;
+
+			a {
+				display: block;
+			}
+		}
+
+		[label="Footer"] {
+			width: 100%;
+			margin: auto;
+
+			@include break(sm) {
+				width: auto;
+			}
+
+			&>ul {
+				flex-direction: column;
+				flex-wrap: wrap;
+				justify-content: space-around;
+				text-align: center;
+
+				@include break(xs) {
+					flex-direction: row;
+				}
+
+				&>ul {
+					li:last-child {
+						#{class(pill)} {
+							margin-bottom: 0;
+						}
+					}
+				}
+			}
+
+			#{class(pill)} {
+				margin-bottom: 0.5rem;
+			}
+		}
+	}
+
+	&-heel {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		padding: 0.4rem 1rem;
+        color: css-var(footer-heel-fg);
+		background: css-var(footer-heel-bg);
+		text-align: center;
+
+		@include break(sm) {
+			flex-direction: row;
+		}
+		
+		& > * {
+			width: 100%;
+		}
+
+		p {
+			@include break(sm) {
+				text-align: left;
+			}
+		}
+	}
+
+	&-social {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: wrap;
+	}
+
+	&-message {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: wrap;
+
+		@include break(xs) {
+			flex-wrap: nowrap;
+		}
+
+		@include break(sm) {
+			justify-content: flex-end;
+		}
+
+		&>#{class(pill)} {
+			margin: 0 0.25rem;
+		}
+
+		&>* {
+			margin: 0 0.5rem;
+
+			&:first-child {
+				margin-left: 0;
+			}
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+	}
+}