studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄(react) make Pagination responsive

Browse Source 
We want to adapt the layout of Pagination to take less space when
its container is too small.
This commit is contained in:
Nathan Vasse
2023-12-08 12:14:42 +01:00
committed by NathanVss
parent da3761b699
commit 72f7048514
1 changed files with 33 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
packages/react/src/components/Pagination/_index.scss
View File

@@ -1,23 +1,42 @@
@use "../../utils/responsive" as *;
.c__pagination { .c__pagination {
display: flex;
gap: 2rem;
&__list {
display: flex; display: flex;
gap: 2rem; align-items: center;
border: 1px var(--c--theme--colors--greyscale-300) solid;
border-radius: 2px;
padding: var(--c--theme--spacings--st);
background: var(--c--theme--colors--greyscale-000);
}
&__goto {
display: flex;
align-items: center;
gap: 0.5rem;
.c__field--default {
width: 100px;
}
}
}
@include container(md) {
.c__pagination {
width: 100%;
display: block;
&__list { &__list {
display: flex; justify-content: center;
align-items: center; height: 3.5rem;
border: 1px var(--c--theme--colors--greyscale-300) solid; box-sizing: border-box;
border-radius: 2px;
padding: var(--c--theme--spacings--st);
background: var(--c--theme--colors--greyscale-000);
} }
&__goto { &__goto {
display: flex; display: none;
align-items: center;
gap: 0.5rem;
.c__field--default {
width: 100px;
}
} }
}
} }