@appartmint/css-mint 0.0.40 → 1.0.0

package/src/components/section/index.scss

@@ -1 +1,4 @@
+@use './flex';
+@use './full';
 @use './grid';
+@use './landing';

package/src/components/section/landing.scss

@@ -0,0 +1,52 @@
+/// landing.scss - Landing styles
+/// @author App Art Mint LLC
+///
+/// @group Section
+@charset 'utf-8';
+@use '../../util/break' as *;
+@use '../../util/selector' as *;
+
+:root {
+	#{class(landing)} {
+		&.swiper {
+			max-width: 100vw;
+
+			.swiper-slide {
+				padding: 0;
+			}
+		}
+	}
+}
+
+#{class(landing)} {
+	top: css-var(p-exit);
+	left: css-var(p-exit);
+	width: css-var(p-exit-w);
+
+	#{class(border)}, #{class(frame)} {
+		border: none;
+		padding: 0;
+	}
+
+	#{class(section-full)} {
+		align-items: center;
+		top: 0;
+		left: 0;
+		width: 100%;
+		margin: 0;
+		min-height: calc(100vh - css-var(header-h));
+		padding: css-var(p-clamp);
+
+		iframe, video {
+			position: absolute;
+
+			& + * {
+				#{class(grid)} {
+					@include break(lg) {
+						margin-bottom: 0;
+					}
+				}
+			}
+		}
+	}
+}

package/src/components/ui/icon.scss

@@ -0,0 +1,73 @@
+/// icon.scss - Icon styles
+/// @author App Art Mint LLC
+///
+/// @group UI
+@charset 'utf-8';
+
+/// Imports
+@use '../../util/selector' as *;
+
+i {
+    &.fa-envelope {
+        transform: translateY(5%);
+    }
+}
+
+a {
+	color: css-var(link-c);
+	transition-duration: time(default);
+	transition-property: color, background-color;
+
+	@include states(hover, focus, active, mint-active) {
+		color: css-var(link-c-hover);
+
+		.fa-facebook,
+		.fa-square-facebook {
+			color: css-var(c-facebook);
+		}
+
+		.fa-instagram {
+			color: css-var(c-instagram);
+		}
+
+		.fa-twitter {
+			color: css-var(c-twitter);
+		}
+
+		.fa-youtube {
+			color: css-var(c-youtube);
+		}
+
+		.fa-spotify {
+			color: css-var(c-spotify);
+		}
+
+		.fa-apple {
+			color: css-var(c-apple-music);
+		}
+
+		.fa-soundcloud {
+			color: css-var(c-soundcloud);
+		}
+
+		.fa-bandcamp {
+			color: css-var(c-bandcamp);
+		}
+
+		.fa-github {
+			color: css-var(c-bw-0);
+		}
+
+		.fa-bitcoin {
+			color: css-var(c-btc);
+		}
+
+		.fa-ethereum {
+			color: css-var(c-eth);
+		}
+
+		.fa-vimeo {
+			color: css-var(c-venmo);
+		}
+	}
+}

package/src/components/ui/index.scss

@@ -1,3 +1,6 @@
 @use './button';
-@use './image';
+@use './icon';
+@use './link';
+@use './list';
+@use './media';
 @use './tooltip';

package/src/components/ui/link.scss

@@ -0,0 +1,33 @@
+/// link.scss - Link styles
+/// @author App Art Mint LLC
+///
+/// @group UI
+@charset 'utf-8';
+
+/// Imports
+@use '../../util/break' as *;
+@use '../../util/selector' as *;
+@use '../../util/time' as *;
+
+:root {
+	@include css-var(link-c, c-brand-4);
+	@include css-var(link-c-hover, c-accent-2);
+}
+
+a {
+	color: css-var(link-c);
+	transition-duration: time(default);
+	transition-property: color, background-color;
+
+	@include states(hover, focus, active, mint-active) {
+		color: css-var(link-c-hover);
+	}
+
+	&[href^='mailto:'],
+	&[href^='tel:'],
+	&[href^='sms:'] {
+		@include break(xs) {
+			white-space: nowrap;
+		}
+	}
+}

