@appartmint/mint 1.3.0 → 1.3.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@appartmint/mint",
   "author": "App Art Mint LLC",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "license": "MIT",
   "description": "The front-end TS/SCSS framework of App Art Mint",
   "keywords": [
@@ -23,7 +23,7 @@
   "types": "dist/js/index.d.ts",
   "type": "module",
   "files": [
-    "src/**/*.{scss}",
+    "src/**/*.scss",
     "dist/**/*.{css,js,d.ts,map}"
   ],
   "directories": {

package/src/scss/imports/_index.scss

@@ -0,0 +1,10 @@
+/// _index.scss - Forward all overrides
+/// @author App Art Mint LLC
+/// 
+/// @group Index
+@charset 'utf-8';
+
+/// Imports
+@use './components';
+@use './global';
+@use './overrides';

package/src/scss/imports/components/_backgrounds.scss

@@ -0,0 +1,38 @@
+/// background.scss - Static background styles
+/// @author App Art Mint LLC
+/// 
+/// @group Background
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+
+/// Background Styles
+#{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(10vw);
+	transition: filter 1000ms ease-out;
+
+	&.active {
+		opacity: 1;
+		filter: opacity(1) blur($back-bg-blur);
+	}
+}

package/src/scss/imports/components/_buttons.scss

@@ -0,0 +1,243 @@
+/// buttons.scss - Button styles
+/// @author App Art Mint LLC
+///
+/// @group Buttons
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+
+/// All buttons
+#{class(btn)},
+#{class(btn-group)},
+#{class(btn-icon)},
+#{class(pill)} {
+	flex-shrink: 0;
+}
+
+#{class(btn)},
+#{class(btn-icon)},
+#{class(pill)} {
+	width: fit-content;
+	max-width: 100%;
+	text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+	user-select: none;
+    transition: color css-var(delay-default),
+                background-color css-var(delay-default),
+                border-color css-var(delay-default);
+}
+
+#{class(btn)},
+#{class(btn-group)},
+#{class(pill)} {
+    display: inline-block;
+    border-radius: $pill-radius;
+    color: css-var($btn-fore);
+    background: css-var($btn-back);
+    border: $border-width solid css-var($btn-border);
+    text-align: center;
+
+    @include break(xs) {
+        width: fit-content;
+    }
+
+    @include states(hover, focus, active) {
+        color: css-var($btn-fore-hover);
+        background: css-var($btn-border);
+
+		i {
+			color: inherit !important;
+		}
+    }
+
+    &#{class(reverse)} {
+		color: css-var($btn-fore-hover);
+		background: css-var($btn-border);
+
+		@include states(hover, focus, active) {
+			color: css-var($btn-fore);
+    		background: css-var($btn-back);
+		}
+	}
+
+	&#{class(alt)} {
+        color: css-var($btn-border);
+        background: css-var($btn-back-alt);
+
+        @include states(hover, focus, active) {
+            color: css-var($btn-fore-alt-hover);
+            background: css-var($btn-back-alt-hover);
+            border-color: css-var($btn-back-alt-hover);
+        }
+
+		&#{class(reverse)} {
+			color: css-var($btn-fore-alt-hover);
+			background: css-var($btn-back-alt-hover);
+			border-color: css-var($btn-back-alt-hover);
+
+			@include states(hover, focus, active) {
+				color: css-var($btn-border);
+				background: css-var($btn-back-alt);
+				border-color: css-var($btn-back-alt);
+			}
+		}
+    }
+
+	/// Fix for browsers injecting their own tel links
+	a {
+		color: inherit;
+	
+		&:hover {
+			color: inherit;
+		}
+	
+		i {
+			display: none;
+		}
+	}
+}
+
+/// Default buttons
+#{class(btn)} {
+    padding: $btn-padding-v $btn-padding-h + $btn-padding-adjust;
+
+	/// Icon buttons
+	&-icon {
+		display: block;
+		text-align: center;
+		background: none;
+		border: none;
+
+		@include states(hover, focus, active) {
+			i {
+				color: css-var($btn-back-alt-hover);
+			}
+		}
+
+		@include break(xs) {
+			display: inline-block;
+		}
+
+		&#{class(lg)} {
+			i {
+				font-size: 4rem;
+			}
+		}
+
+		i {
+			margin: 0 !important;
+			color: css-var($btn-border);
+			font-size: 1.5rem;
+
+			&::before {
+				transition: color css-var(delay-default);
+			}
+		}
+	}
+
+	/// Button groups
+	&-group {
+		display: flex;
+		width: fit-content;
+		margin: auto;
+		padding: 0;
+		transition: all css-var(delay-default);
+
+		button {
+			width: 100%;
+			border: none;
+			color: inherit;
+			background: transparent;
+
+			&:first-child {
+				padding: $btn-padding-v 0 $btn-padding-v $btn-padding-h;
+				border-top-left-radius: $pill-radius;
+				border-bottom-left-radius: $pill-radius;
+			}
+
+			&:last-child {
+				padding: $btn-padding-v $btn-padding-h $btn-padding-v 0;
+				border-top-right-radius: $pill-radius;
+				border-bottom-right-radius: $pill-radius;
+			}
+
+			&[disabled] {
+				pointer-events: none;
+			}
+
+			@include states(hover, focus, active) {
+				background: css-var(brand-5);
+			}
+		}
+	}
+}
+
+/// Select button
+#{class(select)} {
+	@extend #{class(btn)};
+}
+
+/// Pill buttons
+#{class(pill)} {
+    padding: 0 $btn-padding-adjust;
+    line-height: 2;
+}
+
+a, button {
+	&#{class(pill)} {
+		min-width: 5rem;
+	}
+}
+
+p {
+    #{class(pill)}, #{class(btn)} {
+        line-height: 1.5rem;
+        vertical-align: middle;
+    }
+}
+
+/// A list of buttons
+#{class(buttons)} {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: 1rem;
+
+	@include break(xs) {
+		justify-content: flex-start;
+	}
+
+    & > * {
+        width: 100%;
+
+        #{class(btn)}, #{class(pill)} {
+            display: block;
+        }
+
+        @include break(xs) {
+            width: auto;
+        }
+    }
+
+    #{class(buttons)} {
+        #{class(pill)} {
+            width: 100%;
+        }
+    }
+}
+
+#{class(grid)}#{class('3')},
+#{class(grid)}#{class('4')} {
+	#{class(buttons)} {
+		& > * {
+			@include break(xs) {
+				width: 100%;
+				margin: 0.5rem 0;
+			}
+		}
+	}
+}

