@appartmint/mint 1.3.0 → 1.3.1

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

package/src/scss/imports/global/_aspect.scss

@@ -0,0 +1,54 @@
+/// _aspect.scss - Apect Ratios
+/// @author App Art Mint LLC
+///
+/// @group Aspect
+@charset 'utf-8';
+
+/// Imports
+@use 'sass:math';
+@use '../util' as *;
+
+/// Aspect Ratios
+#{class(aspect)} {
+	position: relative;
+	height: 0;
+	overflow: hidden;
+
+	&#{class(spotify)} {
+		&-playlist {
+			padding-top: 152px !important;
+
+			@include break(xs) {
+				padding-top: 125% !important;
+			}
+
+			@include break(sm) {
+				padding-top: 75% !important;
+			}
+
+			@include break(md) {
+				padding-top: 56.25% !important;
+			}
+		}
+
+		&-podcast {
+			padding-top: 352px !important;
+		}
+	}
+
+	iframe, video {
+		position: absolute !important;
+		top: 50% !important;
+		left: 50% !important;
+		transform: translate(-50%, -50%) !important;
+		width: 100% !important;
+		height: 100% !important;
+	}
+}
+
+$width: 16;
+$height: 9;
+#{class($width + '-' + $height)} {
+	@extend #{class(aspect)};
+	padding-top: math.div($height, $width) * 100% !important;
+}

package/src/scss/imports/global/_flex.scss

@@ -0,0 +1,7 @@
+/// Imports
+@use '../util' as *;
+
+/// Flex mixins
+#{class(flex)} {
+	@include flex-util();
+}

package/src/scss/imports/global/_global.scss

@@ -0,0 +1,208 @@
+/// Imports
+@use '../util' as *;
+
+/// Global styles
+* {
+
+	&,
+	&::before,
+	&::after {
+		box-sizing: border-box;
+	}
+}
+
+html {
+	overflow-x: hidden;
+}
+
+html,
+body {
+	color: css-var(fore);
+	background-color: css-var(back);
+	min-height: 100vh;
+	margin: 0;
+	padding: 0;
+	scroll-behavior: smooth;
+}
+
+body {
+	&#{class(fixed)} {
+		#{id(header)} {
+			position: fixed;
+			top: 0;
+			left: 0;
+		}
+
+		main {
+			min-height: 100vh;
+			padding-top: css-var(header-height);
+		}
+	}
+
+	&#{class(ready)} {
+		app-root {
+			opacity: 1;
+		}
+	}
+}
+
+app-root {
+	display: block;
+	position: relative;
+	opacity: 0;
+	transition: opacity 750ms ease-in;
+	
+	@if (type-of($root-bg-image) == 'string') {
+		&::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background-image: url($root-bg-image);
+
+			@if (type-of($root-bg-size) != 'null') {
+				background-size: $root-bg-size;
+			}
+
+			@if (type-of($root-bg-position) != 'null') {
+				background-position: $root-bg-position;
+			}
+			
+			@if (type-of($root-bg-filter) != 'null') {
+				filter: $root-bg-filter;
+			}
+		}
+	}
+}
+
+main {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	width: 100%;
+	min-height: calc(100vh - css-var(header-height));
+	overflow: hidden;
+	z-index: 1000;
+
+	&>router-outlet {
+		flex-grow: 0;
+	}
+}
+
+:root {
+	main {
+		& > router-outlet {
+			& + * {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				flex-grow: 1;
+				width: 100%;
+				padding: 0.25rem;
+
+				@include fluid(padding, map-get($break, xs) * 1px, map-get($break, sm) * 1px, 4px, 16px);
+
+				&+:not(#{prefix(partial-footer)}) {
+					height: 0;
+					overflow: hidden;
+				}
+			}
+		}
+	}
+}
+
+nav {
+	a {
+		display: block;
+		text-decoration: none;
+	}
+
+	ul {
+		display: flex;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+
+		&>li>ul {
+			flex-direction: column;
+		}
+	}
+}
+
+a {
+
+	&[href^='mailto:'],
+	&[href^='tel:'],
+	&[href^='sms:'] {
+		@include break (xs) {
+			white-space: nowrap;
+		}
+	}
+}
+
+button,
+a[routerLink] {
+	cursor: pointer;
+}
+
+a,
+button {
+	font-size: inherit;
+
+	&[disabled] {
+		filter: grayscale(1) brightness(0.75) !important;
+		pointer-events: none !important;
+
+		&#{class(fall-in)}#{neg(class(show))} {
+			filter: grayscale(1) brightness(0.75) opacity(0%) !important;
+		}
+	}
+
+	i {
+		&:first-child {
+			margin-right: 0.5em;
+		}
+
+		&:last-child {
+			margin-left: 0.5em;
+		}
+	}
+}
+
+img,
+video {
+	width: 100%;
+	height: auto;
+}
+
+iframe {
+	border: none;
+}
+
+#{class(glow)} {
+	box-shadow: 0 0 2rem -0.5rem css-var(glow-2);
+}
+
+#{class(noglow)} {
+	box-shadow: none !important;
+}
+
+#{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(list)} {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}