package/src/components/ui/list.scss

@@ -0,0 +1,32 @@
+/// list.scss - List styles
+/// @author App Art Mint LLC
+///
+/// @group UI
+@charset 'utf-8';
+
+/// Imports
+@use '../../util/selector' as *;
+
+nav {
+	a {
+		display: block;
+		text-decoration: none;
+	}
+
+	ul {
+		display: flex;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+
+		& > li > ul {
+			flex-direction: column;
+		}
+	}
+}
+
+#{class(list)} {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}

package/src/components/ui/media/embed.scss

@@ -0,0 +1,9 @@
+/// embed.scss - Embed styles
+/// @author App Art Mint LLC
+///
+/// @group Media
+@charset 'utf-8';
+
+iframe {
+	border: none;
+}

package/src/components/ui/media/global.scss

@@ -0,0 +1,13 @@
+/// global.scss - Global media styles
+/// @author App Art Mint LLC
+///
+/// @group Media
+@charset 'utf-8';
+
+/// Imports
+@use '../../../util/selector' as *;
+
+img, video {
+	width: 100%;
+	height: auto;
+}

package/src/components/ui/{image.scss → media/image.scss}

@@ -1,11 +1,11 @@
 /// image.scss - Image styles
 /// @author App Art Mint LLC
 ///
-/// @group UI
+/// @group Media
 @charset 'utf-8';
 
 /// Imports
-@use '../../util' as *;
+@use '../../../util/selector' as *;
 
 :root {
     @include css-var-ref(img-shadow-c, shadow-c);

package/src/components/ui/media/index.scss

@@ -0,0 +1,3 @@
+@use './embed';
+@use './global';
+@use './image';

package/src/components/widget/index.scss

@@ -1,3 +1,5 @@
 @use 'accordion';
 @use 'card';
 @use 'modal';
+@use 'panel';
+@use 'table';

package/src/components/widget/{_panel.scss → panel.scss}

@@ -1,18 +1,18 @@
-/// _panel.scss - Panel styles
+/// panel.scss - Panel styles
 /// @author App Art Mint LLC
 ///
 /// @group Widget
 @charset 'utf-8';
 
 /// Imports
-@use 'sass:math';
-@use '../../util' as *;
+@use '../../util/break' as *;
+@use '../../util/selector' as *;
 
 /// Panel Styles
 #{class(panel)} {
 	&#{class(right)} {
-		#{class(panel-wrapper)} {
-			top: css-var(header-height);
+		#{class(panel-wrap)} {
+			top: css-var(header-h);
 			right: -100%;
 			left: unset;
 
@@ -23,7 +23,7 @@
 	}
 
 	&#{class(bottom)} {
-		#{class(panel-wrapper)} {
+		#{class(panel-wrap)} {
 			top: unset;
 			bottom: -100%;
 
@@ -35,8 +35,8 @@
 	}
 
 	&#{class(left)} {
-		#{class(panel-wrapper)} {
-			top: css-var(header-height);
+		#{class(panel-wrap)} {
+			top: css-var(header-h);
 			left: -100%;
 
 			&#{class(open)} {
@@ -46,7 +46,7 @@
 	}
 
 	&#{class(tray)} {
-		#{class(panel-wrapper)} {
+		#{class(panel-wrap)} {
 			gap: 1rem;
 
 			@include break(sm) {
@@ -55,30 +55,30 @@
 		}
 	}
 
-	#{class(panel-wrapper)} {
+	#{class(panel-wrap)} {
 		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));
+		height: calc(100vh - css-var(header-h));
+		height: calc(100dvh - css-var(header-h));
 		z-index: -2;
-		background: css-var(header-back);
+		background: css-var(header-bg);
 		transition-duration: time(default);
 		transition-property: top, right, bottom, left;
 		overflow: auto;
 
 		&#{class(open)} {
