WIP merging classes

zumerlab · Oct 6, 2023 · 2f1aad4 · 2f1aad4
1 parent c1bcadf
commit 2f1aad4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 33 deletions.
diff --git a/src/layouts/_radial-grid.scss b/src/layouts/_radial-grid.scss
@@ -23,15 +23,17 @@
   $z-index: #{$max-orbits - $i};
 
   /* Check if the parent is .docker */
-  .docker > :nth-child(#{$i} of .orbit) {
-    --diam: calc(var(--radius-#{$i}) * 2);
-    --z-index: #{$z-index};
-  }
-
-  @each $orbit-size, $orbit-value in $orbit-sizes {
+   @each $orbit-size, $orbit-value in $orbit-sizes {
     /* Check if the parent is .docker */
     .docker > :nth-child(#{$i} of .orbit#{$orbit-size}) {
-      --diam: #{$orbit-value};
+      @if $orbit-size != null {
+
+        --diam: #{$orbit-value};
+      }  @else {
+        --diam: calc(var(--radius-#{$i}) * 2);
+      }
+      --z-index: #{$z-index};
+
     }
   }
 
@@ -57,47 +59,55 @@
   $z-index: #{$max-orbits - $i};
 
   /* Check if the parent is .docker */
-  .docker > :nth-child(#{$i} of .orbit) > .orbit {
-    --diam: calc(var(--radius-#{$i}) * 2);
-    --z-index: #{$z-index};
-    --x: calc(var(--radius-#{$i}));
-    border: none;
-  }
   @each $orbit-size, $orbit-value in $orbit-sizes {
   /* Check if the parent is .docker */
   .docker > :nth-child(#{$i} of .orbit#{$orbit-size}) > .orbit {
-    --diam: #{$orbit-value};
-    --x: calc( #{$orbit-value} / 2);
+    @if $orbit-size != null {
+      --diam: #{$orbit-value};
+      --x: calc( #{$orbit-value} / 2);
+    } @else {
+      --diam: calc(var(--radius-#{$i}) * 2);
+    --x: calc(var(--radius-#{$i}));
+    }
+
+    --z-index: #{$z-index};
+
   }
 }
 
   /* Check if the parent is .docker */
-  .docker > :nth-child(#{$i} of .orbit) > .orbit > .sector {
-    --length: calc(var(--radius-#{$i}) * 2);
+  @each $orbit-size, $orbit-value in $orbit-sizes {
+  .docker > :nth-child(#{$i} of .orbit#{$orbit-size}) > .orbit > .sector {
+    @if $orbit-size != null {
+      --length: #{$orbit-value};
+      } @else {
+        --length: calc(var(--radius-#{$i}) * 2);
+      }
+
     --current-orbit: #{$i};
     --max-orbits: #{$max-orbits};
   }
-
-  @each $orbit-size, $orbit-value in $orbit-sizes {
-    /* Check if the parent is .docker */
-    .docker > :nth-child(#{$i} of .orbit#{$orbit-size}) > .orbit  > .sector{
-      --length: #{$orbit-value};
-
-    }
   }
+
 
 
  @each $orbit-size, $orbit-value in $orbit-sizes {
     /* Check if the parent is .docker */
     .docker > :nth-child(#{$i} of .orbit#{$orbit-size}) > .sector{
+      @if $orbit-size != null {
       --length: #{$orbit-value};
+      } @else {
+        --length: calc(var(--radius-#{$i}) * 2);
+      }
 
     }
   }
   @each $orbit-size, $orbit-value in $orbit-sizes {
     /* Check if the parent is .docker */
     .docker > :nth-child(#{$i} of .orbit#{$orbit-size}) > .orbiter {
+      @if $orbit-size != null {
       --x:  calc( #{$orbit-value} / 2);
+      }
 
     }
   }
@@ -204,10 +214,10 @@
 */
 @for $i from $min-orbits through $max-orbits {
 
-    /* Set x variable for each orbiter */
+    /* Set x variable for each orbiter 
     .docker > :nth-child(#{$i} of .orbit) > .orbiter {
       --x: calc(var(--radius-#{$i}));
-    }
+    }*/
     @each $class in $align {
       $math: '';
     /* Set x variable and translate for specific alignments (Upper) */
@@ -236,11 +246,6 @@
 */
 @for $i from $min-orbits through $max-orbits {
 
-    .orbiter > .orbit:nth-child(#{$i}) > .orbiter {
-
-        --x: calc(var(--diam) / 2);
-
-    }
     @each $class in $align {
     /* Set x variable for specific alignments */
     $math: '';

diff --git a/src/utilities/_sass-variables.scss b/src/utilities/_sass-variables.scss
@@ -14,7 +14,7 @@ $grid-breakpoints: (
 $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';
+$align: null, '.upper', '.lower';
 
 $min-orbits: 1;
 $max-orbits: 6;
@@ -31,4 +31,4 @@ $limits: '.limit-0' var(--a0),'.limit-45' var(--a45), '.limit-90' var(--a90), '.
 $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);
 
-$orbit-sizes: '.size-1' var(--orbit-size-1),'.size-2' var(--orbit-size-2),'.size-3' var(--orbit-size-3),'.size-4' var(--orbit-size-4),'.size-5' var(--orbit-size-5),'.size-6' var(--orbit-size-6);
+$orbit-sizes: null, '.size-1' var(--orbit-size-1),'.size-2' var(--orbit-size-2),'.size-3' var(--orbit-size-3),'.size-4' var(--orbit-size-4),'.size-5' var(--orbit-size-5),'.size-6' var(--orbit-size-6);