@volverjs/style 0.1.11 → 0.1.12-beta.1

package/src/settings/components/_vv-select.scss

@@ -39,7 +39,7 @@ $vv-select: (
 					height: var(--spacing-2),
 					inset: auto 0 0 0,
 					background: var(--color-brand),
-					transform: scaleX(0),
+					scale: 0 1,
 					transform-origin: left,
 					will-change: transform,
 					transition: var(--transition-transform),
@@ -53,7 +53,7 @@ $vv-select: (
 					background-color: var(--input-background-color-focus),
 					pseudo: (
 						after: (
-							transform: scaleX(1),
+							scale: 1,
 						),
 					),
 				),
@@ -61,7 +61,7 @@ $vv-select: (
 					background-color: var(--input-background-color-focus),
 					pseudo: (
 						after: (
-							transform: scaleX(1),
+							scale: 1,
 						),
 					),
 				),
@@ -197,7 +197,7 @@ $vv-select: (
 					pseudo: (
 						after: (
 							background: var(--input-valid-color),
-							transform: scaleX(1),
+							scale: 1,
 						),
 					),
 				),
@@ -215,7 +215,7 @@ $vv-select: (
 					pseudo: (
 						after: (
 							background: var(--input-invalid-color),
-							transform: scaleX(1),
+							scale: 1,
 						),
 					),
 				),
@@ -273,7 +273,7 @@ $vv-select: (
 				focus-within: (
 					element: (
 						label: (
-							transform: var(--input-floating-label-transform),
+							translate: var(--input-floating-label-translate),
 							font-size: var(--input-floating-label-font-size),
 						),
 						input: (
@@ -289,7 +289,7 @@ $vv-select: (
 				dirty: (
 					element: (
 						label: (
-							transform: var(--input-floating-label-transform),
+							translate: var(--input-floating-label-translate),
 							font-size: var(--input-floating-label-font-size),
 						),
 						input: (

package/src/settings/components/_vv-textarea.scss

@@ -52,7 +52,7 @@ $vv-textarea: (
 					height: var(--spacing-2),
 					inset: auto 0 0 0,
 					background: var(--color-brand),
-					transform: scaleX(0),
+					scale: 0 1,
 					transform-origin: left,
 					will-change: transform,
 					transition: var(--transition-transform),
@@ -66,7 +66,7 @@ $vv-textarea: (
 					background-color: var(--input-background-color-focus),
 					pseudo: (
 						after: (
-							transform: scaleX(1),
+							scale: 1,
 						),
 					),
 				),
@@ -160,7 +160,7 @@ $vv-textarea: (
 					pseudo: (
 						after: (
 							background: var(--input-valid-color),
-							transform: scaleX(1),
+							scale: 1,
 						),
 					),
 				),
@@ -181,7 +181,7 @@ $vv-textarea: (
 					pseudo: (
 						after: (
 							background: var(--input-invalid-color),
-							transform: scaleX(1),
+							scale: 1,
 						),
 					),
 				),
@@ -249,7 +249,7 @@ $vv-textarea: (
 				focus-within: (
 					element: (
 						label: (
-							transform: var(--input-floating-label-transform),
+							translate: var(--input-floating-label-translate),
 							font-size: var(--input-floating-label-font-size),
 						),
 						input: (
@@ -267,7 +267,7 @@ $vv-textarea: (
 				dirty: (
 					element: (
 						label: (
-							transform: var(--input-floating-label-transform),
+							translate: var(--input-floating-label-translate),
 							font-size: var(--input-floating-label-font-size),
 						),
 						input: (

package/src/settings/components/_vv-tooltip.scss

@@ -4,7 +4,7 @@ $vv-tooltip: (
 	position: absolute,
 	inset-inline: 100% auto,
 	top: 50%,
-	transform: translate(var(--spacing-10), -50%),
+	translate: var(--spacing-10) -50%,
 	z-index: var(--z-tooltip),
 	inline-size: max-content,
 	max-inline-size: 25ch,
@@ -24,7 +24,7 @@ $vv-tooltip: (
 			z-index: -1,
 			inset-inline: 0 auto,
 			inset-block: 50% auto,
-			transform: translate(-100%, -50%),
+			translate: -100% -50%,
 			border-width: var(--spacing-8),
 			border-style: solid,
 			border-color: transparent var(--color-gray-darken-4) transparent
@@ -38,35 +38,38 @@ $vv-tooltip: (
 		top: (
 			inset-inline: 50% 0,
 			inset-block: auto 100%,
-			transform: translate(-50%, calc(var(--spacing-10) * -1)),
+			translate: -50% calc(var(--spacing-10) * -1),
 			pseudo: (
 				after: (
 					inset-inline: 50% auto,
 					inset-block: 100% auto,
-					transform: translate(-50%, 0) rotate(-90deg),
+					translate: -50%,
+					rotate: -90deg,
 				),
 			),
 		),
 		bottom: (
 			inset-inline: 50% 0,
 			inset-block: 100% auto,
-			transform: translate(-50%, var(--spacing-10)),
+			translate: -50% var(--spacing-10),
 			pseudo: (
 				after: (
 					inset-inline: 50% auto,
 					inset-block: 0 auto,
-					transform: translate(-50%, -100%) rotate(90deg),
+					translate: -50% -100%,
+					rotate: 90deg,
 				),
 			),
 		),
 		left: (
 			inset-inline: auto 100%,
-			transform: translate(calc(var(--spacing-10) * -1), -50%),
+			translate: calc(var(--spacing-10) * -1) -50%,
 			pseudo: (
 				after: (
 					position: absolute,
 					inset-inline: auto 0,
-					transform: translate(100%, -50%) rotate(180deg),
+					translate: 100% -50%,
+					rotate: 180deg,
 				),
 			),
 		),

package/src/tools/_mixins.scss

@@ -640,6 +640,21 @@
 						$bps: $bps
 					);
 				}
+
+				// breakpoints
+				@if map.get($value, 'breakpoint') {
+					@include spread-map-into-breakpoints(
+						$original: $original,
+						$map: $value,
+						$prefix: #{$prefix}-#{$key}-#{$state},
+						$key: 'breakpoint',
+						$block: $block,
+						$modifier: $selector,
+						$props: $props,
+						$zero-specificity: $zero-specificity,
+						$bps: $bps
+					);
+				}
 			}
 		}
 	}

package/src/utilities/transforms.scss

@@ -3,7 +3,7 @@
 // scale
 @each $size, $value in $scale {
 	%scale-#{$size} {
-		transform: scale(#{$value});
+		scale: #{$value};
 	}
 	@include wrap-with-where(
 		$selector: '.scale-#{$size}',
@@ -13,7 +13,7 @@
 	}
 
 	%scale-x-#{$size} {
-		transform: scaleX(#{$value});
+		scale: #{$value} 1;
 	}
 	@include wrap-with-where(
 		$selector: '.scale-x-#{$size}',
@@ -23,7 +23,7 @@
 	}
 
 	%scale-y-#{$size} {
-		transform: scaleY(#{$value});
+		scale: 1 #{$value};
 	}
 	@include wrap-with-where(
 		$selector: '.scale-y-#{$size}',
@@ -52,7 +52,7 @@
 // translate
 @each $size, $value in $translate {
 	%translate-#{$size} {
-		transform: translate(#{$value}, #{$value});
+		translate: #{$value} #{$value};
 	}
 	@include wrap-with-where(
 		$selector: '.translate-#{$size}',
@@ -62,7 +62,7 @@
 	}
 
 	%translate-x-#{$size} {
-		transform: translateX(#{$value});
+		translate: #{$value};
 	}
 	@include wrap-with-where(
 		$selector: '.translate-x-#{$size}',
@@ -72,7 +72,7 @@
 	}
 
 	%translate-y-#{$size} {
-		transform: translateY(#{$value});
+		translate: 0 #{$value};
 	}
 	@include wrap-with-where(
 		$selector: '.translate-y-#{$size}',
@@ -82,7 +82,7 @@
 	}
 
 	%-translate-#{$size} {
-		transform: translate(-#{$value}, -#{$value});
+		translate: -#{$value} -#{$value};
 	}
 	@include wrap-with-where(
 		$selector: '.-translate-#{$size}',
@@ -92,7 +92,7 @@
 	}
 
 	%-translate-x-#{$size} {
-		transform: translateX(-#{$value});
+		translate: -#{$value};
 	}
 	@include wrap-with-where(
 		$selector: '.-translate-x-#{$size}',
@@ -102,7 +102,7 @@
 	}
 
 	%-translate-y-#{$size} {
-		transform: translateY(-#{$value});
+		translate: 0 -#{$value};
 	}
 	@include wrap-with-where(
 		$selector: '.-translate-y-#{$size}',