@spaced-out/ui-design-system/lib/components/Panel/Panel.module.css

Sense UI components library

@value (spaceNegFluid, spaceNone, spaceMedium, spaceSmall, spaceFluid) from '../../styles/variables/_space.css';
@value (size4, size60, size480, size580, size720, sizeFluid) from '../../styles/variables/_size.css';
@value (motionDurationNormal, motionEaseInEaseOut) from '../../styles/variables/_motion.css';
@value (colorBackgroundTertiary, colorBackgroundPrimary) from '../../styles/variables/_color.css';
@value (borderRadiusNone) from '../../styles/variables/_border.css';

.panel {
  opacity: initial;
  height: sizeFluid;
  background-color: colorBackgroundTertiary;
  border-radius: borderRadiusNone;
}

.panel.small {
  width: size480;
}

.panel.medium {
  width: size580;
}

.panel.large {
  width: size720;
}

.panel.left {
  top: spaceNone;
  left: spaceNone;
  right: initial;
  transform: translateX(spaceNegFluid);
}

.panel.right {
  top: spaceNone;
  right: spaceNone;
  left: initial;
  transform: translateX(spaceFluid);
}

.panelContainer.open.in .left,
.panelContainer.open.in .right {
  transform: translateX(spaceNone);
}

.panelHeader {
  composes: borderBottomPrimary from '../../styles/border.module.css';
  composes: subTitleLarge from '../../styles/typography.module.css';
  padding: spaceNone spaceSmall spaceNone spaceMedium;
  min-height: size60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: spaceMedium;
  background-color: colorBackgroundTertiary;
}

.headerContent {
  display: flex;
}

.panelBody {
  padding: spaceMedium;
  height: sizeFluid;
  overflow: auto;
  background-color: colorBackgroundPrimary;
}

.panelFooter {
  composes: borderTopPrimary from '../../styles/border.module.css';
  background-color: colorBackgroundTertiary;
  margin-top: auto;
  padding: spaceMedium;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: spaceMedium;
}

.panelFooterActions {
  display: flex;
  gap: spaceSmall;
}