Help with math in SCSS
Hey, I'm currently working on this project
Right now what bothers me is the top-right corner, AKA the theme selection
My current Svelte code:
It seems like the formula in the loop is wrong
In addition, for performance reasons, I prefer using
translate
instead12 Replies
I think it is because you didn't account for the flex-gap between the labels.
It would be easier for us to help if you provide a live example.
Wdym a live example? A video?
no, like in codepen (with normal html and SCSS) or something else
Oh
I could try
Maybe this is already enough
your switch-handle should not be
width: calc(100% / $option-count);
but
width: calc((100% - ($option-count - 1) * 0.62rem) / $option-count));
That worked, how'd you figure it out?
Also, I do need to extent the circle padding
bit hard to tell what you mean with that. live example still would be useful
I.e. the actual design looks like
For some reason the SCSS doesn't get compiled https://codepen.io/avi12641/pen/mdaYmBP
I eventually figured it out:
@MarkBoots Thanks so much!
ah okay. nice.
didn't have time yet. But great you figured it out
Any idea how I could downsize it so that the starting percentage isn't 100%?