@appartmint/mint 1.3.0 → 1.3.1

package/src/scss/imports/global/_structure.scss

@@ -0,0 +1,89 @@
+/// Imports
+@use 'sass:map';
+@use '../util' as *;
+
+/// Structure styles
+#{class(pad)} {
+	@include box-util(padding, 1rem);
+	@include break-util(padding, 0.5rem, 0);
+
+	@include break(xs) {
+		@include break-util(padding, 1rem, 0);
+	}
+}
+
+#{class(margin)} {
+	@include box-util(margin, 1rem);
+	@include break-util(margin, 0.5rem, 0);
+
+	@include break(xs) {
+		@include break-util(margin, 1rem, 0);
+	}
+}
+
+#{class(hide)} {
+	@include break-util(display, initial, none);
+}
+
+#{class(max)} {
+	@each $size in map.keys($break) {
+		&-#{$size} {
+			width: 100%;
+			max-width: break($size);
+			
+			&:not(#{class(left)}) {
+				margin-left: auto;
+			}
+
+			&:not(#{class(right)}) {
+				margin-right: auto;
+			}
+		}
+	}
+}
+
+#{class(center)} {
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+
+	&-down {
+
+		&,
+		& * {
+			align-items: center;
+			justify-content: center;
+			text-align: center;
+		}
+	}
+}
+
+#{class(fit)} {
+	width: fit-content;
+	height: fit-content;
+
+	&:not(#{class(left)}) {
+		margin-left: auto;
+	}
+
+	&:not(#{class(right)}) {
+		margin-right: auto;
+	}
+}
+
+#{class(left)} {
+	float: left;
+}
+
+#{class(right)} {
+	float: right;
+}
+
+#{class(full-page)} {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: calc(100vh - css-var(header-height));
+	min-height: calc(100dvh - css-var(header-height));
+}

package/src/scss/imports/global/_text.scss

@@ -0,0 +1,62 @@
+/// text.scss - Text styles
+/// @author App Art Mint LLC
+///
+/// @group Text
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+
+/// Text Styles
+html, body {
+    font-family: $font-primary, $font-backups;
+    font-size: 1rem;
+
+    @include break(md) {
+        font-size: 1.125rem;
+    }
+}
+
+p {
+    line-height: $font-height;
+}
+
+@include headers () {
+    font-family: $font-secondary, $font-secondary-backups;
+    line-height: 1;
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+@each $tag in map-keys($font-size-mobile) {
+    #{$tag}, #{class($tag)} {
+        margin: 1rem 0;
+        font-size: min(map-get($font-size-tiny, $tag), map-get($font-size-mobile, $tag));
+
+        @include break(xs) {
+            font-size: map-get($font-size-mobile, $tag);
+        }
+
+        @include break(md) {
+            font-size: map-get($font-size-desktop, $tag);
+        }
+    }
+}
+
+#{class(upper)} {
+	text-transform: uppercase;
+}
+
+#{class(disclaim)} {
+    font-size: 0.875rem;
+
+    @include break-max(xs) {
+        text-align: center;
+    }
+}

package/src/scss/imports/global/_texture.scss

