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

NPK UI Design System

.Card {
  --card-header-sticky-z-index: 6;
  --card-header-underlined-size: 2px;

  --card-other-border-sizes: 1px;

  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-colored-card-bg: var(--card-variant-normal-bg);
    --nested-card-bg: transparent;
  }

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


  &[data-variant="muted"] {
    --nested-colored-card-bg: var(--card-variant-muted-bg);
    --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: var(--card-header-underlined-size) solid var(--card-border-color, var(--card-variant-normal-border-color));
  }

  & > [data-component="card-section"] {
    margin-top: var(--internal-card-section-margin-top, auto);
    margin-left: calc(var(--card-pad-x) * -1);
    margin-right: calc(var(--card-pad-x) * -1);
    padding: var(--card-section-padding-y, calc(var(--card-pad-y) / 2)) calc(var(--card-pad-x));
    border-top: var(--internal-card-section-border-size, var(--card-other-border-sizes)) solid var(--card-border-color, var(--card-variant-normal-border-color));
    border-bottom: var(--internal-card-section-border-size, var(--card-other-border-sizes)) solid var(--card-border-color, var(--card-variant-normal-border-color));
    color: var(--color-fg-muted);
    background-color: var(--card-section-variant-muted-bg);
    font-size: var(--size-14);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-8);

    &:has(+ [data-component="card-footer"]) {
      margin-bottom: calc((var(--card-pad-y) + var(--card-other-border-sizes)) * -1);
      border-top-width: var(--card-other-border-sizes);
      border-bottom-width: var(--card-other-border-sizes);
    }
  }

  & >[data-component="card-footer"] {
    font-size: var(--size-14);
    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: var(--card-other-border-sizes) 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: var(--card-header-underlined-size) solid var(--card-border-color, var(--card-variant-normal-border-color));
      margin-bottom: var(--card-pad-y);

      &[data-sticky="true"] {
        position: sticky;
        top: calc(var(--sticky-top, 0px) + var(--card-pad-y));
        z-index: var(--card-header-sticky-z-index, 6);

        &::before {
          content: '';
          position: absolute;
          background-color: var(--nested-colored-card-bg, var(--card-variant-normal-bg));
          top: calc(var(--card-pad-y) * -1);
          left: 0;
          right: 0;
          height: calc(100% + var(--card-pad-y));
          z-index: -1;
          border-top-right-radius: var(--card-radius);
          border-top-left-radius: var(--card-radius);
        }
      }

      & + [data-component="card-section"] {
        --internal-card-section-margin-top: calc((var(--card-pad-y, 0) + var(--card-header-underlined-size)) * -1);
        --internal-card-section-border-size: var(--card-header-underlined-size);
      }
    }

    &[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="card-header"][data-variant="underlined"][data-sticky="true"] ~ [data-component="table"],
  & >[data-component="card-header"][data-variant="underlined"][data-sticky="true"] ~ * > [data-component="table"]  {
    --sticky-top: calc((var(--card-pad-y) * 2) + var(--card-header-underlined-size) + 18px);
  }

  & > [data-component="table"],
  & > * > [data-component="table"] {
    --table-header-padding: 0px var(--card-pad-x) calc(var(--card-pad-y) - 4px) var(--card-pad-x);
    --table-footer-padding: calc(var(--card-pad-y) - 4px) var(--card-pad-x) 0px var(--card-pad-x);
    margin-bottom: calc((var(--card-pad-y) - var(--card-radius)) * -1);
    margin-top: calc((var(--card-pad-y) - var(--card-radius)) * -1);
    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);
  }

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

  &[data-variant="invisible"] {
    & > [data-component="table"],
    & > * > [data-component="table"] {
      --table-bg-color: var(--body-bg-color);
      --table-footer-bg-color: var(--body-bg-color);
    }
  }
  &[data-variant="muted"] {
    & > [data-component="table"],
    & > * > [data-component="table"] {
      --table-bg-color: var(--card-variant-muted-bg);
      --table-footer-bg-color: var(--card-variant-muted-bg);
      --table-border-color: var(--card-border-color);
    }
  }

  &:not([data-variant="invisible"],[data-variant="muted"]) {
    & > [data-component="table"],
    & > * > [data-component="table"] {
      --table-bg-color: var(--card-variant-normal-bg);
      --table-footer-bg-color: var(--card-variant-normal-bg);
      --table-border-color: var(--card-border-color, var(--card-variant-normal-border-color));
    }
  }
}