@appartmint/css-mint 0.0.20 → 0.0.21

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@appartmint/css-mint",
 	"author": "App Art Mint LLC",
-	"version": "0.0.20",
+	"version": "0.0.21",
 	"type": "module",
 	"license": "MIT",
 	"description": "Styles by App Art Mint",

package/src/components/ui/_image.scss

@@ -0,0 +1,37 @@
+/// _image.scss - Image styles
+/// @author App Art Mint LLC
+///
+/// @group Widget
+@charset 'utf-8';
+
+/// Imports
+@use '../../util' as *;
+
+/// A basic image
+#{class(image)} {
+
+    /// A placeholder image warning
+    &#{class(error)} {
+        &::after {
+            content: '❌ Image failed to load. This is a placeholder.';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            padding: 0 $image-shadow-size $image-shadow-size $image-shadow-size;
+            background: css-var($shadow-color);
+            box-shadow: 0 0 $image-shadow-size $image-shadow-size css-var($shadow-color);
+            text-align: center;
+        }
+    }
+
+    img {
+        display: block;
+    }
+}
+
+/// Banner images
+#{class(banner)} {
+	position: relative;
+	width: 100%;
+}

package/src/components/ui/button.scss

@@ -0,0 +1,321 @@
+/// button.scss - Button styles
+/// @author App Art Mint LLC
+///
+/// @group UI
+@charset 'utf-8';
+
+/// Imports
+@use '../../util' as *;
+
+:root {
+	@include css-var(btn-pv, calc(css-var(gap) * 2));
+	@include css-var(btn-ph, calc(css-var(gap) * 4));
+	@include css-var-ref(btn-br, br);
+	@include css-var-ref(btn-bw, bw);
+	@include css-var-ref(btn-bc, brand-4);
+	@include css-var-ref(btn-fg, fg);
+	@include css-var-ref(btn-fg-hover, back);
+	@include css-var-ref(btn-fg-alt, btn-bc);
+	@include css-var-ref(btn-fg-alt-hover, btn-fg-hover);
+	@include css-var-ref(btn-bg, brand-2);
+	@include css-var-ref(btn-bg-hover, btn-bc);
+	@include css-var-ref(btn-bg-alt, clear);
+	@include css-var-ref(btn-bg-alt-hover, accent-2);
+
+	@include css-var(pill-pv, 0);
+	@include css-var(pill-ph, calc(css-var(gap) * 3));
+	@include css-var-ref(pill-br, br);
+}
+
+button,
+a[routerLink] {
+	cursor: pointer;
+}
+
+a,
+button,
+#{class(btn)},
+#{class(btn-icon)},
+#{class(pill)} {
+	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;
+		}
+
+		&:only-child {
+			margin: 0;
+		}
+	}
+}
+
+/// All buttons
+#{class(btn)},
+#{class(pill)},
+#{class(btn-group)},
+#{class(btn-icon)} {
+	flex-shrink: 0;
+}
+
+#{class(btn)},
+#{class(btn-group)} {
+    border-radius: css-var(btn-br);
+}
+
+#{class(btn)},
+#{class(pill)},
+#{class(btn-icon)} {
+	width: fit-content;
+	max-width: 100%;
+	text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+	user-select: none;
+    transition-property: color, background-color, border-color;
+	transition-duration: time(default);
+}
+
+#{class(btn)},
+#{class(pill)},
+#{class(btn-group)} {
+    display: inline-block;
+    color: css-var(btn-fg);
+    background: css-var(btn-bg);
+    border: css-var(btn-bw) solid css-var(btn-bc);
+    text-align: center;
+
+    @include break(xs) {
+        width: fit-content;
+    }
+
+    @include states(hover, focus, active, mint-active) {
+        color: css-var(btn-fg-hover);
+        background: css-var(btn-bg-hover);
+
+		i {
+			color: inherit !important;
+		}
+    }
+
+    &#{class(reverse)} {
+		color: css-var(btn-fg-hover);
+		background: css-var(btn-bg-hover);
+
+		@include states(hover, focus, active, mint-active) {
+			color: css-var(btn-fg);
+    		background: css-var(btn-bg);
+		}
+	}
+
+	&#{class(alt)} {
+        color: css-var(btn-fg-alt);
+        background: css-var(btn-bg-alt);
+
+        @include states(hover, focus, active, mint-active) {
+            color: css-var(btn-fg-alt-hover);
+            background: css-var(btn-bg-alt-hover);
+            border-color: css-var(btn-bg-alt-hover);
+        }
+
+		&#{class(reverse)} {
+			color: css-var(btn-fg-alt-hover);
+			background: css-var(btn-bg-alt-hover);
+			border-color: css-var(btn-bg-alt-hover);
+
+			@include states(hover, focus, active, mint-active) {
+				color: css-var(btn-bc);
+				background: css-var(btn-bg-alt);
+				border-color: css-var(btn-bg-alt);
+			}
+		}
+    }
+
+	/// Fix for browsers injecting their own tel links
+	a {
+		color: inherit;
+	
+		&:hover {
+			color: inherit;
+		}
+	
+		i {
+			display: none;
+		}
+	}
+}
+
+/// Default buttons
+#{class(btn)} {
+    padding: css-var(btn-pv) css-var(btn-ph);
+	cursor: pointer;
+
+	/// Icon buttons
+	&-icon {
+		display: block;
+		text-align: center;
+		background: none;
+		border: none;
+
+		@include states(hover, focus, active, mint-active) {
+			i {
+				color: css-var(btn-bg-alt-hover);
+			}
+		}
+
+		@include break(xs) {
+			display: inline-block;
+		}
+
+		&#{class(lg)} {
+			i {
+				font-size: 4rem;
+			}
+		}
+
+		i {
+			display: inline-flex;
+			align-items: center;
+			margin: 0 !important;
+			color: css-var(btn-bc);
+			font-size: 1.5rem;
+
+			&::before {
+				transition: color time(default);
+				padding: 2px;
+			}
+		}
+	}
+
+	/// Button groups
+	&-group {
+		display: flex;
+		width: fit-content;
+		max-width: 100%;
+		margin: auto;
+		padding: 0;
+		overflow: visible;
+		transition: all time(default);
+
+		& > * {
+			&:first-child {
+				&, & button {
+					padding: css-var(btn-pv) 0 css-var(btn-pv) css-var(btn-ph);
+					border-top-left-radius: css-var(btn-br);
+					border-bottom-left-radius: css-var(btn-br);
+				}
+			}
+
+			&:last-child {
+				&, & button {
+					padding: css-var(btn-pv) css-var(btn-ph) css-var(btn-pv) 0;
+					border-top-right-radius: css-var(btn-br);
+					border-bottom-right-radius: css-var(btn-br);
+				}
+			}
+		}
+
+		button {
+			width: 100%;
+			border: none;
+			color: inherit;
+			background: transparent;
+
+			@include states(hover, focus, active, mint-active) {
+				background: css-var(brand-5);
+			}
+		}
+	}
+
+	/// Submit buttons
+    &-submit {
+        &#{class(success)} {
+            &[disabled] {
+                filter: none !important;
+            }
+        }
+    }
+}
+
+/// Select button
+#{class(select)} {
+	@extend #{class(btn)};
+}
+
+/// Pill buttons
+#{class(pill)} {
+    padding: css-var(pill-pv) css-var(pill-ph);
+	border-radius: css-var(pill-br);
+    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;
+	overflow: hidden;
+
+	@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/components/ui/index.scss

