@cbpds/web-components
Version:
Web components for the CBP Design System.
87 lines (84 loc) • 4.19 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 --cbp-accordion-item-control-font-size: var(--cbp-font-size-heading-sm);
* @prop --cbp-accordion-item-control-font-weight: var(--cbp-font-weight-semibold);
* @prop --cbp-expand-control-gap: var(--cbp-space-1x);
* @prop --cbp-expand-control-padding: var(--cbp-space-3x);
* @prop --cbp-expand-content-padding: var(--cbp-space-3x);
* @prop --cbp-expand-margin-bottom: var(--cbp-space-2x);
* @prop --cbp-expand-color: var(--cbp-color-text-darkest);
* @prop --cbp-expand-color-dark: var(--cbp-color-text-lightest);
* @prop --cbp-expand-button-color-text: var(--cbp-color-text-lightest);
* @prop --cbp-expand-button-color-text-dark: var(--cbp-color-text-darkest);
* @prop --cbp-expand-button-color-fill: var(--cbp-color-interactive-secondary-darker);
* @prop --cbp-expand-button-color-fill-dark: var(--cbp-color-interactive-secondary-lighter);
* @prop --cbp-expand-button-color-text-hover: var(--cbp-color-text-lightest);
* @prop --cbp-expand-button-color-text-hover-dark: var(--cbp-color-text-darkest);
* @prop --cbp-expand-button-color-fill-hover: var(--cbp-color-interactive-secondary-darker);
* @prop --cbp-expand-button-color-fill-hover-dark: var(--cbp-color-interactive-secondary-lighter);
*/
:root {
--cbp-accordion-item-control-font-size: var(--cbp-font-size-heading-sm);
--cbp-accordion-item-control-font-weight: var(--cbp-font-weight-semibold);
--cbp-expand-control-gap: var(--cbp-space-1x);
--cbp-expand-control-padding: var(--cbp-space-3x);
--cbp-expand-content-padding: var(--cbp-space-3x);
--cbp-expand-margin-bottom: var(--cbp-space-2x);
--cbp-expand-color: var(--cbp-color-text-darkest);
--cbp-expand-color-dark: var(--cbp-color-text-lightest);
--cbp-expand-button-color-text: var(--cbp-color-text-lightest);
--cbp-expand-button-color-text-dark: var(--cbp-color-text-darkest);
--cbp-expand-button-color-fill: var(--cbp-color-interactive-secondary-darker);
--cbp-expand-button-color-fill-dark: var(--cbp-color-interactive-secondary-lighter);
--cbp-expand-button-color-text-hover: var(--cbp-color-text-lightest);
--cbp-expand-button-color-text-hover-dark: var(--cbp-color-text-darkest);
--cbp-expand-button-color-fill-hover: var(--cbp-color-interactive-secondary-darker);
--cbp-expand-button-color-fill-hover-dark: var(--cbp-color-interactive-secondary-lighter);
}
[data-cbp-theme=light] cbp-expand[context*=dark],
[data-cbp-theme=dark] cbp-expand:not([context=dark-inverts]):not([context=light-always]) {
--cbp-expand-color: var(--cbp-expand-color-dark);
}
cbp-expand {
display: block;
margin-bottom: var(--cbp-expand-margin-bottom);
color: var(--cbp-expand-color);
}
cbp-expand[open] {
--cbp-expand-rotate-icon: rotate(-180deg);
}
cbp-expand:not([open]) .cbp-expand--content {
display: none;
}
cbp-expand[open] .cbp-expand--control {
--cbp-accordion-rotate-icon: rotate(90deg);
--cbp-accordion-toggle: expandTo 500ms;
}
cbp-expand .cbp-expand--control {
font-size: var(--cbp-expand-control-font-size);
cursor: pointer;
}
cbp-expand .cbp-expand--control .cbp-expand--toggle {
--cbp-button-padding: 0;
--cbp-button-border-width: 0;
}
cbp-expand .cbp-expand--control .cbp-expand--toggle cbp-icon svg {
transition: transform 150ms;
transform: var(--cbp-expand-rotate-icon);
}
cbp-expand .cbp-expand--control:hover .cbp-expand--toggle {
--cbp-button-color: var(--cbp-expand-button-color-text);
--cbp-button-color-dark: var(--cbp-expand-button-color-text-dark);
--cbp-button-color-bg: var(--cbp-expand-button-color-fill);
--cbp-button-color-bg-dark: var(--cbp-expand-button-color-fill-dark);
--cbp-button-color-hover: var(--cbp-expand-button-color-text-hover);
--cbp-button-color-hover-dark: var(--cbp-expand-button-color-text-hover-dark);
--cbp-button-color-bg-hover: var(--cbp-expand-button-color-fill-hover);
--cbp-button-color-bg-hover-dark: var(--cbp-expand-button-color-fill-hover-dark);
}
cbp-expand .cbp-expand--content {
padding-left: var(--cbp-space-7x);
}