panel.scss

/**
 * CSS Custom Properties
 *
 * These properties can be overridden using the component's tag as selector.

 * @prop --calcite-panel-corner-radius: Specifies the corner radius of the component.
 * @prop --calcite-panel-heading-text-color: Specifies the text color of the component's `heading`.
 * @prop --calcite-panel-description-text-color: Specifies the text color of the component's `description`.
 * @prop --calcite-panel-border-color: Specifies the border color of the component.

 * @prop --calcite-panel-background-color: Specifies the background color of the component.
 * @prop --calcite-panel-header-background-color: Specifies the background color of the component's footer.
 * @prop --calcite-panel-footer-background-color: Specifies the background color of the component's footer.

 * @prop --calcite-panel-space: Specifies the padding of the component's `"unnamed (default)"` slot.
 * @prop --calcite-panel-header-content-space: Specifies the padding of the `"header-content"` slot.
 * @prop --calcite-panel-footer-space: Specifies the padding of the component's footer.

 * @prop --calcite-action-background-color: Specifies the background color of the component's `closable`, `collapsible`, and `back` Calcite Action components. Will apply to any slotted Calcite Action components.
 * @prop --calcite-action-background-color-hover: Specifies the background color of the component's `closable`, `collapsible`, and `back` Calcite Action components when hovered. Will apply to any slotted Calcite Action components.
 * @prop --calcite-action-background-color-pressed: Specifies the background color of the component's `closable`, `collapsible`, and `back` Calcite Action components when pressed. Will apply to any slotted Calcite Action components.
 * @prop --calcite-action-text-color-hover: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` Calcite Action components when hovered. Will apply to any slotted Calcite Action components.
 * @prop --calcite-action-text-color-pressed: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` Calcite Action components when pressed. Will apply to any slotted Calcite Action components.
 * @prop --calcite-popover-border-color: Specifies the border color of the component's internally rendered Calcite Popover component, which is rendered within a Calcite Action Menu when slotted Calcite Actions are present in the `header-actions-end` slot. Will apply to any slotted Calcite Popover components.

 * @prop --calcite-panel-content-space: [Deprecated] Specifies the padding of the component's content. Use `--calcite-panel-space` instead.
 * @prop --calcite-panel-footer-padding: [Deprecated] Specifies the padding of the component's footer. Use `--calcite-panel-footer-space` instead.
 * @prop --calcite-panel-header-border-block-end: [Deprecated] Specifies the component header's block end border. Use `--calcite-panel-border-color` instead.
 */

:host {
  @apply relative flex w-full h-full flex-auto overflow-hidden box-border;

  --calcite-min-header-height: calc(var(--calcite-icon-size) * 3);
}

@include disabled();

@import "../../assets/styles/header";

:host([scale="s"]) {
  --calcite-internal-panel-default-space: var(--calcite-spacing-sm);
  --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-sm-plus);

  .header-content {
    .heading {
      font-size: var(--calcite-font-size--1);
    }

    .description {
      font-size: var(--calcite-font-size--2);
    }
  }
}

:host([scale="m"]) {
  --calcite-internal-panel-default-space: var(--calcite-spacing-md);
  --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus);

  .header-content {
    .heading {
      font-size: var(--calcite-font-size-0);
    }

    .description {
      font-size: var(--calcite-font-size--1);
    }
  }
}

:host([scale="l"]) {
  --calcite-internal-panel-default-space: var(--calcite-spacing-lg);
  --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xl);

  .header-content {
    .heading {
      font-size: var(--calcite-font-size-1);
    }

    .description {
      font-size: var(--calcite-font-size-0);
    }
  }
}

.content-top,
.content-bottom {
  @apply flex items-start self-stretch;
  padding: var(--calcite-internal-panel-default-space);
  border-block-start: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));
  background-color: var(--calcite-panel-background-color, var(--calcite-color-foreground-1));
}

.container {
  @apply relative bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0 overflow-hidden box-border text-n1 text-color-2;
  transition:
    max-block-size var(--calcite-animation-timing),
    inline-size var(--calcite-animation-timing);
  border-radius: var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none));
  box-sizing: border-box;
  font-size: var(--calcite-font-size--1);
}

