@appartmint/mint 1.2.11 → 1.3.0

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

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

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

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

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

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

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

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

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

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

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

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