Skip to content

Commit

Permalink
simplify css classes
Browse files Browse the repository at this point in the history
  • Loading branch information
Martin Muda committed Sep 25, 2023
1 parent 97f3cf8 commit 8749d74
Show file tree
Hide file tree
Showing 10 changed files with 28 additions and 27 deletions.
2 changes: 1 addition & 1 deletion assets/css/index.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/css/index.min.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/css/zumer-ui.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion assets/css/zumer-ui.min.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion assets/css/zumer.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/css/zumer.min.css.map
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions examples/spread.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@
<body style="background-color: slategray;">

<div class="z-container" >
<div class="ring-1 items-5 arc-90">
<div class="ring arc-90">
<div class="item xxs" style="background-color: rgb(42, 165, 95);"></div>
<div class="item xxs" style="background-color: rgb(42, 165, 95);"></div>
<div class="item xxs" style="background-color: rgb(42, 165, 95);"></div>
<div class="item xxs" style="background-color: rgb(42, 165, 95);"></div>
<div class="item xxs" style="background-color: rgb(42, 165, 95);"></div>
</div>
<div class="ring-2 items-10 arc-180">
<div class="ring arc-180">
<div class="item xs" style="background-color: rgb(69, 30, 177);"></div>
<div class="item xs" style="background-color: rgb(69, 30, 177);"></div>
<div class="item xs" style="background-color: rgb(69, 30, 177);"></div>
Expand All @@ -33,7 +33,7 @@
<div class="item xs" style="background-color: rgb(69, 30, 177);"></div>
<div class="item xs" style="background-color: rgb(69, 30, 177);"></div>
</div>
<div class="ring-3 items-15 arc-270">
<div class="ring arc-270">
<div class="item s" style="background-color: rgb(227, 16, 65);"></div>
<div class="item s" style="background-color: rgb(227, 16, 65);"></div>
<div class="item s" style="background-color: rgb(227, 16, 65);"></div>
Expand All @@ -50,7 +50,7 @@
<div class="item s" style="background-color: rgb(227, 16, 65);"></div>
<div class="item s" style="background-color: rgb(227, 16, 65);"></div>
</div>
<div class="ring-4 items-20">
<div class="ring">
<div class="item m" style="background-color: rgb(194, 212, 29);"></div>
<div class="item m" style="background-color: rgb(194, 212, 29);"></div>
<div class="item m" style="background-color: rgb(194, 212, 29);"></div>
Expand All @@ -61,7 +61,7 @@
<div class="item m" style="background-color: rgb(194, 212, 29);"></div>
<div class="item m" style="background-color: rgb(194, 212, 29);"></div>
<div class="item m" style="background-color: rgb(194, 212, 29);">
<div class="ring-1 items-5 ">
<div class="ring">
<div class="item xxs" style="background-color: rgb(42, 165, 95);"></div>
<div class="item xxs" style="background-color: rgb(42, 165, 95);"></div>
<div class="item xxs" style="background-color: rgb(42, 165, 95);"></div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/_ring-style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@

[class^='ring-'] {
.ring {
border: 0.1px solid var(--dark);
}
4 changes: 2 additions & 2 deletions src/components/_ring.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

[class^='ring-'] {
.ring {
--arc: 360; // ensure reset to default. useful for nested
--offset-angle: 0; // ensure reset to default. useful for nested
display: grid;
Expand All @@ -13,6 +13,6 @@
z-index: var(--z-index);
}

[class^='ring-'] {
.ring {
border: 0.1px solid var(--dark);
}
27 changes: 14 additions & 13 deletions src/layouts/_radial-grid.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,15 @@
}

@for $i from $min-items through $max-items {
.items-#{$i} > .item,
.items-#{$i} > .arc {
.ring:has(.item:nth-child(#{$i})),
.ring:has(.arc:nth-child(#{$i})) {
--angle: calc((var(--arc) / #{$i}) * var(--direction));
}
}
@for $i from $min-items through $max-items {
@each $arc, $value in $arcs {
.items-#{$i}.#{$arc} > .item {
.ring.#{$arc}:has(.item:nth-child(#{$i})) {
--arc: #{$value};
--angle: calc((var(--arc) / #{$i - 1}) * var(--direction));
}
}
Expand All @@ -37,7 +38,7 @@
$resta: 0;
}
@each $size, $var in $sizes {
.z-container > .ring-#{$i} > .item.#{$size} {
.z-container > .ring:nth-child(#{$i}) > .item.#{$size} {
--x: calc(var(--radius-#{$i}));
}
@each $class in $align {
Expand All @@ -54,28 +55,28 @@
$translate: 'translate(-8px, 8px)';
}

.z-container > .ring-#{$i} > .item.#{$size}#{$class} {
.z-container > .ring:nth-child(#{$i}) > .item.#{$size}#{$class} {
--x: calc(var(--radius-#{$i}) #{$math});
}
}
}

.z-container > .ring-#{$i} > .arc {
.z-container > .ring:nth-child(#{$i}) > .arc {
--length: calc(var(--radius-#{$i}) * 2);
}

.z-container > .ring-#{$i} > svg {
.z-container > .ring:nth-child(#{$i}) > svg {
--diam: calc(var(--radius-#{$i}) * 2);
}
}

@for $i from $min-rings through $max-rings {
@each $size, $var in $sizes {
.item.#{$size} > .ring-#{$i} {
.item.#{$size} > .ring:nth-child(#{$i}) {
--diam: calc(#{$var} * #{$i});
--z-index: #{$max-rings - $i};
}
.item.#{$size} > .ring-#{$i} > .item {
.item.#{$size} > .ring:nth-child(#{$i}) > .item {
--x: calc((#{$var} / 2 * #{$i}));
}

Expand All @@ -89,19 +90,19 @@
$math: '- (calc(#{$var} / 4))';
}

.item.#{$size} > .ring-#{$i} > .item#{$class} {
.item.#{$size} > .ring:nth-child(#{$i}) > .item#{$class} {
--x: calc((#{$var} / 2 * #{$i}) #{$math});
}
}
.item.#{$size} > .ring-#{$i} > svg {
.item.#{$size} > .ring:nth-child(#{$i}) > svg {
--diam: calc(#{$var} * #{$i});
}
}
}
//arcs nested
@for $i from $min-rings through $max-rings {
@each $size, $var in $sizes {
.item.#{$size} > .ring-#{$i} > .arc {
.item.#{$size} > .ring:nth-child(#{$i}) > .arc {
--length: calc(#{$var} * #{$i});
}
}
Expand All @@ -114,7 +115,7 @@
}

@for $i from $min-rings through $max-rings {
.z-container > .ring-#{$i} {
.z-container > .ring:nth-child(#{$i}) {
--diam: calc(var(--radius-#{$i}) * 2);
--z-index: #{$max-rings - $i};
}
Expand Down

0 comments on commit 8749d74

Please sign in to comment.