@gravity-ui/uikit/build/cjs/components/Popup/Popup.css

Gravity UI base styling and components

.g-popup {
  --_--background-color: var(--g-popup-background-color, var(--g-color-base-float));
  --_--border-color: var(--g-popup-border-color, var(--g-color-line-generic-solid));
  --_--border-width: var(--g-popup-border-width, 1px);
  position: relative;
  border-radius: 4px;
  background-color: var(--_--background-color);
  box-shadow: 0 0 0 var(--_--border-width) var(--_--border-color), 0 8px 20px var(--_--border-width) var(--g-color-sfx-shadow);
  outline: none;
  visibility: hidden;
  transition-property: opacity, transform;
  transition-timing-function: ease-out;
}
.g-popup_open {
  visibility: visible;
}
.g-popup_disable-transition {
  transition: none;
}
.g-popup > :first-child:not(.g-popup__arrow), .g-popup > .g-popup__arrow + * {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}
.g-popup > :last-child {
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}
[data-floating-ui-status=open] > .g-popup, [data-floating-ui-status=close] > .g-popup {
  transition-duration: 100ms;
}

[data-floating-ui-status=initial] > .g-popup, [data-floating-ui-status=close] > .g-popup {
  opacity: 0;
  transform: translate(0, 0);
}

[data-floating-ui-status=initial][data-floating-ui-placement*=bottom] > .g-popup, [data-floating-ui-status=close][data-floating-ui-placement*=bottom] > .g-popup {
  transform: translateY(10px);
}

[data-floating-ui-status=initial][data-floating-ui-placement*=top] > .g-popup, [data-floating-ui-status=close][data-floating-ui-placement*=top] > .g-popup {
  transform: translateY(-10px);
}

[data-floating-ui-status=initial][data-floating-ui-placement*=left] > .g-popup, [data-floating-ui-status=close][data-floating-ui-placement*=left] > .g-popup {
  transform: translateX(-10px);
}

[data-floating-ui-status=initial][data-floating-ui-placement*=right] > .g-popup, [data-floating-ui-status=close][data-floating-ui-placement*=right] > .g-popup {
  transform: translateX(10px);
}

.g-popup__arrow {
  position: absolute;
}
.g-popup__arrow-content {
  width: 18px;
  height: 18px;
  position: relative;
  overflow: hidden;
  display: flex;
}
.g-popup__arrow-circle-wrapper {
  background-color: transparent;
  overflow: hidden;
  width: 9px;
  height: 9px;
  position: relative;
}
.g-popup__arrow-circle {
  box-sizing: border-box;
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(5px - var(--_--border-width)) var(--_--background-color), inset 0 0 0 5px var(--_--border-color);
  width: 28px;
  height: 30px;
  position: absolute;
}
.g-popup__arrow-circle_left {
  inset-inline-end: -5px;
  inset-block-end: -4px;
}
.g-popup__arrow-circle_right {
  inset-inline-start: -5px;
  inset-block-end: -4px;
}
[data-floating-ui-placement*=bottom] .g-popup__arrow {
  inset-block-start: -9px;
}

[data-floating-ui-placement*=top] .g-popup__arrow {
  inset-block-end: -9px;
}
[data-floating-ui-placement*=top] .g-popup__arrow-content {
  transform: rotate(180deg);
}

[data-floating-ui-placement*=left] .g-popup__arrow {
  right: -9px;
}
[data-floating-ui-placement*=left] .g-popup__arrow-content {
  transform: rotate(90deg);
}

[data-floating-ui-placement*=right] .g-popup__arrow {
  left: -9px;
}
[data-floating-ui-placement*=right] .g-popup__arrow-content {
  transform: rotate(-90deg);
}