@appartmint/mint 1.3.0 → 1.3.1

package/src/scss/imports/components/_footer.scss

@@ -0,0 +1,134 @@
+/// _footer.scss - Footer styles
+/// @author App Art Mint LLC
+/// 
+/// @group Components
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+
+
+/// Footer styles
+#{class(footer)} {
+	display: flex;
+	flex-direction: column;
+	max-width: 100%;
+    background: css-var($footer-back);
+	transition: transform 300ms;
+	z-index: 999;
+	overflow: hidden;
+
+    @if ($footer-shadow) {
+        box-shadow: $footer-shadow css-var($footer-back);
+    }
+
+	&#{class(hide)} {
+		display: flex;
+		transform: translateY(100%);
+	}
+
+	* {
+		max-width: 100%;
+	}
+
+	p {
+		margin: 0;
+	}
+
+	&-content {
+		display: flex;
+		flex-direction: column;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+
+		@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;
+		padding: 0.4rem 1rem;
+        color: css-var($footer-heel-fore);
+		background: css-var($footer-heel-back);
+		text-align: center;
+
+		@include break(sm) {
+			flex-direction: row;
+		}
+	}
+
+	&-message {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: wrap;
+
+		@include break(xs) {
+			flex-wrap: nowrap;
+		}
+
+		&>#{class(pill)} {
+			margin: 0 0.25rem;
+		}
+
+		&>* {
+			margin: 0 0.5rem;
+
+			&:first-child {
+				margin-left: 0;
+			}
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,512 @@
+/// _header.scss - Header styles
+/// @author App Art Mint LLC
+///
+/// @group Components
+@charset 'utf-8';
+
+/// Imports
+@use 'sass:math';
+@use '../util' as *;
+
+/// CSS Variables
+:root {
+	@include css-var(header-height, $header-height);
+	@include css-var-ref(header-back, $header-back);
+	@include css-var-ref(header-fore, $header-fore);
+}
+
+/// Header Styles
+#{id(header)} {
+	position: relative;
+	width: 100%;
+	color: css-var(header-fore);
+	background-color: css-var(header-back);
+	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)} {
+				width: auto;
+
+				#{controls(wrapper)} {
+					display: none;
+				}
+			}
+
+			#{id(wrapper)} {
+				position: static;
+				display: flex !important;
+				height: 100%;
+				padding: 0;
+				z-index: 0;
+
+				&,
+				& nav {
+					height: $header-height;
+					background: css-var(glow-0) !important;
+					overflow: visible;
+				}
+
+				nav {
+					border: none;
+
+					&::before {
+						display: none;
+					}
+
+					&>ul {
+						flex-direction: row;
+						justify-content: flex-end;
+						flex-wrap: nowrap;
+						overflow: visible;
+
+						&>li {
+							position: relative;
+							display: flex;
+							width: 100%;
+							max-width: 200px;
+							text-align: center;
+
+							button,
+							ul {
+								width: 100%;
+								max-width: 200px;
+							}
+
+							button {
+								font-size: 1.5rem;
+
+								$arrow-size: 1rem;
+								$arrow-margin: 1rem;
+								padding-right: $arrow-margin + $arrow-size;
+
+								&::after {
+									content: '\f054';
+									font-family: 'Font Awesome 6 Pro';
+									font-weight: 900;
+									font-size: $arrow-size;
+									position: absolute;
+									top: 50%;
+									transform: translateY(-50%);
+									margin-left: $arrow-margin;
+									transition: transform css-var(delay-default);
+								}
+
+								@include states(hover, focus, expanded) {
+									&::after {
+										transform: translateY(-50%) rotate(90deg);
+									}
+								}
+							}
+
+							ul {
+								position: absolute;
+								top: 100%;
+								left: 50%;
+								transform: translateX(-50%);
+								background-color: css-var($header-back);
+							}
+						}
+					}
+				}
+
+				a {
+					font-size: 1.25rem;
+				}
+
+				a, button {
+					margin: 0.25rem 0;
+				}
+			}
+		}
+	}
+
+	&#{class(spread)} {
+		@include break-max($header-break) {
+			#{id(wrapper)} {
+				#{$has-controls} {
+					display: none;
+	
+					&+ul {
+						display: flex !important;
+						height: auto !important;
+						margin-bottom: 3rem !important;
+
+						&>li:first-child {
+							font-size: 1.5em;
+						}
+					}
+				}
+			}
+		}
+
+		&#{neg(class(expand))} {
+			#{id(wrapper)} {
+				#{$has-controls} {
+					display: none;
+	
+					&+ul {
+						display: flex !important;
+						height: auto !important;
+						margin-bottom: 3rem;
+
+						&>li:first-child {
+							font-size: 1.5em;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	&#{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;
+			}
+
+			nav {
+				&>ul {
+					flex-direction: column;
+					flex-wrap: nowrap;
+					justify-content: flex-start;
+				}
+				
+				li {
+					width: 100%;
+				}
+			}
+		}
+	}
+
+	&#{neg(class(border))} {
+		&::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			background: css-var(header-back);
+		}
+	}
+
+	&::before {
+		height: css-var(header-height);
+		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);
+		}
+	}
+
+	h1 {
+		display: flex;
+		white-space: nowrap;
+		align-items: center;
+		gap: 1rem;
+		margin: 0;
+	}
+
+	#{id(navbar)} {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 100%;
+	}
+
+	#{class(logo)} {
+		display: flex;
+		align-items: center;
+		width: auto;
+		text-decoration: none;
+
+		img {
+			max-height: css-var(header-height);
+			width: auto;
+		}
+	}
+
+	#{controls(wrapper)} {
+		display: inline-block;
+		position: relative;
+		padding: $menu-btn-padding;
+		width: $menu-bar-width + $menu-btn-padding * 2;
+		height: $menu-btn-height + $menu-btn-padding * 2;
+		border-radius: $border-radius;
+		background: css-var($menu-btn-color);
+		box-shadow: $menu-btn-shadow-size css-var($menu-btn-shadow-color);
+		z-index: 1000;
+
+		@include states(hover) {
+			background: css-var($header-link-back-hover);
+
+			#{class(menu-icon)} {
+
+				&,
+				&::before,
+				&::after {
+					background-color: css-var($header-link-fore-hover);
+				}
+			}
+		}
+
+		#{class(menu-icon)} {
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+
+			&,
+			&::before,
+			&::after {
+				content: '';
+				display: block;
+				position: absolute;
+				left: 50%;
+				height: $menu-bar-height;
+				width: $menu-bar-width;
+				background-color: css-var($menu-bar-color);
+				transition: delay(default);
+			}
+
+			&::before {
+				transform: translate(-50%, -200%);
+			}
+
+			&::after {
+				transform: translate(-50%, 200%);
+			}
+		}
+
+		&#{expanded(true)} {
+			#{class(menu-icon)} {
+				background: transparent;
+
+				&::before {
+					transform: translate(-50%, 0) rotate(45deg);
+				}
+
+				&::after {
+					transform: translate(-50%, 0) rotate(-45deg);
+				}
+			}
+		}
+	}
+
+	#{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 {
+			height: calc(100vh - css-var(header-height));
+			height: calc(100dvh - css-var(header-height));
+			overflow: auto;
+			background: css-var(back);
+
+			@include break(xl) {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			&> :last-child {
+				margin-bottom: 0;
+			}
+
+			&>ul {
+				height: 100%;
+				overflow: auto;
+
+				@include break(md) {
+					display: flex;
+					flex-direction: row;
+					flex-wrap: wrap;
+					align-items: center;
+					justify-content: space-evenly;
+					width: 100%;
+				}
+			}
+		}
+
+		a {
+			display: flex;
+		}
+
+		a,
+		button {
+			//display: flex;
+			align-items: center;
+			justify-content: center;
+			font-family: $font-secondary, $font-backups !important;
+			font-size: 3em;
+			padding: 0.5rem;
+			margin: 0.5rem 0;
+			text-align: center;
+			border-radius: $header-link-border-radius;
+
+			@include break(xs) {
+				padding: 1rem 1.5rem;
+
+				i {
+					font-size: 0.5em;
+				}
+			}
+
+			@include states(hover, focus) {
+				background-color: css-var($header-link-back-hover);
+				color: css-var($header-link-fore-hover);
+			}
+
+			@include states(active) {
+				text-decoration: underline;
+			}
+		}
+
+		ul {
+			li {
+				&:last-child {
+					margin-bottom: 0;
+
+					ul {
+						margin-bottom: 0;
+					}
+				}
+			}
+		}
+	}
+
+	#{class(buttons)} {
+		flex-wrap: nowrap;
+		flex-shrink: 0;
+		justify-content: flex-end;
+		margin-left: auto;
+
+		a,
+		button {
+			&#{neg(controls(wrapper))} {
+				display: flex;
+				width: auto;
+				padding: 0.5rem;
+			}
+		}
+	}
+
+	#{class(dropdown)} {
+		background: css-var(header-back);
+
+		button {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			min-width: css-var(header-height);
+			height: css-var(header-height);
+			padding: calc(css-var(header-height) / 2);
+		}
+
+		li {
+			padding: calc(css-var(header-height) / 2);
+			line-height: 1;
+			cursor: pointer;
+		}
+	}
+
+	#{$has-controls + neg(controls(wrapper))} {
+		&+ul {
+			display: flex;
+			flex-direction: column;
+			height: 0;
+			overflow: hidden;
+			transition: height css-var(delay-default), margin css-var(delay-default);
+		}
+
+		&#{$has-expanded + neg(expanded(true))} {
+			&+ul {
+				margin: 0;
+			}
+		}
+	}
+}

