fix nested rings

zumerlab · Mar 13, 2023 · 99cfb4e · 99cfb4e
1 parent 018a6e8
commit 99cfb4e
Show file tree

Hide file tree

Showing 4 changed files with 177 additions and 56 deletions.
diff --git a/css/custom-vars.css b/css/custom-vars.css
@@ -1,9 +1,12 @@
 .z-container {
     /* Layout vars */
     --angle: 1;
-    --radio: 100px;
+    --radius: 100px;
     --item-number: 1;
-    --ratio: 1.8;
+    --radius-padding: 8px;
+    --ring-0-factor: 1;
+    --ring-1-factor: 2;
+    --ring-2-factor: 3;
     /* Shape sizes */
     --xxs: 8px;
     --xs: 24px;

diff --git a/css/radial-grid.css b/css/radial-grid.css
@@ -1,17 +1,19 @@
 .z-container {
     display: grid;
-    grid-template-columns: minmax(var(--radio), 1fr);
+    grid-template-columns: minmax(var(--radius), 1fr);
     height: 500px;
     align-items: center;
     justify-items: center;
     border: 1px dashed black;
+    align-content: center;
+    justify-content: center;
     /* transform: rotateX(45deg); */
     /* transform-style: preserve-3d; */
   }
 
-  .z-container > .ring-0,
-  .z-container > .ring-1,
-  .z-container > .ring-2 {
+.ring-0,
+.ring-1,
+.ring-2 {
     display: grid;
     border-radius: 50%;
     border: 1px dashed rgba(155, 155, 155, 0.5);
@@ -21,18 +23,7 @@
     justify-content: center;
     grid-area: 1/1/1/1;
   }
-  .item > .ring-0,
-  .item > .ring-1,
-  .item > .ring-2
-   {
-    display: grid;
-    border-radius: 50%;
-    border: 1px dashed rgba(155, 45, 155, 0.5);
-    align-items: center;
-    justify-items: center;
-
-    grid-area: 1/1/1/1;
-  }
+
 
 
   .items-1 > .item {
@@ -53,29 +44,138 @@
 
 
   .z-container > .ring-0 {
-    width: calc(var(--radio) * 2);
-    height: calc(var(--radio) * 2);
+    width: calc(var(--radius) * 2 * var(--ring-0-factor));
+    height: calc(var(--radius) * 2 * var(--ring-0-factor));
   }
   .z-container > .ring-1 {
-    width: calc(var(--radio) * 2);
-    height: calc(var(--radio) * 2);
+    width: calc(var(--radius) * 2 * var(--ring-1-factor));
+    height: calc(var(--radius) * 2 * var(--ring-1-factor));
   }
   .z-container > .ring-2 {
-    width: calc(var(--radio) * 6);
-    height: calc(var(--radio)  * 6);
-  }
-  .item > .ring-0 {
-    width: calc(var(--radio) * 2);
-    height: calc(var(--radio) * 2);
-  }
-  .item > .ring-1 {
-    width: 100px;
-    height: 100px;
-  }
-  .item > .ring-2 {
-    width: 280px;
-    height: 280px;
+    width: calc(var(--radius) * 2 * var(--ring-2-factor));
+    height: calc(var(--radius)  * 2 * var(--ring-2-factor));
   }
+
+/* Sizes */
+.item.xxs > .ring-0 {
+  width: calc(var(--xxs) * var(--ring-0-factor));
+  height: calc(var(--xxs) * var(--ring-0-factor));
+}
+.item.s > .ring-0,
+.item.small > .ring-0 {
+  width: calc(var(--s) * var(--ring-0-factor));
+  height: calc(var(--s) * var(--ring-0-factor));
+}
+
+.item.xs > .ring-0,
+.item.extra-small > .ring-0 {
+  width: calc(var(--xs) * var(--ring-0-factor));
+  height: calc(var(--xs) * var(--ring-0-factor));
+}
+
+.item > .ring-0,
+.item.m > .ring-0,
+.item.medium > .ring-0 {
+  width: calc(var(--m) * var(--ring-0-factor));
+  height: calc(var(--m) * var(--ring-0-factor));
+}
+
+.item.l > .ring-0,
+.item.large > .ring-0 {
+  width: calc(var(--l) * var(--ring-0-factor));
+  height: calc(var(--l) * var(--ring-0-factor));
+}
+
+.item.xl > .ring-0,
+.item.extra-large > .ring-0 {
+  width: calc(var(--xl) * var(--ring-0-factor));
+  height: calc(var(--xl) * var(--ring-0-factor));
+}
+
+.item.xxl > .ring-0 {
+  width: calc(var(--xxl) * var(--ring-0-factor));
+  height: calc(var(--xxl) * var(--ring-0-factor));
+}
+
+.item.xxs > .ring-1 {
+  width: calc(var(--xxs) * var(--ring-1-factor));
+  height: calc(var(--xxs) * var(--ring-1-factor));
+}
+.item.s > .ring-1,
+.item.small > .ring-1 {
+  width: calc(var(--s) * var(--ring-1-factor));
+  height: calc(var(--s) * var(--ring-1-factor));
+}
+
+.item.xs > .ring-1,
+.item.extra-small > .ring-1 {
+  width: calc(var(--xs) * var(--ring-1-factor));
+  height: calc(var(--xs) * var(--ring-1-factor));
+}
+
+.item > .ring-1,
+.item.m > .ring-1,
+.item.medium > .ring-1 {
+  width: calc(var(--m) * var(--ring-1-factor));
+  height: calc(var(--m) * var(--ring-1-factor));
+}
+
+.item.l > .ring-1,
+.item.large > .ring-1 {
+  width: calc(var(--l) * var(--ring-1-factor));
+  height: calc(var(--l) * var(--ring-1-factor));
+}
+
+.item.xl > .ring-1,
+.item.extra-large > .ring-1 {
+  width: calc(var(--xl) * var(--ring-1-factor));
+  height: calc(var(--xl) * var(--ring-1-factor));
+}
+
+.item.xxl > .ring-1 {
+  width: calc(var(--xxl) * var(--ring-1-factor));
+  height: calc(var(--xxl) * var(--ring-1-factor));
+}
+
+.item.xxs > .ring-2 {
+  width: calc(var(--xxs) * var(--ring-2-factor));
+  height: calc(var(--xxs) * var(--ring-2-factor));
+}
+.item.s > .ring-2,
+.item.small > .ring-2 {
+  width: calc(var(--s) * var(--ring-2-factor));
+  height: calc(var(--s) * var(--ring-2-factor));
+}
+
+.item.xs > .ring-2,
+.item.extra-small > .ring-2 {
+  width: calc(var(--xs) * var(--ring-2-factor));
+  height: calc(var(--xs) * var(--ring-2-factor));
+}
+
+.item > .ring-2,
+.item.m > .ring-2,
+.item.medium > .ring-2 {
+  width: calc(var(--m) * var(--ring-2-factor));
+  height: calc(var(--m) * var(--ring-2-factor));
+}
+
+.item.l > .ring-2,
+.item.large > .ring-2 {
+  width: calc(var(--l) * var(--ring-2-factor));
+  height: calc(var(--l) * var(--ring-2-factor));
+}
+
+.item.xl > .ring-2,
+.item.extra-large > .ring-2 {
+  width: calc(var(--xl) * var(--ring-2-factor));
+  height: calc(var(--xl) * var(--ring-2-factor));
+}
+
+.item.xxl > .ring-2 {
+  width: calc(var(--xxl) * var(--ring-2-factor));
+  height: calc(var(--xxl) * var(--ring-2-factor));
+}
   .item:nth-child(1) {
     --item-number: 1;
   }
@@ -98,7 +198,7 @@
 
   .item.orbital {
     transform: rotate(calc(var(--angle) * var(--item-number) * 1deg))
-      translate(var(--radio), 0);
+      translate(var(--radius), 0);
   }
 
   .ring-0 > .item {
@@ -108,19 +208,36 @@
 
   .z-container > .ring-1 > .item {
     transform: rotate(calc(var(--angle) * var(--item-number) * 1deg))
-      translate(calc(var(--radio)), 0)
+      translate(calc(var(--radius)), 0)
       rotate(calc(var(--angle) * var(--item-number) * 1deg * -1));
   }
 
   .z-container > .ring-2 > .item {
     transform: rotate(calc(var(--angle) * var(--item-number) * 1deg))
-      translate(calc(var(--radio) * 3), 0)
+      translate(calc(var(--radius) * 2), 0)
       rotate(calc(var(--angle) * var(--item-number) * 1deg * -1));
   }
 
-  .item > .ring-1 > .item {
+  .item.xxs > .ring-1 > .item {
+    --x: calc(var(--xxs) / 2 * var(--ring-1-factor));
+    transform: rotate(calc(var(--angle) * var(--item-number) * 1deg))
+      translate(var(--x), 0)
+      rotate(calc(var(--angle) * var(--item-number) * 1deg * -1));
+  }
+
+  .item.xs > .ring-1 > .item,
+  .item.extra-small > .ring-1 > .item {
+    --x: calc(var(--xs) / 2 * var(--ring-1-factor));
+    transform: rotate(calc(var(--angle) * var(--item-number) * 1deg))
+      translate(var(--x), 0)
+      rotate(calc(var(--angle) * var(--item-number) * 1deg * -1));
+  }
+  .item > .ring-1 > .item,
+  .item.m > .ring-1 > .item,
+  .item.medium > .ring-1 > .item {
+    --x: calc(var(--m) / 2 * var(--ring-1-factor));
     transform: rotate(calc(var(--angle) * var(--item-number) * 1deg))
-      translate(30px, 0)
+      translate(var(--x), 0)
       rotate(calc(var(--angle) * var(--item-number) * 1deg * -1));
   }
 
@@ -132,17 +249,17 @@
 
 
 /*   .item.d0 {
-    --radio: 1px;
+    --radius: 1px;
   }
   .item.d50 {
-    --radio: 50px;
+    --radius: 50px;
   }
  
   .item.d15 {
-    --radio: 15px;
+    --radius: 15px;
   }
   .item.d10 {
-    --radio: 10px;
+    --radius: 10px;
   } */
   .item.a0 {
     --angle: 0;

diff --git a/css/shapes.css b/css/shapes.css
@@ -1,9 +1,11 @@
 .item {
   display: grid;
-  background-color: white;
+  background-color: rgba(255, 255, 255, 0.151);
   border: 1px solid black;
   align-items: center;
   justify-items: center;
+  align-content: center;
+    justify-content: center;
   grid-area: 1/1/1/1;
 }
 /* Shapes */
@@ -46,8 +48,8 @@
 
 .item.l,
 .item.large {
-  width: var(--m);
-  height: var(--m);
+  width: var(--l);
+  height: var(--l);
 }
 
 .item.xl,

diff --git a/index.html b/index.html
@@ -43,10 +43,10 @@
           "
         ></div>
       </div>
-      <div class="ring-1 items-3">
+      <div class="ring-1 items-2">
         <div class="item m">one</div>
-        <div class="item m">
-          <!-- prototipo de label -->
+        <!-- <div class="item m">
+          
           <div
             class="item d50 transparent orbital a45 box"
             style="width: 50px; height: 1px; background-color: red"
@@ -64,19 +64,18 @@
           >
             text
           </div>
-        </div>
-        <div class="item xs">
+        </div> -->
+        <div class="item m">
           <div class="ring-1 items-4">
             <div class="item xs d50">4</div>
             <div class="item xs d50">5</div>
-            <div class="item xs d50 transparent orbital" style="color: red">◃</div>
-            <div class="item xs d50">
+            <div class="item xs d50  orbital" >◃</div>
+            <div class="item  d50">
               <div class="ring-1 items-3">
                 <div class="item xxs d15"></div>
                 <div class="item xxs d15"></div>
                 <div class="item xxs d15"></div>
               </div>
-
             </div>
           </div>