Skip to content

Commit

Permalink
sass optimization
Browse files Browse the repository at this point in the history
  • Loading branch information
@tinchox5
tinchox5 committed Jun 9, 2023
1 parent a601104 commit 4c92593
Show file tree
Hide file tree
Showing 5 changed files with 160 additions and 178 deletions.
164 changes: 71 additions & 93 deletions src/_core-elements.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,155 +2,133 @@
@use './variables' as *;
@use './ui' as *;

/* Initial Reset */
.z-container * {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.z-container {
display: grid;
grid-template-columns: minmax(var(--radius), 1fr);
grid-template-rows: minmax(var(--radius), 1fr);
border: 1px dashed var(--dark);
place-items: center;
}

.z-container {
border: 1px dashed var(--dark);
padding: 30px;
}

.item {
--size: var(--m); // default
--rotation-angle: calc(
var(--angle) * var(--item-number) + var(--offset-angle) - var(--angle)
);
--rotate: calc(var(--rotation-angle) * 1deg);
--rotate-invert: calc(var(--rotation-angle) * -1deg);
display: grid;
background-color: var(--light);
border: 1px solid var(--dark);
border: 1px solid;
grid-area: 1/1/1/1;
place-content: center;
//z-index: 1;
width: var(--m);
height: var(--m);
width: var(--size);
height: var(--size);
border-radius: 50%;
}

.item {
--rotate-invert: calc(var(--rotation-angle) * -1deg);
transform: rotate(var(--rotate)) translate(var(--x), 0)
rotate(var(--rotate-invert));
}
.item {
background-color: var(--light);
border-color: var(--dark);
}

.item.stationary {
transform: rotate(var(--rotate)) translate(var(--x), 0);
}

.core {
width: 0px;
height: 0px;
display: grid;
border-radius: 50%;
grid-area: 1/1/1/1;
z-index: $max-rings;
}

.core {
border: 1px solid rgb(255, 5, 5);
}

.core > .item {
transform: rotate(var(--rotate));
}

div[class^='ring-'] {
display: grid;
border-radius: 50%;
border: 0.1px solid var(--dark);
grid-area: 1/1/1/1;
place-items: center;
box-sizing: content-box;
width: var(--diam);
height: var(--diam);
z-index: var(--z-index);
}

div[class^='ring-'] {
border: 0.1px solid var(--dark);
}

.arc {
--half: calc(var(--length) / 2);
--quarter: calc(var(--half) / 2);
// ademas del offset el angulo debe dividirse por 2, distinto de item
--semi: calc(var(--angle) / 2 * 1deg);
--quarter: calc(var(--half) / 2);
--semi: calc(var(--angle) / 2 * 1deg); // ademas del offset el angulo debe dividirse por 2, distinto de item
--arc-gap: 1px;
--length-percent: calc(
var(--half) + var(--arc-gap) - var(--half) * tan(var(--semi))
);
--color: var(--accent2);
--tickness: 49px;
--width: 49px;
--rotate: calc(
(
var(--angle) * var(--item-number) + var(--offset-angle) -
(var(--angle) / 2)
) * 1deg
(var(--angle) * var(--item-number) + var(--offset-angle) - (var(--angle) / 2)) * 1deg
);
display: grid;
grid-area: 1/1/1/1;
height: var(--length);
width: var(--half);
border: var(--tickness) solid var(--color);
border: var(--width) solid;
border-left: none;
background-color: transparent;
border-radius: 0% 100% 100% 0% / 100% 51% 51% 0%;
box-sizing: border-box;
clip-path: polygon(
0 50%,
/* left center pivot*/ 100% calc(100% - var(--length-percent)),
/* right to bottom arc increase*/ 100% 100%,
/* right top corner*/ 100% 0,
/* right bottom corner*/ 100% var(--length-percent)
); /* right to top ar decrease*/
0 50% /* left center pivot*/,
100% calc(100% - var(--length-percent)) /* right to bottom arc increase*/,
100% 100% /* right top corner*/,
100% 0 /* right bottom corner*/,
100% var(--length-percent) /* right to top ar decrease*/
);
transform: rotate(var(--rotate)) translate(var(--quarter), 0);
}

