@zumer/orbit 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +9 -5
- package/dist/orbit.css +76 -48
- package/dist/orbit.js +245 -316
- package/dist/orbit.min.css +1 -1
- package/dist/orbit.min.js +62 -40
- package/package.json +1 -1
package/LICENSE
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
MIT License
|
|
2
2
|
|
|
3
|
-
Copyright (c)
|
|
3
|
+
Copyright (c) 2025 Juan Martín Muda - ZumerLab
|
|
4
4
|
|
|
5
5
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
6
|
of this software and associated documentation files (the "Software"), to deal
|
package/README.md
CHANGED
|
@@ -26,11 +26,14 @@ place your ⭐ in Orbit! <a href="https://github.com/zumerlab/orbit/stargazers">
|
|
|
26
26
|
|
|
27
27
|
**Orbit** is a CSS framework designed for creating radial layouts. It offers simplicity, effectiveness, ease of use, and tremendous versatility for crafting compelling designs. It offers extensive customization options and supports nesting for building intricate designs tailored to your requirements.
|
|
28
28
|
|
|
29
|
-
|
|
30
29
|
## Why Orbit?
|
|
31
30
|
|
|
32
31
|
Creating radial UIs generally involves using JavaScript or other programming languages to calculate angles, radii, distances, and more. **Orbit** saves you time and effort by enabling you to build these UIs with just CSS.
|
|
33
32
|
|
|
33
|
+
## Documentation
|
|
34
|
+
|
|
35
|
+
Learn all about **Orbit** in our [doc site](https://zumerlab.github.io/orbit-docs)!
|
|
36
|
+
|
|
34
37
|
## What is radial UI?
|
|
35
38
|
|
|
36
39
|
Radial UI refers to a design paradigm where elements are organized in a circular or radial pattern, diverging from traditional grid-based or linear layouts. This design approach is particularly effective for applications that involve:
|
|
@@ -64,10 +67,6 @@ With **Orbit**, you can:
|
|
|
64
67
|
- Use **Orbit** alongside other traditional CSS frameworks.
|
|
65
68
|
- Get started quickly with our detailed documentation, examples, and guides.
|
|
66
69
|
|
|
67
|
-
## Documentation
|
|
68
|
-
|
|
69
|
-
Learn all about **Orbit** in our [doc site](https://zumerlab.github.io/orbit-docs)!
|
|
70
|
-
|
|
71
70
|
## Installation
|
|
72
71
|
|
|
73
72
|
**Orbit** comes with just two files: `orbit.css` (or `orbit.min.css`) and `orbit.js` (or `orbit.min.js`).
|
|
@@ -155,6 +154,11 @@ There are many ways to **contribute** to **Orbit** development:
|
|
|
155
154
|
- [**GitHub discussions**](https://github.com/zumerlab/orbit/discussions): Engage with other contributors, ask questions, and share your experiences.
|
|
156
155
|
- [**Telegram group**](https://t.me/ZumlyCommunity): Join our Telegram group for real-time discussions and updates.
|
|
157
156
|
|
|
157
|
+
## Special thanks to Doc Contributors
|
|
158
|
+
|
|
159
|
+
<a href="https://github.com/zumerlab/orbit-docs/graphs/contributors">
|
|
160
|
+
<img src="https://contrib.rocks/image?repo=zumerlab/orbit-docs" />
|
|
161
|
+
</a>
|
|
158
162
|
|
|
159
163
|
## License
|
|
160
164
|
|
package/dist/orbit.css
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
3
|
* orbit
|
|
4
|
-
* v.1.
|
|
4
|
+
* v.1.1.0
|
|
5
5
|
* Author Juan Martin Muda - Zumerlab
|
|
6
6
|
* License MIT
|
|
7
7
|
**/
|
|
8
8
|
@charset "UTF-8";
|
|
9
9
|
|
|
10
|
-
/* ../../../../../var/folders/dl/jfswzzq96_7bqvgnhjs47_8w0000gp/T/tmp-
|
|
10
|
+
/* ../../../../../var/folders/dl/jfswzzq96_7bqvgnhjs47_8w0000gp/T/tmp-63323-uDKMmYzQL1SX/orbit/src/orbit.css */
|
|
11
11
|
.gravity-spot * {
|
|
12
12
|
box-sizing: border-box;
|
|
13
13
|
margin: 0;
|
|
@@ -1216,35 +1216,10 @@ o-arc {
|
|
|
1216
1216
|
border-radius: 50%;
|
|
1217
1217
|
position: absolute;
|
|
1218
1218
|
pointer-events: none;
|
|
1219
|
-
fill: currentColor;
|
|
1220
1219
|
width: 100%;
|
|
1221
1220
|
r: var(--o-radius);
|
|
1222
|
-
stroke-width: calc(var(--o-radius) / (var(--o-orbit-number) + var(--o-initial-orbit, 0)) * var(--o-size-ratio, 1));
|
|
1223
1221
|
transform: rotate(calc(var(--o-from) + var(--o-angle-composite)));
|
|
1224
1222
|
}
|
|
1225
|
-
o-arc[flip]:not([value]),
|
|
1226
|
-
o-arc.flip:not([value]) {
|
|
1227
|
-
--o-angle-composite: var(--o-angle) * calc(var(--o-orbit-child-number) + 1) * var(--o-direction, 1);
|
|
1228
|
-
}
|
|
1229
|
-
o-text {
|
|
1230
|
-
--o-angle-composite: var(--o-angle) * var(--o-orbit-child-number) * var(--o-direction, 1);
|
|
1231
|
-
container-name: otext;
|
|
1232
|
-
display: flex;
|
|
1233
|
-
justify-content: center;
|
|
1234
|
-
align-items: center;
|
|
1235
|
-
border-radius: 50%;
|
|
1236
|
-
position: absolute;
|
|
1237
|
-
pointer-events: none;
|
|
1238
|
-
width: 100%;
|
|
1239
|
-
fill: currentColor;
|
|
1240
|
-
r: var(--o-radius);
|
|
1241
|
-
stroke-width: calc(var(--o-radius) / (var(--o-orbit-number) + var(--o-initial-orbit, 0)) * var(--o-size-ratio, 1));
|
|
1242
|
-
transform: rotate(calc(var(--o-from) + var(--o-angle-composite)));
|
|
1243
|
-
}
|
|
1244
|
-
o-text[flip],
|
|
1245
|
-
o-text.flip {
|
|
1246
|
-
--o-angle-composite: var(--o-angle) * calc(var(--o-orbit-child-number) + 1) * var(--o-direction, 1);
|
|
1247
|
-
}
|
|
1248
1223
|
o-progress {
|
|
1249
1224
|
container-name: oprogress;
|
|
1250
1225
|
--o-angle-composite: var(--o-angle) * var(--o-orbit-child-number) * var(--o-direction, 1);
|
|
@@ -6855,46 +6830,82 @@ o-arc.gap-30 {
|
|
|
6855
6830
|
background: currentcolor;
|
|
6856
6831
|
}
|
|
6857
6832
|
o-progress {
|
|
6858
|
-
--o-
|
|
6859
|
-
--o-
|
|
6860
|
-
--o-
|
|
6833
|
+
--o-fill: var(--o-gray-light);
|
|
6834
|
+
--o-stroke: var(--o-fill);
|
|
6835
|
+
--o-stroke-width: 1;
|
|
6836
|
+
--o-back-fill: transparent;
|
|
6837
|
+
--o-back-stroke: none;
|
|
6838
|
+
--o-back-stroke-width: 1;
|
|
6839
|
+
}
|
|
6840
|
+
o-progress:hover {
|
|
6841
|
+
--o-fill: var(--o-gray-light);
|
|
6842
|
+
--o-stroke: var(--o-fill);
|
|
6843
|
+
--o-stroke-width: 1;
|
|
6844
|
+
--o-back-fill: transparent;
|
|
6845
|
+
--o-back-stroke: none;
|
|
6846
|
+
--o-back-stroke-width: 1;
|
|
6861
6847
|
}
|
|
6862
6848
|
o-arc {
|
|
6863
|
-
--o-
|
|
6864
|
-
--o-
|
|
6849
|
+
--o-fill: var(--o-gray-light);
|
|
6850
|
+
--o-stroke: var(--o-fill);
|
|
6851
|
+
--o-stroke-width: 1;
|
|
6852
|
+
}
|
|
6853
|
+
o-arc:hover {
|
|
6854
|
+
--o-fill: var(--o-gray-light);
|
|
6855
|
+
--o-stroke: var(--o-fill);
|
|
6856
|
+
--o-stroke-width: 1;
|
|
6865
6857
|
}
|
|
6866
6858
|
.dev-orbit.gravity-spot {
|
|
6867
6859
|
background: none;
|
|
6868
|
-
border:
|
|
6860
|
+
border: 1px dashed var(--o-red-light);
|
|
6869
6861
|
}
|
|
6870
6862
|
.dev-orbit .gravity-spot {
|
|
6871
6863
|
background: none;
|
|
6872
|
-
border:
|
|
6864
|
+
border: 1px dashed var(--o-red-light);
|
|
6873
6865
|
}
|
|
6874
6866
|
.dev-orbit .orbit,
|
|
6875
6867
|
.dev-orbit [class*=orbit-] {
|
|
6876
|
-
border:
|
|
6868
|
+
border: 1px dashed var(--o-red-light);
|
|
6877
6869
|
}
|
|
6878
6870
|
.dev-orbit .satellite {
|
|
6879
6871
|
background-color: transparent;
|
|
6880
|
-
border: 1px
|
|
6872
|
+
border: 1px dashed var(--o-red-light);
|
|
6881
6873
|
}
|
|
6882
6874
|
.dev-orbit .vector {
|
|
6883
6875
|
border: none;
|
|
6884
|
-
background:
|
|
6876
|
+
background: var(--o-red-light);
|
|
6885
6877
|
}
|
|
6886
6878
|
.dev-orbit .side {
|
|
6887
6879
|
border: none;
|
|
6888
|
-
background:
|
|
6880
|
+
background: var(--o-red-light);
|
|
6889
6881
|
}
|
|
6890
6882
|
.dev-orbit o-progress {
|
|
6891
|
-
--o-
|
|
6892
|
-
--o-
|
|
6893
|
-
--o-
|
|
6883
|
+
--o-fill: var(--o-red-lighter);
|
|
6884
|
+
--o-stroke: var(--o-red-lighter);
|
|
6885
|
+
--o-stroke-width: 1;
|
|
6886
|
+
--o-back-fill: var(--o-red-lighter);
|
|
6887
|
+
--o-back-stroke: var(--o-red-lighter);
|
|
6888
|
+
--o-back-stroke-width: 1;
|
|
6889
|
+
fill-opacity: 0.5;
|
|
6890
|
+
}
|
|
6891
|
+
.dev-orbit o-progress:hover {
|
|
6892
|
+
--o-fill: var(--o-red-light);
|
|
6893
|
+
--o-stroke: var(--o-red-light);
|
|
6894
|
+
--o-stroke-width: 2;
|
|
6895
|
+
--o-back-fill: var(--o-red-light);
|
|
6896
|
+
--o-back-stroke: var(--o-red-light);
|
|
6897
|
+
--o-back-stroke-width: 2;
|
|
6894
6898
|
}
|
|
6895
6899
|
.dev-orbit o-arc {
|
|
6896
|
-
--o-
|
|
6897
|
-
--o-
|
|
6900
|
+
--o-fill: var(--o-red-lighter);
|
|
6901
|
+
--o-stroke: var(--o-red-lighter);
|
|
6902
|
+
--o-stroke-width: 1;
|
|
6903
|
+
fill-opacity: 0.5;
|
|
6904
|
+
}
|
|
6905
|
+
.dev-orbit o-arc:hover {
|
|
6906
|
+
--o-fill: var(--o-red-light);
|
|
6907
|
+
--o-stroke: var(--o-red-light);
|
|
6908
|
+
--o-stroke-width: 2;
|
|
6898
6909
|
}
|
|
6899
6910
|
.theme-cyan .gravity-spot {
|
|
6900
6911
|
background: none;
|
|
@@ -6917,11 +6928,28 @@ o-arc {
|
|
|
6917
6928
|
background: var(--o-cyan);
|
|
6918
6929
|
}
|
|
6919
6930
|
.theme-cyan o-progress {
|
|
6920
|
-
--o-
|
|
6921
|
-
--o-
|
|
6922
|
-
--o-
|
|
6931
|
+
--o-fill: var(--o-cyan-light);
|
|
6932
|
+
--o-stroke: var(--o-fill);
|
|
6933
|
+
--o-stroke-width: 1;
|
|
6934
|
+
--o-back-fill: transparent;
|
|
6935
|
+
--o-back-stroke: none;
|
|
6936
|
+
--o-back-stroke-width: 1;
|
|
6937
|
+
}
|
|
6938
|
+
.theme-cyan o-progress:hover {
|
|
6939
|
+
--o-fill: var(--o-cyan-lighter);
|
|
6940
|
+
--o-stroke: var(--o-fill);
|
|
6941
|
+
--o-stroke-width: 2;
|
|
6942
|
+
--o-back-fill: transparent;
|
|
6943
|
+
--o-back-stroke: none;
|
|
6944
|
+
--o-back-stroke-width: 2;
|
|
6923
6945
|
}
|
|
6924
6946
|
.theme-cyan o-arc {
|
|
6925
|
-
--o-
|
|
6926
|
-
--o-
|
|
6947
|
+
--o-fill: var(--o-cyan-light);
|
|
6948
|
+
--o-stroke: var(--o-fill);
|
|
6949
|
+
--o-stroke-width: 1;
|
|
6950
|
+
}
|
|
6951
|
+
.theme-cyan o-arc:hover {
|
|
6952
|
+
--o-fill: var(--o-cyan-lighter);
|
|
6953
|
+
--o-stroke: var(--o-fill);
|
|
6954
|
+
--o-stroke-width: 2;
|
|
6927
6955
|
}
|