@appartmint/mint 0.12.0 → 0.12.1

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

@@ -3,117 +3,20 @@
 
 /// Structure styles
 #{class(pad)} {
-	@include break-util(padding, 1rem, 0);
-}
-
-#{class(margin)} {
-	@include break-util(margin, 1rem, 0);
-
-	&-auto {
-		margin-left: auto;
-		margin-right: auto;
-
-		&-v {
-			margin: 1rem auto;
-
-			@for $i from 0 through 6 {
-				&#{$i} {
-					margin: 1rem * $i auto;
-				}
-			}
-		}
-
-		&-t {
-			margin-top: 1rem;
-			margin-left: auto;
-			margin-right: auto;
-
-			@for $i from 0 through 6 {
-				&#{$i} {
-					margin-top: 1rem * $i;
-					margin-left: auto;
-					margin-right: auto;
-				}
-			}
-		}
-
-		&-b {
-			margin-bottom: 1rem;
-			margin-left: auto;
-			margin-right: auto;
-
-			@for $i from 0 through 6 {
-				&#{$i} {
-					margin-bottom: 1rem * $i;
-					margin-left: auto;
-					margin-right: auto;
-				}
-			}
-		}
-	}
-
-	&-v {
-		margin-top: 1rem;
-		margin-bottom: 1rem;
-
-		@for $i from 0 through 6 {
-			&#{$i} {
-				margin-top: 1rem * $i;
-				margin-bottom: 1rem * $i;
-			}
-		}
-	}
+	@include box-util(padding, 1rem);
+	@include break-util(padding, 0.5rem, 0);
 
-	&-t {
-		margin-top: 1rem;
-
-		@for $i from 0 through 6 {
-			&#{$i} {
-				margin-top: 1rem * $i;
-			}
-		}
-	}
-
-	&-b {
-		margin-bottom: 1rem;
-
-		@for $i from 0 through 6 {
-			&#{$i} {
-				margin-bottom: 1rem * $i;
-			}
-		}
-	}
-
-	&-h {
-		margin-left: 1rem;
-		margin-right: 1rem;
-
-		@for $i from 0 through 6 {
-			&#{$i} {
-				margin-left: 1rem * $i;
-				margin-right: 1rem * $i;
-			}
-		}
-	}
-
-	&-l {
-		margin-left: 1rem;
-
-		@for $i from 0 through 6 {
-			&#{$i} {
-				margin-left: 1rem * $i;
-			}
-		}
+	@include break(xs) {
+		@include break-util(padding, 1rem, 0);
 	}
+}
 
-	&-r {
-		margin-right: 1rem;
+#{class(margin)} {
+	@include box-util(margin, 1rem);
+	@include break-util(margin, 0.5rem, 0);
 
-		@for $i from 0 through 6 {
-			&#{$i} {
-				margin-right: 1rem * $i;
-			}
-		}
+	@include break(xs) {
+		@include break-util(margin, 1rem, 0);
 	}
 }
 
@@ -225,4 +128,4 @@ section {
 
 #{class(right)} {
 	float: right;
-}
+}

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

@@ -566,6 +566,126 @@ $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 (type-of($prop) != 'string') {
+		@error 'The box-util mixin requires a string for the $prop argument.';
+	}
+
+	&-auto {
+		#{$prop}-left: auto;
+		#{$prop}-right: auto;
+
+		&-v {
+			#{$prop}: $val auto;
+
+			@for $i from 0 through 6 {
+				&#{$i} {
+					#{$prop}: $val * $i auto;
+				}
+			}
+		}
+
+		&-t {
+			#{$prop}-top: $val;
+			#{$prop}-left: auto;
+			#{$prop}-right: auto;
+
+			@for $i from 0 through 6 {
+				&#{$i} {
+					#{$prop}-top: $val * $i;
+					#{$prop}-left: auto;
+					#{$prop}-right: auto;
+				}
+			}
+		}
+
+		&-b {
+			#{$prop}-bottom: $val;
+			#{$prop}-left: auto;
+			#{$prop}-right: auto;
+
+			@for $i from 0 through 6 {
+				&#{$i} {
+					#{$prop}-bottom: $val * $i;
+					#{$prop}-left: auto;
+					#{$prop}-right: auto;
+				}
+			}
+		}
+	}
+
+	&-v {
+		#{$prop}-top: $val;
+		#{$prop}-bottom: $val;
+
+		@for $i from 0 through 6 {
+			&#{$i} {
+				#{$prop}-top: $val * $i;
+				#{$prop}-bottom: $val * $i;
+			}
+		}
+	}
+
+	&-t {
+		#{$prop}-top: $val;
+
+		@for $i from 0 through 6 {
+			&#{$i} {
+				#{$prop}-top: $val * $i;
+			}
+		}
+	}
+
+	&-b {
+		#{$prop}-bottom: $val;
+
+		@for $i from 0 through 6 {
+			&#{$i} {
+				#{$prop}-bottom: $val * $i;
+			}
+		}
+	}
+
+	&-h {
+		#{$prop}-left: $val;
+		#{$prop}-right: $val;
+
+		@for $i from 0 through 6 {
+			&#{$i} {
+				#{$prop}-left: $val * $i;
+				#{$prop}-right: $val * $i;
+			}
+		}
+	}
+
+	&-l {
+		#{$prop}-left: $val;
+
+		@for $i from 0 through 6 {
+			&#{$i} {
+				#{$prop}-left: $val * $i;
+			}
+		}
+	}
+
+	&-r {
+		#{$prop}-right: $val;
+
+		@for $i from 0 through 6 {
+			&#{$i} {
+				#{$prop}-right: $val * $i;
+			}
+		}
+	}
+}
+
+
 /// Generates a property with a fluid value between specified screen sizes
 /// @group Mixins
 ///