sass.n2o.components.Pagination.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of n2o-react
The newest version!
/* stylelint-disable no-descending-specificity */
.pagination {
    .page-item .page-link {
        min-width: 38px;
        text-align: center;
        padding: 0.5rem 0.5rem;
        margin: 0.1rem 0.1rem;
    }

    .page-item.active .page-link,
    .page-item.page-link.active {
        z-index: 3;
        color: #fff;
        background-color: $primary;
        border-color: $primary;
    }

    &.flat {
        .page-item .page-link {
            background-color: transparent;
            border-color: transparent;
        }

        .page-item.active .page-link {
            background-color: $primary;
        }
    }

    &.bordered {
        .page-item .page-link {
            margin: 0 0 0 -1px;
        }

        .page-item:first-child .page-link {
            border-top-left-radius: 0.25rem;
            border-bottom-left-radius: 0.25rem;
        }

        .page-item:last-child .page-link {
            border-top-right-radius: 0.25rem;
            border-bottom-right-radius: 0.25rem;
        }
    }

    &.flat-rounded {
        .page-item .page-link {
            border-radius: 50rem;
            background-color: transparent;
            border-color: transparent;
        }

        .page-item.active .page-link {
            background-color: $primary;
        }
    }

    &.bordered-rounded {
        .page-item:first-child .page-link {
            border-top-left-radius: 50rem;
            border-bottom-left-radius: 50rem;
        }

        .page-item:last-child .page-link {
            border-top-right-radius: 50rem;
            border-bottom-right-radius: 50rem;
        }

        .page-item .page-link {
            margin: 0 0 0 -1px;
        }
    }

    &.separated-rounded {
        .page-item .page-link {
            border-radius: 50rem;
        }
    }
}

.pagination-container {
    display: flex;
    align-items: center;

    .pagination__total__text,
    .pagination__total__button {
        margin-right: 16px;
        display: flex;
        align-items: center;
    }

    .pagination__total__button {
        color: $primary;
        cursor: pointer;
    }

    .page-item.page-link.disabled {
        user-select: none;
        color: #d7d7d7;
        border-color: #d7d7d7;
    }

    .page-item.page-link.disabled:hover {
        border-color: #d7d7d7;
    }

    .page-item.page-link {
        min-width: 32px;
        max-width: 32px;
        min-height: 32px;
        max-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;

        &:focus {
            outline: none;
            box-shadow: none;
        }

        &:focus-visible {
            outline: 2px solid #005fccff;
        }
    }

    .extra-page-item {
        .ellipsis {
            min-width: 32px;
            max-width: 32px;
            min-height: 32px;
            max-height: 32px;
            align-items: flex-end;
            justify-content: center;
        }
    }
}