.arc {
border-color: var(--accent2);
background-color: transparent;
}
.arc:hover {
border-color: var(--accent3);
}
.content {

.item > .content {
padding: 5px;
width: inherit;
height: inherit;
display: grid;
border-radius: inherit;
background-color: rgba(0, 170, 248, 0.815);
grid-area: 1/1/1/1;
@include alignment;
overflow: hidden;
z-index: 10;
}

.core {
width: 0px;
height: 0px;
display: grid;
border-radius: 50%;
border: 1px solid rgb(255, 5, 5);
grid-area: 1/1/1/1;
//place-items: center;
z-index: $max-rings;
}

div[class^='ring-'] {
display: grid;
border-radius: 50%;
border: 0.1px solid var(--dark);
grid-area: 1/1/1/1;
place-items: center;
box-sizing: content-box;
width: var(--diam);
height: var(--diam);
z-index: var(--z-index);
}
/* hack doesnt work on ffox
div[class^="ring-"]:has(.item) {
place-items: center;
}
*/

@each $size, $var in $sizes {
.item.#{$size} {
width: $var;
height: $var;
}
}

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

@for $i from $min-items through $max-items {
.item:nth-child(#{$i}),
.arc:nth-child(#{$i}) {
--item-number: #{$i};
}
}

@each $sector, $angle in $sectors {
.#{$sector} {
--offset-angle: #{$angle};
}
}

@each $arc, $value in $arcs {
.#{$arc} {
--arc: #{$value};
}
}

.ccw {
--direction: -1;
.item > .content {
background-color: var(--light);
}
108 changes: 43 additions & 65 deletions src/_radial-grid.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,79 +2,21 @@
@use './variables' as *;
@use './ui' as *;

/* Initial Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* Main elements */
.z-container {
/* Layout vars */
--arc: 360;
--offset-angle: 0;
--direction: 1;
--angle: 1;
--radius: 50px;
--item-number: 1;
--radius-padding: 8px;

@for $i from $min-rings through $max-rings {
--radius-#{$i}: var(--radius) * #{$i};
}

/* Shape sizes */
--xxs: 8px;
--xs: 24px;
--s: 44px;
--m: 68px;
--l: 110px;
--xl: 180px;
--xxl: 288px;

/* Color */
--transparent: transparent;
--white: white;
--black: black;

/* width connector */
--connector-width: 40px;
--label-width: 50px;

/* svg */
--val: 0;
--stroke: 10;
--π: 3.14159265359;
}

@for $i from $min-items through $max-items {
@each $arc, $value in $arcs {
.items-#{$i}.#{$arc} > .item {
--angle: calc((var(--arc) / #{$i - 1}) * var(--direction));
}
}
}
@for $i from $min-items through $max-items {
.items-#{$i} > .item {
.items-#{$i} > .item, .items-#{$i} > .arc {
--angle: calc((var(--arc) / #{$i}) * var(--direction));
}
}

@for $i from $min-items through $max-items {
@each $arc, $value in $arcs {
.items-#{$i}.#{$arc} > .arc {
// No hay que restar un angulo debido a la forma del arco
--angle: calc((var(--arc) / #{$i}) * var(--direction));

.items-#{$i}[classˆ=arc-] > .item {
--angle: calc((var(--arc) / #{$i - 1}) * var(--direction));
}
}
}
@for $i from $min-items through $max-items {
.items-#{$i} > .arc {
--angle: calc((var(--arc) / #{$i}) * var(--direction));
}

}


@for $i from $min-rings through $max-rings {
$resta: 1;
@if $i == 1 {
Expand Down Expand Up @@ -117,7 +59,7 @@
@each $size, $var in $sizes {
.item.#{$size} > .ring-#{$i} {
--diam: calc(#{$var} * #{$i});
--z-index: $max-rings - $i;
--z-index: #{$max-rings - $i};
}
.item.#{$size} > .ring-#{$i} > .item {
--x: calc((#{$var} / 2 * #{$i}));
Expand Down Expand Up @@ -150,3 +92,39 @@
}
}
}

@each $size, $var in $sizes {
.item.#{$size} {
--size: #{$var};
}
}

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

@for $i from $min-items through $max-items {
.item:nth-child(#{$i}),
.arc:nth-child(#{$i}) {
--item-number: #{$i};
}
}

@each $sector, $angle in $sectors {
.#{$sector} {
--offset-angle: #{$angle};
}
}

@each $arc, $value in $arcs {
.#{$arc} {
--arc: #{$value};
}
}

.ccw {
--direction: -1;
}
Loading

0 comments on commit 4c92593

Please sign in to comment.