package/src/scss/imports/global/_grid.scss

@@ -0,0 +1,153 @@
+/// Imports
+@use '../util' as *;
+
+/// Grid mixins
+@mixin grid-2 {
+	@include break(sm) {
+		grid-template-columns: repeat(2, 1fr);
+		
+		& > :last-child:nth-child(odd) {
+			#{class(card)} {
+				grid-column: span 2;
+				width: 50%;
+				margin-left: auto;
+				margin-right: auto;
+			}
+		}
+	}
+}
+
+@mixin grid-3 {
+	@include break(lg) {
+		grid-template-columns: repeat(3, 1fr);
+
+		& > :last-child:nth-child(odd) {
+			#{class(card)} {
+				grid-column: span 1;
+				width: 100%;
+			}
+		}
+
+		& > :last-child:nth-child(#{'3n+1'}) {
+			#{class(card)} {
+				grid-column: 2;
+			}
+		}
+
+		& > :last-child:nth-child(#{'3n+2'}) {
+			#{class(card)} {
+				grid-column: 3;
+			}
+		}
+
+		& > :nth-last-child(2):nth-child(#{'3n+1'}) {
+			#{class(card)} {
+				grid-column: 1;
+			}
+		}
+	}
+}
+
+@mixin grid-4 {
+	@include break(xl) {
+		grid-template-columns: repeat(4, 1fr);
+
+		& > :last-child:nth-child(odd),
+		& > :last-child:nth-child(#{'3n+1'}),
+		& > :last-child:nth-child(#{'3n+2'}),
+		& > :nth-last-child(2):nth-child(#{'3n+1'}) {
+			#{class(card)} {
+				grid-column: span 1;
+				width: 100%;
+			}
+		}
+
+		& > :last-child:nth-child(#{'4n+1'}) {
+			#{class(card)} {
+				grid-column: 2 / span 2;
+				width: 50%;
+				margin-left: auto;
+				margin-right: auto;
+			}
+		}
+
+		& > :last-child:nth-child(#{'4n+2'}) {
+			#{class(card)} {
+				grid-column: 3 / span 2;
+				width: 50%;
+				margin-left: auto;
+				margin-right: auto;
+			}
+		}
+
+		& > :nth-last-child(2):nth-child(#{'4n+1'}) {
+			#{class(card)} {
+				grid-column: 1 / span 2;
+				width: 50%;
+				margin-left: auto;
+				margin-right: auto;
+			}
+		}
+
+		& > :last-child:nth-child(#{'4n+3'}) {
+			#{class(card)} {
+				grid-column: 4;
+			}
+		}
+
+		& > :nth-last-child(2):nth-child(#{'4n+2'}) {
+			#{class(card)} {
+				grid-column: 2 / span 2;
+				width: 50%;
+				margin-left: auto;
+				margin-right: auto;
+			}
+		}
+
+		& > :nth-last-child(3):nth-child(#{'4n+1'}) {
+			#{class(card)} {
+				grid-column: 1;
+			}
+		}
+	}
+
+}
+
+/// Grid styles
+#{class(grid)} {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: $grid-gap;
+	width: 100%;
+	margin-top: $grid-gap;
+	margin-bottom: $grid-gap;
+
+	&#{class('2')} {
+		@include grid-2;
+	}
+
+	&#{class('3')} {
+		@include grid-2;
+		@include grid-3;
+	}
+
+	&#{class('4')} {
+		@include grid-2;
+		@include grid-3;
+		@include grid-4;
+	}
+
+	#{class(portrait)} {
+		grid-row: span 2;
+	}
+
+	#{class(landscape)} {
+		@include break(sm) {
+			grid-column: span 2;
+		}
+		@include break(lg) {
+			grid-column: span 3;
+		}
+	}
+}
+

