@oardi/css-utils 0.71.0 → 0.72.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.71.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/components/button.scss

@@ -148,10 +148,14 @@
 		background-color: transparent;
 		border-color: transparent;
 
-		&:hover,
+		&:hover {
+			color: var(--button-color-hover);
+			background-color: var(--button-highlight);
+		}
+
 		&.is-active,
 		&:active {
-			color: var(--button-color-hover);
+			color: var(--button-color-active);
 			background-color: var(--button-highlight);
 		}
 

package/scss/components/form.scss

@@ -121,8 +121,9 @@
 		display: block;
 		width: 100%;
 		max-width: 100%;
-		padding: var(--form-select-padding-y) var(--form-select-indicator-padding)
-			var(--form-select-padding-y) var(--form-select-padding-x);
+		padding-block: var(--form-select-padding-y);
+		padding-inline-start: var(--form-select-padding-x);
+		padding-inline-end: var(--form-select-indicator-padding);
 		font-size: var(--form-select-font-size);
 		font-weight: var(--form-select-font-weight);
 		line-height: var(--line-height);
@@ -132,8 +133,8 @@
 			linear-gradient(45deg, transparent 50%, currentColor 50%),
 			linear-gradient(135deg, currentColor 50%, transparent 50%);
 		background-position:
-			calc(100% - 1rem) 50%,
-			calc(100% - 0.75rem) 50%;
+			right 1rem center,
+			right 0.75rem center;
 		background-size:
 			0.25rem 0.25rem,
 			0.25rem 0.25rem;
@@ -142,6 +143,12 @@
 		border-radius: var(--form-select-border-radius);
 		appearance: none;
 
+		&:dir(rtl) {
+			background-position:
+				left 0.75rem center,
+				left 1rem center;
+		}
+
 		transition:
 			color var(--form-select-transition-duration) var(--form-select-transition-easing),
 			background-color var(--form-select-transition-duration)
@@ -251,14 +258,13 @@
 			&[type='radio']:checked::after {
 				content: '';
 				position: absolute;
-				inset-block-start: 50%;
-				inset-inline-start: 50%;
+				inset: 0;
 				width: 0.5rem;
 				height: 0.5rem;
+				margin: auto;
 				background-color: var(--form-check-input-checked-color);
 				border: 0;
 				border-radius: 9999px;
-				transform: translate(-50%, -50%);
 			}
 
 			&:focus-visible,

package/scss/components/icon-button.scss

@@ -118,13 +118,19 @@
 		background-color: transparent;
 		border-color: transparent;
 
-		&:hover,
-		&:active {
+		&:hover {
 			color: var(--icon-button-color-hover);
 			background-color: var(--icon-button-highlight);
 			border-color: transparent;
 		}
 
+		&:active,
+		&.is-active {
+			color: var(--icon-button-color-active);
+			background-color: var(--icon-button-highlight);
+			border-color: transparent;
+		}
+
 		&:focus-visible,
 		&.is-focus-visible {
 			outline: var(--icon-button-focus-outline-width) var(--icon-button-focus-outline-style)

package/scss/components/timeline.scss

@@ -44,6 +44,10 @@
 			transform: translateX(-50%);
 		}
 
+		&:dir(rtl)::before {
+			transform: translateX(50%);
+		}
+
 		&:first-child::before {
 			inset-block-start: var(--timeline-dot-center-y);
 		}

package/scss/reboot.scss

@@ -128,6 +128,6 @@
 	}
 
 	ul {
-		padding-left: 1rem;
+		padding-inline-start: 1rem;
 	}
 }

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;
+				}
 			}
 		}
 	}