// Name: Pagination // // Component: `pagination` // // Modifiers: `pagination-gap` // `pagination-no-border` // `pagination-lg` // `pagination-sm` // // Markup: // // // // // ======================================================================== // Variables // ======================================================================== $pagination-gap-hover-border: $brand-primary !default; // Component: Pagination // ======================================================================== .page-item { &.disabled > span { @include plain-hover-focus { color: $pagination-disabled-color; background-color: $pagination-disabled-bg; border-color: $pagination-disabled-border; } } } // Modifier: `pagination-gap` // ------------------------- .pagination-gap { .page-item { &.disabled .page-link{ @include hover-focus { border-color: $pagination-disabled-border; } } &.active .page-link { background-color: $pagination-active-bg; } } .page-link { @include hover-focus { background-color: transparent; border-color: $pagination-gap-hover-border; } } } // Modifier: `pagination-no-border` // ------------------------- .pagination-no-border { .page-link { border: none; } }