Fix private scss and folders

zumerlab · Mar 28, 2023 · f6b00c6 · f6b00c6
1 parent 21fdb9b
commit f6b00c6
Show file tree

Hide file tree

Showing 9 changed files with 209 additions and 201 deletions.
diff --git a/css/index.css b/css/index.css
@@ -1,48 +1,4 @@
 /* Variables */
-/* Initial Reset */
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-/* Main elements */
-.z-container {
-  /* Layout vars */
-  --arc: 360;
-  --offset-angle: 0;
-  --direction: 1;
-  --angle: 1;
-  --radius: 10vw;
-  --item-number: 1;
-  --radius-padding: 8px;
-  --ring-1-factor: 1;
-  --ring-2-factor: 2;
-  --ring-3-factor: 3;
-  --ring-4-factor: 4;
-  --ring-5-factor: 5;
-  --ring-6-factor: 6;
-  /* Shape sizes */
-  --xxs: 8px;
-  --xs: 24px;
-  --s: 44px;
-  --m: 68px;
-  --l: 110px;
-  --xl: 180px;
-  --xxl: 288px;
-  /* Color */
-  --transparent: transparent;
-  --white: white;
-  --black: black;
-  /* width connector */
-  --connector-width: 40px;
-  --label-width: 50px;
-  /* svg */
-  --val: 0;
-  --diam: 400;
-  --stroke: 10;
-}
-
 .z-container {
   display: grid;
   grid-template-columns: minmax(var(--radius), 1fr);
@@ -562,6 +518,50 @@ div[class^=ring].ccw {
   --direction: -1;
 }
 
+/* Initial Reset */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Main elements */
+.z-container {
+  /* Layout vars */
+  --arc: 360;
+  --offset-angle: 0;
+  --direction: 1;
+  --angle: 1;
+  --radius: 10vw;
+  --item-number: 1;
+  --radius-padding: 8px;
+  --ring-1-factor: 1;
+  --ring-2-factor: 2;
+  --ring-3-factor: 3;
+  --ring-4-factor: 4;
+  --ring-5-factor: 5;
+  --ring-6-factor: 6;
+  /* Shape sizes */
+  --xxs: 8px;
+  --xs: 24px;
+  --s: 44px;
+  --m: 68px;
+  --l: 110px;
+  --xl: 180px;
+  --xxl: 288px;
+  /* Color */
+  --transparent: transparent;
+  --white: white;
+  --black: black;
+  /* width connector */
+  --connector-width: 40px;
+  --label-width: 50px;
+  /* svg */
+  --val: 0;
+  --diam: 400;
+  --stroke: 10;
+}
+
 .items-1 > .item {
   --angle: calc((var(--arc) / 1) * var(--direction));
 }
@@ -3526,6 +3526,7 @@ svg {
   --val: 90;
 }
 
+/* Core elements */
 /* Radial grid */
 /* Shapes */
 /* Components */

diff --git a/css/index.css.map b/css/index.css.map
diff --git a/dist/css/index.min.css b/dist/css/index.min.css
diff --git a/dist/css/index.min.css.map b/dist/css/index.min.css.map
diff --git a/src/_core-elements.scss b/src/_core-elements.scss
@@ -0,0 +1,149 @@
+@use "./mixins" as *;
+@use "./variables" as *;
+
+.z-container {
+    display: grid;
+    grid-template-columns: minmax(var(--radius), 1fr);
+    grid-template-rows: minmax(var(--radius), 1fr);
+    border: 1px dashed black;
+    @include alignment;
+    padding: 30px;
+}
+
+.item {
+    display: grid;
+    background-color: rgb(255, 255, 255);
+    border: 1px solid black;
+    grid-area: 1/1/1/1;
+    @include alignment;
+    z-index: 1;
+}
+
+//defaults
+.item {
+    width: var(--m);
+    height: var(--m);
+    border-radius: 50%;
+}
+
+.content {
+    padding: 5px;
+    width: inherit;
+    height: inherit;
+    display: grid;
+    border-radius: inherit;
+    background-color: rgba(0, 170, 248, 0.815);
+    grid-area: 1/1/1/1;
+    @include alignment;
+    overflow: hidden;
+    z-index: 10;
+}
+
+.content1 {
+    padding: 5px;
+    width: inherit;
+    height: inherit;
+    display: grid;
+    border-radius: inherit;
+    grid-area: 1/1/1/1;
+    @include alignment;
+    overflow: hidden;
+    z-index: -10;
+}
+
+.item.a0 {
+    --angle: 0;
+}
+
+.item.a45 {
+    --angle: 45;
+}
+
+.item.a90 {
+    --angle: 90;
+}
+
+.item.a135 {
+    --angle: 135;
+}
+
+.core {
+    width: 0px;
+    height: 0px;
+    display: grid;
+    border-radius: 50%;
+    border: 1px solid rgb(255, 5, 5);
+    grid-area: 1/1/1/1;
+    align-items: center;
+}
+
+div[class^="ring"] {
+    display: grid;
+    border-radius: 50%;
+    border: 1px dashed rgba(155, 155, 155, 0.5);
+    grid-area: 1/1/1/1;
+    @include alignment;
+}
+
+@each $size,
+$var in $sizes {
+    .item.#{$size} {
+        width: $var;
+        height: $var;
+    }
+}
+
+@each $arc,
+$value in $arcs {
+    .core.#{$arc} {
+        --arc: #{$value};
+    }
+}
+
+.core.ccw {
+    --direction: -1;
+}
+
+@each $sector,
+$angle in $sectors {
+    .core.#{$sector} {
+        --offset-angle:#{$angle};
+    }
+}
+
+@for $i from $min-rings through $max-rings {
+    .z-container>.ring-#{$i} {
+        width: calc(var(--radius) * 2 * var(--ring-#{$i}-factor));
+        height: calc(var(--radius) * 2 * var(--ring-#{$i}-factor));
+    }
+}
+
+@for $i from $min-items through $max-items {
+    .item:nth-child(#{$i}) {
+        --item-number:#{$i};
+    }
+}
+
+@for $i from $min-rings through $max-rings {
+
+    @each $sector,
+    $angle in $sectors {
+        .ring-#{$i}.#{$sector} {
+            --offset-angle:#{$angle};
+        }
+    }
+}
+
+
+
+@each $arc,
+$value in $arcs {
+    div[class^="ring"].#{$arc} {
+        --arc: #{$value};
+    }
+}
+
+
+div[class^="ring"].ccw {
+    --direction: -1;
+}