@volverjs/style 0.1.2 → 0.1.3

package/src/utilities/transforms.scss

@@ -0,0 +1,111 @@
+@import '../context';
+
+// scale
+@each $size, $value in $scale {
+	%scale-#{$size} {
+		transform: scale(#{$value});
+	}
+	@include wrap-with-where(
+		$selector: 'scale-#{$size}',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		@extend %scale-#{$size};
+	}
+
+	%scale-x-#{$size} {
+		transform: scaleX(#{$value});
+	}
+	@include wrap-with-where(
+		$selector: 'scale-x-#{$size}',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		@extend %scale-x-#{$size};
+	}
+
+	%scale-y-#{$size} {
+		transform: scaleY(#{$value});
+	}
+	@include wrap-with-where(
+		$selector: 'scale-y-#{$size}',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		@extend %scale-y-#{$size};
+	}
+}
+
+// rotate
+@include spread-map-into-utilities(
+	$map: $rotate,
+	$class: rotate,
+	$attribute: transform
+);
+
+// transform-origin
+@include spread-map-into-utilities(
+	$map: $transform-origin,
+	$class: origin,
+	$attribute: transform-origin
+);
+
+// translate
+@each $size, $value in $translate {
+	%translate-#{$size} {
+		transform: translate(#{$value});
+	}
+	@include wrap-with-where(
+		$selector: 'translate-#{$size}',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		@extend %translate-#{$size};
+	}
+
+	%translate-x-#{$size} {
+		transform: translateX(#{$value});
+	}
+	@include wrap-with-where(
+		$selector: 'translate-x-#{$size}',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		@extend %translate-x-#{$size};
+	}
+
+	%translate-y-#{$size} {
+		transform: translateY(#{$value});
+	}
+	@include wrap-with-where(
+		$selector: 'translate-y-#{$size}',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		@extend %translate-y-#{$size};
+	}
+
+	%-translate-#{$size} {
+		transform: translate(-#{$value});
+	}
+	@include wrap-with-where(
+		$selector: '-translate-#{$size}',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		@extend %-translate-#{$size};
+	}
+
+	%-translate-x-#{$size} {
+		transform: translateX(-#{$value});
+	}
+	@include wrap-with-where(
+		$selector: '-translate-x-#{$size}',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		@extend %-translate-x-#{$size};
+	}
+
+	%-translate-y-#{$size} {
+		transform: translateY(-#{$value});
+	}
+	@include wrap-with-where(
+		$selector: '-translate-y-#{$size}',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		@extend %-translate-y-#{$size};
+	}
+}