Svelte: compress progress indicator #62317
Conversation
|
Maybe you want to tackle the rest of #62306 as part of this PR? |
camdencheek
force-pushed
the
cc/compress-progress
branch
from
a35a5ac
to
9cfde63
Compare
| @@ -163,7 +163,7 @@ | |||
| .progress-button { | |||
| border: 1px solid var(--border-color-2); | |||
| border-radius: 4px; | |||
| margin-left: 0.3rem; | |||
| padding: 0; | |||
There was a problem hiding this comment.
Disable the default button padding so we can set it consistently without having to add paddings together
| min-width: 200px; | ||
| max-width: fit-content; |
There was a problem hiding this comment.
Got rid of the min-width and max-width because this looks better when the spacing is balanced.
| justify-content: space-evenly; | ||
| justify-content: space-between; |
There was a problem hiding this comment.
No functional difference, but since we are fitting to content, space-between is more semantically correct
| @@ -37,17 +37,11 @@ | |||
| </script> | |||
|
|
|||
| <div class="indicator"> | |||
| <div> | |||
There was a problem hiding this comment.
Unnecessary outer div.
| width: $size; | ||
| height: $size; | ||
| &.inline { | ||
| $inlineSize: #{(16 / 14)}em; | ||
| width: $inlineSize; | ||
| height: $inlineSize; | ||
|
|
||
| vertical-align: bottom; | ||
| display: inline-flex; | ||
| align-items: center; | ||
| } |
There was a problem hiding this comment.
Added the ability to specify the size of the spinner and moved the inline styling into here because the .icon-inline styles expect to be styling an SVG.
| width: $size; | ||
| height: $size; | ||
| &.inline { | ||
| $inlineSize: #{(16 / 14)}em; |
There was a problem hiding this comment.
Just to avoid confuse let's not use any scss variables.
This removes some extra padding from the progress indicator and also simplifies some of the padding so it's symmetrical and doesn't rely on adding padding together to get the right layout.
Test plan
Before:
After:
