@appartmint/mint 2.10.12 → 2.10.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@appartmint/mint",
   "author": "App Art Mint LLC",
-  "version": "2.10.12",
+  "version": "2.10.16",
   "license": "MIT",
   "description": "The front-end TS/SCSS framework of App Art Mint",
   "keywords": [

package/src/scss/imports/components/section/_flex.scss

@@ -0,0 +1,69 @@
+/// _flex.scss - Flex section styles
+/// @author App Art Mint LLC
+///
+/// @group Section
+@charset 'utf-8';
+
+/// Imports
+@use '../../util' as *;
+
+/// Flex Section Styles
+#{class(flex)} {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	justify-content: flex-start;
+	gap: css-var(flex-gap);
+
+	&#{class(row)} {
+		&-reverse {
+			flex-direction: row-reverse;
+		}
+	}
+
+	&#{class(column)} {
+		flex-direction: column;
+
+		&-reverse {
+			flex-direction: column-reverse;
+		}
+	}
+	
+	&#{class(wrap)} {
+		flex-wrap: wrap;
+
+		&-reverse {
+			flex-wrap: wrap-reverse;
+		}
+	}
+
+	&#{class(center)} {
+		justify-content: center;
+	}
+
+	&#{class(end)} {
+		justify-content: flex-end;
+	}
+
+	&#{class(between)} {
+		justify-content: space-between;
+	}
+
+	&#{class(around)} {
+		justify-content: space-around;
+	}
+
+	&#{class(even)} {
+		justify-content: space-evenly;
+	}
+
+	&#{class(align)} {
+		&-start {
+			align-items: flex-start;
+		}
+
+		&-end {
+			align-items: flex-end;
+		}
+	}
+}

package/src/scss/imports/components/section/_full.scss

@@ -1,14 +1,14 @@
-/// _video.scss - Video styles
+/// _full.scss - Full section styles
 /// @author App Art Mint LLC
 ///
-/// @group Video
+/// @group Section
 @charset 'utf-8';
 
 /// Imports
 @use 'sass:map';
 @use '../../util' as *;
 
-/// Video Styles
+/// Full Section Styles
 #{class(section-full)} {
 	display: flex;
 	flex-direction: column;

package/src/scss/imports/{global → components/section}/_grid.scss

@@ -1,5 +1,5 @@
 /// Imports
-@use '../util' as *;
+@use '../../util' as *;
 
 /// Grid mixins
 @mixin grid-2 {

package/src/scss/imports/components/section/_index.scss

@@ -4,5 +4,7 @@
 /// @group Sections
 @charset 'utf-8';
 
+@use './flex';
 @use './full';
+@use './grid';
 @use './landing';

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

@@ -2,9 +2,7 @@
 @use './angular';
 @use './animations';
 @use './aspect';
-@use './flex';
 @use './global';
-@use './grid';
 @use './icons';
 @use './inputs';
 @use './structure';

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

@@ -48,6 +48,10 @@
 	@include shades(warning, $warning);
 	@include shades(info, $info);
 
+	/// Structure
+	@include css-var(spacing, 0.25rem);
+	@include css-var(flex-gap, calc(css-var(spacing) * 2));
+
 	/// Tooltips
 	@include css-var-ref(tooltip-fore, fore);
 	@include css-var-ref(tooltip-back, black-2);

package/src/scss/imports/util/_util.scss

@@ -873,36 +873,6 @@ $bootstrap5: false !default;
 	}
 }
 
-/// Generates flex utility classes
-/// @group Mixins
-@mixin flex-util () {
-	& {
-		display: flex;
-		align-items: center;
-		justify-content: flex-start;
-		flex-wrap: wrap;
-
-		&#{class(center)} {
-			justify-content: center;
-		}
-
-		&#{class(end)} {
-			justify-content: flex-end;
-		}
-
-		&#{class(between)} {
-			justify-content: space-between;
-		}
-
-		&#{class(around)} {
-			justify-content: space-around;
-		}
-
-		&#{class(even)} {
-			justify-content: space-evenly;
-		}
-	}
-}
 
 /// Selector for all headers
 /// @group Mixins

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

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