@appartmint/mint 1.3.0 → 1.3.2

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;
+}

package/src/scss/imports/components/_tables.scss

@@ -0,0 +1,29 @@
+/// _tables.scss - Table styles
+/// @author App Art Mint LLC
+///
+/// @group Components
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+
+/// Table
+#{class(table)} {
+	&-wrap {
+		max-height: 50vh;
+		overflow-y: auto;
+	}
+
+	&.mat-mdc-table {
+		thead {
+			background: css-var(back);
+		}
+	}
+
+    #{class(actions)} {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+		gap: 1rem;
+    }
+}

package/src/scss/imports/global/_animations.scss

@@ -0,0 +1,79 @@
+/// _animations.scss - Global animations
+/// @author App Art Mint LLC
+/// 
+/// @group Animations
+@charset 'utf-8';
+
+/// Imports
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:list';
+@use '../util' as *;
+
+/// Animations
+/// Cycle through instagram colors
+@keyframes instafade {
+    @for $i from 0 through 6 {
+        $percent: percentage(math.div($i, 6));
+        #{$percent} {
+            color: css-var(instagram-#{$i});
+        }
+    }
+}
+
+/// CSS variables
+:root {
+    @include css-var(delay-instant, delay(instant));
+    @include css-var(delay-fast, delay(fast));
+    @include css-var(delay-med-fast, delay(med-fast));
+    @include css-var(delay-default, delay(default));
+    @include css-var(delay-med-slow, delay(med-slow));
+    @include css-var(delay-slow, delay(slow));
+}
+
+#{class(fall-in)} {
+    filter: opacity(0%);
+    transform: translateY(-100px);
+    transition: all delay(slow) ease-out, box-shadow delay(slow) delay(med-slow) ease-out !important;
+    pointer-events: none;
+    z-index: -1;
+
+    &#{class(show)}#{neg(class(loading))} {
+        filter: opacity(100%);
+        transform: translateY(0%);
+        pointer-events: auto;
+        z-index: 1;
+    }
+
+    &#{neg(class(show))}, &#{class(loading)} {
+        box-shadow: 0 0 0 0 transparent !important;
+    }
+
+    &#{class(fast)} {
+        transition: all delay(fast), box-shadow delay(fast) delay(fast) !important;
+    }
+}
+
+#{class(shine)} {
+    position: relative;
+    overflow: hidden;
+
+    @include states(hover, focus, active) {
+        &::after {
+            transition-duration: delay(default);
+            transform: translate(100%, -100%);
+        }
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        transform: translate(-100%, 100%);
+        background: linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
+        transition: transform delay(med-fast) ease-out;
+    }
+}