@@ -1 +1,2 @@
+@use './button';
 //@use './tooltip';

package/src/components/ui/tooltip.scss

@@ -1,7 +1,7 @@
 /// tooltip.scss - Tooltip styles
 /// @author App Art Mint LLC
 ///
-/// @group Ui
+/// @group UI
 @charset 'utf-8';
 
 /// Imports

package/src/components/widget/_panel.scss

@@ -0,0 +1,104 @@
+/// _panel.scss - Panel styles
+/// @author App Art Mint LLC
+///
+/// @group Widget
+@charset 'utf-8';
+
+/// Imports
+@use 'sass:math';
+@use '../../util' as *;
+
+/// Panel Styles
+#{class(panel)} {
+	&#{class(right)} {
+		#{class(panel-wrapper)} {
+			top: css-var(header-height);
+			right: -100%;
+			left: unset;
+
+			&#{class(open)} {
+				right: 0;
+			}
+		}
+	}
+
+	&#{class(bottom)} {
+		#{class(panel-wrapper)} {
+			top: unset;
+			bottom: -100%;
+
+			&#{class(open)} {
+				top: unset;
+				bottom: 0;
+			}
+		}
+	}
+
+	&#{class(left)} {
+		#{class(panel-wrapper)} {
+			top: css-var(header-height);
+			left: -100%;
+
+			&#{class(open)} {
+				left: 0;
+			}
+		}
+	}
+
+	&#{class(tray)} {
+		#{class(panel-wrapper)} {
+			gap: 1rem;
+
+			@include break(sm) {
+				max-width: break(xs);
+			}
+		}
+	}
+
+	#{class(panel-wrapper)} {
+		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));
+		z-index: -2;
+		background: css-var(header-back);
+		transition-duration: time(default);
+		transition-property: top, right, bottom, left;
+		overflow: auto;
+
+		&#{class(open)} {
+			top: css-var(header-height);
+		}
+
+		nav {
+			flex-grow: 1;
+			height: auto;
+			overflow: visible;
+			background: css-var(back);
+
+			@include break(xl) {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			&> :last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+
+	#{class(title)} {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+
+		& > * {
+			margin: 0;
+		}
+	}
+}

