Fix sector border depending on parent size

zumerlab · Sep 29, 2023 · 90e3f2f · 90e3f2f
1 parent b602c68
commit 90e3f2f
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 27 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
@@ -53,7 +53,7 @@
             <div class="core">
               <div class="orbiter xs " style="transform: translate(-50%, -50%);"></div>
             </div>
-            <div class="orbit limit-45" >
+            <div class="orbit limit-270" >
               <div class="sector" ><div class="capsule">
                   <span>😁1</span>
                 </div></div>

diff --git a/examples/form.html b/examples/form.html
@@ -166,7 +166,7 @@
                     <option value="box">Box</option>
                     <option value="circle" selected>Circle</option>
                     <option value="rounded">Rounded</option>
-                    <option value="bubble">Bubble</option>
+                    <option value="blob">Blob</option>
                 </select>
               </div>
               <div class="fieldt">

diff --git a/examples/generic.html b/examples/generic.html
@@ -23,32 +23,15 @@
         <div class="sector"></div>
       </div>
       <div class="orbit">
-         <div class=" orbiter m ">
-          <div class="orbit">
+         <div class=" orbiter s offset-45">
+          <div class="orbit ">
+            <div class="sector" ></div>
             <div class="sector"></div>
             <div class="sector"></div>
             <div class="sector"></div>
             <div class="sector"></div>
           </div>
-          <div class="orbit offset-45">
-            <div class="orbiter l">
-              <div class="orbit ">
-                <div class="sector"></div>
-                <div class="sector"></div>
-                <div class="sector"></div>
-              </div>
-              <div class="orbit ">
-                <svg class="z-svg">
-                  <circle class="svg-progress" style="--val: 59; stroke: purple;" /> 
-                </svg>
-
-              </div>
-
-            </div>
-            <div class="orbiter s"><div class="label pos-90"><span class="text">hole</span></div></div>
-            <div class="orbiter s"></div>
-            <div class="orbiter s"></div>
-          </div>
+
         </div>
         <div class="orbiter m">
         </div> 

diff --git a/src/layouts/_radial-grid.scss b/src/layouts/_radial-grid.scss
@@ -114,6 +114,7 @@
   @each $size, $var in $sizes {
     .orbiter.#{$size} > .orbit:nth-child(#{$i}) > .sector {
       --length: calc(#{$var} * #{$i});
+      --width: calc(#{$var} / 4);
       --current-orbit: #{$i};
       --max-orbits: #{$max-orbits};
     }