package/src/scss/imports/components/_cards.scss

@@ -0,0 +1,259 @@
+/// cards.scss - Card styles
+/// @author App Art Mint LLC
+///
+/// @group Cards
+@charset 'utf-8';
+
+/// Imports
+@use 'sass:math';
+@use '../util' as *;
+
+/// Card Styles
+#{class(card)} {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	max-width: 100%;
+	margin: 0;
+	border-radius: $card-radius;
+	box-shadow: $card-shadow-size #{css-var($card-shadow-color)};
+	overflow: hidden;
+
+	@include break(sm) {
+		flex-direction: row;
+
+		&#{class(reverse)} {
+			flex-direction: row-reverse;
+		}
+	}
+
+	&#{class(center)} {
+		
+		@mixin title {
+			#{class(title)} {
+				justify-content: center;
+				text-align: center;
+
+				& > div {
+					width: auto;
+				}
+			}
+		}
+
+		@mixin content {
+			#{class(content)} {
+				& > * {
+					text-align: center;
+				}
+			}
+		}
+
+		@mixin buttons {
+			#{class(buttons)} {
+				justify-content: center;
+			}
+		}
+
+		@include title;
+		@include content;
+		@include buttons;
+
+		&-title {
+			@include title;
+		}
+
+		&-content {
+			@include content;
+		}
+
+		&-btns {
+			@include buttons;
+		}
+	}
+
+	&#{class(stagger)} {
+		position: relative;
+		width: 100%;
+
+		@include break(sm) {
+			flex-direction: row;
+			border-radius: 0;
+			box-shadow: none;
+			overflow: visible;
+
+			& > #{class(image)},
+			& > #{prefix(widget-image)} #{class(image)} {
+				width: calc(50% + $card-padding);
+				height: fit-content;
+				margin-right: $card-padding * -2;
+				border-radius: $card-radius;
+				box-shadow: $card-shadow-size #{css-var($card-shadow-color)};
+
+				img {
+					height: 100%;
+					object-fit: cover;
+				}
+			}
+
+			& > #{class(content)} {
+				width: calc(50% + $card-padding);
+				height: fit-content;
+				margin-top: $card-padding * 2;
+				border-radius: $card-radius;
+				box-shadow: $card-shadow-size #{css-var($card-shadow-color)};
+			}
+		}
+
+		&#{class(reverse)} {
+			@include break(sm) {
+				flex-direction: row-reverse;
+
+				& > #{class(image)},
+				& > #{prefix(widget-image)} #{class(image)} {
+					margin-right: 0;
+					margin-left: $card-padding * -2;
+				}
+			}
+		}
+	}
+
+	& > #{class(image)}:only-child,
+	& > #{prefix(widget-image)}:only-child #{class(image)} {
+		width: 100%;
+	}
+
+	& > #{class(image)},
+	& > #{prefix(widget-image)} #{class(image)} {
+		overflow: hidden;
+
+		@include break(sm) {
+			width: 50%;
+		}
+
+		&+#{class(content)} {
+			@include break(sm) {
+				width: 50%;
+			}
+		}
+	}
+
+	#{class(content)} {
+		display: flex;
+		flex-direction: column;
+		gap: math.div($grid-gap, 2);
+		position: relative;
+		padding: $card-padding;
+		background: css-var($card-bg-color);
+		width: 100%;
+		overflow: hidden;
+
+		& > * {
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+	}
+
+	#{class(title)} {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		height: fit-content;
+		gap: $card-padding;
+		text-align: center;
+
+		@include break(xs) {
+			flex-direction: row;
+			text-align: left;
+		}
+
+		&:only-child {
+			height: 100%;
+		}
+
+		& > #{class(image)},
+		& > #{prefix(widget-image)} #{class(image)} {
+			width: 100%;
+			height: 100%;
+			max-width: $card-logo-size;
+			max-height: $card-logo-size;
+
+			&#{class(large)} {
+				max-width: $card-logo-size * 2;
+				max-height: $card-logo-size * 2;
+			}
+
+			img {
+				display: block;
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+			}
+		}
+
+		i {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			min-width: $card-logo-size;
+			max-width: $card-logo-size;
+			margin: 0;
+			font-size: calc($card-logo-size - 1rem);
+		}
+
+		& > div {
+			width: 100%;
+
+			& > * {
+				margin: 0;
+			}
+		}
+	}
+
+	#{class(date)} {
+		text-align: center;
+
+		@include break(xs) {
+			text-align: left;
+		}
+	}
+}
+
+#{class(grid)}#{class('3')},
+#{class(grid)}#{class('4')} {
+	#{class(card)} {
+		flex-direction: column !important;
+
+		& > #{class(image)},
+		& > #{prefix(widget-image)} #{class(image)} {
+			overflow: hidden;
+
+			@include break(sm) {
+				width: 100%;
+			}
+
+			& + #{class(content)} {
+				@include break(sm) {
+					width: 100%;
+				}
+			}
+		}
+
+		#{class(content)} {
+			flex-grow: 1;
+		}
+
+		#{class(title)} {
+			@include break(xs) {
+				flex-direction: column;
+			}
+		}
+
+		#{class(buttons)} {
+			margin-top: auto;
+
+			#{class(btn)} {
+				width: 100%;
+			}
+		}
+	}
+}

