shell-panel.scss

/**
 * CSS Custom Properties
 *
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-shell-panel-width: Specifies the width of the component.
 * @prop --calcite-shell-panel-max-width: Specifies the maximum width of the component.
 * @prop --calcite-shell-panel-min-width: Specifies the minimum width of the component.
 * @prop --calcite-shell-panel-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the height of the component.
 * @prop --calcite-shell-panel-max-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the maximum height of the component.
 * @prop --calcite-shell-panel-min-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the minimum height of the component.
 * @prop --calcite-shell-panel-z-index: Specifies the z-index value for the component.
 * @prop --calcite-shell-panel-border-color: When `displayMode` is `"float-all"`, specifies the component's border color.
 * @prop --calcite-shell-panel-corner-radius: When `displayMode` is `"float-all"`, specifies the component's corner radius
 * @prop --calcite-shell-panel-shadow: When `displayMode` is `"float-all"`, specifies the component's shadow.

 *
 */

:host {
  @apply relative
    pointer-events-none
    flex
    flex-initial
    items-stretch;
  z-index: var(--calcite-shell-panel-z-index, theme("zIndex.default"));
  --calcite-shell-panel-max-height: unset;
  --calcite-internal-shell-panel-shadow-block-start:
    0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --calcite-internal-shell-panel-shadow-block-end:
    0 -4px 8px -1px rgba(0, 0, 0, 0.08), 0 -2px 4px -1px rgba(0, 0, 0, 0.04);
  --calcite-internal-shell-panel-shadow-inline-start:
    4px 0 8px -1px rgba(0, 0, 0, 0.08), 2px 0 4px -1px rgba(0, 0, 0, 0.04);
  --calcite-internal-shell-panel-shadow-inline-end:
    -4px 0 8px -1px rgba(0, 0, 0, 0.08), -2px 0 4px -1px rgba(0, 0, 0, 0.04);
}

.calcite--rtl.content--overlay {
  --calcite-internal-shell-panel-shadow-inline-start:
    -4px 0 8px -1px rgba(0, 0, 0, 0.08), -2px 0 4px -1px rgba(0, 0, 0, 0.04);
  --calcite-internal-shell-panel-shadow-inline-end:
    4px 0 8px -1px rgba(0, 0, 0, 0.08), 2px 0 4px -1px rgba(0, 0, 0, 0.04);
}

:host([layout="vertical"]) {
  z-index: var(--calcite-shell-panel-z-index, calc(theme("zIndex.default") + 1));
}

:host([layout="vertical"][display-mode="overlay"]) {
  z-index: var(--calcite-shell-panel-z-index, calc(theme("zIndex.header") + 1));
}

:host([layout="vertical"][display-mode="float-all"]) .content {
  flex: 2;
}

:host([layout="vertical"]:not([display-mode="float-all"])) .width-s {
  --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw);
  --calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 300px);
  --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px);
}

:host([layout="vertical"][display-mode="float-all"]) .width-s {
  --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw);
  --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px);
}

:host([layout="vertical"]:not([display-mode="float-all"])) .width-m {
  --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);
  --calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 420px);
  --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px);
}

:host([layout="vertical"][display-mode="float-all"]) .width-m {
  --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);
  --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px);
}

:host([layout="vertical"]:not([display-mode="float-all"])) .width-l {
  --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw);
  --calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 680px);
  --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px);
}

:host([layout="vertical"][display-mode="float-all"]) .width-l {
  --calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw);
  --calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px);
}

:host([layout="horizontal"]) .height-s {
  --calcite-internal-shell-panel-max-height: var(
    --calcite-shell-panel-max-height,
    var(--calcite-shell-panel-detached-max-height, 20vh)
  );
}

:host([layout="horizontal"]) .content {
  --calcite-internal-shell-panel-min-height: var(--calcite-shell-panel-min-height, 5vh);
  --calcite-internal-shell-panel-max-height: var(--calcite-shell-panel-max-height, 30vh);
}

:host([layout="horizontal"]) .height-l {
  --calcite-internal-shell-panel-max-height: var(
    --calcite-shell-panel-max-height,
    var(--calcite-shell-panel-detached-max-height, 40vh)
  );
}

.container {
  @apply text-color-2
  text-n1
  pointer-events-none
  box-border
  flex
  flex-auto
  items-stretch
  bg-transparent
  h-full;

  * {
    @apply box-border;
  }

  &.float-all {
    margin-block: 0.5rem;
    margin-inline: 0.5rem;
  }
}

.float-all {
  max-block-size: var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem));
  box-shadow: var(--calcite-shell-panel-shadow, var(--calcite-shadow-sm));
  border-radius: var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));
  overflow: hidden;
}

:host([layout="vertical"][position="start"]) .float-all {
  border-inline-start: 1px solid var(--calcite-shell-panel-border-color, var(--calcite-color-border-3));
}

:host([layout="vertical"][position="end"]) .float-all {
  border-inline-end: 1px solid var(--calcite-shell-panel-border-color, var(--calcite-color-border-3));
}

:host([layout="horizontal"]) .float-all {
  border-inline: 1px solid var(--calcite-shell-panel-border-color, var(--calcite-color-border-3));
}

:host([layout="horizontal"]) .container {
  @apply w-full h-auto;
  flex-direction: column;
}

:host(:hover),
:host(:focus-within) {
  .separator:not(:hover):not(:focus) {
    @apply opacity-100;
    background-color: var(--calcite-color-border-3);
  }
}

