@appartmint/mint 1.2.11 → 1.3.0

package/src/scss/imports/_index.scss

@@ -1,10 +0,0 @@
-/// _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

@@ -1,38 +0,0 @@
-/// 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

@@ -1,243 +0,0 @@
-/// 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

@@ -1,259 +0,0 @@
-/// 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

@@ -1,75 +0,0 @@
-/// _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%;
-			}
-		}
-	}
-}