react-responsive-pagination
Version:
React component for responsive pagination
73 lines (65 loc) • 6.51 kB
Markdown
# Bootstrap theme [auto light/dark]
See [theme overview](https://react-responsive-pagination.elantha.com/themes#2-bootstrap-theme-without-bootstrap)
See also [additional Bootstrap options](https://react-responsive-pagination.elantha.com/bootstrap-pagination#options)
To use this theme, import this css in your project:
```js
import 'react-responsive-pagination/themes/bootstrap-light-dark.css';
```
Overridable CSS variables listed below, to override a variable just add a block like this to a global CSS file:
```css
:root {
--pagination-color-light: #ff0000;
/*... any other variables you want to override */
}
```
| Overridable CSS Theme Variables | **Description** | **Default** |
| ------------------------------------------ | ------------------------------ | --------------------------------- |
| **MAIN THEME COLORS:** | | |
| `--pagination-color-light` | Text color (light) | #0d6efd |
| `--pagination-color-dark` | Text color (dark) | #6ea8fe |
| `--pagination-active-bg-light` | Active page background (light) | #0d6efd |
| `--pagination-active-bg-dark` | Active page background (dark) | #0d6efd |
| <br />**ADDITIONAL THEME COLORS:** | |
| `--pagination-bg-light` | Background color (light) | #ffffff |
| `--pagination-bg-dark` | Background color (dark) | #212529 |
| `--pagination-active-color-light` | Active text color (light) | #ffffff |
| `--pagination-active-color-dark` | Active text color (dark) | #ffffff |
| `--pagination-hover-bg-light` | Hover background (light) | #e9ecef |
| `--pagination-hover-bg-dark` | Hover background (dark) | #343a40 |
| `--pagination-disabled-color-light` | Disabled text color (light) | #6c757d |
| `--pagination-disabled-color-dark` | Disabled text color (dark) | rgba(222, 226, 230, 0.75) |
| `--pagination-border-color-light` | Border color (light) | #dee2e6 |
| `--pagination-border-color-dark` | Border color (dark) | #495057 |
| (also see Advanced colors below) | | |
| <br />**FONT VARIABLES:** | | |
| `--pagination-font-family` | Font family | (see font-family in css) |
| `--pagination-font-size` | Font size | 1rem |
| `--pagination-line-height` | Line height | 1.5 |
| `--pagination-font-weight-light` | Font weight (light) | 400 |
| `--pagination-font-weight-dark` | Font weight (dark) | 400 |
| `--pagination-active-font-weight-light` | Active font weight (light) | `--pagination-font-weight-light` |
| `--pagination-active-font-weight-dark` | Active font weight (dark) | `--pagination-font-weight-dark` |
| <br />**SPACING / ALIGNMENT:** | | |
| `--pagination-padding-y` | Padding y | 0.375rem |
| `--pagination-padding-x` | Padding x | 0.75rem |
| `--pagination-margin-top` | Margin top | 0 |
| `--pagination-margin-bottom` | Margin bottom | 0 |
| `--pagination-justify-content` | Justify content | `--pagination-justify-content-fb` |
| <br />**BORDER VARIABLES:** | | |
| `--pagination-border-width` | Border width | 1px |
| `--pagination-border-radius` | Border radius | 0.375rem |
| <br />**ADVANCED COLORS:** | | |
| `--pagination-hover-color-light` | Hover text color (light) | `--pagination-color-light` |
| `--pagination-hover-color-dark` | Hover text color (dark) | `--pagination-color-dark` |
| `--pagination-hover-border-color-light` | Hover border color (light) | `--pagination-border-color-light` |
| `--pagination-hover-border-color-dark` | Hover border color (dark) | `--pagination-border-color-dark` |
| `--pagination-focus-color-light` | Focus text color (light) | `--pagination-hover-color-light` |
| `--pagination-focus-color-dark` | Focus text color (dark) | `--pagination-hover-color-dark` |
| `--pagination-focus-bg-light` | Focus background (light) | `--pagination-hover-bg-light` |
| `--pagination-focus-bg-dark` | Focus background (dark) | `--pagination-hover-bg-dark` |
| `--pagination-active-border-color-light` | Active border color (dark) | `--pagination-active-bg-light` |
| `--pagination-active-border-color-dark` | Active border color (light) | `--pagination-active-bg-dark` |
| `--pagination-disabled-bg-light` | Disabled background (light) | `--pagination-bg-light` |
| `--pagination-disabled-bg-dark` | Disabled background (dark) | `--pagination-bg-dark` |
| `--pagination-disabled-border-color-light` | Disabled border color (light) | `--pagination-border-color-light` |
| `--pagination-disabled-border-color-dark` | Disabled border color (dark) | `--pagination-border-color-dark` |