@cbpds/web-components/dist/collection/components/cbp-dropdown/cbp-dropdown.css

Web components for the CBP Design System.

/* 
 * 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-dropdown-menu-color: var(--cbp-form-field-color);
*  @prop --cbp-dropdown-menu-color-bg: var(--cbp-form-field-color-bg);
*  @prop --cbp-dropdown-menu-color-border: var(--cbp-form-field-color-border);
*  @prop --cbp-dropdown-menu-color-dark: var(--cbp-form-field-color-dark);
*  @prop --cbp-dropdown-menu-color-bg-dark: var(--cbp-form-field-color-bg-dark);
*  @prop --cbp-dropdown-menu-color-border-dark: var(--cbp-form-field-color-border-dark);

*  @prop --cbp-dropdown-menu-color-counter: var(--cbp-form-field-color-dark);
*  @prop --cbp-dropdown-menu-color-bg-counter: var(--cbp-form-field-color-border);
*  @prop --cbp-dropdown-menu-color-counter-dark: var(--cbp-form-field-color);
*  @prop --cbp-dropdown-menu-color-bg-counter-dark: var(--cbp-color-interactive-secondary-light);
*/
:root {
  --cbp-dropdown-menu-color: var(--cbp-form-field-color);
  --cbp-dropdown-menu-color-placeholder: var(--cbp-form-field-color-placeholder);
  --cbp-dropdown-menu-color-bg: var(--cbp-form-field-color-bg);
  --cbp-dropdown-menu-color-border: var(--cbp-form-field-color-border);
  --cbp-dropdown-menu-color-dark: var(--cbp-form-field-color-dark);
  --cbp-dropdown-menu-color-placeholder-dark: var(--cbp-form-field-color-placeholder-dark);
  --cbp-dropdown-menu-color-bg-dark: var(--cbp-form-field-color-bg-dark);
  --cbp-dropdown-menu-color-border-dark: var(--cbp-form-field-color-border-dark);
  --cbp-dropdown-menu-color-counter: var(--cbp-form-field-color-dark);
  --cbp-dropdown-menu-color-bg-counter: var(--cbp-form-field-color-border);
  --cbp-dropdown-menu-color-counter-dark: var(--cbp-form-field-color);
  --cbp-dropdown-menu-color-bg-counter-dark: var(--cbp-color-interactive-secondary-light);
  --cbp-dropdown-menu-color-counter-outline-focus: var(--cbp-color-white);
  --cbp-dropdown-menu-color-counter-outline-focus-dark: var(--cbp-form-field-color-border);
  --cbp-dropdown-attached-button-start-width: 0;
  --cbp-dropdown-attached-button-end-width: 0;
  --cbp-dropdown-chevron-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" fill="%23fcfcfc"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
  --cbp-dropdown-chevron-down-dark: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512" fill="%231b1b1b"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
}

/* 
 * Dark Mode - display dark design based on mode or context
 */
[data-cbp-theme=light] cbp-dropdown[context*=dark],
[data-cbp-theme=dark] cbp-dropdown:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-dropdown-menu-color: var(--cbp-dropdown-menu-color-dark);
  --cbp-dropdown-menu-color-placeholder: var(--cbp-dropdown-menu-color-placeholder-dark);
  --cbp-dropdown-menu-color-bg: var(--cbp-dropdown-menu-color-bg-dark);
  --cbp-dropdown-menu-color-border: var(--cbp-dropdown-menu-color-border-dark);
  --cbp-dropdown-menu-color-counter: var(--cbp-dropdown-menu-color-counter-dark);
  --cbp-dropdown-menu-color-bg-counter: var(--cbp-dropdown-menu-color-bg-counter-dark);
  --cbp-dropdown-menu-color-counter-outline-focus: var(--cbp-dropdown-menu-color-counter-outline-focus-dark);
  --cbp-dropdown-chevron: var(--cbp-dropdown-chevron-dark);
  --cbp-dropdown-chevron-down: var(--cbp-dropdown-chevron-down-dark);
}

