arc shape done

zumerlab · May 1, 2023 · a5e10dc · a5e10dc
1 parent 4d69dff
commit a5e10dc
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 25 deletions.
diff --git a/src/_core-elements.scss b/src/_core-elements.scss
@@ -6,7 +6,7 @@
     grid-template-columns: minmax(var(--radius), 1fr);
     grid-template-rows: minmax(var(--radius), 1fr);
     border: 1px dashed black;
-    @include alignment;
+    place-items: center;
     padding: 30px;
 }
 
@@ -15,8 +15,8 @@
     background-color: rgb(255, 255, 255);
     border: 1px solid black;
     grid-area: 1/1/1/1;
-    @include alignment;
-    z-index: 1;
+    place-items: center;
+    //z-index: 1;
 }
 
 //defaults
@@ -30,8 +30,12 @@
 .arc {
     display: grid;
     grid-area: 1/1/1/1;
-    //@include alignment;
-    z-index: 1;
+}
+.arc:after {
+    content: "";
+    z-index: 70;
+    position:absolute;
+
 }
 .content {
     padding: 5px;
@@ -70,7 +74,7 @@
     border-radius: 50%;
     border: 1px solid rgb(255, 5, 5);
     grid-area: 1/1/1/1;
-    align-items: center;
+    place-items: center;
     z-index: $max-rings;
 }
 
@@ -79,8 +83,13 @@ div[class^="ring-"] {
     border-radius: 50%;
     border: 1px dashed rgba(155, 155, 155, 0.5);
     grid-area: 1/1/1/1;
-    @include alignment;
+    place-items: center;
+}
+/* hack doesnt work on ffox 
+div[class^="ring-"]:has(.item) {
+    place-items: center;
 }
+*/
 
 @each $size,
 $var in $sizes {

diff --git a/src/_radial-grid.scss b/src/_radial-grid.scss
@@ -117,28 +117,29 @@
    }
 
    .z-container>.ring-#{$i}>.arc {
-    transform:rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(calc(var(--radius-#{$i - 1})), 0) rotate(45deg) ;
-    --length: calc(var(--radius-#{$i}));
-    --semi: calc((90 - var(--angle)) / 2 * 1deg);
+    --length: calc(var(--radius-#{$i})*2);
+    --half: calc(var(--length)/2);
+    --quarter: calc(var(--half)/2);
+    transform:rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(var(--quarter), 0);
+    --semi: calc(var(--angle) / 2 * 1deg);
     --arc-gap: 1px;
-    --length-percent: calc(var(--radius-#{$i}) - var(--arc-gap) - var(--length) * tan(var(--semi)));
+    --length-percent: calc(var(--half) + var(--arc-gap) - var(--half) * tan(var(--semi)));
     --color: orange;
-    --tickness: 5px;
-    width: var(--length);
-    aspect-ratio: 1;
-    border: none;
-    border-top: var(--tickness) solid var(--color);
-    border-right: var(--tickness) solid var(--color);
-    background-color: black;
-    border-radius: 0% 100% 0% 0% / 0% 100% 0% 0%;
+    --tickness: 49px;
+    height: var(--length);
+    width: var(--half);
+    border: var(--tickness) solid var(--color);
+    border-left: none;
+    background-color: transparent;
+    border-radius: 0% 100% 100% 0% / 100% 50% 50% 0%;
     box-sizing: border-box;
-    /* top | left*/
     clip-path: polygon(
-      calc(100% - var(--length-percent)) 0,
-      100% 0,
-      100% calc(var(--length-percent)),
-      0% 100%
-      );
+      0 50%,
+    /* left center pivot*/ 100% calc(100% - var(--length-percent)),
+    /* right to bottom arc increase*/ 100% 100%,
+    /* right top corner*/ 100% 0,
+    /* right bottom corner*/ 100% var(--length-percent)
+    ); /* right to top ar decrease*/
   }
   .z-container>.ring-#{$i}>.arc:hover {
     border-top-color: coral;