@appartmint/css-mint 0.0.17 → 0.0.19

package/package.json

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

package/src/components/index.scss

@@ -1,3 +1,4 @@
 @use './form';
+@use './section';
 @use './ui';
 @use './widget';

package/src/components/section/grid.scss

@@ -0,0 +1,21 @@
+/// grid.scss - Grid styles
+/// @author App Art Mint LLC
+///
+/// @group Section
+@charset 'utf-8';
+
+/// Imports
+@use '../../util' as *;
+
+:root {
+	@include css-var-ref(grid-gap, gap);
+	@include css-var-ref(grid-fit-w, xs);
+}
+
+#{class(grid)} {
+	&-fit {
+		display: grid;
+		grid-template-columns: repeat(minmax(min(css-var(grid-fit-w), 100%), 1fr));
+		gap: css-var(grid-gap);
+	}
+}

package/src/components/section/index.scss

@@ -0,0 +1 @@
+@use './grid';

package/src/components/widget/card.scss

@@ -0,0 +1,336 @@
+/// card.scss - Card styles
+/// @author App Art Mint LLC
+///
+/// @group Widget
+@charset 'utf-8';
+
+/// Imports
+@use 'sass:math';
+@use '../../util' as *;
+
+:root {
+	@include css-var-ref(card-r, br);
+	@include css-var-ref(card-shadow-s, shadow-s);
+	@include css-var-ref(card-shadow-c, shadow-c);
+}
+
+/// Card Styles
+#{class(card)} {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	height: 100%;
+	max-width: 100%;
+	margin: 0;
+	border-radius: css-var(card-r);
+	box-shadow: css-var(card-shadow-s) css-var(card-shadow-c);
+
+	@include break(sm) {
+		flex-direction: row;
+
+		&#{class(reverse)} {
+			flex-direction: row-reverse;
+		}
+	}
+
+	&:has(#{class(carousel)}) {
+		box-shadow: none;
+
+		#{class(content)} {
+			box-shadow: css-var(card-shadow-s) css-var(card-shadow-c);
+		}
+	}
+
+	&#{class(center)} {
+		@mixin title {
+			#{class(title)} {
+				justify-content: center;
+				text-align: center;
+
+				& > div {
+					width: auto;
+				}
+			}
+		}
+
+		@mixin content {
+			#{class(content)} {
+				& > * {
+					text-align: center;
+				}
+			}
+		}
+
+		@mixin buttons {
+			#{class(buttons)} {
+				justify-content: center;
+			}
+		}
+
+		@include title;
+		@include content;
+		@include buttons;
+
+		&-title {
+			@include title;
+		}
+
+		&-content {
+			@include content;
+		}
+
+		&-btns {
+			@include buttons;
+		}
+	}
+
+	&#{class(stagger)} {
+		position: relative;
+		width: 100%;
+
+		@include break(sm) {
+			flex-direction: row;
+			border-radius: 0;
+			box-shadow: none;
+			overflow: visible;
+
+			& > #{class(image)} {
+				width: calc(50% + css-var(card-padding));
+				height: fit-content;
+				margin-right: calc(css-var(card-padding) * -2);
+				border-radius: css-var(card-radius);
+
+				img {
+					height: 100%;
+					object-fit: cover;
+				}
+			}
+
+			& > #{class(content)} {
+				height: fit-content;
+				width: calc(50% + css-var(card-padding));
+				margin-top: calc(2 * css-var(card-padding));
+				border-radius: css-var(card-radius);
+				box-shadow: css-var(card-shadow-size) css-var(card-shadow-color);
+			}
+		}
+
+		&#{class(reverse)} {
+			@include break(sm) {
+				flex-direction: row-reverse;
+
+				& > #{class(image)} {
+					margin-right: 0;
+					margin-left: calc(css-var(card-padding) * -2);
+				}
+			}
+		}
+	}
+
+	& > #{class(image)} {
+		overflow: hidden;
+
+		@include break(sm) {
+			width: 50%;
+		}
+
+		&:only-child {
+			width: 100%;
+		}
+
+		& + #{class(content)} {
+			@include break(sm) {
+				width: 50%;
+			}
+		}
+	}
+
+	#{class(content)} {
+		display: flex;
+		flex-direction: column;
+		gap: math.div($grid-gap, 2);
+		position: relative;
+		padding: css-var(card-padding);
+		background: css-var(card-back);
+		width: 100%;
+		overflow: hidden;
+
+		& > * {
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+	}
+
+	#{class(title)} {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		height: fit-content;
+		gap: css-var(card-padding);
+		text-align: center;
+		width: 100%;
+
+		@include break(xs) {
+			flex-direction: row;
+			text-align: left;
+		}
+
+		&:only-child {
+			height: 100%;
+		}
+
+		& > #{class(image)} {
+			width: 100%;
+			height: 100%;
+			max-width: css-var(card-logo-size);
+			max-height: css-var(card-logo-size);
+
+			&#{class(large)} {
+				max-width: calc(2 * css-var(card-logo-size));
+				max-height: calc(2 * css-var(card-logo-size));
+			}
+
+			img {
+				display: block;
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+			}
+		}
+
+		i {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			min-width: css-var(card-logo-size);
+			max-width: css-var(card-logo-size);
+			margin: 0;
+			font-size: calc(css-var(card-logo-size) - 1rem);
+		}
+
+		& > div {
+			width: 100%;
+
+			& > * {
+				margin: 0;
+			}
+		}
+	}
+
+	#{class(date)} {
+		text-align: center;
+
+		@include break(xs) {
+			text-align: left;
+		}
+	}
+
+	&-grid {
+		position: relative;
+		background: css-var(card-back);
+
+		&:has(#{class(image)}) {
+			#{class(content)} {
+				margin-top: 25%;
+				padding-top: 25%;
+				background: none;
+				border: none;
+
+				&::before {
+					opacity: 0;
+				}
+
+				&::after {
+					content: '';
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					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;
+					z-index: -1;
+				}
+			}
+		}
+	
+		@include states(hover) {
+			#{class(content)} {
+				&::after {
+					opacity: 1;
+				}
+			}
+		}
+	
+		#{class(image)} {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+
+			img {
+				height: 100%;
+				object-fit: contain;
+				object-position: top;
+			}
+		}
+	
+		#{class(content)} {
+			justify-content: flex-end;
+			background: css-var(shadow-0);
+
+			#{class(buttons)} {
+				margin-top: 0 !important;
+			}
+		}
+	}
+
+	&-actions {
+		#{class(content)} {
+			flex-direction: row;
+			justify-content: space-between;
+		}
+	}
+}
+
+#{class(grid)}#{class('3')},
+#{class(grid)}#{class('4')} {
+	#{class(card)} {
+		flex-direction: column !important;
+
+		& > #{class(image)} {
+			overflow: hidden;
+
+			@include break(sm) {
+				width: 100%;
+			}
+
+			& + #{class(content)} {
+				@include break(sm) {
+					width: 100%;
+				}
+			}
+		}
+
+		#{class(content)} {
+			flex-grow: 1;
+		}
+
+		#{class(title)} {
+			@include break(xs) {
+				flex-direction: column;
+			}
+		}
+
+		#{class(buttons)} {
+			margin-top: auto;
+
+			#{class(btn)} {
+				width: 100%;
+			}
+		}
+	}
+}