package/src/components/widget/_table.scss

@@ -0,0 +1,29 @@
+/// _table.scss - Table styles
+/// @author App Art Mint LLC
+///
+/// @group Widget
+@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/components/widget/_tooltip.scss

@@ -0,0 +1,106 @@
+/// _tooltip.scss - Tooltip styles
+/// @author App Art Mint LLC
+///
+/// @group Widget
+@charset 'utf-8';
+
+/// Imports
+@use '../../util' as *;
+
+#{class(tooltip)} {
+    position: absolute;
+    max-width: css-var(tooltip-max-width);
+    border-radius: css-var(tooltip-radius);
+    padding: css-var(tooltip-padding);
+    opacity: 0;
+    color: css-var(tooltip-fore);
+    background: css-var(tooltip-back);
+    box-shadow: css-var(tooltip-shadow-color) css-var(tooltip-shadow-size);
+    font-size: css-var(tooltip-font-size);
+    line-height: css-var(tooltip-line-height);
+    transition: opacity 0.3s;
+	user-select: none;
+	pointer-events: none;
+    white-space: nowrap;
+
+    &#{class(top)}, &#{class(bottom)} {
+        &::after {
+            border-left: solid css-var(tooltip-arrow-size) transparent;
+            border-right: solid css-var(tooltip-arrow-size) transparent;
+        }
+    }
+    &#{class(left)}, &#{class(right)} {
+        &::after {
+            border-top: solid css-var(tooltip-arrow-size) transparent;
+            border-bottom: solid css-var(tooltip-arrow-size) transparent;
+        }
+    }
+
+    &#{class(top)} {
+        bottom: calc(100% + css-var(tooltip-arrow-size) + css-var(tooltip-distance));
+        left: 50%;
+        transform: translateX(-50%);
+
+        &::after {
+            bottom: calc(-1 * css-var(tooltip-arrow-size) + 1px);
+            left: 50%;
+            transform: translateX(-50%);
+            border-top: solid css-var(tooltip-arrow-size) css-var(tooltip-back);
+        }
+    }
+    &#{class(left)} {
+        right: calc(100% + css-var(tooltip-arrow-size) + css-var(tooltip-distance));
+        top: 50%;
+        transform: translateY(-50%);
+
+        &::after {
+            right: calc(-1 * css-var(tooltip-arrow-size) + 1px);
+            top: 50%;
+            transform: translateY(-50%);
+            border-left: solid css-var(tooltip-arrow-size) css-var(tooltip-back);
+        }
+    }
+    &#{class(bottom)} {
+        top: calc(100% + css-var(tooltip-arrow-size) + css-var(tooltip-distance));
+        left: 50%;
+        transform: translateX(-50%);
+
+        &::after {
+            top: calc(-1 * css-var(tooltip-arrow-size) + 1px);
+            left: 50%;
+            transform: translateX(-50%);
+            border-bottom: solid css-var(tooltip-arrow-size) css-var(tooltip-back);
+        }
+    }
+    &#{class(right)} {
+        left: calc(100% + css-var(tooltip-arrow-size) + css-var(tooltip-distance));
+        top: 50%;
+        transform: translateY(-50%);
+
+        &::after {
+            left: calc(-1 * css-var(tooltip-arrow-size) + 1px);
+            top: 50%;
+            transform: translateY(-50%);
+            border-right: solid css-var(tooltip-arrow-size) css-var(tooltip-back);
+        }
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+    }
+
+    &ped {
+        display: inline-flex;
+        position: relative;
+        width: fit-content;
+
+        @include states(hover) {
+            #{class(tooltip)} {
+                opacity: 1;
+            }
+        }
+    }
+}