@@ -0,0 +1,124 @@
+/// _texture.scss - Texture styles
+/// @author App Art Mint LLC
+///
+/// @group Texture
+@charset 'utf-8';
+
+/// Imports
+@use 'sass:math';
+@use '../util' as *;
+
+/// Texture Mixin
+@mixin mint-texture () {
+    position: relative;
+    
+    &::before, &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+    }
+
+    &::before {
+        opacity: $texture-opacity;
+        background-image: url($texture-bg);
+        background-size: $texture-bg-size;
+        background-position: $texture-bg-position;
+        @if ($texture-blend) {
+            mix-blend-mode: $texture-blend;
+        }
+        @if ($texture-filter) {
+            filter: $texture-filter;
+        }
+    }
+
+    &::after {
+        opacity: $texture-alt-opacity;
+        background-size: $texture-alt-bg-size;
+        background-position: $texture-alt-bg-position;
+        mask-image: $texture-alt-mask;
+        @if ($texture-alt-blend) {
+            mix-blend-mode: $texture-alt-blend;
+        }
+        z-index: 1;
+    }
+
+    & > * {
+        position: relative;
+        z-index: 10;
+    }
+}
+
+/// Border Mixin
+@mixin mint-border () {
+	padding: math.div($texture-padding, 2) + $texture-border-width;
+	border-image-source: url($texture-border-image);
+	border-image-slice: $texture-border-slice;
+	border-image-repeat: #{$texture-border-repeat};
+	border-image-width: $texture-border-width;
+	border-style: $texture-border-type;
+
+    @include break(sm) {
+        padding: $texture-padding + $texture-border-width;
+    }
+}
+
+/// Texture Styles
+#{class(texture)} {
+    @if $texture-bg {
+        @include mint-texture();
+    }
+}
+
+/// Border Styles
+#{class(border)} {
+    @extend #{class(texture)};
+    @if $texture-border-image {
+        @include mint-border();
+    } @else if $texture-border-color {
+        border: $texture-border-width $texture-border-type css-var($texture-border-color);
+    }
+}
+
+#{class(frame)} {
+    height: fit-content;
+	background-color: css-var($card-bg-color);
+
+    @extend #{class(border)};
+    @if $texture-border-image {
+        padding: $texture-border-width;
+    } @else if $texture-border-color {
+        padding: 0;
+    }
+}
+
+#{class(card)} {
+	#{class(content)} {
+		@extend #{class(border)};
+	}
+}
+
+/// Alt Texture Styles
+@if $texture-alt-bg and $texture-alt-num {
+    @for $num from 1 through $texture-alt-num {
+        #{class(texture-#{$num})} {
+            #{class(content)} {
+                &::after {
+                    background-image: url('#{$texture-alt-bg}#{$num}.jpg');
+                }
+            }
+        }
+    }
+}
+
+/// Overlay texture
+#{class(overlay)} {
+	#{class(border)}, #{class(texture)} {
+		&::before {
+			z-index: 100;
+		}
+	}
+}

package/src/scss/imports/global/_themes.scss

