@oardi/css-utils 0.71.0 → 0.72.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.71.0",
+	"version": "0.72.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/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;
 	}
 }