From 2f1aad4bb973e23e647f2dee5e412a501c898326 Mon Sep 17 00:00:00 2001 From: Martin Muda Date: Fri, 6 Oct 2023 13:07:28 -0300 Subject: [PATCH] WIP merging classes --- src/layouts/_radial-grid.scss | 67 ++++++++++++++++-------------- src/utilities/_sass-variables.scss | 4 +- 2 files changed, 38 insertions(+), 33 deletions(-) diff --git a/src/layouts/_radial-grid.scss b/src/layouts/_radial-grid.scss index 6cba85e..7c3666c 100644 --- a/src/layouts/_radial-grid.scss +++ b/src/layouts/_radial-grid.scss @@ -23,15 +23,17 @@ $z-index: #{$max-orbits - $i}; /* Check if the parent is .docker */ - .docker > :nth-child(#{$i} of .orbit) { - --diam: calc(var(--radius-#{$i}) * 2); - --z-index: #{$z-index}; - } - - @each $orbit-size, $orbit-value in $orbit-sizes { + @each $orbit-size, $orbit-value in $orbit-sizes { /* Check if the parent is .docker */ .docker > :nth-child(#{$i} of .orbit#{$orbit-size}) { - --diam: #{$orbit-value}; + @if $orbit-size != null { + + --diam: #{$orbit-value}; + } @else { + --diam: calc(var(--radius-#{$i}) * 2); + } + --z-index: #{$z-index}; + } } @@ -57,47 +59,55 @@ $z-index: #{$max-orbits - $i}; /* Check if the parent is .docker */ - .docker > :nth-child(#{$i} of .orbit) > .orbit { - --diam: calc(var(--radius-#{$i}) * 2); - --z-index: #{$z-index}; - --x: calc(var(--radius-#{$i})); - border: none; - } @each $orbit-size, $orbit-value in $orbit-sizes { /* Check if the parent is .docker */ .docker > :nth-child(#{$i} of .orbit#{$orbit-size}) > .orbit { - --diam: #{$orbit-value}; - --x: calc( #{$orbit-value} / 2); + @if $orbit-size != null { + --diam: #{$orbit-value}; + --x: calc( #{$orbit-value} / 2); + } @else { + --diam: calc(var(--radius-#{$i}) * 2); + --x: calc(var(--radius-#{$i})); + } + + --z-index: #{$z-index}; + } } /* Check if the parent is .docker */ - .docker > :nth-child(#{$i} of .orbit) > .orbit > .sector { - --length: calc(var(--radius-#{$i}) * 2); + @each $orbit-size, $orbit-value in $orbit-sizes { + .docker > :nth-child(#{$i} of .orbit#{$orbit-size}) > .orbit > .sector { + @if $orbit-size != null { + --length: #{$orbit-value}; + } @else { + --length: calc(var(--radius-#{$i}) * 2); + } + --current-orbit: #{$i}; --max-orbits: #{$max-orbits}; } - - @each $orbit-size, $orbit-value in $orbit-sizes { - /* Check if the parent is .docker */ - .docker > :nth-child(#{$i} of .orbit#{$orbit-size}) > .orbit > .sector{ - --length: #{$orbit-value}; - - } } + @each $orbit-size, $orbit-value in $orbit-sizes { /* Check if the parent is .docker */ .docker > :nth-child(#{$i} of .orbit#{$orbit-size}) > .sector{ + @if $orbit-size != null { --length: #{$orbit-value}; + } @else { + --length: calc(var(--radius-#{$i}) * 2); + } } } @each $orbit-size, $orbit-value in $orbit-sizes { /* Check if the parent is .docker */ .docker > :nth-child(#{$i} of .orbit#{$orbit-size}) > .orbiter { + @if $orbit-size != null { --x: calc( #{$orbit-value} / 2); + } } } @@ -204,10 +214,10 @@ */ @for $i from $min-orbits through $max-orbits { - /* Set x variable for each orbiter */ + /* Set x variable for each orbiter .docker > :nth-child(#{$i} of .orbit) > .orbiter { --x: calc(var(--radius-#{$i})); - } + }*/ @each $class in $align { $math: ''; /* Set x variable and translate for specific alignments (Upper) */ @@ -236,11 +246,6 @@ */ @for $i from $min-orbits through $max-orbits { - .orbiter > .orbit:nth-child(#{$i}) > .orbiter { - - --x: calc(var(--diam) / 2); - - } @each $class in $align { /* Set x variable for specific alignments */ $math: ''; diff --git a/src/utilities/_sass-variables.scss b/src/utilities/_sass-variables.scss index e33d73e..1f99851 100644 --- a/src/utilities/_sass-variables.scss +++ b/src/utilities/_sass-variables.scss @@ -14,7 +14,7 @@ $grid-breakpoints: ( $sizes: null, '.xxs' var(--xxs), '.xs' var(--xs), '.s' var(--s), '.m' var(--m), '.l' var(--l), '.xl' var(--xl), '.xxl' var(--xxl); -$align: '.upper', '.lower'; +$align: null, '.upper', '.lower'; $min-orbits: 1; $max-orbits: 6; @@ -31,4 +31,4 @@ $limits: '.limit-0' var(--a0),'.limit-45' var(--a45), '.limit-90' var(--a90), '. $position: '.pos-0' var(--a0),'.pos-45' var(--a45), '.pos-90' var(--a90), '.pos-135' var(--a135), '.pos-180' var(--a180), '.pos-225' var(--a225), '.pos-270' var(--a270), '.pos-315' var(--a315), '.pos-360' var(--a360); -$orbit-sizes: '.size-1' var(--orbit-size-1),'.size-2' var(--orbit-size-2),'.size-3' var(--orbit-size-3),'.size-4' var(--orbit-size-4),'.size-5' var(--orbit-size-5),'.size-6' var(--orbit-size-6); +$orbit-sizes: null, '.size-1' var(--orbit-size-1),'.size-2' var(--orbit-size-2),'.size-3' var(--orbit-size-3),'.size-4' var(--orbit-size-4),'.size-5' var(--orbit-size-5),'.size-6' var(--orbit-size-6);