calcite-alert.scss

/**
 * CSS Custom Properties
 *
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-alert-width: the width of the alert
 */

// scale variables
:host([scale="s"]) {
  --calcite-alert-width: 40em;
  --calcite-alert-spacing-token-small: theme("spacing.2");
  --calcite-alert-spacing-token-large: theme("spacing.3");
  @include slotted("title", "*") {
    @apply text-n1-wrap;
  }
  @include slotted("message", "*") {
    @apply text-n2-wrap;
  }
  @include slotted("link", "*") {
    @apply text-n2-wrap;
  }
  .alert-queue-count {
    @apply mx-2;
  }
  .container {
    --calcite-alert-min-height: 3.5rem;
  }
  .alert-close {
    // specific padding for close button to align with calcite-action small-scale spacing
    @apply p-2;
  }
}

:host([scale="m"]) {
  --calcite-alert-width: 50em;
  --calcite-alert-spacing-token-small: theme("spacing.3");
  --calcite-alert-spacing-token-large: theme("spacing.4");
  @include slotted("title", "*") {
    @apply text-0-wrap;
  }
  @include slotted("message", "*") {
    @apply text-n1-wrap;
  }
  @include slotted("link", "*") {
    @apply text-n1-wrap;
  }
  .alert-queue-count {
    @apply mx-3;
  }
  .container {
    --calcite-alert-min-height: 4.1875rem;
  }
}

:host([scale="l"]) {
  --calcite-alert-width: 60em;
  --calcite-alert-spacing-token-small: theme("spacing.4");
  --calcite-alert-spacing-token-large: theme("spacing.5");
  @include slotted("title", "*") {
    @apply text-1-wrap mb-1;
  }
  @include slotted("message", "*") {
    @apply text-0-wrap;
  }
  @include slotted("link", "*") {
    @apply text-0-wrap;
  }
  .alert-queue-count {
    @apply mx-4;
  }
  .container {
    --calcite-alert-min-height: 5.625rem;
  }
}

:host {
  @apply block;
  .container {
    @apply shadow-2
      flex
      fixed
      justify-center
      items-center
      pointer-events-none
      my-0
      mx-auto
      bg-foreground-1
      opacity-0
      left-0
      right-0
      bottom-0;
    border-radius: var(--calcite-border-radius);
    border-top: 0px solid transparent;
    border-left: 1px solid var(--calcite-ui-border-3);
    border-right: 1px solid var(--calcite-ui-border-3);
    border-bottom: 1px solid var(--calcite-ui-border-3);
    min-height: var(--calcite-alert-min-height);
    width: var(--calcite-alert-width);
    max-width: 90%;
    max-height: 0;
    z-index: 101;
    transform: translate3d(0, $baseline, 0);
    transition: var(--calcite-internal-animation-timing-slow) $easing-function,
      opacity var(--calcite-internal-animation-timing-slow) $easing-function,
      all var(--calcite-internal-animation-timing) ease-in-out;
  }
}

.container {
  @apply flex
    w-full
    justify-center
    items-center;
}

// focus styles
.alert-close {
  @apply focus-base;
  &:focus {
    @apply focus-inset;
  }
}

:host([active]) {
  .container:not(.queued) {
    @apply opacity-100 max-h-full border-t-2;
    transform: translate3d(0, -$baseline, 0);
    pointer-events: initial;
  }
}

@include slotted("title", "*") {
  @apply font-medium
    text-0-wrap
    text-color-1;
}

@include slotted("message", "*") {
  @apply inline
    m-0
    font-normal
    text-n1-wrap
    text-color-2;
  margin-inline-end: theme("margin.2");
}

@include slotted("link", "*") {
  @apply text-color-link inline-flex;
}

@mixin alert-element-base() {
  @apply transition-default;
  padding: var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);
  flex: 0 0 auto;
}

.alert-content {
  @include alert-element-base;
  @apply break-words bg-foreground-1;
  flex: 1 1 auto;
  min-width: 0;
  padding-block: var(--calcite-alert-spacing-token-small);
  padding-inline: 0 var(--calcite-alert-spacing-token-small);
  border-bottom-left-radius: var(--calcite-border-radius);
  border-bottom-right-radius: var(--calcite-border-radius);

  &:first-of-type:not(:only-child) {
    padding-inline-start: var(--calcite-alert-spacing-token-large);
  }
  &:only-child {
    padding: var(--calcite-alert-spacing-token-small);
  }
}

.alert-icon {
  @include alert-element-base;
  @apply py-0
    flex
    self-stretch
    items-center
    bg-foreground-1;
}

.alert-close {
  @include alert-element-base;
  @apply py-0
    self-stretch
    bg-foreground-1
    border-none
    outline-none
    cursor-pointer
    text-color-3
    overflow-hidden;
  border-end-end-radius: var(--calcite-border-radius);

  &:hover,
  &:focus {
    @apply text-color-1 bg-foreground-2;
  }

  &:active {
    @apply bg-foreground-3;
  }
}

.alert-queue-count {
  @apply flex
    items-center
    justify-around
    self-stretch
    overflow-hidden
    invisible
    font-medium
    text-center
    text-color-2
    bg-foreground-1
    opacity-0
    cursor-default
    transition-default;
  border-left: 0px solid transparent;
  border-right: 0px solid transparent;
  border-top-right-radius: 0;

  &.active {
    @apply visible opacity-100;
  }
}

:host([auto-dismiss]) > .alert-queue-count {
  border-inline-end: 0px solid transparent;
}

.alert-dismiss-progress {
  @apply block
    absolute
    left-0
    right-0
    w-full
    overflow-hidden;
  top: -2px;
  height: 2px;
  z-index: 103;
  border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;
  &:after {
    @apply top-0
    block
    absolute;
    height: 2px;
    content: "";
    background-color: var(--calcite-alert-dismiss-progress-background);
    z-index: 104;
    inset-inline-end: 0;
  }
}

$alertColors: "blue" var(--calcite-ui-info), "red" var(--calcite-ui-danger), "yellow" var(--calcite-ui-warning),
  "green" var(--calcite-ui-success);

@each $alertColor in $alertColors {
  $name: nth($alertColor, 1);
  $color: nth($alertColor, 2);

  :host([color="#{$name}"]) {
    .container {
      border-top-color: $color;

      & .alert-icon {
        color: $color;
      }
    }
  }
}

$alertDurations: "fast" 6000ms, "medium" 10000ms, "slow" 14000ms;

@each $alertDuration in $alertDurations {
  $name: nth($alertDuration, 1);
  $duration: nth($alertDuration, 2);

  :host([auto-dismiss-duration="#{$name}"]) .alert-dismiss-progress:after {
    animation: dismissProgress $duration ease-out;
  }
}

@keyframes dismissProgress {
  0% {
    @apply w-0 opacity-75;
  }
  100% {
    @apply w-full opacity-100;
  }
}