calcite-modal.scss

/**
 * CSS Custom Properties
 *
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-modal-content-text: the font-size of the modal content
 * @prop --calcite-modal-padding: the top/bottom padding around items in the modal
 * @prop --calcite-modal-padding-large: the left/right padding around items in the modal
 * @prop --calcite-modal-title-text: the font-size of the modal title
 * @prop --calcite-scrim-background: the semi-transparent background color behind modal
 */

:host {
  @apply fixed
    inset-0
    flex
    justify-center
    items-center
    overflow-y-hidden
    text-color-2
    opacity-0;
  visibility: hidden !important;
  transition: visibility 0ms linear 300ms, opacity 300ms $easing-function;
  z-index: 101;
}

:host([scale="s"]) {
  --calcite-modal-padding: theme("spacing.3");
  --calcite-modal-padding-large: theme("spacing.4");
  --calcite-modal-title-text: theme("fontSize.1h");
  --calcite-modal-content-text: theme("fontSize.-1");
}

:host([scale="m"]) {
  --calcite-modal-padding: theme("spacing.4");
  --calcite-modal-padding-large: theme("spacing.5");
  --calcite-modal-title-text: theme("fontSize.2h");
  --calcite-modal-content-text: theme("fontSize.0");
}

:host([scale="l"]) {
  --calcite-modal-padding: theme("spacing.5");
  --calcite-modal-padding-large: theme("spacing.6");
  --calcite-modal-title-text: theme("fontSize.3h");
  --calcite-modal-content-text: theme("fontSize.1");
}

.scrim {
  --calcite-scrim-background: #{rgba($blk-240, 0.75)};
  @apply fixed inset-0 flex overflow-y-hidden;
}

.modal {
  @apply flex
    flex-col
    shadow-2-sm
    box-border
    float-none
    m-6
    rounded
    bg-foreground-1
    w-full
    opacity-0
    pointer-events-none
    overflow-hidden;
  z-index: 102;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  transition: transform 300ms $easing-function, visibility 0ms linear 300ms, opacity 300ms $easing-function;
  transform: translate3d(0, 20px, 0);
}

:host([active]) {
  @apply opacity-100;
  visibility: visible !important;
  transition-delay: 0ms;
  .modal {
    @apply opacity-100 pointer-events-auto visible;
    transform: translate3d(0, 0, 0);
    transition: transform 300ms $easing-function, visibility 0ms linear, opacity 300ms $easing-function,
      max-width 300ms $easing-function, max-height 300ms $easing-function;
    transition-delay: 0ms;
  }
}

/**
 * Header
 */
.header {
  @apply flex
    max-w-full
    min-w-0
    rounded-t
    bg-foreground-1
    border-0
    border-b
    border-solid
    border-color-3;
  flex: 0 0 auto;
  z-index: 2;
}

.close {
  @apply m-0
    appearance-none
    border-none
    text-color-3
    order-2
    cursor-pointer
    bg-transparent
    focus-base;
  border-start-end-radius: theme("borderRadius.DEFAULT");
  padding: var(--calcite-modal-padding);
  flex: 0 0 auto;
  transition: all 0.15s ease-in-out;
  calcite-icon {
    @apply pointer-events-none;
    vertical-align: -2px;
  }
  &:focus {
    @apply focus-inset;
  }
  &:hover,
  &:focus,
  &:active {
    @apply bg-foreground-2 text-color-1;
  }
}

.title {
  @apply flex items-center order-1 min-w-0;
  flex: 1 1 auto;
  padding: var(--calcite-modal-padding) var(--calcite-modal-padding-large);
}

@include slotted("header", "*") {
  @apply m-0 font-normal text-color-1;
  font-size: var(--calcite-modal-title-text);
}

/**
 * Content area
 */
.content {
  @apply relative p-0 h-full overflow-auto block bg-foreground-1 box-border;
  max-height: calc(100vh - 12rem);
  z-index: 1;
}

.content--spaced {
  padding: var(--calcite-modal-padding) var(--calcite-modal-padding-large);
}

.content--no-footer {
  @apply rounded-b;
}

@include slotted("content", "*") {
  font-size: var(--calcite-modal-content-text);
}

:host([background-color="grey"]) {
  .content {
    @apply bg-background;
  }
}

/**
 * Footer
 */
.footer {
  @apply flex
    justify-between
    mt-auto
    box-border
    rounded-b
    w-full
    bg-foreground-1
    border-0
    border-t
    border-solid
    border-color-3;
  flex: 0 0 auto;
  padding: var(--calcite-modal-padding) var(--calcite-modal-padding-large);
  z-index: 2;
}

.footer--hide-back .back,
.footer--hide-secondary .secondary {
  @apply hidden;
}

.back {
  @apply block;
  margin-inline-end: auto;
}

.secondary {
  @apply block mx-1;
}

slot[name="primary"] {
  @apply block;
}

/**
 * Sizes
 */
@mixin modal-size($size, $width) {
  :host([width="#{$size}"]) {
    .modal {
      max-width: $width;
    }
  }
  @media screen and (max-width: $width + 2 * $baseline) {
    :host([width="#{$size}"]) {
      .modal {
        @apply h-full max-h-full w-full max-w-full m-0 rounded-none;
      }
      .content {
        flex: 1 1 auto;
        max-height: unset;
      }
    }
    :host([width="#{$size}"][docked]) {
      @apply items-end;
    }
  }
}

:host([width="small"]) .modal {
  @apply w-auto;
}

@include modal-size("s", 32rem);
@include modal-size("m", 48rem);
@include modal-size("l", 94rem);

/**
 * Fullscreen
 */
:host([fullscreen]) {
  background-color: transparent;
  .modal {
    @apply h-full max-h-full w-full max-w-full m-0;
    transform: translate3D(0, 20px, 0) scale(0.95);
  }
  .content {
    @apply max-h-full;
    flex: 1 1 auto;
  }
}

:host([active][fullscreen]) {
  .modal {
    transform: translate3D(0, 0, 0) scale(1);
  }
  .header {
    border-radius: 0;
  }
  .footer {
    border-radius: 0;
  }
}

/**
 * Docked
 */
:host([docked]) {
  .modal {
    @apply h-auto;
  }
  .content {
    @apply h-auto;
    flex: 1 1 auto;
  }
  @media screen and (max-width: $viewport-medium) {
    .modal {
      border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;
    }

    .close {
      border-start-end-radius: var(--calcite-border-radius);
    }
  }
}

/**
 * Colors
 */
:host([color="red"]) {
  .modal {
    @apply border-color-danger;
  }
}

:host([color="blue"]) {
  .modal {
    @apply border-color-info;
  }
}

:host([color="red"]),
:host([color="blue"]) {
  .modal {
    @apply border-0 border-t-4 border-solid;
  }
  .header {
    @apply rounded rounded-b-none;
  }
}

/**
 * Tablet
 */
@media screen and (max-width: $viewport-medium) {
  @include slotted("header", "*") {
    @apply text-1;
  }
  .footer {
    @apply sticky bottom-0;
  }
}

/**
 * Mobile
 */
@media screen and (max-width: $viewport-small) {
  .footer {
    @apply flex-col;
  }
  .back,
  .secondary {
    @apply m-0 mb-1;
  }
}