@oardi/css-utils 0.123.0 → 0.125.0

package/package.json

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

package/readme.md

@@ -4,8 +4,8 @@ CSS Utils is a lightweight SCSS toolkit with utility classes, responsive helpers
 
 ## What it includes
 
-- Utilities for colors, typography, spacing, display, flex and grid
-- Mobile-first responsive variants for layout and spacing
+- Utilities for colors, typography, spacing, sizing, positioning, display, flex and grid
+- Mobile-first responsive variants for layout, sizing, positioning and spacing
 - Components for buttons, cards, forms, badges, tabs, toasts and more
 - Global and component-specific design tokens
 - A predefined cascade order: `reset`, `base`, `components`, then `utilities`

package/scss/flex-responsive.scss

@@ -73,7 +73,29 @@
 			}
 
 			// align self
-			// TODO
+			.align-self-#{$bp}-auto {
+				align-self: auto;
+			}
+
+			.align-self-#{$bp}-start {
+				align-self: start;
+			}
+
+			.align-self-#{$bp}-end {
+				align-self: end;
+			}
+
+			.align-self-#{$bp}-center {
+				align-self: center;
+			}
+
+			.align-self-#{$bp}-baseline {
+				align-self: baseline;
+			}
+
+			.align-self-#{$bp}-stretch {
+				align-self: stretch;
+			}
 
 			// fill
 			.flex-#{$bp}-fill {
@@ -106,6 +128,35 @@
 			.flex-#{$bp}-nowrap {
 				flex-wrap: nowrap;
 			}
+
+			// align content
+			.align-content-#{$bp}-start {
+				align-content: start;
+			}
+
+			.align-content-#{$bp}-end {
+				align-content: end;
+			}
+
+			.align-content-#{$bp}-center {
+				align-content: center;
+			}
+
+			.align-content-#{$bp}-between {
+				align-content: space-between;
+			}
+
+			.align-content-#{$bp}-around {
+				align-content: space-around;
+			}
+
+			.align-content-#{$bp}-evenly {
+				align-content: space-evenly;
+			}
+
+			.align-content-#{$bp}-stretch {
+				align-content: stretch;
+			}
 		}
 	}
 }

package/scss/flex.scss

@@ -72,7 +72,29 @@
 	}
 
 	// align self
-	// TODO
+	.align-self-auto {
+		align-self: auto;
+	}
+
+	.align-self-start {
+		align-self: start;
+	}
+
+	.align-self-end {
+		align-self: end;
+	}
+
+	.align-self-center {
+		align-self: center;
+	}
+
+	.align-self-baseline {
+		align-self: baseline;
+	}
+
+	.align-self-stretch {
+		align-self: stretch;
+	}
 
 	.flex-1 {
 		flex: 1 1 0;
@@ -109,6 +131,33 @@
 	.flex-nowrap {
 		flex-wrap: nowrap;
 	}
+
 	// align-content
-	// TODO
+	.align-content-start {
+		align-content: start;
+	}
+
+	.align-content-end {
+		align-content: end;
+	}
+
+	.align-content-center {
+		align-content: center;
+	}
+
+	.align-content-between {
+		align-content: space-between;
+	}
+
+	.align-content-around {
+		align-content: space-around;
+	}
+
+	.align-content-evenly {
+		align-content: space-evenly;
+	}
+
+	.align-content-stretch {
+		align-content: stretch;
+	}
 }

package/scss/utilities.scss

@@ -4,7 +4,7 @@
 @use './display.scss';
 @use './theme.scss' as theme;
 
-$-widths: (
+$-sizes: (
 	100: 100%,
 	75: 75%,
 	60: 60%,
@@ -15,6 +15,29 @@ $-widths: (
 	auto: auto,
 );
 
+$-insets: (
+	0: 0,
+	25: 25%,
+	50: 50%,
+	75: 75%,
+	100: 100%,
+	auto: auto,
+);
+
+$-inset-properties: (
+	inset: inset,
+	inset-inline: inset-inline,
+	inset-block: inset-block,
+	inset-inline-start: inset-inline-start,
+	inset-inline-end: inset-inline-end,
+	inset-block-start: inset-block-start,
+	inset-block-end: inset-block-end,
+	top: top,
+	right: right,
+	bottom: bottom,
+	left: left,
+);
+
 $-overflow-wrap-values: normal, break-word, anywhere;
 
 // Guard the dynamic value: a var() declaration can otherwise become invalid only
@@ -277,33 +300,30 @@ $-overflow-wrap-values: normal, break-word, anywhere;
 		min-width: 0;
 	}
 
-	@each $name, $value in $-widths {
+	@each $name, $value in $-sizes {
 		.w-#{$name} {
 			width: $value;
 		}
-	}
 
-	// TODO - add several heights
-	.h-100 {
-		height: 100%;
-	}
-
-	// TODO - check if more classes are needed
-	// arrange elements top, start, bottom, end
-	.top-0 {
-		top: 0px;
-	}
+		.h-#{$name} {
+			height: $value;
+		}
 
-	.right-0 {
-		right: 0px;
-	}
+		.inline-size-#{$name} {
+			inline-size: $value;
+		}
 
-	.bottom-0 {
-		bottom: 0px;
+		.block-size-#{$name} {
+			block-size: $value;
+		}
 	}
 
-	.left-0 {
-		left: 0px;
+	@each $name, $value in $-insets {
+		@each $class-name, $property in $-inset-properties {
+			.#{$class-name}-#{$name} {
+				#{$property}: $value;
+			}
+		}
 	}
 
 	.fixed-top {
@@ -333,10 +353,30 @@ $-overflow-wrap-values: normal, break-word, anywhere;
 	// width with breakpoints
 	@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
 		@media (min-width: #{$bp-value}) {
-			@each $name, $value in $-widths {
+			@each $name, $value in $-sizes {
 				.w-#{$bp}-#{$name} {
 					width: $value;
 				}
+
+				.h-#{$bp}-#{$name} {
+					height: $value;
+				}
+
+				.inline-size-#{$bp}-#{$name} {
+					inline-size: $value;
+				}
+
+				.block-size-#{$bp}-#{$name} {
+					block-size: $value;
+				}
+			}
+
+			@each $name, $value in $-insets {
+				@each $class-name, $property in $-inset-properties {
+					.#{$class-name}-#{$bp}-#{$name} {
+						#{$property}: $value;
+					}
+				}
 			}
 		}
 	}