cbp-dropdown {
  display: block;
  /*
  &:has(.cbp-dropdown-menu:focus-within) .cbp-custom-form-control {
    outline-width: var(--cbp-border-size-lg); // This is set to 3px because of the 1px inset, overlapping the border; border+outline = 4px total.
  }
  */
}
cbp-dropdown:has([slot=cbp-dropdown-attached-button-start]), cbp-dropdown:has([slot=cbp-dropdown-attached-button-end]) {
  --cbp-dropdown-chevron-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 320 512" fill="%231b1b1b"><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>');
  --cbp-dropdown-chevron-down-dark: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 320 512" fill="%23fcfcfc"><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>');
}
cbp-dropdown:has([slot=cbp-dropdown-attached-button-start]) .cbp-custom-form-control, cbp-dropdown:has([slot=cbp-dropdown-attached-button-end]) .cbp-custom-form-control {
  --cbp-dropdown-chevron: var(--cbp-dropdown-chevron-down);
  background: right calc(var(--cbp-dropdown-attached-button-end-width) + 1.125rem - 8px) top calc(1rem - 8px) no-repeat var(--cbp-dropdown-chevron), var(--cbp-form-field-color-bg);
}
cbp-dropdown:has(button[role=combobox]:focus) .cbp-dropdown-menu {
  outline: var(--cbp-border-size-md) solid var(--cbp-form-field-color-border-focus);
  border-color: var(--cbp-form-field-color-border-focus);
  scrollbar-color: var(--cbp-form-field-color-border-focus) var(--cbp-form-field-color-bg);
}
cbp-dropdown .cbp-dropdown-shrinkwrap {
  position: relative;
  display: block;
  flex-basis: 100%;
}
cbp-dropdown .cbp-dropdown-shrinkwrap .cbp-custom-form-control {
  padding-inline-start: calc(var(--cbp-dropdown-attached-button-start-width) + var(--cbp-form-field-padding-inline));
  padding-inline-end: calc(var(--cbp-dropdown-attached-button-end-width) + var(--cbp-form-field-padding-inline) + var(--cbp-space-9x));
}
cbp-dropdown .cbp-dropdown-shrinkwrap [slot=cbp-dropdown-attached-button-start],
cbp-dropdown .cbp-dropdown-shrinkwrap [slot=cbp-dropdown-attached-button-end] {
  position: absolute;
  inset-block-start: 0;
}
cbp-dropdown .cbp-dropdown-shrinkwrap [slot=cbp-dropdown-attached-button-start] {
  --cbp-button-border-radius: var(--cbp-border-radius-soft) 0 0 var(--cbp-border-radius-soft);
  inset-inline-start: 0;
}
cbp-dropdown .cbp-dropdown-shrinkwrap [slot=cbp-dropdown-attached-button-end] {
  --cbp-button-border-radius: 0 var(--cbp-border-radius-soft) var(--cbp-border-radius-soft) 0;
  inset-inline-end: 0;
}
cbp-dropdown button.cbp-custom-form-control {
  appearance: none;
  white-space: nowrap;
  padding-inline-end: var(--cbp-space-9x);
}
cbp-dropdown button.cbp-custom-form-control::before {
  box-sizing: border-box;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  border-radius: 0 var(--cbp-form-field-border-radius) var(--cbp-form-field-border-radius) 0;
  width: var(--cbp-space-9x);
  min-height: var(--cbp-space-9x);
  background: right calc(var(--cbp-space-9x) / 2 - 8px) top calc(var(--cbp-space-9x) / 2 - 8px) no-repeat var(--cbp-form-field-select-chevron), var(--cbp-form-field-color-border);
}
cbp-dropdown button.cbp-custom-form-control .cbp-dropdown-label,
cbp-dropdown button.cbp-custom-form-control .cbp-dropdown-placeholder {
  text-overflow: ellipsis;
  overflow: hidden;
  padding-inline-end: var(--cbp-space-2x);
}
cbp-dropdown button.cbp-custom-form-control .cbp-dropdown-placeholder {
  color: var(--cbp-dropdown-menu-color-placeholder);
  font-style: italic;
}
cbp-dropdown button.cbp-custom-form-control .cbp-dropdown-multiselect-counter {
  display: inline-block;
  color: var(--cbp-dropdown-menu-color-counter);
  background-color: var(--cbp-dropdown-menu-color-bg-counter);
  font-size: var(--cbp-font-size-subhead);
  font-weight: var(--cbp-font-weight-medium);
  font-style: normal;
  line-height: var(--cbp-space-3x);
  padding: var(--cbp-space-1x) var(--cbp-space-2x);
  margin-inline: var(--cbp-space-1x) var(--cbp-space-3x);
  border-radius: var(--cbp-border-radius-pill);
  outline: 0px solid var(--cbp-dropdown-menu-color-counter-outline-focus);
  outline-offset: calc(-1 * (var(--cbp-space-1x) - 1px));
}
cbp-dropdown button.cbp-custom-form-control .cbp-dropdown-multiselect-counter:hover {
  --cbp-dropdown-menu-color-bg-counter: var(--cbp-form-field-color-border-hover);
  --cbp-dropdown-menu-color-bg-counter-dark: var(--cbp-form-field-color-border-hover-dark);
}
cbp-dropdown button.cbp-custom-form-control .cbp-dropdown-multiselect-counter:focus {
  --cbp-dropdown-menu-color-bg-counter: var(--cbp-form-field-color-border-focus);
  --cbp-dropdown-menu-color-bg-counter-dark: var(--cbp-form-field-color-border-focus-dark);
  outline-width: var(--cbp-border-size-md);
}
cbp-dropdown .cbp-dropdown-menu {
  display: none;
  position: absolute;
  z-index: var(--cbp-z-index-level-4);
  color: var(--cbp-dropdown-menu-color);
  background-color: var(--cbp-dropdown-menu-color-bg);
  border: var(--cbp-border-size-md) solid var(--cbp-dropdown-menu-color-border);
  border-radius: 0 0 var(--cbp-border-radius-soft) var(--cbp-border-radius-soft);
  height: fit-content;
  max-height: 13.5rem;
  width: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cbp-dropdown-menu-color-border) var(--cbp-form-field-color-bg);
}
cbp-dropdown .cbp-dropdown-menu:hover {
  --cbp-form-field-color-border: var(--cbp-form-field-color-border-hover);
}
cbp-dropdown .cbp-dropdown-menu:focus-within {
  --cbp-form-field-color-border: var(--cbp-form-field-color-border-focus);
}
cbp-dropdown[error] {
  --cbp-dropdown-menu-color-bg: var(--cbp-form-field-color-bg);
  --cbp-dropdown-menu-color-border: var(--cbp-form-field-color-border);
  --cbp-dropdown-menu-color-bg-dark: var(--cbp-form-field-color-bg-dark);
  --cbp-dropdown-menu-color-border-dark: var(--cbp-form-field-color-border-dark);
}
cbp-dropdown[open] {
  --cbp-form-field-border-radius: var(--cbp-border-radius-soft) var(--cbp-border-radius-soft) 0 0;
}
cbp-dropdown[open] button::before {
  transform: rotate(180deg);
}
cbp-dropdown[open] .cbp-dropdown-menu {
  display: block;
}
cbp-dropdown[multiple] {
  --cbp-dropdown-item-padding-inline-start: 0;
  --cbp-dropdown-item-padding-block: var(--cbp-space-1x);
  --cbp-dropdown-item-font-style-selected: normal;
}