ember-assembly/addon/components/asm/ui/popover.css

A collection of beautiful UI components built by Goods

@value timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.175);

.ui-popover :global(.ember-basic-dropdown-trigger) {
  display: inline-block;
}

.ui-popover :global(.ui-popover-content) {
  background: var(--ea-colour-neutral-n0);
  border-radius: 3px;
  box-shadow: rgba(67, 90, 111, 0.3) 0px 0px 1px,
    rgba(67, 90, 111, 0.47) 0px 8px 10px -4px;
  padding: scale(4);
  min-width: 150px;
  max-height: 240px;
  transform-origin: center 0px 0px;
  will-change: transform, opacity;
}

.ui-popover :global(.ui-popover-animated.ui-popover-content.ember-basic-dropdown-content--left.ember-basic-dropdown-content--below) {
  transform-origin: left top;
}

.ui-popover :global(.ui-popover-animated.ui-popover-content.ember-basic-dropdown--transitioning-in) {
  animation: ui-popover-in 300ms timing-function;
}

.ui-popover :global(.ui-popover-animated.ui-popover-content.ember-basic-dropdown--transitioning-out) {
  animation: ui-popover-out 300ms timing-function;
}

@keyframes ui-popover-in {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(-1px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0px);
  }
}

@keyframes ui-popover-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}