Skip to content

Commit 4177153

Browse files
tinchox5tinchox5
committed
update
1 parent 6a13049 commit 4177153

12 files changed

+268
-258
lines changed

‎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

+92-128
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,105 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<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>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="../../dist/css/orbit.css">
8+
<title>Document</title>
9+
<style>
10+
[class*="orbit-"] {
11+
border: none
12+
}
13+
.connector[class*="orbit-"], .connector [class*="orbit-"] {
14+
border: none !important
15+
}
16+
.connector .label {
17+
justify-content: flex-start;
18+
}
19+
.connector .satellite {
20+
border: none;
21+
background: none;
22+
23+
}
24+
.connector .title {
25+
border: 1px solid black;
26+
background: none;
27+
border-radius: 5%;
28+
width: fit-content;
29+
height: auto;
30+
}
31+
</style>
832
</head>
33+
934
<body>
35+
1036
<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>
37+
<div class="orbit-4">
38+
<div class="vector"></div>
39+
<div class="vector"></div>
40+
<div class="vector"></div>
41+
<div class="vector"></div>
42+
<div class="vector"></div>
43+
<div class="vector"></div>
44+
<div class="vector"></div>
45+
<div class="vector"></div>
46+
<div class="vector"></div>
47+
<div class="vector"></div>
48+
<div class="vector"></div>
49+
<div class="vector"></div>
50+
<div class="vector"></div>
51+
<div class="vector"></div>
52+
<div class="vector"></div>
53+
<div class="satellite">
54+
<div class="orbital-zone">
55+
<div class="orbit-12 connector">
56+
<div class="vector x11"></div>
57+
<div class="satellite" >
58+
<div class="orbital-zone">
59+
<div class="orbit-1">
60+
<div class="satellite label">
61+
<div class="title">hola</div>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
10366
</div>
10467
</div>
10568
</div>
106-
<div class="orbit-8"></div>
107-
<div class="orbit-10"></div>
69+
<div class="satellite"></div>
70+
<div class="satellite"></div>
71+
<div class="satellite"></div>
72+
<div class="satellite"></div>
73+
</div>
74+
<div class="orbit-6">
75+
<div class="satellite"></div>
76+
<div class="satellite"></div>
77+
<div class="satellite angle-20"></div>
78+
<div class="satellite"></div>
79+
<div class="satellite"></div>
80+
</div>
81+
<div class="orbit-9 ">
82+
<div class="vector"></div>
83+
<div class="vector"></div>
84+
<div class="vector"></div>
85+
<div class="vector"></div>
86+
<div class="vector"></div>
87+
</div>
88+
<div class="orbit-9 range-180">
89+
<o-sector></o-sector>
90+
<o-sector class="gap5"></o-sector>
91+
92+
<o-sector></o-sector>
93+
<o-sector></o-sector>
94+
</div>
95+
<div class="orbit-11">
96+
<o-progress value="12.999" max="50" max-angle="45"></o-progress>
10897

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>
13898
</div>
139-
<script src="../../src/components.js"></script>
99+
</div>
100+
101+
102+
<script src="../../src/components.js"></script>
140103
</body>
104+
141105
</html>

‎src/_orbit.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
display: flex;
77
justify-content: center;
88
align-items: center;
9-
--o-diameter: calc(var(--orbit-nth) * var(--o-lenght) / var(--max-orbits));
9+
--o-diameter: calc(var(--orbit-nth) * var(--o-lenght) / var(--o-max-orbits));
1010
--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));
11+
width: calc(var(--o-diameter) / var(--o-ellipse-x));
12+
height: calc(var(--o-diameter) / var(--o-ellipse-y));
1313
}

‎src/_orbital-zone.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* Orbital zone class */
22
.orbital-zone {
3-
--o-lenght: 300px;
3+
--o-lenght: 500px;
44
display: flex;
55
align-items: center;
66
justify-content: center;

‎src/_radial-layout.scss

+6-12
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,22 @@
99
border: 1px solid red;
1010
}
1111
@for $i from 1 through $max-orbits {
12-
.orbit:nth-child(#{$i}), .orbit-#{$i} {
12+
:nth-child(#{$i} of .orbit), .orbit-#{$i} {
1313
--orbit-nth: #{$i};
1414
}
1515
}
1616

1717
/* Satellites, sectors and vectors layout */
1818

1919
@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};
20+
:nth-child(#{$i} of .satellite), :nth-child(#{$i} of o-sector), :nth-child(#{$i} of .vector) {
21+
--o-position: #{$i};
2222
}
2323
}
2424

2525
@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});
26+
.orbit:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .vector)),
27+
[class*='orbit-']:has(> :nth-child(#{$i} of .satellite), > :nth-child(#{$i} of o-sector), > :nth-child(#{$i} of .vector)) {
28+
--o-angle: calc(var(--o-range) / #{$i});
3529
}
3630
}

‎src/_satellite.scss

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/* Satellite class */
22
.satellite {
3+
--o-angle-composite: var(--o-angle) * var(--o-position);
34
width: 5px; /* Adjust satellite size */
45
height: 5px; /* Adjust satellite size */
56
background-color: yellow; /* Adjust satellite color */
@@ -11,12 +12,12 @@
1112
align-items: center;
1213
transform: translate(
1314
calc(
14-
var(--o-radius) / var(--ellipse-ratio-x) *
15-
cos(var(--begin-at) + var(--angle) * var(--sat-number))
15+
var(--o-radius) / var(--o-ellipse-x) *
16+
cos(var(--o-begin-at) + var(--o-angle-composite))
1617
),
1718
calc(
18-
var(--o-radius) / var(--ellipse-ratio-y) *
19-
sin(var(--begin-at) + var(--angle) * var(--sat-number))
19+
var(--o-radius) / var(--o-ellipse-y) *
20+
sin(var(--o-begin-at) + var(--o-angle-composite))
2021
)
2122
);
2223
}

‎src/_sector.scss

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
@use './variables' as *;
22
/* Sector class */
33
o-sector {
4+
--o-angle-composite: var(--o-angle) * var(--o-position);
5+
---o-width-factor: 1;
46
container-name: sectors;
57
display: flex;
68
justify-content: center;
@@ -9,14 +11,13 @@ o-sector {
911
position: absolute;
1012
pointer-events: none;
1113
width: 100%;
12-
transform: rotate(calc((var(--begin-at) + var(--angle) * var(--sat-number))));
13-
---o-width-factor: 1;
14+
transform: rotate(calc(var(--o-begin-at) + var(--o-angle-composite)));
1415
}
1516

1617
o-sector svg path {
1718
display: none;
1819
}
19-
@container sectors style(--ellipse-ratio-x: 1) and style(--ellipse-ratio-y: 1) {
20+
@container sectors style(--o-ellipse-x: 1) and style(--o-ellipse-y: 1) {
2021
/* Conditional render sector if ratio equals 1*/
2122
o-sector svg path {
2223
display: block;
@@ -40,3 +41,4 @@ o-sector path:hover {
4041
stroke: red;
4142
cursor: pointer;
4243
}
44+

‎src/_settings.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
@use './variables' as *;
22
:root {
3-
--max-orbits: #{$max-orbits};
4-
--begin-at: 0deg;
5-
--range: 360deg;
6-
--ellipse-ratio-x: 1;
7-
--ellipse-ratio-y: 1;
3+
--o-max-orbits: #{$max-orbits};
4+
--o-begin-at: 0deg;
5+
--o-range: 360deg;
6+
--o-ellipse-x: 1;
7+
--o-ellipse-y: 1;
88
}
99

1010
* {

0 commit comments

Comments
 (0)