-			top: css-var(header-height);
+			top: css-var(header-h);
 		}
 
 		nav {
 			flex-grow: 1;
 			height: auto;
 			overflow: visible;
-			background: css-var(back);
+			background: css-var(bg);
 
 			@include break(xl) {
 				display: flex;
@@ -86,7 +86,7 @@
 				justify-content: center;
 			}
 
-			&> :last-child {
+			& > :last-child {
 				margin-bottom: 0;
 			}
 		}

package/src/components/widget/{_table.scss → table.scss}

@@ -1,11 +1,11 @@
-/// _table.scss - Table styles
+/// table.scss - Table styles
 /// @author App Art Mint LLC
 ///
 /// @group Widget
 @charset 'utf-8';
 
 /// Imports
-@use '../../util' as *;
+@use '../../util/selector' as *;
 
 /// Table
 #{class(table)} {
@@ -14,10 +14,8 @@
 		overflow-y: auto;
 	}
 
-	&.mat-mdc-table {
-		thead {
-			background: css-var(back);
-		}
+	thead {
+		background: css-var(bg);
 	}
 
     #{class(actions)} {
@@ -26,4 +24,4 @@
         justify-content: flex-end;
 		gap: 1rem;
     }
-}
+}

package/src/global/animations.scss

@@ -0,0 +1,214 @@
+/// _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/selector' as *;
+@use '../util/time' as *;
+
+/// Animations
+@keyframes #{prefix(spin)} {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes #{prefix(spin-centered)} {
+	0% {
+		transform: rotate(0deg) translate(-50%, -50%);
+	}
+
+	100% {
+		transform: rotate(360deg) translate(-50%, -50%);
+	}
+}
+
+@keyframes #{prefix(pulse)} {
+	0% {
+		opacity: 0;
+	}
+
+	75% {
+		opacity: 0.75;
+	}
+
+	100% {
+		opacity: 0;
+	}
+}
+
+@keyframes #{prefix(stretch-in)} {
+	0% {
+		transform: scale(1);
+	}
+
+	50% {
+		transform: scale(1.25);
+	}
+
+	70% {
+		transform: scale(1.15);
+	}
+
+	100% {
+		transform: scale(1.2);
+	}
+}
+
+@keyframes #{prefix(stretch-out)} {
+	0% {
+		transform: scale(1.2);
+	}
+
+	25% {
+		transform: scale(0.9);
+	}
+
+	50% {
+		transform: scale(1.05);
+	}
+
+	100% {
+		transform: scale(1);
+	}
+}
+
+@keyframes #{prefix(stretch-tilt-in)} {
+    0% {
+        transform: scale(0.5);
+        rotate: -15deg;
+    }
+    90% {
+        transform: scale(1.25);
+        rotate: 5deg;
+    }
+    100% {
+        transform: scale(1);
+		rotate: 0deg;
+    }
+}
+
+/// Animation classes
+#{class(fall-in)} {
+    filter: opacity(0%);
+    transform: translateY(-100px);
+    transition: all time(slower) ease-out, box-shadow time(slower) time(slow) ease-out !important;
+    pointer-events: none;
+    z-index: -1;
+
+    &#{class(show)}:not(#{class(loading)}) {
+        filter: opacity(100%);
+        transform: translateY(0%);
+        pointer-events: auto;
+        z-index: 1;
+    }
+
+    &:not(#{(class(show))}), &#{class(loading)} {
+        box-shadow: 0 0 0 0 transparent !important;
+    }
+
+    &#{class(fast)} {
+        transition: all time(faster), box-shadow time(faster) time(faster) !important;
+    }
+}
+
+#{class(shine)} {
+    position: relative;
+    overflow: hidden;
+
+    @include states(hover, focus, active, mint-active) {
+        &::after {
+            transition-duration: time(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 time(fast) ease-out;
+    }
+}
+
+#{class(spin)} {
+	animation: #{prefix(spin)} 1s linear infinite;
+
+	@for $i from 1 through 5 {
+		&-#{$i} {
+			animation-duration: #{$i}s;
+		}
+	}
+
+	&-hover {
+		$animation: #{prefix(spin)} 1s ease-in-out forwards;
+		@include states(hover, focus) {
+			animation: $animation;
+		}
+
+		&-icon {
+			@include states(hover, focus) {
+				i {
+					animation: $animation;
+				}
+			}
+		}
+	}
+}
+
+#{class(pulse-out)} {
+	animation: #{prefix(pulse)} 0.75s ease-in-out forwards;
+}
+
+#{class(stretch)} {
+	animation: #{prefix(stretch-out)} 0.5s ease forwards;
+	@include states(hover, focus) {
+		animation: #{prefix(stretch-in)} 0.75s ease forwards;
+	}
+
+	&-img {
+		img {
+			animation: #{prefix(stretch-out)} 0.5s ease forwards;
+		}
+
+		@include states(hover, focus) {
+			img {
+				animation: #{prefix(stretch-in)} 0.75s ease forwards;
+			}
+		}
+	}
+
+	&-icon {
+		i {
+			animation: #{prefix(stretch-out)} 0.5s ease forwards;
+		}
+
+		@include states(hover, focus) {
+			i {
+				animation: #{prefix(stretch-in)} 0.75s ease forwards;
+			}
+		}
+	}
+
+	&-in {
+		animation: #{prefix(stretch-out)} 0.5s ease forwards;
+	}
+
+	&-tilt-in {
+		animation: #{prefix(stretch-tilt-in)} 0.75s ease-in-out forwards;
+	}
+}