.container * {
  @apply box-border;
}

.container[hidden] {
  @apply hidden;
}

.header {
  @apply flex flex-col z-header;
  border-radius: var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none))
    var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none)) 0 0;
  background-color: var(--calcite-panel-header-background-color, var(--calcite-color-foreground-1));
  border-block-end: 1px solid
    var(--calcite-panel-border-color, var(--calcite-panel-header-border-block-end, var(--calcite-color-border-3)));
}

.header-container {
  @apply flex flex-row w-full
  items-stretch
  justify-start;
  flex: 0 0 auto;
}

.header-container--border-end {
  border-block-end: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));
}

.action-bar-container {
  @apply w-full;
}

.action-bar-container ::slotted(calcite-action-bar) {
  @apply w-full;
}

.header-content {
  @apply flex
    flex-col
    overflow-hidden
    px-3
    py-3.5;

  margin-inline-end: auto;
  justify-content: center;

  .heading,
  .description {
    @apply block
    flex-none
    break-words
    p-0;
    line-height: var(--calcite-font-line-height-relative-snug);
  }

  .heading {
    @apply font-medium;
    color: var(--calcite-panel-heading-text-color, var(--calcite-color-text-1));

    &:only-child {
      @apply mb-0;
    }
  }

  .description {
    color: var(--calcite-panel-description-text-color, var(--calcite-color-text-2));
  }
}

.back-button {
  @apply border-0
  border-solid;
  border-inline-end-width: theme("borderWidth.DEFAULT");
  border-color: var(--calcite-panel-border-color, var(--calcite-color-border-3));
}

.header-actions {
  @apply flex
  flex-row
  flex-nowrap
  items-stretch;
}

.header-actions--end {
  margin-inline-start: theme("margin.auto");
}

#close,
#collapse,
.back-button,
calcite-action-menu {
}

#close,
#collapse,
calcite-action-menu {
  &:last-child {
    --calcite-action-corner-radius-start-end: var(--calcite-panel-corner-radius);
  }
}

.back-button {
  --calcite-action-corner-radius-start-start: var(--calcite-panel-corner-radius);
}

.content-wrapper {
  @apply flex
  flex-auto
  flex-col
  flex-nowrap
  items-stretch
  overflow-auto
  h-full
  focus-base
  text-color-2
  relative;
  padding: var(--calcite-panel-space, var(--calcite-panel-content-space, 0));
  background: var(--calcite-panel-background-color, var(--calcite-color-background));
}

.content-wrapper:focus-visible {
  @apply focus-inset;
}

.header-content {
  flex: 1 1 auto;
  justify-content: center;
  padding-block: var(--calcite-internal-panel-header-vertical-padding);
  padding-inline: var(--calcite-internal-panel-default-space);

  &.header-slotted-content {
    padding: var(
      --calcite-panel-header-content-space,
      var(--calcite-internal-panel-header-vertical-padding) var(--calcite-internal-panel-default-space)
    );
  }
}
.footer {
  @apply flex mt-auto flex-row content-between justify-center items-center text-n2-wrap;
  border-block-start: 1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));
  padding: var(
    --calcite-panel-footer-space,
    var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-space))
  );
  background-color: var(--calcite-panel-footer-background-color, var(--calcite-color-foreground-1));
  border-radius: 0 0 var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none))
    var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none));
}

.footer-content {
  @apply flex flex-row items-center justify-center flex-1;
}

.footer-actions {
  @apply flex flex-row items-center justify-evenly flex-1;
  gap: var(--calcite-internal-panel-default-space);
}

.footer-start {
  @apply flex flex-row items-center justify-start flex-1;
  margin-inline-end: auto;
  gap: var(--calcite-internal-panel-default-space);
}

.footer-end {
  @apply flex flex-row items-center justify-end flex-1;
  margin-inline-start: auto;
  gap: var(--calcite-internal-panel-default-space);
}

.fab-container {
  @apply sticky
  bottom-0
  my-0
  mx-auto
  block
  p-2
  z-sticky;
  inset-inline: 0;
  inline-size: fit-content;
}

@include base-component();