@oardi/css-utils 0.72.0 → 0.72.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.72.0",
+	"version": "0.72.1",
 	"author": "Ardian Shala",
 	"homepage": "https://css-utils.oardi.com",
 	"description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",

package/scss/utilities.scss

@@ -1,6 +1,17 @@
 @use 'sass:map';
 @use './theme.scss' as theme;
 
+$-widths: (
+	100: 100%,
+	75: 75%,
+	60: 60%,
+	50: 50%,
+	40: 40%,
+	30: 30%,
+	25: 25%,
+	auto: auto,
+);
+
 @layer utilities {
 	// positions
 	@each $value in map.get(theme.$theme, positions) {
@@ -195,24 +206,10 @@
 		}
 	}
 
-	.w-100 {
-		width: 100%;
-	}
-
-	.w-60 {
-		width: 60%;
-	}
-
-	.w-50 {
-		width: 50%;
-	}
-
-	.w-30 {
-		width: 30%;
-	}
-
-	.w-40 {
-		width: 40%;
+	@each $name, $value in $-widths {
+		.w-#{$name} {
+			width: $value;
+		}
 	}
 
 	// TODO - add several heights
@@ -255,27 +252,13 @@
 		overscroll-behavior: none;
 	}
 
-	// width, height, display with breakpoints and directions
+	// width with breakpoints
 	@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
 		@media (min-width: #{$bp-value}) {
-			.w-#{$bp}-100 {
-				width: 100%;
-			}
-
-			.w-#{$bp}-60 {
-				width: 60%;
-			}
-
-			.w-#{$bp}-50 {
-				width: 50%;
-			}
-
-			.w-#{$bp}-40 {
-				width: 40%;
-			}
-
-			.w-#{$bp}-30 {
-				width: 30%;
+			@each $name, $value in $-widths {
+				.w-#{$bp}-#{$name} {
+					width: $value;
+				}
 			}
 		}
 	}