@lyra/components/lib/dialogs/styles/PopOver.css

Basic UX components

@import 'part:@lyra/base/theme/variables-style';

@keyframes appear {
  0% {
    opacity: 0;
    max-height: 0;
    transform: scaleY(0);
  }

  100% {
    opacity: 1;
    max-height: 100vh;
    transform: scaleY(1);
  }
}

:root {
  --array--add-item-color: var(--brand-primary);
  --array--add-item-triangle-color: color(
    var(--form-builder--array--add-item-color) lightness(- 20%)
  );
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: var(--backdrop-background-color);
  opacity: 0.75;
  z-index: var(--zindex-portal);
  pointer-events: none;
}

.target {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.popper {
  z-index: var(--zindex-portal);
  position: relative;

  @nest .responsive & {
    @media (--max-screen-medium) {
      position: fixed;
      box-sizing: border-box;
      top: 0;
      left: 0;
      right: 0;
      height: 100vh;
      width: 100vw;
      overflow: auto;
    }
  }
}

.arrow {
  position: absolute;
  height: 1em;
  width: 1em;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 40px var(--component-box-shadow-base);
  z-index: 0;

  @nest &::before {
    content: '';
    position: absolute;
    height: 1em;
    width: 1em;
    background-color: var(--component-bg);
    z-index: 3;
    clip-path: polygon(100% 0, 0 0, 0 100%);

    @nest .color_danger & {
      background-color: var(--state-danger-color);
    }
  }

  @nest .popper[data-placement^='top'] & {
    bottom: 0;
    transform: translate(-50%, 50%) rotate(45deg);

    @nest &::before {
      clip-path: polygon(100% 100%, 100% 0, 0 100%);
    }
  }

  @nest .popper[data-placement^='right'] & {
    left: 0;
    transform: translate(-50%, 0) rotate(45deg);
  }

  @nest .popper[data-placement^='left'] & {
    right: 0;
    transform: translate(50%, 0) rotate(45deg);

    @nest &::before {
      clip-path: polygon(100% 100%, 100% 0, 0 0);
    }
  }
}

.filledArrow {
  composes: arrow;

  @nest .popper[data-placement^='bottom'] & {
    @nest &::before {
      background-color: var(--brand-primary);
    }
  }
}

.popover {
  z-index: 0;
  composes: shadow-24dp from 'part:@lyra/base/theme/shadows-style';
  background-color: var(--component-bg);
  border-radius: var(--border-radius-base);
  box-sizing: border-box;
  position: relative;

  @nest .color_danger & {
    background-color: var(--state-danger-color);
  }

  @nest .responsive & {
    @media (--max-screen-medium) {
      box-shadow: none;
      position: fixed !important;
      box-sizing: border-box;
      top: 0 !important;
      left: 0 !important;
      height: 100vh !important;
      width: 100vw !important;
      margin: 0 !important;
      transform: translate(0, 0) !important;
      min-width: 100vw !important;
      padding-bottom: 3rem;
      overflow: hidden;
    }
  }
}

.close {
  position: absolute;
  border: 0;
  background-color: transparent;
  font-size: 1.5em;
  cursor: pointer;
  outline: none;
  padding-right: 0.25em;
  color: var(--text-color);
  top: var(--small-padding);
  right: var(--small-padding);
  z-index: 1;

  @nest .color_default & {
    background-color: color(var(--component-bg) a(50%));
  }

  @nest .color_danger & {
    color: var(--white);
  }

  @nest &:hover {
    color: var(--black);
  }
}

.closeInverted {
  composes: close;
  color: #fff;
  top: calc(var(--small-padding) / 2);
  background-color: transparent;
  right: 0;

  @nest .color_default & {
    background-color: transparent;
  }

  @nest .responsive & {
    @media (--max-screen-medium) {
      top: var(--small-padding);
      right: var(--small-padding);
    }
  }
}

.content {
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
  max-height: 40em;

  @nest .responsive & {
    @media (--max-screen-medium) {
      max-height: calc(100vh - var(--header-height)) !important;
    }
  }
}

.contentWithActions {
  composes: content;
  padding-bottom: 5rem;
}

.content.padding_none {
  padding: 0;
}

.content.padding_small {
  padding: var(--small-padding);
}

.content.padding_medium {
  padding: var(--medium-padding);
}

.content.padding_large {
  padding: var(--large-padding);
}

.responsive .head {
  /* Mobile header */
  font-size: 1em;
  padding: 0.5em;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  z-index: 2;

  @media (--screen-medium) {
    display: none;
  }
}

.title {
  margin: 0;
  background-color: var(--array--add-item-color);
  color: var(--component-bg);
  padding: var(--small-padding);
  font-size: 1rem;
  font-weight: 400;
  border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;

  @nest .responsive & {
    @media (--max-screen-medium) {
      height: var(--header-height);
      line-height: var(--header-height);
      padding: 0 var(--small-padding);
    }
  }
}

.footer {
  composes: footer from 'part:@lyra/components/dialogs/default-style';
}

.actions {
  composes: actions from 'part:@lyra/components/dialogs/default-style';
}

.primaryFunctions {
  margin-top: 1em;
}

.paddingDummy {
  padding: 0;
  margin: 0;
}