@harvest-profit/npk/src/Card/Card.module.css

NPK UI Design System

.Card {
  background-color: var(--nested-card-bg, var(--card-variant-normal-bg));
  border: 1px solid var(--card-border-color, var(--card-variant-normal-border-color));
  --card-pad-x: 14px;
  --card-pad-y: 14px;
  padding: var(--card-pad-x) var(--card-pad-y);
  border-radius: var(--card-radius);


  & > * {
    --nested-card-bg: transparent;
  }

  &[data-block="true"] {
    width: 100%;
  }


  &[data-variant="muted"] {
    --nested-card-bg: var(--card-variant-muted-bg);
    --card-border-color: var(--card-variant-muted-border-color);
  }

  &[data-variant="invisible"] {
    --nested-card-bg: transparent;
    --card-border-color: var(--card-variant-muted-border-color);
  }

  & > [data-component="card-divider"],
  & > * > [data-component="card-divider"] {
    margin: 0 calc(var(--card-pad-x) * -1);
    padding: 0 calc(var(--card-pad-x) * -1);
    border-bottom: 2px solid var(--card-border-color, var(--card-variant-normal-border-color));
  }

  & >[data-component="card-footer"] {
    font-size: var(--size-14);
    opacity: 0.7;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-8);
    margin-top: var(--card-pad-y);
    margin-left: calc(var(--card-pad-x) * -1);
    margin-right: calc(var(--card-pad-x) * -1);
    margin-bottom: calc(var(--card-pad-y) / 2 * -1);
    padding-right: var(--card-pad-x);
    padding-left: var(--card-pad-x);
    padding-top: calc(var(--card-pad-y) / 2);
    border-top: 1px solid var(--card-border-color, var(--card-variant-normal-border-color));
  }
  

  & >[data-component="card-header"] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--size-8);
    margin-left: calc(var(--card-pad-x) * -1);
    margin-right: calc(var(--card-pad-x) * -1);
    padding-right: var(--card-pad-x);
    padding-left: var(--card-pad-x);
    padding-bottom: var(--card-pad-y);

    &[data-variant="underlined"] {
      border-bottom: 2px solid var(--card-border-color, var(--card-variant-normal-border-color));
      margin-bottom: var(--card-pad-y);
    }

    &[data-variant="plain"] {
      border-bottom: none;
      margin-bottom: var(--card-pad-y);
      padding-bottom: 0;
    }

    &[data-size="lg"] > [data-component="card-header-text"] {
      font-size: 22px;
    }

    & >[data-component="card-header-text"] {
      order: 1;
      font-size: 18px;
      margin: 0;
      line-height: 1;
      font-weight: bold;
    }

    & >[data-component="card-header-leadingActions"] {
      order: 2;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--size-8);
      margin-top: calc(var(--card-pad-y) / 2 * -1);
      margin-bottom: calc(var(--card-pad-y) / 2 * -1);

      & > [data-invisible="true"] {
        margin-right: calc(var(--size-8) * -1);
      }

      & > [data-invisible="true"]:first-of-type {
        margin-left: calc(var(--card-pad-x) / 2 * -1);
      }
    }

    & >[data-component="card-header-trailingActions"] {
      order: 3;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      gap: var(--size-8);
      flex: 1;
      margin-top: calc(var(--card-pad-y) / 2 * -1);
      margin-bottom: calc(var(--card-pad-y) / 2 * -1);

      & > [data-invisible="true"] {
        margin-left: calc(var(--size-8) * -1);
      }

      & > [data-invisible="true"]:last-of-type {
        margin-right: calc(var(--card-pad-x) / 2 * -1);
      }
    }

    &[data-variant="inset"] {
      margin-top: -22px;

      &>[data-component="card-header-text"] {
        font-size: 14px;
        font-weight: normal;
        color: var(--color-neutral-60);
        background-color: var(--card-variant-normal-bg);
      }
    }
    
  }
}

/*
 Nested component modifications
*/
.Card {
  --tab-nav-border-color: var(--card-variant-normal-border-color);
  --tab-nav-parent-color: var(--nested-card-bg, var(--card-variant-normal-bg));


  &:not([data-variant="invisible"],[data-variant="muted"]) {
    --control-bg-color: var(--control-on-surface-bg-color);
    --control-bg-color--hover: var(--control-on-surface-bg-color--hover);
    --control-bg-color--active: var(--control-on-surface-bg-color--active);
    --control-bg-color--disabled: var(--control-on-surface-bg-color--disabled);
  }

  

  & > [data-component="tabnav"] {
    margin-top: 16px;
    margin-left: calc(var(--card-pad-x) * -1);
    margin-right: calc(var(--card-pad-x) * -1);
    & > * {
      padding-left: var(--card-pad-x);
      padding-right: var(--card-pad-x);
    }
  }

  & > [data-component="table"],
  & > * > [data-component="table"] {
    margin-left: calc(var(--card-pad-x) * -1);
    margin-right: calc(var(--card-pad-x) * -1);
    width: calc(100% + (var(--card-pad-x) * 2));
    --table-cell-ends-padding-x: var(--card-pad-x);
    --table-bg-color: var(--card-variant-normal-bg);
    --table-border-color: var(--card-border-color, var(--card-variant-normal-border-color));
  }

  & > [data-component="card-header"] + [data-component="table"] {
    margin-top: calc((var(--card-pad-y) * -1) - 1px);
  }
}