@penaprieto/design-system/dist/components/Drawer/Drawer.css

Multi-brand React design system with design tokens from Figma

/* Overlay */
.ds-drawer__overlay {
  position: fixed;
  inset: 0;
  background: var(--semantic-bg-overlay);
  z-index: 1000;
  animation: ds-drawer-fade-in 0.2s ease-out;
}

/* Base Drawer */
.ds-drawer {
  position: fixed;
  background: var(--semantic-bg-surface-default);
  box-shadow: var(--semantic-elevation-elevation3);
  z-index: 1001;
  display: flex;
  flex-direction: column;
}

/* Placements */
.ds-drawer--left,
.ds-drawer--right {
  top: 0;
  bottom: 0;
  max-width: 90vw;
}

.ds-drawer--left {
  left: 0;
  animation: ds-drawer-slide-in-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ds-drawer--right {
  right: 0;
  animation: ds-drawer-slide-in-right 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ds-drawer--top,
.ds-drawer--bottom {
  left: 0;
  right: 0;
  max-height: 90vh;
}

.ds-drawer--top {
  top: 0;
  animation: ds-drawer-slide-in-top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ds-drawer--bottom {
  bottom: 0;
  animation: ds-drawer-slide-in-bottom 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Sizes for left/right */
.ds-drawer--left.ds-drawer--small,
.ds-drawer--right.ds-drawer--small {
  width: 320px;
}

.ds-drawer--left.ds-drawer--medium,
.ds-drawer--right.ds-drawer--medium {
  width: 480px;
}

.ds-drawer--left.ds-drawer--large,
.ds-drawer--right.ds-drawer--large {
  width: 640px;
}

/* Sizes for top/bottom */
.ds-drawer--top.ds-drawer--small,
.ds-drawer--bottom.ds-drawer--small {
  height: 240px;
}

.ds-drawer--top.ds-drawer--medium,
.ds-drawer--bottom.ds-drawer--medium {
  height: 360px;
}

.ds-drawer--top.ds-drawer--large,
.ds-drawer--bottom.ds-drawer--large {
  height: 480px;
}

/* Content */
.ds-drawer__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Header */
.ds-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--size5, 24px);
  border-bottom: 1px solid var(--semantic-border-default-subtle);
  flex-shrink: 0;
}

.ds-drawer__title {
  font-family: var(--heading-h4-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  font-size: var(--heading-h4-fontSize, 24px);
  font-weight: var(--heading-h4-fontWeight, 700);
  line-height: var(--heading-h4-lineHeight, 150%);
  color: var(--semantic-text-corp-primary);
  margin: 0;
}

/* Body */
.ds-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--size5, 24px);
  font-family: var(--body-regular-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  font-size: var(--body-regular-fontSize, 16px);
  font-weight: var(--body-regular-fontWeight, 400);
  line-height: var(--body-regular-lineHeight, 150%);
  color: var(--semantic-text-corp-secondary);
}

/* Footer */
.ds-drawer__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--size3, 12px);
  padding: var(--size5, 24px);
  border-top: 1px solid var(--semantic-border-default-subtle);
  flex-shrink: 0;
}

/* Animations */
@keyframes ds-drawer-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ds-drawer-slide-in-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes ds-drawer-slide-in-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes ds-drawer-slide-in-top {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes ds-drawer-slide-in-bottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 600px) {
  .ds-drawer--left,
  .ds-drawer--right {
    width: 100vw !important;
    max-width: 100vw;
  }

  .ds-drawer--top,
  .ds-drawer--bottom {
    height: 100vh !important;
    max-height: 100vh;
  }
}