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

Sense UI components library

@value (spaceNone, spaceXXSmall, spaceXSmall, spaceSmall, spaceMedium, spaceHalfFluid, spaceNegHalfFluid) from '../../styles/variables/_space.css';
@value (size2, size22, size48, size50, size60, size240, size300, sizeFluid) from '../../styles/variables/_size.css';
@value (borderRadiusMedium, borderRadiusNone, borderWidthPrimary) from '../../styles/variables/_border.css';
@value (
  colorBackgroundTertiary,
  colorFillPrimary,
  colorButtonFillTableActionEnabled,
  colorButtonFillTableActionHovered,
  colorButtonFillTableActionPressed,
  colorButtonFillTableActionBorder
) from '../../styles/variables/_color.css';
@value (elevationMenu) from '../../styles/variables/_elevation.css';

.tableBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(size22 * 3);
  width: sizeFluid;
  padding: spaceSmall spaceMedium;
  background-color: colorBackgroundTertiary;
}

.topBar {
  composes: borderPrimary from '../../styles/border.module.css';
  border-bottom: none;
  border-radius: borderRadiusMedium borderRadiusMedium borderRadiusNone
    borderRadiusNone;
}

.bottomBar {
  composes: borderPrimary from '../../styles/border.module.css';
  min-height: calc(size60 - size2);
  border-top: none;
  border-radius: borderRadiusNone borderRadiusNone borderRadiusMedium
    borderRadiusMedium;
}

.tableActionBar {
  display: flex;
  height: size50;
  background-color: colorFillPrimary;
  composes: boxShadow3 from '../../styles/shadow.module.css';
  align-items: center;
  justify-content: space-between;
  width: sizeFluid;
  padding: spaceXSmall spaceSmall spaceXSmall spaceMedium;
}

.buttonCta {
  border: borderWidthPrimary solid colorButtonFillTableActionBorder;
  background-color: colorButtonFillTableActionEnabled;
}

.buttonCta:hover {
  background-color: colorButtonFillTableActionHovered;
}

.buttonCta:active {
  background-color: colorButtonFillTableActionPressed;
}