add nested orbits aka sub-orbits

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

Hide file tree

Showing 6 changed files with 60 additions and 9 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
@@ -16,12 +16,21 @@
       <div class="core ">
         <div class="orbiter s" style="transform: translate(-50%, -50%);"></div>
       </div>
-      <div class="orbit limit-180">
-        <div class="sector"></div>
-        <div class="sector"></div>
-        <div class="sector"></div>
-        <div class="sector"></div>
+      <div class="orbit">
+        <div class="orbit limit-180">
+          <div class="sector"></div>
+          <div class="sector"></div>
+          <div class="sector"></div>
+          <div class="sector"></div>
+        </div>
+        <div class="orbit limit-180">
+          <div class="orbiter s lower">w</div>
+          <div class="orbiter s lower">w</div>
+          <div class="orbiter s lower">w</div>
+          <div class="orbiter s lower">w</div>
+        </div>
       </div>
+
       <div class="orbit">
          <div class=" orbiter s offset-45">
           <div class="orbit ">

diff --git a/src/layouts/_radial-grid.scss b/src/layouts/_radial-grid.scss
@@ -33,6 +33,48 @@
   }
 }
 
+/* ====== Radial Grid - Sub-orbit ======== */
+
+/* 
+ Set diameter and z-index variables for each suborbit.
+*/
+@for $i from $min-orbits through $max-orbits {
+  $z-index: #{$max-orbits - $i};
+
+  /* Check if the parent is .docker */
+  .docker > .orbit:nth-child(#{$i}) > .orbit {
+    --diam: calc(var(--radius-#{$i}) * 2);
+    --z-index: #{$z-index};
+    --x: calc(var(--radius-#{$i}));
+    border: none;
+  }
+
+  /* Check if the parent is .docker */
+  .docker > .orbit:nth-child(#{$i}) > .orbit > .sector {
+    --length: calc(var(--radius-#{$i}) * 2);
+    --current-orbit: #{$i};
+    --max-orbits: #{$max-orbits};
+  }
+
+
+  /* Check if the parent is .orbiter */
+  @each $size, $var in $sizes {
+    .orbiter.#{$size} > .orbit:nth-child(#{$i}) > .orbit {
+      --diam: calc(#{$var} * #{$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};
+    }
+  }
+}
+
 /* Set different offset angles.
  This allows orbit child elements to start at different points, overriding the default 0º.
  $offsets are defined in ./base/_variables.scss.