package/src/scss/imports/components/_image.scss

@@ -0,0 +1,37 @@
+/// _image.scss - Image styles
+/// @author App Art Mint LLC
+///
+/// @group Components
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+
+/// A basic image
+#{class(image)} {
+
+    /// A placeholder image warning
+    &#{class(error)} {
+        &::after {
+            content: '❌ Image failed to load. This is a placeholder.';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            padding: 0 $image-shadow-size $image-shadow-size $image-shadow-size;
+            background: css-var($shadow-color);
+            box-shadow: 0 0 $image-shadow-size $image-shadow-size css-var($shadow-color);
+            text-align: center;
+        }
+    }
+
+    img {
+        display: block;
+    }
+}
+
+/// Banner images
+#{class(banner)} {
+	position: relative;
+	width: 100%;
+}

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

@@ -0,0 +1,16 @@
+/// _index.scss - Forward all overrides
+/// @author App Art Mint LLC
+/// 
+/// @group Index
+@charset 'utf-8';
+
+/// Imports
+@use './backgrounds';
+@use './buttons';
+@use './cards';
+@use './embed';
+@use './footer';
+@use './header';
+@use './image';
+@use './recaptcha';
+@use './tables';

package/src/scss/imports/components/_recaptcha.scss

@@ -0,0 +1,17 @@
+/// _recaptcha.scss - Recaptcha styles
+/// @author App Art Mint LLC
+///
+/// @group Components
+@charset 'utf-8';
+
+/// Recaptcha styles
+
+/// Hide the badge
+/// Requires this on form:
+/// 
+/// This site is protected by reCAPTCHA and the Google
+/// <a href="https://policies.google.com/privacy">Privacy Policy</a> and
+/// <a href="https://policies.google.com/terms">Terms of Service</a> apply.
+.grecaptcha-badge {
+	visibility: hidden;
+}