optimice sass

zumerlab · Jun 8, 2023 · c7822fd · c7822fd
1 parent da33592
commit c7822fd
Showing 1 changed file with 21 additions and 11 deletions.
diff --git a/src/components/_label.scss b/src/components/_label.scss
@@ -31,26 +31,36 @@
    @include alignment;
  }
 
- @each $size,
- $var in $sizes {
+ .item>.label {
+  transform: rotate(var(--label-angle)) translate(var(--x), 0);
+}
 
-   @each $pos,
-   $angle in $position {
-     .item.#{$size}>.label.#{$pos} {
-       transform: rotate(calc(#{$angle} * 1deg)) translate(calc(#{$var} / 1.8), 0);
-     }
-   }
- }
+.label>.label__text {
+  transform: translate(calc(var(--connector-width) - 5px), var(--label-box)) rotate(var(--label-angle-invert));
+}
+
+@each $size,
+$var in $sizes {
+
+  @each $pos,
+  $angle in $position {
+    .item.#{$size}>.label.#{$pos} {
+      --label-angle: calc(#{$angle} * 1deg);
+       --x: calc(#{$var} / 1.8);
+    }
+  }
+}
 
  @each $pos,
  $angle in $position {
    .label.#{$pos}>.label__text {
+    --label-angle-invert: calc(#{$angle} * -1deg);
      @if $pos !="pos-180" {
-       transform: translate(calc(var(--connector-width) - 5px), -5px) rotate(calc(#{$angle} * -1deg));
+       --label-box: -5px;
      }
 
      @else {
-       transform: translate(calc(var(--connector-width) + var(--label-width)), +5px) rotate(calc(#{$angle} * -1deg));
+      --label-box: -5px;
      }
 
    }