@cbpds/web-components
Version:
Web components for the CBP Design System.
45 lines (42 loc) • 1.3 kB
CSS
/*
* Caution: "global styles" get injected into every component and can cause file size bloat.
* These should only include SASS variables and mixins that are not written out to CSS directly
*/
/*
* @prop
*/
:root {
--cbp-pagination-color: var(--cbp-color-text-darkest);
--cbp-pagination-color-dark: var(--cbp-color-text-lightest);
}
/*
* Dark Mode - display dark design based on mode or context
*/
[data-cbp-theme=light] cbp-pagination[context*=dark],
[data-cbp-theme=dark] cbp-pagination:not([context=dark-inverts]):not([context=light-always]) {
--cbp-pagination-color: var(--cbp-pagination-color-dark);
}
cbp-pagination {
--cbp-form-field-margin-bottom: 0;
display: flex;
align-items: center;
gap: var(--cbp-space-2x);
color: var(--cbp-pagination-color);
}
cbp-pagination [slot=cbp-pagination-items-per-page] label,
cbp-pagination [slot=cbp-pagination-pages] label {
display: none;
}
cbp-pagination .cbp-pagination-showing-text {
flex-grow: 1;
font-style: italic;
}
cbp-pagination [slot=cbp-pagination-pages] cbp-button {
--cbp-button-color-bg: var(--cbp-form-field-color-border);
--cbp-button-color-bg-dark: var(--cbp-form-field-color-border-dark);
}
@media (max-width: 30rem) {
cbp-pagination [slot=cbp-pagination-items-per-page] {
display: none;
}
}