scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: make pagination scale somewhat better on small devices awaiting design feedback on ellipsises

Browse Source
This commit is contained in:
Arvid Norlin
2024-08-19 16:29:22 +02:00
parent b0358ffa0e
commit 0453728696
1 changed files with 10 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/MyPages/Blocks/Points/EarnAndBurn/JourneyTable/Pagination/pagination.module.css
View File

@@ -1,11 +1,13 @@
.pagination { .pagination {
display: flex; display: flex;
justify-content: center; justify-content: left;
padding: var(--Spacing-x2); padding: var(--Spacing-x2);
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-Rounded); border-radius: var(--Corner-radius-Rounded);
margin: auto; margin: auto;
gap: var(--Spacing-x5); gap: var(--Spacing-x5);
max-width: 100%;
overflow-x: auto;
} }
.paginationButton { .paginationButton {
@@ -19,6 +21,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0;
} }
.chevronLeft { .chevronLeft {
@@ -31,3 +34,9 @@
background-color: var(--Base-Text-Accent); background-color: var(--Base-Text-Accent);
border-radius: var(--Corner-radius-Rounded); border-radius: var(--Corner-radius-Rounded);
} }
@media screen and (min-width: 768px) {
.pagination {
justify-content: center;
}
}