.separator {
  @apply transition-default
  pointer-events-auto
  absolute
  flex
  bg-transparent
  opacity-0;
  cursor: col-resize;
  outline: none;
  &:hover {
    @apply opacity-100;
    background-color: var(--calcite-color-border-2);
  }
  &:focus {
    @apply bg-brand opacity-100;
  }
}

:host([layout="vertical"]) .separator {
  @apply bottom-0
  top-0 h-full
  w-0.5;
  cursor: col-resize;
}

:host([layout="horizontal"][position="start"]) .separator {
  @apply bottom-0;
}

:host([layout="horizontal"][position="end"]) .separator {
  @apply top-0;
}

:host([layout="horizontal"]) .separator {
  @apply end-0 w-full
  h-0.5;
  cursor: row-resize;
}

:host([layout="vertical"][position="start"]) .separator {
  inset-inline-end: -2px;
}
:host([layout="horizontal"][position="start"]) .separator {
  inset-block-end: -2px;
}

:host([layout="vertical"][position="end"]) .separator {
  inset-inline-start: -2px;
}
:host([layout="horizontal"][position="end"]) .separator {
  inset-block-start: -2px;
}

::slotted(calcite-panel),
::slotted(calcite-flow) {
  @apply h-full w-full flex-auto;
  max-block-size: unset;
  max-inline-size: unset;
}

::slotted(.calcite-match-height) {
  @apply flex flex-auto overflow-hidden;
}

.content {
  @apply bg-background
  pointer-events-auto
  flex
  flex-col
  flex-nowrap
  items-stretch
  self-stretch
  p-0;
  transition:
    max-block-size var(--calcite-animation-timing),
    max-inline-size var(--calcite-animation-timing);
}

:host([layout="vertical"]:not([display-mode="float-all"])) .content {
  inline-size: var(--calcite-internal-shell-panel-width);
  max-inline-size: var(--calcite-internal-shell-panel-max-width);
  min-inline-size: var(--calcite-internal-shell-panel-min-width);
}

:host([layout="vertical"][display-mode="float-all"]) .content {
  inline-size: var(--calcite-internal-shell-panel-width);
  min-inline-size: var(--calcite-internal-shell-panel-min-width);
}

:host([layout="horizontal"]) .content {
  block-size: var(--calcite-internal-shell-panel-height);
  max-block-size: var(--calcite-internal-shell-panel-max-height);
  min-block-size: var(--calcite-internal-shell-panel-min-height);
}

.content__header {
  @apply flex
  flex-initial
  flex-col
  flex-nowrap
  items-stretch;
}

.content__body {
  @apply flex
  flex-auto
  flex-col
  overflow-hidden;
}

.content--overlay {
  @apply absolute
  shadow-0;
}

:host([layout="vertical"]) .content--overlay {
  @apply top-0 h-full;
}

:host([layout="horizontal"]) .content--overlay {
  @apply start-0 w-full;
}

:host([layout="vertical"][position="start"]) .content--overlay {
  inset-inline-start: 100%;
  box-shadow: var(--calcite-internal-shell-panel-shadow-inline-start);
}

:host([layout="vertical"][position="end"]) .content--overlay {
  inset-inline-end: 100%;
  box-shadow: var(--calcite-internal-shell-panel-shadow-inline-end);
}

:host([layout="horizontal"][position="start"]) .content--overlay {
  inset-block-start: 100%;
  box-shadow: var(--calcite-internal-shell-panel-shadow-block-start);
}

:host([layout="horizontal"][position="end"]) .content--overlay {
  inset-block-end: 100%;
  box-shadow: var(--calcite-internal-shell-panel-shadow-block-end);
}

.float--content {
  @apply shadow-0
  mx-2
  mt-2
  mb-auto
  h-auto
  overflow-hidden
  rounded;
  max-block-size: var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem));
  ::slotted(calcite-panel),
  ::slotted(calcite-flow) {
    max-block-size: unset;
  }
}

:host([layout="horizontal"]) .float--content {
  @apply my-2;
}

:host([position="start"]) .float--content,
:host([position="end"]) .float--content {
  ::slotted(calcite-panel),
  ::slotted(calcite-flow) {
    @apply border-none;
  }
}

.content[hidden] {
  @apply hidden;
}

slot[name="action-bar"]::slotted(calcite-action-bar),
.content ::slotted(calcite-flow),
.content ::slotted(calcite-panel:not([closed])) {
  @apply border-color-3 border border-solid;
}

:host([position="start"]:not([slot="panel-end"])),
:host([position="end"][slot="panel-start"]) {
  slot[name="action-bar"]::slotted(calcite-action-bar),
  .content ::slotted(calcite-flow),
  .content ::slotted(calcite-panel) {
    border-inline-start: none;
  }
}

:host([position="end"]:not([slot="panel-start"])),
:host([position="start"][slot="panel-end"]) {
  slot[name="action-bar"]::slotted(calcite-action-bar),
  .content ::slotted(calcite-flow),
  .content ::slotted(calcite-panel) {
    border-inline-end: none;
  }
}

:host([layout="horizontal"]) slot[name="action-bar"]::slotted(calcite-action-bar) {
  border-inline: 0;
}

:host([layout="horizontal"][position="start"]) .content ::slotted(calcite-flow),
:host([layout="horizontal"][position="start"]) .content ::slotted(calcite-panel) {
  border-inline: 0;
  border-block-start: 0;
}

:host([layout="horizontal"][position="end"]) .content ::slotted(calcite-flow),
:host([layout="horizontal"][position="end"]) .content ::slotted(calcite-panel) {
  border-inline: 0;
  border-block-end: 0;
}

@include base-component();