package/src/scss/imports/components/_embed.scss

@@ -0,0 +1,75 @@
+/// _embed.scss - Embed styles
+/// @author App Art Mint LLC
+///
+/// @group Embed
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+
+/// Embed Styles
+#{class(embed)} {
+	&-bg {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		justify-content: center;
+		gap: 2rem;
+		position: relative;
+
+		@include break(lg) {
+			flex-direction: row;
+			min-height: 100vh;
+			margin-bottom: 15%;
+		}
+
+		& > section {
+			@include break(lg) {
+				margin-bottom: -15%;
+			}
+		}
+
+		iframe, video {
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			pointer-events: none;
+
+			@include break(lg) {
+				position: absolute;
+				left: -1rem;
+				width: 100vw;
+				border: none;
+				padding: 0;
+			}
+
+			& + * {
+				#{class(grid)} {
+					@include break(lg) {
+						margin-bottom: -15%;
+					}
+				}
+			}
+		}
+
+		&#{class(overflow)} {
+			overflow: hidden;
+			margin-bottom: 0;
+
+			& > section {
+				@include break(lg) {
+					margin-bottom: 0;
+				}
+			}
+
+			iframe, video {
+				top: -10%;
+				left: -10%;
+				width: 120%;
+				height: 120%;
+			}
+		}
+	}
+}