@appartmint/mint 2.7.7 → 2.7.9

package/package.json

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

package/src/scss/imports/global/_angular.scss

@@ -34,7 +34,6 @@ app-root {
 				flex-grow: 1;
 				width: 100%;
 				padding: 0.25rem;
-
 				@include fluid-padding;
 
 				&+:not(#{prefix(partial-footer)}) {

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

@@ -36,7 +36,6 @@ body {
 }
 
 main {
-	@include fluid-padding;
 	display: flex;
 	flex-direction: column;
 	position: relative;
@@ -45,6 +44,7 @@ main {
 	min-height: calc(100dvh - css-var(header-height));
 	overflow: hidden;
 	z-index: 999;
+	@include fluid-padding;
 
 	@if (meta.type-of($root-bg-image) == 'string') {
 		&::before {

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

@@ -17,12 +17,12 @@
 	@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-ref(--amplify-components-fieldcontrol-color, --amplify-colors-font-primary);
 
 	@include css-var(--amplify-border-widths-small, $amp-border-width);
 

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

@@ -542,7 +542,9 @@ $bootstrap5: false !default;
 /// @group Mixins
 ///
 /// @example scss- break-util mixin
-///     @include break-util(display, flex);     // ->       display: flex;
+///     @include break-util(display, flex);     // ->   & {
+///                                             //          display: flex;
+///                                             //
 ///                                             //          &-xs {
 ///                                             //              display: none;
 ///                                             //              @include break(xs) {
@@ -568,6 +570,7 @@ $bootstrap5: false !default;
 ///                                             //                  display: none;
 ///                                             //              }
 ///                                             //          }
+///                                             //      }
 ///
 /// @param {String} $prop - the property to toggle
 /// @param {Any} $val - the active value of the property
@@ -578,23 +581,25 @@ $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};
+				}
 			}
 		}
 	}
@@ -602,6 +607,10 @@ $bootstrap5: false !default;
 
 /// Creates utility selectors for a box model property
 /// @group Mixins
+/// 
+/// @example scss - box-util mixin
+///    @include box-util(margin, 1rem, 0);    // ->   & {
+/// 
 @mixin box-util ($prop, $val) {
 	@if (meta.type-of($prop) != 'string') {
 		@error 'The box-util mixin requires a string for the $prop argument.';
@@ -724,13 +733,15 @@ $bootstrap5: false !default;
 /// @group Mixins
 ///
 /// @example scss - fluid mixin
-///     @include fluid(font-size, 480px, 1024px, 18px, 16px);   // ->       font-size: 16px;
+///     @include fluid(font-size, 480px, 1024px, 18px, 16px);   // ->   & {
+///                                                             //          font-size: 16px;
 ///                                                             //          @media (min-width: 480px) {
 ///                                                             //              font-size: calc(16px + 2 * ((100vw - 480px) / 544));
 ///                                                             //          }
 ///                                                             //          @media (min-width: 1024px) {
 ///                                                             //              font-size: 18px;
 ///                                                             //          }
+///                                                             //      }
 ///
 /// @param {String} $prop - the property whose value will be fluid
 /// @param {String} $min-vw - the minimum screen width of the fluid property
@@ -757,25 +768,27 @@ $bootstrap5: false !default;
 		@error 'The fluid mixin requires width and size arguments with the same units.';
 	}
 
-	@if ($base) {
-		#{$prop}: calc($base + $min-size);
-
-		@media (min-width: $min-vw) {
-			#{$prop}: calc($base + #{$min-size} + #{strip-unit($max-size - $min-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
-		}
-
-		@media (min-width: $max-vw) {
-			#{$prop}: calc($base + $max-size);
-		}
-	} @else {
-		#{$prop}: $min-size;
-
-		@media (min-width: $min-vw) {
-			#{$prop}: calc(#{$min-size} + #{strip-unit($max-size - $min-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
-		}
-
-		@media (min-width: $max-vw) {
-			#{$prop}: $max-size;
+	& {
+		@if ($base) {
+			#{$prop}: calc($base + $min-size);
+	
+			@media (min-width: $min-vw) {
+				#{$prop}: calc($base + #{$min-size} + #{strip-unit($max-size - $min-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+			}
+	
+			@media (min-width: $max-vw) {
+				#{$prop}: calc($base + $max-size);
+			}
+		} @else {
+			#{$prop}: $min-size;
+	
+			@media (min-width: $min-vw) {
+				#{$prop}: calc(#{$min-size} + #{strip-unit($max-size - $min-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
+			}
+	
+			@media (min-width: $max-vw) {
+				#{$prop}: $max-size;
+			}
 		}
 	}
 }
@@ -957,29 +970,31 @@ $bootstrap5: false !default;
 ///
 ///
 @mixin flex-util () {
-	display: flex;
-	align-items: center;
-	justify-content: flex-start;
-	flex-wrap: wrap;
-
-	&#{class(center)} {
-		justify-content: center;
-	}
+	& {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		flex-wrap: wrap;
+
+		&#{class(center)} {
+			justify-content: center;
+		}
 
-	&#{class(end)} {
-		justify-content: flex-end;
-	}
+		&#{class(end)} {
+			justify-content: flex-end;
+		}
 
-	&#{class(between)} {
-		justify-content: space-between;
-	}
+		&#{class(between)} {
+			justify-content: space-between;
+		}
 
-	&#{class(around)} {
-		justify-content: space-around;
-	}
+		&#{class(around)} {
+			justify-content: space-around;
+		}
 
-	&#{class(even)} {
-		justify-content: space-evenly;
+		&#{class(even)} {
+			justify-content: space-evenly;
+		}
 	}
 }
 
@@ -1033,21 +1048,23 @@ $transitions: (
 	$this: map.get($animations, &);
 	$animation: '';
 
-	@each $item in $this {
-		@if (list.index($this, $item) != 1) {
-			$animation: #{$animation},
-			;
-		}
+	& {
+		@each $item in $this {
+			@if (list.index($this, $item) != 1) {
+				$animation: #{$animation},
+				;
+			}
 
-		$animation: #{$animation}#{$item};
-	}
+			$animation: #{$animation}#{$item};
+		}
 
-	animation: $animation;
+		animation: $animation;
 
-	@each $name,
-	$items in $animations {
-		&#{class($name)} {
-			animation: $animation;
+		@each $name,
+		$items in $animations {
+			&#{class($name)} {
+				animation: $animation;
+			}
 		}
 	}
 }