simplify code. Bug angle docker

zumerlab · Oct 2, 2023 · 9a42604 · 9a42604
1 parent e7c0e3a
commit 9a42604
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 77 deletions.
diff --git a/assets/css/index.min.css b/assets/css/index.min.css
diff --git a/assets/css/index.min.css.map b/assets/css/index.min.css.map
diff --git a/assets/css/zumer.min.css b/assets/css/zumer.min.css
diff --git a/assets/css/zumer.min.css.map b/assets/css/zumer.min.css.map
diff --git a/examples/generic.html b/examples/generic.html
@@ -31,8 +31,8 @@
         </div>
       </div>
 
-      <div class="orbit">
-         <div class=" orbiter s offset-45">
+      <div class="orbit limit-90">
+         <div class=" orbiter m ">
           <div class="orbit ">
             <div class="sector" ></div>
             <div class="sector"></div>

diff --git a/examples/spread.html b/examples/spread.html
@@ -63,9 +63,9 @@
         <div class="orbiter m" style="background-color: rgb(194, 212, 29);">
           <div class="orbit">
             <div class="orbiter xxs" style="background-color: rgb(42, 165, 95);"></div>
+            <div class="orbiter s" style="background-color: rgb(42, 165, 95);"></div>
             <div class="orbiter xxs" style="background-color: rgb(42, 165, 95);"></div>
-            <div class="orbiter xxs" style="background-color: rgb(42, 165, 95);"></div>
-            <div class="orbiter xxs" style="background-color: rgb(42, 165, 95);"></div>
+            <div class="orbiter xs upper" style="background-color: rgb(42, 165, 95);"></div>
             <div class="orbiter xxs" style="background-color: rgb(42, 165, 95);"></div>
           </div>
         </div>

diff --git a/src/base/_variables.scss b/src/base/_variables.scss
@@ -28,6 +28,17 @@ use multiple dockers on same project without interference.
     --l: 110px;
     --xl: 180px;
     --xxl: 288px;
+
+    /* angles */
+    --a0: 0;
+    --a45: 45;
+    --a90: 90;
+    --a135: 135;
+    --a180: 180;
+    --a225: 225;
+    --a270: 270;
+    --a315: 315;
+    --a360: 360;
 
     /* width connector */
     --connector-width: 40px;

diff --git a/src/components/_label.scss b/src/components/_label.scss
@@ -8,6 +8,7 @@
   border-radius: 50%;
   width: 4px;
   height: 4px;
+  --x: calc(var(--size) / 1.8);
 }
 
 .label::before {
@@ -17,6 +18,25 @@
   width: var(--connector-width);
   height: 1px;
 }
+
+/* Set size variable for each orbiter */
+@each $size, $var in $sizes {
+  .label#{$size} {
+    @if $size != null {
+      --size: #{$var};
+    }    
+  }
+}
+
+/* Set size variable for each orbiter */
+@each $pos, $angle in $position {
+  .label#{$pos} {
+
+      --label-angle: calc(#{$angle} * 1deg);
+    }    
+
+}
+
 .label > .text {
   transform-origin: 0 0;
   display: grid;
@@ -37,19 +57,10 @@
     rotate(var(--label-angle-invert));
 }
 