package/src/global/global.scss

@@ -0,0 +1,75 @@
+/// global.scss - Global styles
+/// @author App Art Mint LLC
+///
+/// @group Global
+@charset 'utf-8';
+
+/// Imports
+@use '../util/selector' as *;
+
+:root {
+	@include css-var(root-bg-s, cover);
+	@include css-var(root-bg-img, none);
+	@include css-var(root-bg-pos, center);
+	@include css-var(root-bg-filter, none);
+}
+
+* {
+	&,
+	&::before,
+	&::after {
+		box-sizing: border-box;
+	}
+}
+
+html {
+	overflow-x: hidden;
+}
+
+html,
+body {
+	min-height: 100vh;
+	margin: 0;
+	padding: 0;
+	scroll-behavior: smooth;
+}
+
+body {
+	color: css-var(c-fg);
+	background-color: css-var(c-bg);
+
+	&#{class(fixed)} {
+		main {
+			min-height: 100vh;
+			min-height: 100dvh;
+			padding-top: css-var(header-h);
+		}
+	}
+}
+
+main {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	width: 100%;
+	min-height: calc(100vh - css-var(header-h));
+	min-height: calc(100dvh - css-var(header-h));
+	padding-left: css-var(pad-clamp);
+	padding-right: css-var(pad-clamp);
+	overflow: hidden;
+	z-index: 999;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-image: css-var(root-bg-img);
+		background-size: css-var(root-bg-s);
+		background-position: css-var(root-bg-pos);
+		filter: css-var(root-bg-filter);
+		z-index: -1;
+	}
+}

package/src/global/index.scss

@@ -1,3 +1,9 @@
+@use 'animations';
 @use 'aspect';
+@use 'global';
 @use 'mask';
-@use 'size';
+@use 'shadow';
+@use 'structure';
+@use 'text';
+@use 'texture';
+@use 'themes';

package/src/global/mask.scss

@@ -7,7 +7,17 @@
 /// Imports
 @use '../util' as *;
 
-/// Masks
+#{class(sr-only)} {
+	position: absolute !important;
+	width: 1px !important;
+	height: 1px !important;
+	padding: 0 !important;
+	margin: -1px !important;
+	overflow: hidden !important;
+	clip: rect(0, 0, 0, 0) !important;
+	border: 0 !important;
+}
+
 #{class(circle)} {
 	border-radius: 50%;
 	overflow: hidden;