cirrus-ui/src/components/pagination.scss

A lightweight UI framework written in SCSS

@use '../src/internal' as *;

@if should-generate-classes($PAGINATION) {
    /* PAGINATION */
    /* Parent contianer for page navigation */
    .pagination {
        display: flex;

        /* Use for the major pagination meant to display about 2 items */
        .pagination-item {
            flex: 1 0 50%; /* Flex to fill */
            margin: 1rem 0.1rem;
            transition: all 0.3s;

            &:hover {
                p,
                #{$header-selectors} {
                    transition: all 0.3s;
                    color: fill('primary');
                }
            }

            &:not(.selected):hover *:not([disabled]):not(.disabled):not(.ellipses) {
                transition: all 0.3s;
                color: fill('primary');
            }

            &.pagination-next {
                text-align: right;
            }

            &.pagination-prev {
                text-align: left;
            }

            a {
                color: fill('gray', '700');
                cursor: pointer;

                &[disabled],
                &.disabled {
                    opacity: 0.5;
                    pointer-events: none;
                    user-select: none;
                }
            }

            /* Pagination Item */
            .pagination-item-subtitle {
                opacity: 0.7;
                margin: 0; /* Needed to override style after formatting paragraph update */
            }

            /* Used to display many pagination items */
            &.short {
                border-radius: 0.1rem;
                margin: 0.2rem 0;
                flex: 0; /* Flex to fill */

                &:first-child a {
                    border-top-left-radius: 0.25rem;
                    border-bottom-left-radius: 0.25rem;
                }

                &:last-child a {
                    border-top-right-radius: 0.25rem;
                    border-bottom-right-radius: 0.25rem;
                }

                &:not([disabled]):not(.disabled):not(.selected):hover {
                    background-color: rgba(0, 0, 0, 0.07);
                }

                /* Color the selected pagination item with accent color */
                &.selected {
                    background-color: fill('primary');
                    color: #fff;
                    a {
                        color: #fff;
                    }
                }

                &.ellipses {
                    color: fill('gray', '500');
                    pointer-events: none;
                }

                a {
                    display: inline-block;
                    line-height: 1.25;
                    padding: 0.5rem 0.75rem;
                }
            }
        }

        /* Bordered pagination */
        &.pagination-bordered .pagination-item.short a {
            border: 1px solid fill('gray', '300');
            border-radius: 0;
            margin-left: -1px;
        }
    }
}