File: modules/system/assets/ui/less/pagination.less

//
// Dependencies
// --------------------------------------------------

@import "global.less";

//
// Pagination
// --------------------------------------------------

@color-pagination-icon:                      #666666;
@color-pagination-hover:                     @link-color;
@color-pagination-inactive:                  #b6b6b6;
@color-pagination:                           #98a7a8;

//
// Pagination
// --------------------------------------------------

.control-pagination {
    font-size: 0;
    text-align: center;

    @media (min-width: @screen-sm-min) {
        text-align: right;
    }

    .page-iteration {
        margin-right: 4px;
        font-size: @font-size-base - 1;
        color: @color-pagination;
        display: block;
        @media (min-width: @screen-sm-min) {
            display: inline-block;
        }
    }

    //
    // Page selector
    //

    select {
        width: 50px;
        border: none;
        background: transparent;
    }
    select, .select2-container {
        text-align: center;
        display: inline-block;
    }
    .select2-container {
        min-width: 50px;
        vertical-align: bottom;
        bottom: 2px;

        .select2-selection {
            height: 29px;
            line-height: 29px;
            padding: 0 30px 0 10px;
            border: none !important;
            font-size: 12px;

            background-color: transparent;

            .border-radius(0) !important;
            .box-shadow(none) !important;

            &.select2-default {
                font-weight: normal !important;
            }
        }
    }

    //
    // Next and previous
    //

    .page-next, .page-back, .page-last, .page-first {
        display: inline-block;
        padding: 10px 15px;
        &:before {
            color: @color-pagination-icon;
            font-size: 19px;
            line-height: 19px;
            display: inline-block;
            vertical-align: baseline;
            position: relative;
            top: 2px;
        }
    }
    a.page-next, a.page-back, a.page-last, a.page-first {
        &:hover:before {
            color: @color-pagination-hover;
        }
    }
    span.page-next, span.page-back, span.page-last, span.page-first {
        &:before {
            color: @color-pagination-inactive;
        }
    }
    .page-next {
        padding-left: 6px;
    }
    .page-back {
        padding-right: 6px;
    }
    .page-last {
        padding-left: 6px;
    }
    .page-first {
        padding-right: 6px;
    }
    .page-next:before { .icon(@angle-right); }
    .page-back:before { .icon(@angle-left); }
    .page-last:before { .icon(@angle-double-right); }
    .page-first:before { .icon(@angle-double-left); }
}