@cbpds/web-components/dist/collection/components/cbp-drawer/cbp-drawer.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-drawer-color-bg: var(--cbp-color-white);
* @prop --cbp-drawer-color-bg-dark: var(--cbp-color-gray-cool-70);
* @prop --cbp-drawer-color-backdrop: var(--cbp-color-backdrop-light);
* @prop -cbp-drawer-color-backdrop-dark: var(--cbp-color-backdrop-dark);
*/
:root {
  --cbp-drawer-color-bg: var(--cbp-color-white);
  --cbp-drawer-color-bg-dark: var(--cbp-color-gray-cool-70);
  --cbp-drawer-color-backdrop: var(--cbp-color-backdrop-light);
  --cbp-drawer-color-backdrop-dark: var(--cbp-color-backdrop-dark);
  --cbp-drawer-close-button-color: var(--cbp-color-interactive-secondary-darker);
  --cbp-drawer-close-button-color-hover: var(--cbp-color-text-lightest);
  --cbp-drawer-close-button-color-bg-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-drawer-close-button-color-border-hover: var(--cbp-color-interactive-secondary-darker);
}

/* 
 * Dark Mode - display dark design based on mode or context
 */
[data-cbp-theme=light] cbp-drawer[context*=dark],
[data-cbp-theme=dark] cbp-drawer:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-drawer-color-bg: var(--cbp-drawer-color-bg-dark);
  --cbp-drawer-color-backdrop: var(--cbp-drawer-color-backdrop-dark);
}

cbp-drawer {
  all: unset;
  display: none;
  position: relative;
}
cbp-drawer:not(.cbp-drawer--persistent) {
  --cbp-panel-border-radius: 0;
  --cbp-panel-border-width: 0;
}
cbp-drawer.cbp-drawer--persistent {
  display: block;
}
cbp-drawer.cbp-drawer--persistent .cbp-drawer__content {
  height: auto;
}
cbp-drawer .cbp-drawer__content {
  display: flex;
  flex-direction: column;
  top: 0;
  overflow-y: auto;
  z-index: var(--cbp-z-index-level-top);
  width: 100%;
  height: 101%;
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 100%;
  max-height: 101%;
  transition: 0.5s;
  height: 100%;
  background-color: var(--cbp-drawer-color-bg);
}
cbp-drawer .cbp-drawer__content .cbp-drawer__close-button {
  position: absolute;
  right: 1rem;
  top: 1em;
}
cbp-drawer .cbp-drawer__content .cbp-drawer__close-button[fill][color] {
  --cbp-button-color: var(--cbp-drawer-close-button-color);
  --cbp-button-color-hover: var(--cbp-drawer-close-button-color-hover);
}

cbp-drawer[open] {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: calc(var(--cbp-z-index-level-top) - 1);
  overflow-y: auto;
  background-color: var(--cbp-drawer-color-backdrop);
}
cbp-drawer[open][position=left] .cbp-drawer__content {
  left: -100%;
  box-shadow: var(--cbp-shadow-level-4-right);
}
cbp-drawer[open][position=left] .cbp-drawer__content.cbp-drawer--open {
  left: 0;
}
cbp-drawer[open][position=right] .cbp-drawer__content {
  right: -100%;
  box-shadow: var(--cbp-shadow-level-4-left);
}
cbp-drawer[open][position=right] .cbp-drawer__content.cbp-drawer--open {
  right: 0;
}
cbp-drawer[open] .cbp-drawer__content {
  position: fixed;
}
@media (min-width: 37.5em) {
  cbp-drawer[open] .cbp-drawer__content {
    width: 25rem;
  }
}