update

zumerlab · Oct 5, 2023 · 87945ab · 87945ab
1 parent 2898472
commit 87945ab
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 26 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/arcgrid.html b/examples/arcgrid.html
@@ -50,8 +50,8 @@
       <div class="row">
         <div class="col-sm-12">
           <div class="docker" >
-            <div class="core">
-              <div class="orbiter"></div>
+            <div class="core ">
+              <div class="orbiter s"></div>
             </div>
             <div class="orbit limit-270" >
               <div class="sector" ><div class="capsule">
@@ -154,32 +154,27 @@
       <div class="col-sm-6">
         <div class="docker" >
           <div class="core">
-            <div class="orbiter xs bg-success" style="transform: translate(-50%, -50%);"></div>
+            <div class="orbiter xs bg-success">5</div>
           </div>
-          <div class="orbit">
-            <div class="sector"><div class="capsule">
+          <div class="orbit size-2">
+            <div class="sector" style="--width: 3px"><div class="capsule">
                   <span>😁</span>
                 </div></div>
-            <div class="sector text-primary"><div class="capsule">
+            <div class="sector text-primary" style="--width: 12px"><div class="capsule">
               <span>😁</span>
             </div></div> 
-            <div class="sector"><div class="capsule">
+            <div class="sector" style="--width: 10px"><div class="capsule">
                   <span>😁</span>
                 </div></div>
-            <div class="sector"><div class="capsule">
-                  <span>😁</span>
-                </div></div>
-            <div class="sector"><div class="capsule">
-                  <span>😁</span>
-                </div></div> 
-            <div class="sector">
+
+            <div class="sector" style="--width: 20px">
               <div class="capsule">
                 <span>😁</span>
               </div>
             </div>
           </div>
-          <div class="orbit " style="--progress: 55; width: 110px; height: 110px;">
-            <div class="orbiter xs bg-primary" style="--orbiter-number: 2; --angle: calc(-90 + var(--progress) * 3.6)"></div>
+          <div class="orbit size-3" style="--progress: 55; ">
+            <div class="orbiter xs bg-primary" style="--orbiter-number: 1; --angle: calc(-90 + var(--progress) * 3.6)"></div>
             <div class="z-progress text-primary"></div>
           </div>
         </div>

diff --git a/examples/index.html b/examples/index.html
@@ -30,10 +30,10 @@ <h2>Examples</h2>
   </ul>
   <ul class="orbit">
     <li class="orbiter m"><a href="./generic.html">Generic</a></li>
-    <li class="orbiter m"><a href="./watch.html">Watch</a></li>
-    <li class="orbiter m"><a href="./spread.html">Spread</a></li>
+    <li class="orbiter m"><a href="./watch.html">Watch app</a></li>
+    <li class="orbiter m"><a href="./spread.html">Spread orbiters</a></li>
     <li class="orbiter m"><a href="./form.html">Form</a></li>
-    <li class="orbiter m"><a href="./arcgrid.html">sector</a></li>
+    <li class="orbiter m"><a href="./arcgrid.html">Sector grid</a></li>
   </ul>
 </div>
 

diff --git a/src/layouts/_radial-grid.scss b/src/layouts/_radial-grid.scss
@@ -85,8 +85,22 @@
 
     }
   }
-
 
+
+ @each $orbit-size, $orbit-value in $orbit-sizes {
+    /* Check if the parent is .docker */
+    .docker > :nth-child(#{$i} of .orbit#{$orbit-size}) > .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}) > .orbiter {
+      --x:  calc( #{$orbit-value} / 2);
+
+    }
+  }
   /* Check if the parent is .orbiter */
 
     .orbiter > .orbit:nth-child(#{$i}) > .orbit {
@@ -268,7 +282,7 @@
 
 @for $i from $min-orbits through $max-orbits {
   /* Set sector variables */
-  .docker > .orbit:nth-child(#{$i}) > .sector {
+  .docker >  :nth-child(#{$i} of .orbit) > .sector {
     --length: calc(var(--radius-#{$i}) * 2);
     --current-orbit: #{$i};
     --max-orbits: #{$max-orbits};
@@ -279,7 +293,7 @@
    This is because sector can be nested.
   */
 
-    .orbiter > .orbit:nth-child(#{$i}) > .sector {
+    .orbiter >  :nth-child(#{$i} of .orbit) > .sector {
       --length: calc(var(--size) * #{$i});
       --width: calc(var(--size) / 4);
       --current-orbit: #{$i};