# give/4.17.0/src/Campaigns/Blocks/shared/components/Pagination/styles.scss

GiveWP – Donation Plugin and Fundraising Platform, version 4.17.0. 62 lines.

- Page: https://pluginprobe.com/plugins/give/4.17.0/code/src/Campaigns/Blocks/shared/components/Pagination/styles.scss
- Raw: https://pluginprobe.com/plugins/give/4.17.0/raw/src/Campaigns/Blocks/shared/components/Pagination/styles.scss
- Modified: 2025-03-31T19:17:16+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/give/4.17.0/code/src/Campaigns/Blocks/shared/components/Pagination/styles.scss#L10-L20`.

```scss
.give-campaign-components-pagination {
    display: flex;
    padding: 8px 0;
    flex-direction: row;

    &__pages {
        display: flex;

        &-links {
            display: flex;
            flex-direction: row;
            gap: 4px;

            button {
                flex-grow: 0;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                gap: 8px;
                text-decoration: none !important;
                border-radius: 4px;
                border: solid 1px #e5e7eb;
                font-weight: normal;
                font-size: 14px;
                line-height: 1.43;
            }

            &-arrow {
                padding: 8px;

                &-disabled {
                    padding: 8px;
                    opacity: 0.7;
                    cursor: not-allowed;

                    svg {
                        opacity: 0.7;
                    }
                }
            }

            &-page {
                padding: 8px 14px;
                color: #060c1a !important;
            }

            button:not(.give-campaign-components-pagination__pages-links-current, .give-campaign-components-pagination__pages-links-arrow-disabled):hover {
                border: solid 1px #459948;
                background-color: #f2fff3;
            }

            &-current {
                border: solid 1px #459948;
                background-color: #459948;
                color: #fff !important;
            }

        }
    }
}

```