package/src/components/widget/index.scss

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

package/src/components/widget/modal.scss

@@ -8,7 +8,7 @@
 @use '../../util' as *;
 
 :root {
-	@include css-var-ref(modal-w, max-sm);
+	@include css-var-ref(modal-w, sm);
 }
 
 #{class(modal)} {

package/src/themes/structure.scss

@@ -20,6 +20,6 @@
 
 	/// Widths
 	@each $size, $value in $break {
-		@include css-var(max-#{$size}, #{$value}px);
+		@include css-var(#{$size}, #{$value}px);
 	}
 }

package/src/util.scss

@@ -10,31 +10,17 @@
 @use 'sass:math';
 @use 'sass:meta';
 @use 'sass:string';
+@use 'sass:selector';
 
 /// Library name
 /// @group Variables
 /// @type String
 $lib: mint !default;
 
-/// Dash - variable name separator
-/// @group Variables
-/// @type String
-$dash: #{'-'};
-
 /// Prefix added to selectors
 /// @group Variables
 /// @type String
-$pre: #{$lib}#{$dash};
-
-/// Dot - added to classes
-/// @group Variables
-/// @type String
-$dot: #{'.'};
-
-/// Hash - added to ids
-/// @group Variables
-/// @type String
-$hash: #{'#'};
+$pre: #{$lib}-;
 
 /// CSS-selector for disabled elements
 /// @group Variables
@@ -133,27 +119,9 @@ $break: (
 	xl: 1440
 ) !default;
 
-/// True if Bootstrap5 is used in the project
-/// @group Variables
-/// @type Boolean
-$bootstrap5: false !default;
-
-@if ($bootstrap5) {
-	$break: (
-		sm: 576,
-		md: 768,
-		lg: 992,
-		xl: 1200,
-		xxl: 1400
-	) !default;
-}
-
 /// Prefixes the provided string with the library name if it isn't already
 /// @group Functions
 ///
-/// @example scss - prefix function
-///     prefix(header) // -> sun-header
-///
 /// @param {String} $base - the string to be prefixed
 /// @return {String} - a prefixed string
 @function prefix ($base) {
@@ -173,9 +141,6 @@ $bootstrap5: false !default;
 /// Prefixes the provided string with two dashes and the library name if it isn't already
 /// @group Functions
 ///
-/// @example scss - css-prefix function
-///     css-prefix(background) // -> --sun-background
-///
 /// @param {String} $base - the string to be prefixed
 /// @return {String} - a prefixed string
 @function css-prefix ($base) {
@@ -183,19 +148,16 @@ $bootstrap5: false !default;
 		@error 'The css-prefix function requires a string value.';
 	}
 
-	@while (string.index($base, $dash) == 1) {
+	@while (string.index($base, '-') == 1) {
 		$base: string.slice($base, 2);
 	}
 
-	@return #{$dash}#{$dash}#{prefix($base)};
+	@return '--#{prefix($base)}';
 }
 
 /// Creates a CSS-var call for the prefixed `$base`
 /// @group Functions
 ///
-/// @example scss - css-var function
-///     css-var(background) // -> var(--sun-background)
-///
 /// @param {String} $base - the CSS-var to create a call for
 /// @return {String} - a CSS-var call
 @function css-var ($base) {
@@ -213,9 +175,6 @@ $bootstrap5: false !default;
 /// Creates a class selector with the library prefix
 /// @group Functions
 ///
-/// @example scss - class function
-///     class(open) // -> .sun-open
-///
 /// @param {String} $base - the name of the class
 /// @return {String} - a class selector
 @function class($base) {
@@ -223,15 +182,12 @@ $bootstrap5: false !default;
 		@error 'The class function requires a string value.';
 	}
 
-	@return #{$dot}#{prefix($base)};
+	@return '.#{prefix($base)}';
 }
 
 /// Creates an id selector with the library prefix
 /// @group Functions
 ///
-/// @example scss - id function
-///     id(header) // -> #sun-header
-///
 /// @param {String} $base - the name of the id
 /// @param {String} $op - the comparison operator
 /// @return {String} - an id selector
@@ -249,7 +205,7 @@ $bootstrap5: false !default;
 	}
 
 	@if ($op == '=') {
-		@return #{$hash}#{prefix($base)};
+		@return '##{prefix($base)}';
 	}
 
 	@return '[id#{$op}#{prefix($base)}]';
@@ -258,9 +214,6 @@ $bootstrap5: false !default;
 /// Creates an aria-controls selector with the library prefix
 /// @group Functions
 ///
-/// @example scss - controls function
-///     controls(header) // -> [aria-controls=sun-header]
-///
 /// @param {String} $id - the id of the controlled element
 /// @param {String} $op - the comparison operator
 /// @return {String} - an aria-controls selector
@@ -283,9 +236,6 @@ $bootstrap5: false !default;
 /// Creates an aria-expanded selector
 /// @group Functions
 ///
-/// @example scss - expanded function
-///     expanded(true) // -> [aria-expanded=true]
-///
 /// @param {Bool} $bool - the value of the selector
 /// @return {String} - an aria-expanded selector
 @function expanded ($bool) {
@@ -307,9 +257,6 @@ $bootstrap5: false !default;
 /// Creates an aria-hidden selector
 /// @group Functions
 ///
-/// @example scss - hidden function
-///     hidden(true) // -> [aria-hidden=true]
-///
 /// @param {Bool} $bool - the value of the selector
 /// @return {String} - an aria-hidden selector
 @function hidden ($bool) {
@@ -331,9 +278,6 @@ $bootstrap5: false !default;
 /// Converts a number to ms
 /// @group Functions
 ///
-/// @example scss - ms function
-///     ms(100) // -> 100ms
-///
 /// @param {Number} $val - the number of ms to return
 /// @return {Number} the number as ms
 @function ms ($val) {
@@ -347,9 +291,6 @@ $bootstrap5: false !default;
 /// Converts a number to px
 /// @group Functions
 ///
-/// @example scss - px function
-///     px(100) // -> 100px
-///
 /// @param {Number} $val - the number of px to return
 /// @return {Number} - the number as px
 @function px ($val) {
@@ -363,9 +304,6 @@ $bootstrap5: false !default;
 /// Removes the unit from the given value
 /// @group Functions
 ///
-/// @example scss - strip-unit function
-///     strip-unit(100px) // -> 100
-///
 /// @param {Number} $val - the value to strip
 /// @return {Number} - the number without units
 @function strip-unit($val) {
@@ -379,9 +317,6 @@ $bootstrap5: false !default;
 /// Returns the percentage of the given values
 /// @group Functions
 ///
-/// @example scss - percent function
-///    percent(100, 200) // -> 50%
-///
 /// @param {Number} $dividend - the value that will be devided
 /// @param {Number} $divisor - the value that will devided by
 /// @return {Number} - the percentage of the given values
@@ -406,9 +341,6 @@ $bootstrap5: false !default;
 /// Returns the requested delay value as ms
 /// @group Functions
 ///
-/// @example scss - delay function
-///     delay(default) // -> 300ms
-///
 /// @param {Number} $key - the key of the delay to use
 /// @return {Number} - the delay value as ms
 @function delay($key) {
@@ -422,9 +354,6 @@ $bootstrap5: false !default;
 /// Returns the requested breakpoint value as px
 /// @group Functions
 ///
-/// @example scss - break function
-///     break(md) // -> 1024px
-///
 /// @param {Number} $key - the key of the breakpoint to use
 /// @return {Number} - the breakpoint value as px
 @function break($key) {
@@ -438,9 +367,6 @@ $bootstrap5: false !default;
 /// Creates a prefixed CSS var definition
 /// @group Mixins
 ///
-/// @example scss - css-var mixin
-///     @include css-var(bg, black) // -> --sun-bg: black;
-///
 /// @param {String} $key - the key of the CSS var
 /// @param {Any} $val - the value of the CSS var
 /// @output a prefixed CSS var definition
@@ -459,9 +385,6 @@ $bootstrap5: false !default;
 /// Creates a prefixed CSS var reference
 /// @group Mixins
 ///
-/// @example scss - css-var-ref mixin
-///     @include css-var-ref(fill, bg) // -> --sun-fill: var(--sun-bg);
-///
 /// @param {String} $key1 - the key of the new CSS var to define
 /// @param {String} $key2 - the key of the referenced CSS var
 /// @output a prefixed CSS var reference
@@ -476,11 +399,6 @@ $bootstrap5: false !default;
 /// Wraps the provided content in a media query
 /// @group Mixins
 ///
-/// @example scss - break mixin
-///     @include break(md) {    // ->   @media (min-width: 1024px) {
-///         display: none;      //          display: none;
-///     }                       //      }
-///
 /// @param {String} $min - the key of the breakpoint to use with min-width
 /// @param {String} $max - the key of the breakpoint to use with max-width
 /// @output the provided content wrapped in a media query
@@ -524,37 +442,6 @@ $bootstrap5: false !default;
 /// Creates utility selectors for a given property at each breakpoint
 /// @group Mixins
 ///
-/// @example scss- break-util mixin
-///     @include break-util(display, flex);     // ->   & {
-///                                             //          display: flex;
-///                                             //
-///                                             //          &-xs {
-///                                             //              display: none;
-///                                             //              @include break(xs) {
-///                                             //                  display: flex;
-///                                             //              }
-///                                             //          }
-///                                             //          &-to-xs {
-///                                             //              display: flex;
-///                                             //              @include break(xs) {
-///                                             //                  display: none;
-///                                             //              }
-///                                             //          }
-///                                             //          ...
-///                                             //          &-xl {
-///                                             //              display: none;
-///                                             //              @include break(xl) {
-///                                             //                  display: flex;
-///                                             //              }
-///                                             //          }
-///                                             //          &-to-xl {
-///                                             //              display: flex;
-///                                             //              @include break(xl) {
-///                                             //                  display: none;
-///                                             //              }
-///                                             //          }
-///                                             //      }
-///
 /// @param {String} $prop - the property to toggle
 /// @param {Any} $val - the active value of the property
 /// @param {Any} $none - the inactive value of the property
@@ -564,25 +451,22 @@ $bootstrap5: false !default;
 		@error 'The break-util mixin requires a string for the $prop argument.';
 	}
 
-	& {
-		#{$prop}: #{$val};
+	#{$prop}: #{$val};
 
-		@each $key,
-		$width in $break {
-			&-#{$key} {
-				#{$prop}: #{$none};
+	@each $key, $width in $break {
+		&-#{$key} {
+			#{$prop}: #{$none};
 
-				@include break($key) {
-					#{$prop}: #{$val};
-				}
+			@include break($key) {
+				#{$prop}: #{$val};
 			}
+		}
 
-			&-to-#{$key} {
-				#{$prop}: #{$val};
+		&-to-#{$key} {
+			#{$prop}: #{$val};
 
-				@include break($key) {
-					#{$prop}: #{$none};
-				}
+			@include break($key) {
+				#{$prop}: #{$none};
 			}
 		}
 	}
@@ -805,53 +689,52 @@ $bootstrap5: false !default;
 	}
 }
 
-/// TODO: Document this
+/// Wrap the content in given states
+/// @group Mixins
+/// 
+/// @param {String[]} $states - a list of states
 @mixin states ($states...) {
+	@if (list.length($states) == 0) {
+		@error 'The states mixin requires at least one state parameter.';
+	}
 	@each $state in $states {
 		@if (meta.type-of($state) != 'string') {
-			@error 'The states mixin requires a string for each state argument.';
+			@error 'The states mixin requires a string for each state parameter.';
 		}
 	}
 
+	$selectors: ();
+
 	@if (list.index($states, 'hover') != null) {
-		&:hover {
-			@content;
-		}
+		$selectors: list.append($selectors, selector.append(&, ':hover'));
 	}
 
 	@if (list.index($states, 'focus') != null) {
-		&:focus-visible {
-			@content;
-		}
+		$selectors: list.append($selectors, selector.append(&, ':focus-visible'));
 	}
 
 	@if (list.index($states, 'active') != null) {
-
-		&:active {
-			@content;
-		}
+		$selectors: list.append($selectors, selector.append(&, ':active'));
 	}
 
 	@if (list.index($states, 'mint-active') != null) {
-		&#{class(active)} {
-			@content;
-		}
+		$selectors: list.append($selectors, selector.append(&, class(active)));
 	}
 
 	@if (list.index($states, 'visited') != null) {
-		&:visited {
-			@content;
-		}
+		$selectors: list.append($selectors, selector.append(&, ':visited'));
 	}
 
 	@if (list.index($states, 'disabled') != null) {
-		&:disabled {
-			@content;
-		}
+		$selectors: list.append($selectors, selector.append(&, ':disabled'));
 	}
 
 	@if (list.index($states, 'expanded') != null) {
-		&#{expanded(true)} {
+		$selectors: list.append($selectors, selector.append(&, expanded(true)));
+	}
+
+	@at-root {
+		#{$selectors} {
 			@content;
 		}
 	}