calcite-tip-manager.scss

/**
 * CSS Custom Properties
 *
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-tip-manager-height: the maximum height of the tip-manager
 * @prop --calcite-tip-max-width: the maximum width of a slotted tip within tip-manager
 */

:host {
  @apply block
  box-border
  bg-foreground-1
  text-color-2
  text--1h;

  * {
    @apply box-border;
  }

  --calcite-tip-manager-height: 19vh;
}

:host([closed]) {
  @apply hidden;
}

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

.header {
  @apply border-0
    border-b
    border-solid
    border-color-3
    py-0;

  padding-inline-end: theme("padding.0");
  padding-inline-start: theme("padding.4");

  h2.heading {
    @apply font-bold
      text-color-1
      text-1h
      p-0;
  }
}

.container {
  @apply overflow-hidden
    relative
    focus-base;
  min-height: 150px;
  &:focus {
    @apply focus-outset;
  }
}

.tip-container {
  @apply overflow-auto
    flex
    justify-center
    items-start
    focus-base
    mt-px;
  animation-name: none;
  animation-duration: var(--calcite-internal-animation-timing);
  height: var(--calcite-tip-manager-height);
  &:focus {
    @apply focus-outset;
  }
}

::slotted(calcite-tip) {
  @apply border-none p-3;
  max-width: var(--calcite-tip-max-width);
}

.tip-container--advancing {
  animation-name: tip-advance;
}

.tip-container--retreating {
  animation-name: tip-retreat;
}

/* Pagination Styles*/
.pagination {
  @apply flex
  items-center
  justify-center
  pt-3
  pb-2
  px-0;
}

.page-position {
  @apply text--2h my-0 mx-2;
}

/* @keyframes*/
@keyframes tip-advance {
  0% {
    @apply opacity-0;
    transform: translate3d(50px, 0, 0) scale(0.99);
  }
  100% {
    @apply opacity-100;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes tip-retreat {
  0% {
    @apply opacity-0;
    transform: translate3d(-50px, 0, 0) scale(0.99);
  }
  100% {
    @apply opacity-100;
    transform: translate3d(0, 0, 0) scale(1);
  }
}