@cbpds/web-components
Version:
Web components for the CBP Design System.
64 lines (62 loc) • 2.66 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
*/
:root {
--cbp-dot-indicator-color-hover: var(--cbp-color-interactive-secondary-darker);
--cbp-dot-indicator-color-hover-dark: var(--cbp-color-interactive-secondary-lighter);
--cbp-dot-indicator-color-focus: var(--cbp-color-interactive-focus-dark);
--cbp-dot-indicator-color-focus-dark: var(--cbp-color-interactive-focus-light);
--cbp-dot-indicator-color-selected: var(--cbp-color-interactive-secondary-darker);
--cbp-dot-indicator-color-selected-dark: var(--cbp-color-interactive-selected-light);
}
/*
* Dark Mode - display dark design based on mode or context
*/
[data-cbp-theme=light] cbp-dot-indicator[context*=dark],
[data-cbp-theme=dark] cbp-dot-indicator:not([context=dark-inverts]):not([context=light-always]) {
--cbp-dot-indicator-color-hover: var(--cbp-dot-indicator-color-hover-dark);
--cbp-dot-indicator-color-focus: var(--cbp-dot-indicator-color-focus-dark);
--cbp-dot-indicator-color-selected: var(--cbp-dot-indicator-color-selected-dark);
}
cbp-dot-indicator {
display: flex;
justify-content: center;
}
cbp-dot-indicator .dot-indicators-container {
display: inline-flex;
}
cbp-dot-indicator .dot-indicators-container button {
height: var(--cbp-space-9x);
width: var(--cbp-space-9x);
border: 0;
background-color: transparent;
padding: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
cbp-dot-indicator .dot-indicators-container button span {
height: var(--cbp-space-4x);
width: var(--cbp-space-4x);
border: var(--cbp-border-size-md) solid var(--cbp-color-interactive-secondary-darker);
border-radius: var(--cbp-border-radius-circle);
}
cbp-dot-indicator .dot-indicators-container button:hover span {
background-color: var(--cbp-dot-indicator-color-hover);
border-color: var(--cbp-dot-indicator-color-hover);
}
cbp-dot-indicator .dot-indicators-container button:focus span {
background-color: var(--cbp-dot-indicator-color-focus);
border-color: var(--cbp-dot-indicator-color-focus);
outline: var(--cbp-space-half-x) solid var(--cbp-dot-indicator-color-focus);
outline-offset: var(--cbp-space-half-x);
}
cbp-dot-indicator .dot-indicators-container button[aria-selected=true] span {
background-color: var(--cbp-dot-indicator-color-selected);
border-color: var(--cbp-dot-indicator-color-selected);
}
cbp-dot-indicator .dot-indicators-container:focus-visible, cbp-dot-indicator .dot-indicators-container button:focus-visible {
border: none;
outline: none;
}