package/src/scss/imports/global/_icons.scss

@@ -0,0 +1,6 @@
+/// Icon styles
+i {
+    &.fa-envelope {
+        transform: translateY(5%);
+    }
+}

package/src/scss/imports/global/_index.scss

@@ -0,0 +1,12 @@
+/// Forward all global styles
+@use './animations';
+@use './aspect';
+@use './flex';
+@use './global';
+@use './grid';
+@use './icons';
+@use './inputs';
+@use './structure';
+@use './text';
+@use './texture';
+@use './themes';

package/src/scss/imports/global/_inputs.scss

@@ -0,0 +1,135 @@
+/// _inputs.scss - Input styles
+/// @author App Art Mint LLC
+///
+/// @group Inputs
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+
+/// Input Styles
+input,
+textarea,
+select {
+	width: 100%;
+	padding: 0.5rem;
+	border: 2px solid #ccc;
+	border-radius: $border-radius;
+}
+
+select {
+	@include break(xs) {
+		width: auto;
+	}
+}
+
+textarea {
+	resize: vertical;
+}
+
+/// Checkbox Styles
+#{class(toggle)} {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	
+	div {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.5rem;
+
+		@include break(xs) {
+			flex-direction: row;
+		}
+	}
+}
+
+#{class(check)} {
+	$padding: 0.25rem;
+	$height: 1.5rem;
+	$border-width: 0.125rem;
+	$width: ($height - $padding) * 2;
+	position: relative;
+	display: inline-block;
+	flex-shrink: 0;
+	height: $height + $border-width * 2;
+	width: $width + $border-width * 2;
+	border: $border-width solid css-var(brand-2);
+	border-radius: $border-radius;
+	background-color: css-var(brand-5);
+	cursor: pointer;
+
+	[type="checkbox"] {
+		display: none;
+
+		&:checked {
+			
+
+			& + span {
+				left: calc(100% - #{$height - $padding});
+				background-color: css-var(brand-2);
+				filter: grayscale(0);
+			}
+		}
+
+		& + span {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: absolute;
+			top: $padding;
+			left: $padding;
+			transform: translateX(0);
+			width: $height - $padding * 2;
+			height: $height - $padding * 2;
+			background-color: css-var(brand-4);
+			border-radius: $border-radius;
+			filter: grayscale(1);
+			transition: filter 300ms, background-color 300ms, left 300ms;
+		}
+	}
+
+	& + span {
+		width: 1.5rem;
+		text-align: center;
+	}
+}
+
+/// Dropdown Styles
+#{class(dropdown)} {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	
+	@include break(xs) {
+		gap: 1rem;
+	}
+}
+
+/// Label Styles
+#{class(error)} {
+	line-height: 0;
+	filter: opacity(0);
+	transition: filter 0.3s;
+
+	&#{class(show)} {
+		filter: opacity(1);
+	}
+}
+
+/// Array Input Styles
+#{class(array-item)} {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 0.5rem;
+
+	:first-child {
+		flex-grow: 1;
+	}
+
+	:last-child {
+		flex-shrink: 0;
+	}
+}