new desgin for orbit

zumerlab · Jul 20, 2024 · 760af99 · 760af99
1 parent e40ae8b
commit 760af99
Show file tree

Hide file tree

Showing 53 changed files with 1,120 additions and 9 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -18,7 +18,8 @@
     ],
     "liveSassCompile.settings.excludeList": [
         "**/node_modules/**",
-        ".vscode/**"
+        ".vscode/**",
+        "old/**"
     ],
     "liveSassCompile.settings.generateMap": true,
     "liveSassCompile.settings.autoprefix": [

diff --git a/assets/css/orbit-base.min.css b/assets/css/orbit-base.min.css
diff --git a/assets/css/orbit-base.min.css.map b/assets/css/orbit-base.min.css.map
diff --git a/assets/css/orbit-theme.min.css b/assets/css/orbit-theme.min.css
diff --git a/assets/css/orbit-theme.min.css.map b/assets/css/orbit-theme.min.css.map
diff --git a/assets/css/orbit.min.css b/assets/css/orbit.min.css
diff --git a/assets/css/orbit.min.css.map b/assets/css/orbit.min.css.map
diff --git a/examples/orbit/index.html b/examples/orbit/index.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../../dist/css/orbit.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="orbital-zone">
+        <div class="orbit-6">
+          <div class="vector x5"></div>
+
+          <div class="vector "></div>
+          <div class="vector "></div>
+          <div class="vector "></div>
+          <div class="vector"></div>
+          <div class="vector"></div>
+
+          <div class="vector"></div>
+          <div class="vector"></div>
+          <div class="vector"></div>
+          <div class="vector"></div>
+          <div class="vector"></div>
+          <div class="vector"></div>
+        </div>
+        <div class="orbit-9 ">
+          <o-sector class=""></o-sector>
+          <o-sector class=""></o-sector>
+          <o-sector></o-sector>
+          <o-sector></o-sector>
+          <o-sector></o-sector>
+          <o-sector></o-sector>
+          <o-sector class=" "></o-sector>
+          <o-sector class=" "></o-sector>
+          <o-sector class=" "></o-sector>
+          <o-sector class=" "></o-sector>
+          <o-sector></o-sector>
+          <o-sector></o-sector>
+        </div>
+
+        <div class="orbit-5"></div>
+        <div class="orbit-9 " style="border: none;">
+          <div class="satellite">
+
+            <div class="orbital-zone">
+              <div class="orbit-12 "></div>
+            </div>
+          </div>
+          <div class="satellite ">
+            <div class="orbital-zone">
+              <div class="orbit-12 "></div>
+            </div>
+          </div>
+          <div class="satellite ">
+            <div class="orbital-zone">
+              <div class="orbit-12 "></div>
+            </div>
+          </div>
+          <div class="satellite ">
+            <div class="orbital-zone">
+              <div class="orbit-12 "></div>
+            </div>
+          </div>
+          <div class="satellite ">
+            <div class="orbital-zone">
+              <div class="orbit-12 "></div>
+            </div>
+          </div>
+          <div class="satellite ">
+            <div class="orbital-zone">
+              <div class="orbit-12 "></div>
+            </div>
+          </div>
+          <div class="satellite ">
+            <div class="orbital-zone">
+              <div class="orbit-12 "></div>
+            </div>
+          </div>
+          <div class="satellite ">
+            <div class="orbital-zone">
+              <div class="orbit-12 "></div>
+            </div>
+          </div>
+          <div class="satellite ">
+            <div class="orbital-zone">
+              <div class="orbit-12 "></div>
+            </div>
+          </div>
+          <div class="satellite ">
+            <div class="orbital-zone">
+              <div class="orbit-12 "></div>
+            </div>
+          </div>
+          <div class="satellite ">
+            <div class="orbital-zone">
+              <div class="orbit-12 "></div>
+            </div>
+          </div>
+          <div class="satellite ">
+            <div class="orbital-zone">
+              <div class="orbit-12 "></div>
+            </div>
+          </div>
+        </div>
+        <div class="orbit-8"></div>
+        <div class="orbit-10"></div>
+
+        <div class="orbit-11">
+          <o-progress class="x2 rounded" style="--o-progress: 20"></o-progress>
+        </div>
+        <div class="orbit-12">
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+          <div class="satellite"></div>
+        </div>
+      </div>
+      <script src="../../src/components.js"></script>
+</body>
+</html>
diff --git a/src/base/_base-css-variables.scss → old/base/_base-css-variables.scss b/src/base/_base-css-variables.scss → old/base/_base-css-variables.scss
diff --git a/src/base/_reset.scss → old/base/_reset.scss b/src/base/_reset.scss → old/base/_reset.scss
diff --git a/src/base/_theme-css-variables.scss → old/base/_theme-css-variables.scss b/src/base/_theme-css-variables.scss → old/base/_theme-css-variables.scss
diff --git a/src/components/__base.scss → old/components/__base.scss b/src/components/__base.scss → old/components/__base.scss
diff --git a/src/components/__theme.scss → old/components/__theme.scss b/src/components/__theme.scss → old/components/__theme.scss
diff --git a/src/components/_container-base.scss → old/components/_container-base.scss b/src/components/_container-base.scss → old/components/_container-base.scss
diff --git a/src/components/_container-theme.scss → old/components/_container-theme.scss b/src/components/_container-theme.scss → old/components/_container-theme.scss
diff --git a/src/components/_core-base.scss → old/components/_core-base.scss b/src/components/_core-base.scss → old/components/_core-base.scss
diff --git a/src/components/_core-theme.scss → old/components/_core-theme.scss b/src/components/_core-theme.scss → old/components/_core-theme.scss
diff --git a/src/components/_label-base.scss → old/components/_label-base.scss b/src/components/_label-base.scss → old/components/_label-base.scss
diff --git a/src/components/_label-theme.scss → old/components/_label-theme.scss b/src/components/_label-theme.scss → old/components/_label-theme.scss
diff --git a/src/components/_orbit-base.scss → old/components/_orbit-base.scss b/src/components/_orbit-base.scss → old/components/_orbit-base.scss
diff --git a/src/components/_orbit-theme.scss → old/components/_orbit-theme.scss b/src/components/_orbit-theme.scss → old/components/_orbit-theme.scss
diff --git a/src/components/_orbiter-base.scss → old/components/_orbiter-base.scss b/src/components/_orbiter-base.scss → old/components/_orbiter-base.scss
diff --git a/src/components/_orbiter-theme.scss → old/components/_orbiter-theme.scss b/src/components/_orbiter-theme.scss → old/components/_orbiter-theme.scss
diff --git a/src/components/_progress-base.scss → old/components/_progress-base.scss b/src/components/_progress-base.scss → old/components/_progress-base.scss
diff --git a/src/components/_progress-theme.scss → old/components/_progress-theme.scss b/src/components/_progress-theme.scss → old/components/_progress-theme.scss
diff --git a/src/components/_sector-base.scss → old/components/_sector-base.scss b/src/components/_sector-base.scss → old/components/_sector-base.scss
diff --git a/src/components/_sector-theme.scss → old/components/_sector-theme.scss b/src/components/_sector-theme.scss → old/components/_sector-theme.scss
diff --git a/src/components/_svg-markers-base.scss → old/components/_svg-markers-base.scss b/src/components/_svg-markers-base.scss → old/components/_svg-markers-base.scss
diff --git a/src/components/_svg-markers-theme.scss → old/components/_svg-markers-theme.scss b/src/components/_svg-markers-theme.scss → old/components/_svg-markers-theme.scss
diff --git a/src/components/_svg-progress-base.scss → old/components/_svg-progress-base.scss b/src/components/_svg-progress-base.scss → old/components/_svg-progress-base.scss
diff --git a/src/components/_svg-progress-theme.scss → old/components/_svg-progress-theme.scss b/src/components/_svg-progress-theme.scss → old/components/_svg-progress-theme.scss
diff --git a/src/layouts/_media-queries.scss → old/layouts/_media-queries.scss b/src/layouts/_media-queries.scss → old/layouts/_media-queries.scss
diff --git a/src/layouts/_radial-grid.scss → old/layouts/_radial-grid.scss b/src/layouts/_radial-grid.scss → old/layouts/_radial-grid.scss
diff --git a/src/orbit-base.scss → old/orbit-base.scss b/src/orbit-base.scss → old/orbit-base.scss
diff --git a/src/orbit-theme.scss → old/orbit-theme.scss b/src/orbit-theme.scss → old/orbit-theme.scss
diff --git a/old/orbit.scss b/old/orbit.scss
@@ -0,0 +1,2 @@
+@import './orbit-base';
+@import './orbit-theme';
diff --git a/src/settings/_mixins.scss → old/settings/_mixins.scss b/src/settings/_mixins.scss → old/settings/_mixins.scss
diff --git a/src/settings/_sass-variables.scss → old/settings/_sass-variables.scss b/src/settings/_sass-variables.scss → old/settings/_sass-variables.scss
diff --git a/src/utilities/_content.scss → old/utilities/_content.scss b/src/utilities/_content.scss → old/utilities/_content.scss
diff --git a/src/utilities/_filter-gooey.scss → old/utilities/_filter-gooey.scss b/src/utilities/_filter-gooey.scss → old/utilities/_filter-gooey.scss
diff --git a/src/_orbit.scss b/src/_orbit.scss
@@ -0,0 +1,13 @@
+/* Orbit class */
+.orbit, [class*='orbit-'] {
+  border: 1px solid #007bff; /* Orbit color and thickness */
+  border-radius: 50%;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  --o-diameter: calc(var(--orbit-nth) * var(--o-lenght) / var(--max-orbits));
+  --o-radius: calc(var(--o-diameter) / 2);
+  width: calc(var(--o-diameter) / var(--ellipse-ratio-x));
+  height: calc(var(--o-diameter) / var(--ellipse-ratio-y));
+}
diff --git a/src/_orbital-zone.scss b/src/_orbital-zone.scss
@@ -0,0 +1,49 @@
+/* Orbital zone class */
+.orbital-zone {
+  --o-lenght: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  width: var(--o-lenght);
+  aspect-ratio: 1;
+  position: absolute;
+  pointer-events: none;
+}
+
+.orbital-zone.top-left {
+  align-items: flex-start !important;
+  justify-content: flex-start !important;
+}
+.orbital-zone.top-center {
+  align-items: flex-start !important;
+  justify-content: center !important;
+}
+.orbital-zone.top-right {
+  align-items: flex-start !important;
+  justify-content: flex-end !important;
+}
+.orbital-zone.bottom-left {
+  align-items: flex-end !important;
+  justify-content: flex-start !important;
+}
+.orbital-zone.bottom-center {
+  align-items: flex-end !important;
+  justify-content: center !important;
+}
+.orbital-zone.bottom-right {
+  align-items: flex-end !important;
+  justify-content: flex-end !important;
+}
+.orbital-zone.center-left {
+  align-items: center !important;
+  justify-content: flex-start !important;
+}
+.orbital-zone.center {
+  align-items: center !important;
+  justify-content: center !important;
+}
+.orbital-zone.center-right {
+  align-items: center !important;
+  justify-content: flex-end !important;
+}
diff --git a/src/_progress.scss b/src/_progress.scss
@@ -0,0 +1,14 @@
+/* Progress class */
+o-progress {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  position: absolute;
+  pointer-events: none;
+  width: var(--o-diameter);
+  --o-width-factor: 1;
+}
+o-progress.rounded {
+  --o-linecap: round;
+}
diff --git a/src/_radial-layout.scss b/src/_radial-layout.scss
@@ -0,0 +1,36 @@
+
+@use './variables' as *;
+
+/* Orbit radial layout */
+
+/* Orbits layout */
+.orbit-0 {
+  --orbit-nth: 0;
+  border: 1px solid red;
+}
+@for $i from 1 through $max-orbits {
+    .orbit:nth-child(#{$i}), .orbit-#{$i} {
+    --orbit-nth: #{$i};
+    }
+}
+
+/* Satellites, sectors and vectors layout */
+
+@for $i from 1 through $max-orbiters {
+    .satellite:nth-child(#{$i}), o-sector:nth-child(#{$i}), .vector:nth-child(#{$i}) {
+    --sat-number: #{$i};
+    }
+}
+
+@for $i from 1 through $max-orbiters {
+    .satellite:nth-child(#{$i}), o-sector:nth-child(#{$i}), .vector:nth-child(#{$i}) {
+    --sat-number: #{$i};
+    }
+}
+
+@for $i from 1 through $max-orbiters {
+    .orbit:has(> .satellite:nth-child(#{$i}), > o-sector:nth-child(#{$i}), > .vector:nth-child(#{$i})),
+    [class*='orbit-']:has(> .satellite:nth-child(#{$i}), > o-sector:nth-child(#{$i}), > .vector:nth-child(#{$i})) {
+    --angle: calc(var(--range) / #{$i});
+    }
+}
diff --git a/src/_satellite.scss b/src/_satellite.scss
@@ -0,0 +1,30 @@
+/* Satellite class */
+.satellite {
+  width: 5px; /* Adjust satellite size */
+  height: 5px; /* Adjust satellite size */
+  background-color: yellow; /* Adjust satellite color */
+  border-radius: 50%; /* Make it a circle */
+  border: 1px solid black;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: translate(
+    calc(
+      var(--o-radius) / var(--ellipse-ratio-x) *
+        cos(var(--begin-at) + var(--angle) * var(--sat-number))
+    ),
+    calc(
+      var(--o-radius) / var(--ellipse-ratio-y) *
+        sin(var(--begin-at) + var(--angle) * var(--sat-number))
+    )
+  );
+}
+
+.satellite > .orbital-zone {
+  --o-lenght: var(--o-diameter);
+  width: var(--o-lenght);
+  height: auto;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/src/_sector.scss b/src/_sector.scss
@@ -0,0 +1,42 @@
+@use './variables' as *;
+/* Sector class */
+o-sector {
+  container-name: sectors;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  position: absolute;
+  pointer-events: none;
+  width: 100%;
+  transform: rotate(calc((var(--begin-at) + var(--angle) * var(--sat-number))));
+  ---o-width-factor: 1;
+}
+
+o-sector svg path {
+  display: none;
+}
+@container sectors style(--ellipse-ratio-x: 1) and style(--ellipse-ratio-y: 1) {
+  /* Conditional render sector if ratio equals 1*/
+  o-sector svg path {
+    display: block;
+  }
+}
+
+
+o-sector svg {
+  pointer-events: none;
+  overflow: visible;
+}
+o-sector svg > * {
+  pointer-events: stroke;
+}
+o-sector path {
+  stroke-opacity: 0.5;
+  border: 1px solid purple;
+}
+
+o-sector path:hover {
+  stroke: red;
+  cursor: pointer;
+}
diff --git a/src/_settings.scss b/src/_settings.scss
@@ -0,0 +1,12 @@
+@use './variables'  as *;
+:root {
+  --max-orbits: #{$max-orbits};
+  --begin-at: 0deg;
+  --range: 360deg;
+  --ellipse-ratio-x: 1;
+  --ellipse-ratio-y: 1;
+}
+
+* {
+  box-sizing: border-box;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import './orbit-base';
		@import './orbit-theme';