alfresco-ng2-components/lib/core/pagination/pagination.component.scss

@mixin adf-pagination-theme($theme) {
    $foreground: map-get($theme, foreground);

    $adf-pagination--height: 48px;
    $adf-pagination--icon-button-size: 32px;
    $adf-pagination--border: 1px solid  mat-color($foreground, text, .07);

    .adf-pagination {
        display: flex;
        border-top: $adf-pagination--border;
        height: $adf-pagination--height;
        line-height: 20px;
        color: mat-color($foreground, text);

        &__block {
            display: flex;
            align-items: center;
            padding: 0 8px;
            border-right: $adf-pagination--border;

            &:first-child {
                flex: 1 1 auto;
                padding-left: 24px;
            }

            &:last-child {
                border-right-width: 0;
            }
        }

        @media (max-width: 500px) {

            & {
                flex-wrap: wrap;
                padding-bottom: 24px;
                padding-top: 8px;
                justify-content: space-between;
            }

            &__range-block.adf-pagination__block:first-child {
                order: 1;
                flex: 0 0 auto;
                box-sizing: border-box;
                padding-left: 16px;
                justify-content: flex-start;
            }

            &__perpage-block {
                order: 3;
                box-sizing: border-box;
                padding-left: 16px;
                justify-content: flex-start;
            }

            &__actualinfo-block {
                order: 2;
                box-sizing: border-box;
                padding-right: 16px;
                justify-content: flex-end;
            }

            &__controls-block {
                order: 4;
                box-sizing: border-box;
                padding-right: 16px;
                justify-content: flex-end;
            }
        }

        &__max-items {
            margin-left: 10px;
        }

        &__max-items, &__current-page {
            margin-right: 5px;

            &, & + button {
                color: mat-color($foreground, text);
            }

            & + button {
                margin-left: -10px;
            }
        }

        &__previous-button, &__next-button {
            margin: 0 5px;
        }

        &__page-selector {
            max-height: 250px !important;
        }

        button[mat-icon-button] {
            width: $adf-pagination--icon-button-size;
            height: $adf-pagination--icon-button-size;
            line-height: $adf-pagination--icon-button-size;
        }
    }
}