Skip to content

Commit 760af99

Browse files
tinchox5tinchox5
committed
new desgin for orbit
1 parent e40ae8b commit 760af99

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+1120
-9
lines changed

‎.vscode/settings.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
],
1919
"liveSassCompile.settings.excludeList": [
2020
"**/node_modules/**",
21-
".vscode/**"
21+
".vscode/**",
22+
"old/**"
2223
],
2324
"liveSassCompile.settings.generateMap": true,
2425
"liveSassCompile.settings.autoprefix": [

‎assets/css/orbit-base.min.css

-1
This file was deleted.

‎assets/css/orbit-base.min.css.map

-1
This file was deleted.

‎assets/css/orbit-theme.min.css

-1
This file was deleted.

‎assets/css/orbit-theme.min.css.map

-1
This file was deleted.

‎assets/css/orbit.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/css/orbit.min.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/orbit/index.html

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="../../dist/css/orbit.css">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<div class="orbital-zone">
11+
<div class="orbit-6">
12+
<div class="vector x5"></div>
13+
14+
<div class="vector "></div>
15+
<div class="vector "></div>
16+
<div class="vector "></div>
17+
<div class="vector"></div>
18+
<div class="vector"></div>
19+
20+
<div class="vector"></div>
21+
<div class="vector"></div>
22+
<div class="vector"></div>
23+
<div class="vector"></div>
24+
<div class="vector"></div>
25+
<div class="vector"></div>
26+
</div>
27+
<div class="orbit-9 ">
28+
<o-sector class=""></o-sector>
29+
<o-sector class=""></o-sector>
30+
<o-sector></o-sector>
31+
<o-sector></o-sector>
32+
<o-sector></o-sector>
33+
<o-sector></o-sector>
34+
<o-sector class=" "></o-sector>
35+
<o-sector class=" "></o-sector>
36+
<o-sector class=" "></o-sector>
37+
<o-sector class=" "></o-sector>
38+
<o-sector></o-sector>
39+
<o-sector></o-sector>
40+
</div>
41+
42+
<div class="orbit-5"></div>
43+
<div class="orbit-9 " style="border: none;">
44+
<div class="satellite">
45+
46+
<div class="orbital-zone">
47+
<div class="orbit-12 "></div>
48+
</div>
49+
</div>
50+
<div class="satellite ">
51+
<div class="orbital-zone">
52+
<div class="orbit-12 "></div>
53+
</div>
54+
</div>
55+
<div class="satellite ">
56+
<div class="orbital-zone">
57+
<div class="orbit-12 "></div>
58+
</div>
59+
</div>
60+
<div class="satellite ">
61+
<div class="orbital-zone">
62+
<div class="orbit-12 "></div>
63+
</div>
64+
</div>
65+
<div class="satellite ">
66+
<div class="orbital-zone">
67+
<div class="orbit-12 "></div>
68+
</div>
69+
</div>
70+
<div class="satellite ">
71+
<div class="orbital-zone">
72+
<div class="orbit-12 "></div>
73+
</div>
74+
</div>
75+
<div class="satellite ">
76+
<div class="orbital-zone">
77+
<div class="orbit-12 "></div>
78+
</div>
79+
</div>
80+
<div class="satellite ">
81+
<div class="orbital-zone">
82+
<div class="orbit-12 "></div>
83+
</div>
84+
</div>
85+
<div class="satellite ">
86+
<div class="orbital-zone">
87+
<div class="orbit-12 "></div>
88+
</div>
89+
</div>
90+
<div class="satellite ">
91+
<div class="orbital-zone">
92+
<div class="orbit-12 "></div>
93+
</div>
94+
</div>
95+
<div class="satellite ">
96+
<div class="orbital-zone">
97+
<div class="orbit-12 "></div>
98+
</div>
99+
</div>
100+
<div class="satellite ">
101+
<div class="orbital-zone">
102+
<div class="orbit-12 "></div>
103+
</div>
104+
</div>
105+
</div>
106+
<div class="orbit-8"></div>
107+
<div class="orbit-10"></div>
108+
109+
<div class="orbit-11">
110+
<o-progress class="x2 rounded" style="--o-progress: 20"></o-progress>
111+
</div>
112+
<div class="orbit-12">
113+
<div class="satellite"></div>
114+
<div class="satellite"></div>
115+
<div class="satellite"></div>
116+
<div class="satellite"></div>
117+
<div class="satellite"></div>
118+
<div class="satellite"></div>
119+
<div class="satellite"></div>
120+
<div class="satellite"></div>
121+
<div class="satellite"></div>
122+
<div class="satellite"></div>
123+
<div class="satellite"></div>
124+
<div class="satellite"></div>
125+
<div class="satellite"></div>
126+
<div class="satellite"></div>
127+
<div class="satellite"></div>
128+
<div class="satellite"></div>
129+
<div class="satellite"></div>
130+
<div class="satellite"></div>
131+
<div class="satellite"></div>
132+
<div class="satellite"></div>
133+
<div class="satellite"></div>
134+
<div class="satellite"></div>
135+
<div class="satellite"></div>
136+
<div class="satellite"></div>
137+
</div>
138+
</div>
139+
<script src="../../src/components.js"></script>
140+
</body>
141+
</html>

‎src/base/_base-css-variables.scss ‎old/base/_base-css-variables.scss

File renamed without changes.

‎src/base/_reset.scss ‎old/base/_reset.scss

File renamed without changes.

‎src/base/_theme-css-variables.scss ‎old/base/_theme-css-variables.scss

File renamed without changes.

‎src/components/__base.scss ‎old/components/__base.scss

File renamed without changes.

‎src/components/__theme.scss ‎old/components/__theme.scss

File renamed without changes.

‎src/components/_container-base.scss ‎old/components/_container-base.scss

File renamed without changes.

‎src/components/_container-theme.scss ‎old/components/_container-theme.scss

File renamed without changes.

‎src/components/_core-base.scss ‎old/components/_core-base.scss

File renamed without changes.

‎src/components/_core-theme.scss ‎old/components/_core-theme.scss

File renamed without changes.

‎src/components/_label-base.scss ‎old/components/_label-base.scss

File renamed without changes.

‎src/components/_label-theme.scss ‎old/components/_label-theme.scss

File renamed without changes.

‎src/components/_orbit-base.scss ‎old/components/_orbit-base.scss

File renamed without changes.

‎src/components/_orbit-theme.scss ‎old/components/_orbit-theme.scss

File renamed without changes.

‎src/components/_orbiter-base.scss ‎old/components/_orbiter-base.scss

File renamed without changes.

‎src/components/_orbiter-theme.scss ‎old/components/_orbiter-theme.scss

File renamed without changes.

‎src/components/_progress-base.scss ‎old/components/_progress-base.scss

File renamed without changes.

‎src/components/_progress-theme.scss ‎old/components/_progress-theme.scss

File renamed without changes.

‎src/components/_sector-base.scss ‎old/components/_sector-base.scss

File renamed without changes.

‎src/components/_sector-theme.scss ‎old/components/_sector-theme.scss

File renamed without changes.

‎src/components/_svg-markers-base.scss ‎old/components/_svg-markers-base.scss

File renamed without changes.

‎src/components/_svg-markers-theme.scss ‎old/components/_svg-markers-theme.scss

File renamed without changes.

‎src/components/_svg-progress-base.scss ‎old/components/_svg-progress-base.scss

File renamed without changes.

‎src/components/_svg-progress-theme.scss ‎old/components/_svg-progress-theme.scss

File renamed without changes.

‎src/layouts/_media-queries.scss ‎old/layouts/_media-queries.scss

File renamed without changes.

‎src/layouts/_radial-grid.scss ‎old/layouts/_radial-grid.scss

File renamed without changes.

‎src/orbit-base.scss ‎old/orbit-base.scss

File renamed without changes.

‎src/orbit-theme.scss ‎old/orbit-theme.scss

File renamed without changes.

‎old/orbit.scss

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import './orbit-base';
2+
@import './orbit-theme';

‎src/settings/_mixins.scss ‎old/settings/_mixins.scss

File renamed without changes.

‎src/settings/_sass-variables.scss ‎old/settings/_sass-variables.scss

File renamed without changes.

‎src/utilities/_content.scss ‎old/utilities/_content.scss

File renamed without changes.

‎src/utilities/_filter-gooey.scss ‎old/utilities/_filter-gooey.scss

File renamed without changes.

‎src/_orbit.scss

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/* Orbit class */
2+
.orbit, [class*='orbit-'] {
3+
border: 1px solid #007bff; /* Orbit color and thickness */
4+
border-radius: 50%;
5+
position: absolute;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
--o-diameter: calc(var(--orbit-nth) * var(--o-lenght) / var(--max-orbits));
10+
--o-radius: calc(var(--o-diameter) / 2);
11+
width: calc(var(--o-diameter) / var(--ellipse-ratio-x));
12+
height: calc(var(--o-diameter) / var(--ellipse-ratio-y));
13+
}

‎src/_orbital-zone.scss

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/* Orbital zone class */
2+
.orbital-zone {
3+
--o-lenght: 300px;
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
border: none;
8+
width: var(--o-lenght);
9+
aspect-ratio: 1;
10+
position: absolute;
11+
pointer-events: none;
12+
}
13+
14+
.orbital-zone.top-left {
15+
align-items: flex-start !important;
16+
justify-content: flex-start !important;
17+
}
18+
.orbital-zone.top-center {
19+
align-items: flex-start !important;
20+
justify-content: center !important;
21+
}
22+
.orbital-zone.top-right {
23+
align-items: flex-start !important;
24+
justify-content: flex-end !important;
25+
}
26+
.orbital-zone.bottom-left {
27+
align-items: flex-end !important;
28+
justify-content: flex-start !important;
29+
}
30+
.orbital-zone.bottom-center {
31+
align-items: flex-end !important;
32+
justify-content: center !important;
33+
}
34+
.orbital-zone.bottom-right {
35+
align-items: flex-end !important;
36+
justify-content: flex-end !important;
37+
}
38+
.orbital-zone.center-left {
39+
align-items: center !important;
40+
justify-content: flex-start !important;
41+
}
42+
.orbital-zone.center {
43+
align-items: center !important;
44+
justify-content: center !important;
45+
}
46+
.orbital-zone.center-right {
47+
align-items: center !important;
48+
justify-content: flex-end !important;
49+
}

‎src/_progress.scss

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/* Progress class */
2+
o-progress {
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
border-radius: 50%;
7+
position: absolute;
8+
pointer-events: none;
9+
width: var(--o-diameter);
10+
--o-width-factor: 1;
11+
}
12+
o-progress.rounded {
13+
--o-linecap: round;
14+
}

‎src/_radial-layout.scss

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
2+
@use './variables' as *;
3+
4+
/* Orbit radial layout */
5+
6+
/* Orbits layout */
7+
.orbit-0 {
8+
--orbit-nth: 0;
9+
border: 1px solid red;
10+
}
11+
@for $i from 1 through $max-orbits {
12+
.orbit:nth-child(#{$i}), .orbit-#{$i} {
13+
--orbit-nth: #{$i};
14+
}
15+
}
16+
17+
/* Satellites, sectors and vectors layout */
18+
19+
@for $i from 1 through $max-orbiters {
20+
.satellite:nth-child(#{$i}), o-sector:nth-child(#{$i}), .vector:nth-child(#{$i}) {
21+
--sat-number: #{$i};
22+
}
23+
}
24+
25+
@for $i from 1 through $max-orbiters {
26+
.satellite:nth-child(#{$i}), o-sector:nth-child(#{$i}), .vector:nth-child(#{$i}) {
27+
--sat-number: #{$i};
28+
}
29+
}
30+
31+
@for $i from 1 through $max-orbiters {
32+
.orbit:has(> .satellite:nth-child(#{$i}), > o-sector:nth-child(#{$i}), > .vector:nth-child(#{$i})),
33+
[class*='orbit-']:has(> .satellite:nth-child(#{$i}), > o-sector:nth-child(#{$i}), > .vector:nth-child(#{$i})) {
34+
--angle: calc(var(--range) / #{$i});
35+
}
36+
}

‎src/_satellite.scss

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* Satellite class */
2+
.satellite {
3+
width: 5px; /* Adjust satellite size */
4+
height: 5px; /* Adjust satellite size */
5+
background-color: yellow; /* Adjust satellite color */
6+
border-radius: 50%; /* Make it a circle */
7+
border: 1px solid black;
8+
position: absolute;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
transform: translate(
13+
calc(
14+
var(--o-radius) / var(--ellipse-ratio-x) *
15+
cos(var(--begin-at) + var(--angle) * var(--sat-number))
16+
),
17+
calc(
18+
var(--o-radius) / var(--ellipse-ratio-y) *
19+
sin(var(--begin-at) + var(--angle) * var(--sat-number))
20+
)
21+
);
22+
}
23+
24+
.satellite > .orbital-zone {
25+
--o-lenght: var(--o-diameter);
26+
width: var(--o-lenght);
27+
height: auto;
28+
justify-content: center;
29+
align-items: center;
30+
}

‎src/_sector.scss

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
@use './variables' as *;
2+
/* Sector class */
3+
o-sector {
4+
container-name: sectors;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
border-radius: 50%;
9+
position: absolute;
10+
pointer-events: none;
11+
width: 100%;
12+
transform: rotate(calc((var(--begin-at) + var(--angle) * var(--sat-number))));
13+
---o-width-factor: 1;
14+
}
15+
16+
o-sector svg path {
17+
display: none;
18+
}
19+
@container sectors style(--ellipse-ratio-x: 1) and style(--ellipse-ratio-y: 1) {
20+
/* Conditional render sector if ratio equals 1*/
21+
o-sector svg path {
22+
display: block;
23+
}
24+
}
25+
26+
27+
o-sector svg {
28+
pointer-events: none;
29+
overflow: visible;
30+
}
31+
o-sector svg > * {
32+
pointer-events: stroke;
33+
}
34+
o-sector path {
35+
stroke-opacity: 0.5;
36+
border: 1px solid purple;
37+
}
38+
39+
o-sector path:hover {
40+
stroke: red;
41+
cursor: pointer;
42+
}

‎src/_settings.scss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@use './variables' as *;
2+
:root {
3+
--max-orbits: #{$max-orbits};
4+
--begin-at: 0deg;
5+
--range: 360deg;
6+
--ellipse-ratio-x: 1;
7+
--ellipse-ratio-y: 1;
8+
}
9+
10+
* {
11+
box-sizing: border-box;
12+
}

0 commit comments

Comments
 (0)