D-Net

// Name:            Pagination

// Description:     Component to create a page navigation

//

// Component:       `uk-pagination`

//

// Adopted:         `uk-pagination-next`

//                  `uk-pagination-previous`

//

// States:          `uk-active`

//                  `uk-disabled`

//

// ========================================================================

// Variables

// ========================================================================

@pagination-margin-horizontal:                  20px;

@pagination-item-color:                         @global-muted-color;

@pagination-item-hover-color:                   @global-color;

@pagination-item-hover-text-decoration:         none;

@pagination-item-active-color:                  @global-color;

@pagination-item-disabled-color:                @global-muted-color;

/* ========================================================================

   Component: Pagination

 ========================================================================== */

/*

 * 1. Allow items to wrap into the next line

 * 2. Gutter

 * 3. Reset lists

 */

.uk-pagination {

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    /* 1 */

    -ms-flex-wrap: wrap;

    -webkit-flex-wrap: wrap;

    flex-wrap: wrap;

    /* 2 */

    margin-left: -@pagination-margin-horizontal;

    /* 3 */

    padding: 0;

    list-style: none;

    .hook-pagination;

}

/*

 * 1. Space is allocated solely based on content dimensions: 0 0 auto

 * 2. Gutter

 * 3. Create position context for dropdowns

 */

.uk-pagination > * {

    /* 1 */

    -ms-flex: none;

    -webkit-flex: none;

    flex: none;

    /* 2 */

    padding-left: @pagination-margin-horizontal;

    /* 3 */

    position: relative;

}

/* Items

 ========================================================================== */

/*

 * 1. Prevent gap if child element is `inline-block`, e.g. an icon

 * 2. Style

 */

.uk-pagination > * > * {

    /* 1 */

    display: block;

    /* 2 */

    color: @pagination-item-color;

    .hook-pagination-item;

}

/* Hover + Focus */

.uk-pagination > * > :hover,

.uk-pagination > * > :focus {

    color: @pagination-item-hover-color;

    text-decoration: @pagination-item-hover-text-decoration;

    .hook-pagination-item-hover;

}

/* Active */

.uk-pagination > .uk-active > * {

    color: @pagination-item-active-color;

    .hook-pagination-item-active;

}

/* Disabled */

.uk-pagination > .uk-disabled > * {

    color: @pagination-item-disabled-color;

    .hook-pagination-item-disabled;

}

// Hooks

// ========================================================================

.hook-pagination-misc;

.hook-pagination() {}

.hook-pagination-item() {}

.hook-pagination-item-hover() {}

.hook-pagination-item-active() {}

.hook-pagination-item-disabled() {}

.hook-pagination-misc() {}

// Inverse

// ========================================================================

@inverse-pagination-item-color:                @inverse-global-muted-color;

@inverse-pagination-item-hover-color:          @inverse-global-color;

@inverse-pagination-item-active-color:         @inverse-global-color;

@inverse-pagination-item-disabled-color:       @inverse-global-muted-color;

.hook-inverse() {

    .uk-pagination > * > * {

        color: @inverse-pagination-item-color;

        .hook-inverse-pagination-item;

    }

    .uk-pagination > * > :hover,

    .uk-pagination > * > :focus {

        color: @inverse-pagination-item-hover-color;

        .hook-inverse-pagination-item-hover;

    }

    .uk-pagination > .uk-active > * {

        color: @inverse-pagination-item-active-color;

        .hook-inverse-pagination-item-active;

    }

    .uk-pagination > .uk-disabled > * {

        color: @inverse-pagination-item-disabled-color;

        .hook-inverse-pagination-item-disabled;

    }

}

.hook-inverse-pagination-item() {}

.hook-inverse-pagination-item-hover() {}

.hook-inverse-pagination-item-active() {}

.hook-inverse-pagination-item-disabled() {}