-@each $size, $var in $sizes {
-  @each $pos, $angle in $position {
-    .orbiter.#{$size} > .label.#{$pos} {
-      --label-angle: calc(#{$angle} * 1deg);
-      --x: calc(#{$var} / 1.8);
-    }
-  }
-}
-
 @each $pos, $angle in $position {
-  .label.#{$pos} > .text {
-    --label-angle-invert: calc(#{$angle} * -1deg);
-    @if $pos != 'pos-180' {
+  .label#{$pos} > .text {
+    --label-angle-invert: calc(var(--label-angle) * -1deg);
+    @if $pos != '.pos-180' {
       --label-box: +5px;
     } @else {
       --label-box: -5px;

diff --git a/src/components/_orbit.scss b/src/components/_orbit.scss
@@ -1,6 +1,6 @@
 
 .orbit {
-  --sector: 360; // ensure reset to default. useful for nested
+  --arc: 360; // ensure reset to default. useful for nested
   --offset-angle: 0; // ensure reset to default. useful for nested
   display: grid;
   border-radius: 50%;

diff --git a/src/layouts/_radial-grid.scss b/src/layouts/_radial-grid.scss
@@ -25,11 +25,15 @@
   }
 
   /* Check if the parent is .orbiter */
-  @each $size, $var in $sizes {
-    .orbiter.#{$size} > .orbit:nth-child(#{$i}) {
-      --diam: calc(#{$var} * #{$i});
+ // @each $size, $var in $sizes {
+    .orbiter > .orbit:nth-child(#{$i}) {
+    //  @if $size == null {
+     //   --diam: calc(var(--m) * #{$i});
+     // } @else {
+        --diam: calc(var(--size) * #{$i});
+     // }
       --z-index: #{$z-index};
-    }
+   // }
   }
 }
 
@@ -58,21 +62,21 @@
 
 
   /* Check if the parent is .orbiter */
-  @each $size, $var in $sizes {
-    .orbiter.#{$size} > .orbit:nth-child(#{$i}) > .orbit {
-      --diam: calc(#{$var} * #{$i});
+
+    .orbiter > .orbit:nth-child(#{$i}) > .orbit {
+      --diam: calc(var(--size) * #{$i});
       --z-index: #{$z-index};
       --x: calc(var(--radius-#{$i}));
       border: none;
     }
 
-    .orbiter.#{$size} > .orbit:nth-child(#{$i}) > .orbit > .sector {
-      --length: calc(#{$var} * #{$i});
-    --width: calc(#{$var} / 4);
-    --current-orbit: #{$i};
-    --max-orbits: #{$max-orbits};
+    .orbiter > .orbit:nth-child(#{$i}) > .orbit > .sector {
+        --length: calc(var(--size) * #{$i});
+        --width: calc(var(--size) / 4);
+        --current-orbit: #{$i};
+        --max-orbits: #{$max-orbits};
     }
-  }
+
 }
 
 /* Set different offset angles.
@@ -81,12 +85,19 @@
  For example, .offset-45 implies that orbiters or sectors start at a 45º angle.
 */
 @each $offset, $angle in $offsets {
-  .orbit.#{$offset} > .orbiter,
-  .orbit.#{$offset} > .sector {
+    .orbit#{$offset} {
     --offset-angle: #{$angle}; /* Set --offset-angle variable for a specific offset */
   }
 }
 
+@each $limit, $angle in $limits {
+  .orbit#{$limit} {
+    --arc: #{$angle}; /* Set lengyh variable for a specific arc limit */
+  }
+}
+
+
+
 /* Counter-clockwise direction
  By default, orbit child elements are arranged clockwise.
  Use this class to change this behavior.
@@ -99,8 +110,10 @@
 
 /* Set size variable for each orbiter */
 @each $size, $var in $sizes {
-  .orbiter.#{$size} {
-    --size: #{$var};
+  .orbiter#{$size} {
+    @if $size != null {
+      --size: #{$var};
+    }    
   }
 }
 
@@ -121,12 +134,9 @@
  but is not yet handled by Firefox, unless layout.css.has-selector.enabled flag  https://caniuse.com/css-has
 */
 @for $i from $min-orbiters through $max-orbiters {
-  @each $limit, $value in $limits {
-    .orbit.#{$limit}:has(> .orbiter:nth-child(#{$i})) {
-      --arc: #{$value}; /* Set --arc variable for specific limit */
+    .orbit:has(> .orbiter:nth-child(#{$i})) {
       --angle: calc((var(--arc) / #{$i - 1}) * var(--direction)); /* Calculate and set --angle variable */
     }
-  }
 }
 
 /* Set orbiter-number variable for each orbiter in each orbit */
@@ -141,28 +151,28 @@
  Aligment options ares included.
 */
 @for $i from $min-orbits through $max-orbits {
-  @each $size, $var in $sizes {
+
     /* Set x variable for each orbiter */
-    .docker > .orbit:nth-child(#{$i}) > .orbiter.#{$size} {
+    .docker > .orbit:nth-child(#{$i}) > .orbiter {
       --x: calc(var(--radius-#{$i}));
     }
     @each $class in $align {
       $math: '';
     /* Set x variable and translate for specific alignments (Upper) */
     @if $class == '.upper' {
-      $math: '+ (calc(#{$var} / 2))';
+      $math: '+ (calc(var(--size) / 2))';
     }
 
     /* Set x variable and translate for specific alignments (Lower) */
     @if $class == '.lower' {
-      $math: '- (calc(#{$var} / 2))';
+      $math: '- (calc(var(--size) / 2))';
     }
 
     /* Apply styles based on alignment */
-    .docker > .orbit:nth-child(#{$i}) > .orbiter.#{$size}#{$class} {
+    .docker > .orbit:nth-child(#{$i}) > .orbiter#{$class} {
       --x: calc(var(--radius-#{$i}) #{$math});
     }
-  }
+
   }
 }
 
@@ -173,27 +183,28 @@
  Example: orbiter.upper
 */
 @for $i from $min-orbits through $max-orbits {
-  @each $size, $var in $sizes {
-    .orbiter.#{$size} > .orbit:nth-child(#{$i}) > .orbiter {
-      --x: calc((#{$var} / 2 * #{$i}));
+
+    .orbiter > .orbit:nth-child(#{$i}) > .orbiter {
+
+        --x: calc(var(--diam) / 2);
+
     }
     @each $class in $align {
     /* Set x variable for specific alignments */
     $math: '';
     @if $class == '.upper' {
-      $math: '+ (calc(#{$var} / 4))';
+      $math: '+ (calc(var(--size) / 2))';
     }
 
     @if $class == '.lower' {
-      $math: '- (calc(#{$var} / 4))';
+      $math: '- (calc(var(--size) / 2))';
     }
 
     /* Apply styles based on alignment */
-    .orbiter.#{$size} > .orbit:nth-child(#{$i}) > .orbiter#{$class} {
-      --x: calc((#{$var} / 2 * #{$i}) #{$math});
+    .orbiter > .orbit:nth-child(#{$i}) > .orbiter#{$class} {
+        --x: calc((var(--diam) / 2) #{$math});
     }
   }
-  }
 }
 
 /* ========= Radial Grid - Sectors ============= */
@@ -222,12 +233,9 @@
  but is not yet handled by Firefox, unless layout.css.has-selector.enabled flag  https://caniuse.com/css-has
 */
 @for $i from $min-orbiters through $max-orbiters {
-  @each $limit, $value in $limits {
-    .orbit.#{$limit}:has(> .sector:nth-child(#{$i})) {
-      --arc: #{$value}; /* Set --arc variable for specific limit */
+    .orbit:has(> .sector:nth-child(#{$i})) {
       --angle: calc((var(--arc) / #{$i}) * var(--direction)); /* Calculate and set --angle variable */
     }
-  }
 }
 @for $i from $min-orbits through $max-orbits {
   /* Set sector variables */
@@ -241,14 +249,13 @@
    Accordng its diameter named sizes each sector has a radius to depending on a nested orbit.
    This is because sector can be nested.
   */
-  @each $size, $var in $sizes {
-    .orbiter.#{$size} > .orbit:nth-child(#{$i}) > .sector {
-      --length: calc(#{$var} * #{$i});
-      --width: calc(#{$var} / 4);
+
+    .orbiter > .orbit:nth-child(#{$i}) > .sector {
+      --length: calc(var(--size) * #{$i});
+      --width: calc(var(--size) / 4);
       --current-orbit: #{$i};
       --max-orbits: #{$max-orbits};
     }
-  }
 }
 
 /* ========= Radial Grid - SVG ============= */
@@ -267,10 +274,12 @@
  Example: orbiter.upper
 */
 @for $i from $min-orbits through $max-orbits {
-  @each $size, $var in $sizes {
+
     /* Set diameter variable for the SVG in each orbit */
-    .orbiter.#{$size} > .orbit:nth-child(#{$i}) > svg {
-      --diam: calc(#{$var} * #{$i});
+    .orbiter > .orbit:nth-child(#{$i}) > svg {
+
+        --diam: calc(var(--size) * #{$i});
+
+
     }
-  }
 }
diff --git a/src/utilities/_sass-variables.scss b/src/utilities/_sass-variables.scss
@@ -1,8 +1,8 @@
 // Sass variables
 $prefix: 'z-';
 
-$sizes: 'xxs' var(--xxs), 'xs' var(--xs), 's' var(--s), 'm' var(--m),
-  'l' var(--l), 'xl' var(--xl), 'xxl' var(--xxl);
+$sizes: null, '.xxs' var(--xxs), '.xs' var(--xs), '.s' var(--s), '.m' var(--m),
+  '.l' var(--l), '.xl' var(--xl), '.xxl' var(--xxl);
 
 $align: '.upper', '.lower';
 
@@ -12,11 +12,11 @@ $max-orbits: 6;
 $min-orbiters: 1;
 $max-orbiters: 24;
 
-$offsets: 'offset-45' 45, 'offset-90' 90, 'offset-135' 135, 'offset-180' 180,
-  'offset-225' 225, 'offset-270' 270, 'offset-315' 315;
+$offsets: '.offset-0' var(--a0), '.offset-45' var(--a45), '.offset-90' var(--a90), '.offset-135' var(--a135), '.offset-180' var(--a180),
+  '.offset-225' var(--a225), '.offset-270' var(--a270), '.offset-315' var(--a315), '.offset-360' var(--a360);
 
-$limits: 'limit-45' 45, 'limit-90' 90, 'limit-135' 135, 'limit-180' 180, 'limit-225' 225,
-  'limit-270' 270, 'limit-315' 315;
+$limits: '.limit-0' var(--a0),'.limit-45' var(--a45), '.limit-90' var(--a90), '.limit-135' var(--a135), '.limit-180' var(--a180),
+'.limit-225' var(--a225), '.limit-270' var(--a270), '.limit-315' var(--a315), '.limit-360' var(--a360);
 
-$position: 'pos-0' 360, 'pos-45' 45, 'pos-90' 90, 'pos-135' 135, 'pos-180' 180,
-  'pos-225' 225, 'pos-270' 270, 'pos-315' 315;
+$position: '.pos-0' var(--a0),'.pos-45' var(--a45), '.pos-90' var(--a90), '.pos-135' var(--a135), '.pos-180' var(--a180),
+'.pos-225' var(--a225), '.pos-270' var(--a270), '.pos-315' var(--a315), '.pos-360' var(--a360);