sass optimization

zumerlab · Jun 9, 2023 · a601104 · a601104
1 parent f75d3ea
commit a601104
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 43 deletions.
diff --git a/src/components/_label.scss b/src/components/_label.scss
@@ -1,10 +1,12 @@
 @use '../_variables.scss' as *;
 @use '../_mixins.scss' as *;
-@use '../ui' as *;
+@use '../_ui' as *;
+@use '../_shapes' as *;
 
+ /* element structure */
 .label {
   display: block;
-  border: 1px solid var(--info);
+  border: 1px solid;
   border-radius: 50%;
   width: 4px;
   height: 4px;
@@ -13,29 +15,26 @@
 .label::before {
   content: '';
   display: block;
-  border-bottom: 1px solid var(--info);
+  border-bottom: 1px solid;
   width: var(--connector-width);
   height: 1px;
 }
-.label__text {
+.label > .text {
   transform-origin: 0 0;
   display: grid;
-  border: 1px solid black;
-  grid-area: 1/1/1/1;
-  background-color: white;
+  border: 1px solid;
   border-radius: 4px;
-  border-color: var(--info);
   width: var(--label-width);
   height: 20px;
-  color: var(--info);
   @include alignment;
 }
 
+/* element radial setup*/
 .item > .label {
   transform: rotate(var(--label-angle)) translate(var(--x), 0);
 }
 
-.label > .label__text {
+.label > .text {
   transform: translate(calc(var(--connector-width) - 5px), var(--label-box))
     rotate(var(--label-angle-invert));
 }
@@ -50,12 +49,27 @@
 }
 
 @each $pos, $angle in $position {
-  .label.#{$pos} > .label__text {
+  .label.#{$pos} > .text {
     --label-angle-invert: calc(#{$angle} * -1deg);
     @if $pos != 'pos-180' {
-      --label-box: -5px;
+      --label-box: +5px;
     } @else {
       --label-box: -5px;
     }
   }
 }
+
+/* element theme */
+.label {
+  border-color: var(--info);
+}
+
+.label::before {
+  border-bottom-color: var(--info);
+}
+
+.label > .text {
+  background-color: var(--light);
+  border-color: var(--info);
+  color: var(--info);
+}
diff --git a/src/components/_progress.scss b/src/components/_progress.scss
@@ -1,29 +1,35 @@
 @use '../_mixins.scss' as *;
 @use '../_variables.scss' as *;
 @use '../ui' as *;
-// Progress
+
+/* z-progress */
+/* structure */
 .z-progress {
   --percentage: calc(var(--progress) * 3.6);
   display: grid;
   border-radius: 50%;
-  //border: 10px solid rgba(248, 0, 0, 0.5);
   grid-area: 1/1/1/1;
   place-items: center;
   width: 100%;
   aspect-ratio: 1;
-  //background-color: #bc26da;
+}
+
+.z-progress::after {
+  // https://codepen.io/chandrashekhar/pen/RvMVey?editors=1100
+}
+
+/* theme */
+.z-progress {
   background-image: radial-gradient(circle, var(--light) 64%, transparent 65%),
     conic-gradient(
       var(--primary) calc((var(--percentage) - 1) * 1deg),
       var(--secondary) calc(var(--percentage) * 1deg)
     );
 }
-.z-progress::after {
-  // https://codepen.io/chandrashekhar/pen/RvMVey?editors=1100
-}
 
-//derepated
-svg.z-svg {
+/* z-svg */
+/* structure */
+.z-svg {
   display: grid;
   border-radius: inherit;
   grid-area: 1/1/1/1;
@@ -33,17 +39,7 @@ svg.z-svg {
   height: calc(var(--diam));
 }
 
-.base {
-  cx: calc(var(--diam) / 2);
-  cy: calc(var(--diam) / 2);
-  r: calc((var(--diam) / 2 - var(--stroke)));
-  fill: none;
-  stroke: #e6e6e6;
-  stroke-dasharray: calc(360 / 5 - 20) 20;
-  stroke-width: var(--stroke);
-}
-
-.markers {
+.z-svg > .markers {
   --markers: 12;
   --marker-width: 1px;
   --circumference: calc(var(--r) * var(--π) * 2);
@@ -52,31 +48,27 @@ svg.z-svg {
   cx: var(--r);
   cy: var(--r);
   r: var(--r);
-  fill: none;
-  stroke: #9119e069;
   stroke-width: calc(var(--radius) * 2);
   stroke-dasharray: var(--marker-width) var(--dash);
 }
-.percent {
+.z-svg > .svg-progress {
   --r: calc(var(--diam) / 2);
   cx: var(--r);
   cy: var(--r);
   r: calc(var(--r));
-  fill: none;
   stroke-width: var(--stroke);
   stroke-dasharray: calc(var(--r) * var(--π) * 2);
   stroke-dashoffset: calc((100 - var(--val)) / 100 * (var(--r) * var(--π) * 2));
 }
 
 // https://codepen.io/arrayzero/pen/LbvJvW
-.p50 {
-  --val: 50;
-}
 
-.sixty {
-  --val: 60;
+/* theme */
+.z-svg > .markers {
+  fill: none;
+  stroke: #9119e069;
 }
-
-.ninety {
-  --val: 90;
+.z-svg > .svg-progress {
+  fill: none;
 }
+