diff options
| author | ivarlovlie <git@ivarlovlie.no> | 2022-09-20 09:24:27 +0200 |
|---|---|---|
| committer | ivarlovlie <git@ivarlovlie.no> | 2022-09-20 09:24:27 +0200 |
| commit | a9072370ca1eb9a5cce928b1d487db0f307edea6 (patch) | |
| tree | 59c3c23df930a8b5f888dc7813923abf4ceefed4 /old-apps/web-shared/src/styles/components/pagination.scss | |
| parent | 56fa963a1d63cbe0bf28e29e717cceaa417c45c1 (diff) | |
| download | greatoffice-a9072370ca1eb9a5cce928b1d487db0f307edea6.tar.xz greatoffice-a9072370ca1eb9a5cce928b1d487db0f307edea6.zip | |
feat: Move old apps into it's own directory
Diffstat (limited to 'old-apps/web-shared/src/styles/components/pagination.scss')
| -rw-r--r-- | old-apps/web-shared/src/styles/components/pagination.scss | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/old-apps/web-shared/src/styles/components/pagination.scss b/old-apps/web-shared/src/styles/components/pagination.scss new file mode 100644 index 0000000..0a09210 --- /dev/null +++ b/old-apps/web-shared/src/styles/components/pagination.scss @@ -0,0 +1,77 @@ +@use '../base' as *; + +/* -------------------------------- + +File#: _1_pagination +Title: Pagination +Descr: Component used to navigate through pages of related content +Usage: codyhouse.co/license + +-------------------------------- */ + +.pagination {} + +.pagination__list > li { + display: inline-block; // flex fallback +} + +// --split - push first + last item to sides +.pagination--split { + .pagination__list { + width: 100%; + + > *:first-child { + margin-right: auto; + } + + > *:last-child { + margin-left: auto; + } + } +} + +.pagination__item { + display: inline-block; // flex fallback + display: inline-flex; + height: 100%; + align-items: center; + padding: var(--space-xs) calc(1.355 * var(--space-xs)); + + white-space: nowrap; + line-height: 1; + border-radius: var(--radius-md); + + text-decoration: none; + color: var(--color-contrast-high); + @include fontSmooth; + + will-change: transform; + + &:hover:not(.pagination__item--selected):not(.pagination__item--ellipsis) { + background-color: alpha(var(--color-contrast-higher), 0.1); + } +} + +.pagination__item--selected { + background-color: var(--color-contrast-higher); + color: var(--color-bg); + box-shadow: var(--shadow-sm); +} + +.pagination__item--disabled { + opacity: 0.5; + pointer-events: none; +} + +// --jumper +.pagination__jumper { + .form-control { + width: 3em; + margin-right: var(--space-xs); + } + + em { + flex-shrink: 0; + white-space: nowrap; + } +} |
