artistry/src/styl/pager/pager.styl

A powerful and configurable stylesheet

@require "pager-settings.styl";
.pager {
    display: inline-flex;
    justify-content: flex-start;
    margin: $pager-margin 0;
    padding: 0;
    border: $pager-border-width solid $pager-border-color;
    border-radius: $pager-border-radius;
    list-style-type: none;
    overflow: hidden;
    box-shadow: $pager-box-shadow;
    & > li {
        flex-direction: row;
        margin: 0;
        padding: 0;
        border-right: $pager-border-width solid $pager-border-color;
        &:last-child {
            border-right: 0;
        }
        & > a, 
        & > span {
            display: block;
            margin: 0;
            padding: $pager-padding;
            background-color: $pager-background-color;
            color: $pager-color;
            font-weight: $pager-font-weight;
            text-decoration: none;
        }
        & > a:hover {
            background-color: $pager-hover-background-color;
            color: $pager-hover-color;
        }
        &.pager-active > a {
            background-color: $pager-hover-background-color;
            color: $pager-hover-color;
            pointer-events: none;
            &:hover {
                background-color: $pager-hover-background-color;
                color: $pager-hover-color;
            }
        }
        &.pager-disabled > a {
            background-color: $pager-disabled-background-color;
            color: $pager-disabled-color;
            pointer-events: none;
            &:hover {
                background-color: $pager-disabled-background-color;
                color: $pager-disabled-color;
            }
        }
    }
}