diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-02-01 23:26:27 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-02-01 23:36:29 +0100 |
| commit | 66822d929b48c93e44acb2c73a542417549335ac (patch) | |
| tree | dd263778f666c9e83bab9cb85a072081a1134c39 /src/components/PaginationCursor/PaginationCursor.module.scss | |
| parent | eeb9ea8d489c890a80c88658cb860577075ac660 (diff) | |
chore: move pagination cursor title in a separate div
The progress bar will be clearer for everyone if the information about
the number of loaded articles is printed without hovering the progress
bar.
Diffstat (limited to 'src/components/PaginationCursor/PaginationCursor.module.scss')
| -rw-r--r-- | src/components/PaginationCursor/PaginationCursor.module.scss | 11 |
1 files changed, 9 insertions, 2 deletions
diff --git a/src/components/PaginationCursor/PaginationCursor.module.scss b/src/components/PaginationCursor/PaginationCursor.module.scss index 17e46ac..542584c 100644 --- a/src/components/PaginationCursor/PaginationCursor.module.scss +++ b/src/components/PaginationCursor/PaginationCursor.module.scss @@ -1,12 +1,14 @@ @use "@styles/abstracts/functions" as fun; .wrapper { - margin: var(--spacing-sm) auto var(--spacing-md); width: max-content; + margin: var(--spacing-sm) auto var(--spacing-md); + text-align: center; .bar[value] { display: block; - width: 30ch; + width: clamp(25ch, 20vw, 30ch); + max-width: 100%; height: fun.convert-px(13); appearance: none; background: var(--color-bg-tertiary); @@ -34,3 +36,8 @@ } } } + +.info { + margin-bottom: var(--spacing-2xs); + font-size: var(--font-size-sm); +} |