@@ -0,0 +1,174 @@
+/// _themes.scss - Styles for light and dark themes
+/// @author App Art Mint LLC
+///
+/// @group Themes
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+
+/// Global theme
+:root {
+	/// Global Colors
+	/// Brands
+	@include css-var(bitcoin, $bitcoin);
+	@include css-var(ethereum, $ethereum);
+	@include css-var(venmo, $venmo);
+	@include css-var(facebook, $facebook);
+	@include css-var(twitter, $twitter);
+	@include css-var(youtube, $youtube);
+	@include css-var(apple, $apple);
+	@include css-var(apple-music, $apple-music);
+	@include css-var(spotify, $spotify);
+	@include css-var(soundcloud, $soundcloud);
+	@include css-var(bandcamp, $bandcamp);
+	@include css-var(amazon-0, $amazon-0);
+	@include css-var(amazon-1, $amazon-1);
+	@include css-var(napster-0, $napster-0);
+	@include css-var(napster-1, $napster-1);
+	@include css-var(google-play-0, $google-play-0);
+	@include css-var(google-play-1, $google-play-1);
+	@include css-var(google-play-2, $google-play-2);
+	@include css-var(instagram-0, $instagram-0);
+	@include css-var(instagram-1, $instagram-1);
+	@include css-var(instagram-2, $instagram-2);
+	@include css-var(instagram-3, $instagram-3);
+	@include css-var(instagram-4, $instagram-4);
+	@include css-var(instagram-5, $instagram-5);
+	@include css-var(instagram-6, $instagram-6);
+
+	/// Application Colors
+	@include shades('black', $black, lighten);
+	@include shades('white', $white, darken);
+	@include shades(glow, $trans-light, darken, 7, 10%, true);
+	@include shades(shadow, $trans-dark, darken, 7, 10%, true);
+
+	@include shades(brand, $brand);
+	@include shades(accent, $accent);
+	@include shades(success, $success);
+	@include shades(danger, $danger);
+	@include shades(warning, $warning);
+	@include shades(info, $info);
+}
+
+/// Light theme
+@mixin light-theme {
+	@include css-var(fore, $fore);
+	@include css-var(back, $back);
+}
+
+/// Dark theme
+@mixin dark-theme {
+	@include css-var(fore, $back);
+	@include css-var(back, $fore);
+}
+
+/// Apply themes
+:root {
+	@if ($theme-default ==light) {
+		@include light-theme;
+	}
+
+	@else {
+		@include dark-theme;
+	}
+}
+
+#{class(dark)} {
+	@include dark-theme;
+	color: css-var(fore);
+}
+
+#{class(light)} {
+	@include light-theme;
+	color: css-var(fore);
+}
+
+#{class(success)} {
+	background-color: css-var(success-2);
+	border-color: css-var(success-4);
+}
+
+#{class(danger)} {
+	color: css-var(danger);
+}
+
+a {
+	color: css-var($link-color);
+	transition-duration: css-var(delay-default);
+	transition-property: color, background-color;
+
+	.fa-instagram {
+		position: relative;
+
+		&::after {
+			content: '\f16d';
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			opacity: 0;
+			transition: opacity css-var(delay-default);
+
+			@include background-clip(css-var(instagram-0)) {
+				/// https://codepen.io/thomasrye/pen/VaRoYv
+				background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
+			}
+		}
+	}
+
+	@include states(hover, focus, active) {
+		color: css-var($link-color-hover);
+
+		.fa-facebook,
+		.fa-square-facebook {
+			color: css-var(facebook);
+		}
+
+		.fa-instagram {
+			&::after {
+				opacity: 1;
+			}
+		}
+
+		.fa-twitter {
+			color: css-var(twitter);
+		}
+
+		.fa-youtube {
+			color: css-var(youtube);
+		}
+
+		.fa-spotify {
+			color: css-var(spotify);
+		}
+
+		.fa-apple {
+			color: css-var(apple-music);
+		}
+
+		.fa-soundcloud {
+			color: css-var(soundcloud);
+		}
+
+		.fa-bandcamp {
+			color: css-var(bandcamp);
+		}
+
+		.fa-github {
+			color: css-var(white-1);
+		}
+
+		.fa-bitcoin {
+			color: css-var(bitcoin);
+		}
+
+		.fa-ethereum {
+			color: css-var(ethereum);
+		}
+
+		.fa-vimeo {
+			color: css-var(venmo);
+		}
+	}
+}

package/src/scss/imports/overrides/_amplify.scss

@@ -0,0 +1,48 @@
+/// _amplify.scss - Amplify styles
+/// @author App Art Mint LLC
+/// 
+/// @group Overrides
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+@use '../components/buttons';
+@use '../components/cards';
+
+/// Amplify Styles
+:root:root {
+	@include css-var-ref(--amplify-colors-background-error, $amp-background-error);
+	@include css-var-ref(--amplify-colors-border-primary, $amp-border-primary);
+	@include css-var-ref(--amplify-colors-border-focus, $amp-border-focus);
+	@include css-var-ref(--amplify-colors-font-hover, $amp-font-hover);
+	@include css-var-ref(--amplify-colors-font-interactive, $amp-font-interactive);
+	@include css-var-ref(--amplify-colors-font-primary, $amp-font-primary);
+	@include css-var-ref(--amplify-components-fieldcontrol-color, --amplify-colors-font-primary);
+	@include css-var-ref(--amplify-colors-font-secondary, $amp-font-secondary);
+	@include css-var-ref(--amplify-colors-font-error, $amp-font-error);
+	@include css-var-ref(--amplify-colors-font-warning, $amp-font-warning);
+	@include css-var-ref(--amplify-colors-font-success, $amp-font-success);
+	@include css-var-ref(--amplify-colors-font-info, $amp-font-info);
+
+	@include css-var(--amplify-border-widths-small, $amp-border-width);
+
+	[data-amplify-authenticator] {
+		[data-amplify-container] {
+			@extend #{class(card)};
+	
+			[data-amplify-router] {
+				@extend #{class(content)};
+				border: none;
+			}
+		}
+	}
+	
+	[amplify-button] {
+		@extend #{class(btn)};
+		margin: auto;
+	}
+	
+	.amplify-icon {
+		display: block;
+	}
+}

package/src/scss/imports/overrides/_full-calendar.scss

@@ -0,0 +1,46 @@
+/// _amplify.scss - Amplify styles
+/// @author App Art Mint LLC
+/// 
+/// @group Overrides
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+
+/// FullCalendar Styles
+.fc {
+	--fc-page-bg-color: #{css-var(brand-6)};
+	.fc-toolbar {
+		flex-wrap: wrap;
+		justify-content: space-around;
+		gap: 1rem;
+
+		&-title {
+			@include break-max(sm) {
+				font-size: 1.25rem;
+			}
+		}
+	}
+	.fc-timegrid {
+		&-divider {
+			padding: 0;
+		}
+		&-slot-minor {
+			border-top-style: groove;
+		}
+	}
+	.fc-list-table {
+		--fc-list-event-hover-bg-color: #{css-var(brand-4)};
+
+		@include break-max(sm) {
+			word-break: normal;
+		}
+
+		.fc-list-event-time {
+			@include break-max(xs) {
+				white-space: normal;
+
+			}
+		}
+	}
+}

package/src/scss/imports/overrides/_index.scss

@@ -0,0 +1,11 @@
+/// _index.scss - Forward all overrides
+/// @author App Art Mint LLC
+/// 
+/// @group Index
+@charset 'utf-8';
+
+/// Imports
+@use './amplify';
+@use './full-calendar';
+@use './material';
+@use './swiper';

package/src/scss/imports/overrides/_material.scss

@@ -0,0 +1,24 @@
+/// _material.scss - Material styles
+/// @author App Art Mint LLC
+/// 
+/// @group Overrides
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+
+/// Material Styles
+:root:root {
+	@include css-var(--mat-table-background-color, $mat-table-bg);
+	@include css-var(--mat-paginator-container-background-color, $mat-table-bg);
+	@include css-var(--mat-table-row-item-label-text-color, $mat-table-fore);
+	@include css-var(--mat-table-header-headline-color, $mat-table-fore);
+	@include css-var(--mat-table-header-subheadline-color, $mat-table-fore);
+	@include css-var(--mat-paginator-container-text-color, $mat-table-fore);
+}
+
+.cdk-overlay-container {
+	.mat-mdc-select-panel {
+		background: css-var($mat-select-bg);
+	}
+}

package/src/scss/imports/overrides/_swiper.scss

@@ -0,0 +1,55 @@
+/// _swiper.scss - Swiper styles
+/// @author App Art Mint LLC
+/// 
+/// @group Overrides
+@charset 'utf-8';
+
+/// Imports
+@use '../util' as *;
+
+/// Variables
+$arrows-offset: 1rem;
+$arrows-size: 2rem;
+
+/// Swiper Styles
+:root {
+	@include css-var-ref(--swiper-navigation-color, fore);
+	@include css-var-ref(--swiper-pagination-color, brand);
+	@include css-var(--swiper-navigation-size, $arrows-size);
+
+	.swiper {
+		max-width: 100%;
+
+		@include break(xs) {
+			@include css-var(--swiper-navigation-sides-offset, $arrows-offset);
+		}
+
+		&-slide {
+			@include break(xs) {
+				padding: $arrows-offset + $arrows-size;
+			}
+		}
+	
+		&-button {
+			&-prev,
+			&-next {
+				&::after {
+					font-family: "Font Awesome 6 Pro";
+					font-weight: 900;
+				}
+			}
+	
+			&-prev {
+				&::after {
+					content: '\f053';
+				}
+			}
+	
+			&-next {
+				&::after {
+					content: '\f054';
+				}
+			}
+		}
+	}
+}

package/src/scss/imports/util/_index.scss

@@ -0,0 +1,9 @@
+/// _index.scss - Forward all overrides
+/// @author App Art Mint LLC
+/// 
+/// @group Index
+@charset 'utf-8';
+
+/// Imports
+@forward './util';
+@forward './vars';