update arc surface

zumerlab · Apr 18, 2023 · 0512145 · 0512145
1 parent 79a59a7
commit 0512145
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 10 deletions.
diff --git a/src/_core-elements.scss b/src/_core-elements.scss
@@ -89,18 +89,15 @@ div[class^="ring-"] {
     content: '';
     position: absolute;
     // calc with of element or distnace of element nis it raidus
-    border: 1px solid black;
+    //border: 1px solid black;
     // 1/2 width - last rings 
-    opacity: .6;
+   // opacity: .6;
    // radial gradient
-    background-image: radial-gradient(circle at -40px 50%, orange 0px 5px, transparent 5px 50px, orange 51px 90px, transparent 91px 100%);
+
     // bordarc
     // border-radius: 0% 100% 100% 0% / 0% 50% 50% 0%;
     // polygon
-    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
-}
-.surface:hover::before {
-    background-image: radial-gradient(circle at 0px 50%, orange 0px 5px, transparent 5px 50px, purple 51px 90px, transparent 91px 100%);
+    //clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
 }
 @each $size,
 $var in $sizes {

diff --git a/src/_radial-grid.scss b/src/_radial-grid.scss
@@ -76,10 +76,16 @@
     }
     .z-container>.ring-#{$i}> .item.#{$size}.surface:before {
       transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) ;
-      width: calc(var(--radius-#{$i}) - var(--radius-#{$i - $resta}) + 40px);
-      height: calc(#{$var} + 20px);
+      width: calc(#{$var} * 1.5);
+      height: calc(#{$var} * 1.7);
+      background-image: radial-gradient(circle at calc((var(--radius-#{$i}) * -1 + 2px)) 50%, transparent 0px calc(var(--radius-#{$i})), orange calc(var(--radius-#{$i})) calc(var(--radius-#{$i}) + #{$var} * 1.4), transparent 0);
+      mask-image: conic-gradient(from 45deg , black 25%, transparent 0);
     }
 
+    .z-container>.ring-#{$i}> .item.#{$size}.surface:hover::before {
+      background-image: radial-gradient(circle at calc((var(--radius-#{$i}) * -1 + 2px)) 50%, transparent 0px calc(var(--radius-#{$i})), rgb(72, 0, 255) calc(var(--radius-#{$i})) calc(var(--radius-#{$i}) + #{$var} * 1.4), transparent 0);
+  }
+
     .z-container>.ring-#{$i}> .item.stationary.#{$size} {
       transform:rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(calc(var(--radius-#{$i})), 0);
     }
@@ -98,7 +104,7 @@
         transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(calc(var(--radius-#{$i}) #{$math}), 0) rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * -1deg));
       }
       .z-container>.ring-#{$i}> .item.#{$size}#{$class}.surface:before {
-        transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg)) translate(calc(var(--radius-#{$i - $resta}) #{$math}), 0);
+        transform: rotate(calc((var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)) * 1deg));
       }
 
       .z-container>.ring-#{$i}> .item.stationary.#{$size}#{$class} {