@volverjs/style 0.1.2 → 0.1.4

package/src/utilities/tables.scss

@@ -0,0 +1,17 @@
+@import '../context';
+
+// border-collapse
+@include spread-map-into-utilities(
+	$map: $border-collapse,
+	$class: border,
+	$attribute: border-collapse,
+	$zero-specificity: $zero-specificity-for-utilities
+);
+
+// table-layout
+@include spread-map-into-utilities(
+	$map: $table-layout,
+	$class: table,
+	$attribute: table-layout,
+	$zero-specificity: $zero-specificity-for-utilities
+);

package/src/utilities/transforms.scss

@@ -0,0 +1,113 @@
+@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,
+	$zero-specificity: $zero-specificity-for-utilities
+);
+
+// transform-origin
+@include spread-map-into-utilities(
+	$map: $transform-origin,
+	$class: origin,
+	$attribute: transform-origin,
+	$zero-specificity: $zero-specificity-for-utilities
+);
+
+// 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};
+	}
+}