Skip to content

Commit f6b00c6

Browse files
author
Martin Muda
committed
Fix private scss and folders
1 parent 21fdb9b commit f6b00c6

9 files changed

+209
-201
lines changed

‎css/index.css

+45-44
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,4 @@
11
/* Variables */
2-
/* Initial Reset */
3-
* {
4-
box-sizing: border-box;
5-
margin: 0;
6-
padding: 0;
7-
}
8-
9-
/* Main elements */
10-
.z-container {
11-
/* Layout vars */
12-
--arc: 360;
13-
--offset-angle: 0;
14-
--direction: 1;
15-
--angle: 1;
16-
--radius: 10vw;
17-
--item-number: 1;
18-
--radius-padding: 8px;
19-
--ring-1-factor: 1;
20-
--ring-2-factor: 2;
21-
--ring-3-factor: 3;
22-
--ring-4-factor: 4;
23-
--ring-5-factor: 5;
24-
--ring-6-factor: 6;
25-
/* Shape sizes */
26-
--xxs: 8px;
27-
--xs: 24px;
28-
--s: 44px;
29-
--m: 68px;
30-
--l: 110px;
31-
--xl: 180px;
32-
--xxl: 288px;
33-
/* Color */
34-
--transparent: transparent;
35-
--white: white;
36-
--black: black;
37-
/* width connector */
38-
--connector-width: 40px;
39-
--label-width: 50px;
40-
/* svg */
41-
--val: 0;
42-
--diam: 400;
43-
--stroke: 10;
44-
}
45-
462
.z-container {
473
display: grid;
484
grid-template-columns: minmax(var(--radius), 1fr);
@@ -562,6 +518,50 @@ div[class^=ring].ccw {
562518
--direction: -1;
563519
}
564520

521+
/* Initial Reset */
522+
* {
523+
box-sizing: border-box;
524+
margin: 0;
525+
padding: 0;
526+
}
527+
528+
/* Main elements */
529+
.z-container {
530+
/* Layout vars */
531+
--arc: 360;
532+
--offset-angle: 0;
533+
--direction: 1;
534+
--angle: 1;
535+
--radius: 10vw;
536+
--item-number: 1;
537+
--radius-padding: 8px;
538+
--ring-1-factor: 1;
539+
--ring-2-factor: 2;
540+
--ring-3-factor: 3;
541+
--ring-4-factor: 4;
542+
--ring-5-factor: 5;
543+
--ring-6-factor: 6;
544+
/* Shape sizes */
545+
--xxs: 8px;
546+
--xs: 24px;
547+
--s: 44px;
548+
--m: 68px;
549+
--l: 110px;
550+
--xl: 180px;
551+
--xxl: 288px;
552+
/* Color */
553+
--transparent: transparent;
554+
--white: white;
555+
--black: black;
556+
/* width connector */
557+
--connector-width: 40px;
558+
--label-width: 50px;
559+
/* svg */
560+
--val: 0;
561+
--diam: 400;
562+
--stroke: 10;
563+
}
564+
565565
.items-1 > .item {
566566
--angle: calc((var(--arc) / 1) * var(--direction));
567567
}
@@ -3526,6 +3526,7 @@ svg {
35263526
--val: 90;
35273527
}
35283528

3529+
/* Core elements */
35293530
/* Radial grid */
35303531
/* Shapes */
35313532
/* Components */

‎css/index.css.map

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

‎dist/css/index.min.css

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

‎dist/css/index.min.css.map

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

‎src/_core-elements.scss

+149
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
@use "./mixins" as *;
2+
@use "./variables" as *;
3+
4+
.z-container {
5+
display: grid;
6+
grid-template-columns: minmax(var(--radius), 1fr);
7+
grid-template-rows: minmax(var(--radius), 1fr);
8+
border: 1px dashed black;
9+
@include alignment;
10+
padding: 30px;
11+
}
12+
13+
.item {
14+
display: grid;
15+
background-color: rgb(255, 255, 255);
16+
border: 1px solid black;
17+
grid-area: 1/1/1/1;
18+
@include alignment;
19+
z-index: 1;
20+
}
21+
22+
//defaults
23+
.item {
24+
width: var(--m);
25+
height: var(--m);
26+
border-radius: 50%;
27+
}
28+
29+
.content {
30+
padding: 5px;
31+
width: inherit;
32+
height: inherit;
33+
display: grid;
34+
border-radius: inherit;
35+
background-color: rgba(0, 170, 248, 0.815);
36+
grid-area: 1/1/1/1;
37+
@include alignment;
38+
overflow: hidden;
39+
z-index: 10;
40+
}
41+
42+
.content1 {
43+
padding: 5px;
44+
width: inherit;
45+
height: inherit;
46+
display: grid;
47+
border-radius: inherit;
48+
grid-area: 1/1/1/1;
49+
@include alignment;
50+
overflow: hidden;
51+
z-index: -10;
52+
}
53+
54+
.item.a0 {
55+
--angle: 0;
56+
}
57+
58+
.item.a45 {
59+
--angle: 45;
60+
}
61+
62+
.item.a90 {
63+
--angle: 90;
64+
}
65+
66+
.item.a135 {
67+
--angle: 135;
68+
}
69+
70+
.core {
71+
width: 0px;
72+
height: 0px;
73+
display: grid;
74+
border-radius: 50%;
75+
border: 1px solid rgb(255, 5, 5);
76+
grid-area: 1/1/1/1;
77+
align-items: center;
78+
}
79+
80+
div[class^="ring"] {
81+
display: grid;
82+
border-radius: 50%;
83+
border: 1px dashed rgba(155, 155, 155, 0.5);
84+
grid-area: 1/1/1/1;
85+
@include alignment;
86+
}
87+
88+
@each $size,
89+
$var in $sizes {
90+
.item.#{$size} {
91+
width: $var;
92+
height: $var;
93+
}
94+
}
95+
96+
@each $arc,
97+
$value in $arcs {
98+
.core.#{$arc} {
99+
--arc: #{$value};
100+
}
101+
}
102+
103+
.core.ccw {
104+
--direction: -1;
105+
}
106+
107+
@each $sector,
108+
$angle in $sectors {
109+
.core.#{$sector} {
110+
--offset-angle:#{$angle};
111+
}
112+
}
113+
114+
@for $i from $min-rings through $max-rings {
115+
.z-container>.ring-#{$i} {
116+
width: calc(var(--radius) * 2 * var(--ring-#{$i}-factor));
117+
height: calc(var(--radius) * 2 * var(--ring-#{$i}-factor));
118+
}
119+
}
120+
121+
@for $i from $min-items through $max-items {
122+
.item:nth-child(#{$i}) {
123+
--item-number:#{$i};
124+
}
125+
}
126+
127+
@for $i from $min-rings through $max-rings {
128+
129+
@each $sector,
130+
$angle in $sectors {
131+
.ring-#{$i}.#{$sector} {
132+
--offset-angle:#{$angle};
133+
}
134+
}
135+
}
136+
137+
138+
139+
@each $arc,
140+
$value in $arcs {
141+
div[class^="ring"].#{$arc} {
142+
--arc: #{$value};
143+
}
144+
}
145+
146+
147+
div[class^="ring"].ccw {
148+
--direction: -1;
149+
}

0 commit comments

Comments
 (0)