package/src/components/widget/accordion.scss

@@ -0,0 +1,20 @@
+/// accordion.scss - Accordion styles
+/// @author App Art Mint LLC
+///
+/// @group Widget
+@charset 'utf-8';
+
+/// Imports
+@use '../../util' as *;
+
+/// Accordion styles
+#{class(accordion)} {
+    #{class(item)} {
+        cursor: pointer;
+
+        #{class(wrapper)} {
+            transition: height 0.3s ease;
+            overflow: hidden;
+        }
+    }
+}

package/src/components/widget/card.scss

@@ -250,7 +250,7 @@
 					opacity: 0.75;
 					mask-image: none;
 					background: linear-gradient(0deg, black, rgba(0,0,0,70%) 66%, css-var(shadow-0));
-					transition: opacity delay(default) ease-in-out;
+					transition: opacity time(default) ease-in-out;
 					z-index: -1;
 				}
 			}

package/src/components/widget/index.scss

@@ -1,2 +1,3 @@
+@use 'accordion';
 @use 'card';
 @use 'modal';

package/src/themes/index.scss

@@ -1,3 +1,4 @@
 @use './colors';
 @use './fonts';
 @use './structure';
+@use './time';

package/src/util.scss

@@ -77,31 +77,31 @@ $sub-menu-buttons: #{'button'}#{$has-controls};
 /// @type String
 $sub-menu: #{$sub-menu-buttons}#{' + ul'}#{$has-id};
 
-/// Value added to all delay variables
+/// Value added to all time variables
 /// @group Variables
 /// @type Number
-$delay-base: 0 !default;
+$time-base: 0 !default;
 
-/// Value added to all delay variables
+/// Value added to all time variables
 /// @group Variables
 /// @type Number
-$delay-step: 100 !default;
+$time-step: 100 !default;
 
-/// Delay variables
+/// Time variables
 /// @group Maps
-/// @prop {Number} $delay.instant [0] - Instant: the quickest delay; close or equal to 0
-/// @prop {Number} $delay.fast [100] - Fast: delays that happen quickly
-/// @prop {Number} $delay.med-fast [200] - Med-Fast: delays that happen faster
-/// @prop {Number} $delay.default [300] - Default: delays that are average
-/// @prop {Number} $delay.med-slow [400] - Med-Slow: delays that happen slower
-/// @prop {Number} $delay.slow [500] - Slow: delays that happen slowly
-$delay: (
-	instant: $delay-base + $delay-step * 0,
-	fast: $delay-base + $delay-step * 1,
-	med-fast: $delay-base + $delay-step * 2,
-	default: $delay-base + $delay-step * 3,
-	med-slow: $delay-base + $delay-step * 4,
-	slow: $delay-base + $delay-step * 5
+/// @prop {Number} $time.instant [0] - Instant: the quickest time; close or equal to 0
+/// @prop {Number} $time.faster [100] - Faster: times that happen faster
+/// @prop {Number} $time.fast [200] - Fast: times that happen quickly
+/// @prop {Number} $time.default [300] - Default: times that are average
+/// @prop {Number} $time.slow [400] - Slow: times that happen slower
+/// @prop {Number} $time.slower [500] - Slower: times that happen slowly
+$time: (
+	instant: $time-base + $time-step * 0,
+	faster: $time-base + $time-step * 1,
+	fast: $time-base + $time-step * 2,
+	default: $time-base + $time-step * 3,
+	slow: $time-base + $time-step * 4,
+	slower: $time-base + $time-step * 5
 ) !default;
 
 /// Breakpoint variables
@@ -338,17 +338,17 @@ $break: (
 	@return math.div($dividend * 100%, $divisor);
 }
 
-/// Returns the requested delay value as ms
+/// Returns the requested time value as ms
 /// @group Functions
 ///
-/// @param {Number} $key - the key of the delay to use
-/// @return {Number} - the delay value as ms
-@function delay($key) {
-	@if not(map.has-key($delay, $key)) {
-		@error 'The delay function requires one of the following values: #{map-keys($delay)}';
+/// @param {Number} $key - the key of the time to use
+/// @return {Number} - the time value as ms
+@function time($key) {
+	@if not(map.has-key($time, $key)) {
+		@error 'The time function requires one of the following values: #{map-keys($time)}';
 	}
 
-	@return ms(map.get($delay, $key));
+	@return ms(map.get($time, $key));
 }
 
 /// Returns the requested breakpoint value as px