@appartmint/css-mint 0.1.0 → 1.0.1

package/src/components/form/input/select.scss

@@ -0,0 +1,15 @@
+/// select.scss - Select styles
+/// @author App Art Mint LLC
+///
+/// @group Input
+@charset 'utf-8';
+
+/// Imports
+@use '../../../util/break' as *;
+
+/// Select Styles
+select {
+	@include break(xs) {
+		width: auto;
+	}
+}

package/src/components/form/input/textarea.scss

@@ -0,0 +1,10 @@
+/// textarea.scss - Textarea styles
+/// @author App Art Mint LLC
+///
+/// @group Input
+@charset 'utf-8';
+
+/// Textarea Styles
+textarea {
+	resize: vertical;
+}

package/src/components/form/input/toggle.scss

@@ -1,4 +1,12 @@
-@use '../../../util' as *;
+/// toggle.scss - Toggle styles
+/// @author App Art Mint LLC
+///
+/// @group Input
+@charset 'utf-8';
+
+/// Imports
+@use '../../../util/break' as *;
+@use '../../../util/selector' as *;
 
 :root {
 	@include css-var(check-s, 1);
@@ -7,9 +15,28 @@
 	@include css-var(check-bw, 0.125rem);
 	@include css-var(check-fs, 0.5rem);
 	@include css-var-ref(check-br, br);
+	@include css-var-ref(check-bc, c-brand-2);
+	@include css-var-ref(check-bg, c-brand-5);
 }
 
 #{class(toggle)} {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	width: fit-content;
+	cursor: pointer;
+	
+	div {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.5rem;
+
+		@include break(xs) {
+			flex-direction: row;
+		}
+	}
+
 	@for $i from 1 through 10 {
 		&#{class(#{$i})} {
 			@include css-var(check-s, #{$i});
@@ -18,29 +45,62 @@
 }
 
 #{class(check)} {
+	position: relative;
+	display: inline-block;
+	flex-shrink: 0;
 	height: calc((css-var(check-h) + css-var(check-bw) * 2) * css-var(check-s));
 	width: calc((css-var(check-h) - css-var(check-p) + css-var(check-bw)) * css-var(check-s) * 2);
-	border: calc(css-var(check-bw) * css-var(check-s)) solid css-var(brand-2);
+	border: calc(css-var(check-bw) * css-var(check-s)) solid css-var(check-bc);
 	border-radius: calc(css-var(check-br) * css-var(check-s));
+	background-color: css-var(check-bg);
+	cursor: pointer;
 
 	[type="checkbox"] {
+		display: none;
 		&:checked {
 			& + span {
 				left: calc(100% - (css-var(check-h) - css-var(check-p)) * css-var(check-s));
+				background-color: css-var(check-bc);
+				filter: grayscale(0);
+
+				i {
+					opacity: 0;
+
+					&:first-child {
+						opacity: 1;
+					}
+				}
 			}
 		}
 
 		& + span {
 			$handle-size: calc((css-var(check-h) - css-var(check-p) * 2) * css-var(check-s));
+			position: relative;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: absolute;
 			top: calc(css-var(check-p) * css-var(check-s));
 			left: calc(css-var(check-p) * css-var(check-s));
 			transform: translateX(0);
 			width: $handle-size;
 			height: $handle-size;
 			border-radius: calc(css-var(check-br) * css-var(check-s));
+			filter: grayscale(1);
+			transition: filter 300ms, background-color 300ms, left 300ms;
 
 			i {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				color: css-var(back);
 				font-size: calc(css-var(check-fs) * css-var(check-s));
+				transition: opacity delay(default);
+
+				&:first-child {
+					opacity: 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;
+			}
+		}
+	}
+}