@patternfly/elements/pf-popover/pf-popover.css

PatternFly Elements

:host {
  display: inline;
  --_floating-arrow-size: var(--pf-c-popover__arrow--Width, var(--pf-global--arrow--width-lg, 1.5625rem));
  --_header-text-color: var(--pf-c-popover__title-text--Color, inherit);
  --_header-icon-color: var(--pf-c-popover__title-icon--Color, var(--pf-global--Color--100, #151515));
  --_animation-speed: var(--pf-popover--animation-speed, 300ms);
  --_z-index: var(--pf-popover--z-index, 9999);
}

.visually-hidden {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

#container {
  display: inline-flex;
  position: relative;
}

#trigger {
  display: inline-block;
  position: relative;
}

#arrow {
  display: block;
  position: absolute;
  background-color: var(--pf-c-popover__arrow--BackgroundColor, var(--pf-global--BackgroundColor--100, #fff));
  box-shadow: var(
    --pf-c-popover__arrow--BoxShadow,
    var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08))
  );
  content: '';
  height: var(--pf-c-popover__arrow--Height, var(--pf-global--arrow--width-lg, 1.5625rem));
  width: var(--pf-c-popover__arrow--Width, var(--pf-global--arrow--width-lg, 1.5625rem));
  rotate: 45deg;
  z-index: -1;
  pointer-events: none;
}

#popover {
  display: block;
  position: absolute;
  opacity: 0;
  z-index: -1;
  transition: visibility 0s, opacity var(--_animation-speed) cubic-bezier(0.54, 1.5, 0.38, 1.11) 0s;
  left: 0;
  top: 0;
  translate: var(--_floating-content-translate);
  box-shadow: var(
    --pf-c-popover--BoxShadow,
    var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08))
  );
  border: 0;
  padding: 0;
  visibility: hidden;
}

#popover[open] {
  opacity: 1;
  z-index: var(--_z-index);
  visibility: visible;
}

[part='content'] {
  position: relative;
  padding: var(--pf-c-popover__content--PaddingTop, var(--pf-global--spacer--md, 1rem))
    var(--pf-c-popover__content--PaddingRight, var(--pf-global--spacer--md, 1rem))
    var(--pf-c-popover__content--PaddingBottom, var(--pf-global--spacer--md, 1rem))
    var(--pf-c-popover__content--PaddingLeft, var(--pf-global--spacer--md, 1rem));
  word-break: break-word;
  line-height: var(--pf-c-popover--line-height, 1.5);
  font-size: var(--pf-c-popover__content--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
  color: var(--pf-c-popover__content--Color, var(--pf-global--Color--100, #151515));
  background-color: var(--pf-c-popover__content--BackgroundColor, var(--pf-global--BackgroundColor--100, #fff));
  max-width: var(
    --pf-c-popover--MaxWidth,
    calc(var(--pf-c-popover__content--PaddingLeft, 1rem) + var(--pf-c-popover__content--PaddingRight, 1rem) + 18.75rem)
  );
  min-width: var(
    --pf-c-popover--MinWidth,
    calc(var(--pf-c-popover__content--PaddingLeft, 1rem) + var(--pf-c-popover__content--PaddingRight, 1rem) + 18.75rem)
  );
  width: max-content;
}

[part='close-button'] {
  cursor: pointer;
  position: absolute;
  right: var(
    --pf-c-popover--c-button--Right,
    calc(var(--pf-c-popover__content--PaddingRight, 1rem) - var(--pf-global--spacer--md, 1rem))
  );
  top: var(
    --pf-c-popover--c-button--Top,
    calc(var(--pf-c-popover__content--PaddingTop, 1rem) - var(--pf-global--spacer--form-element, 0.375rem))
  );
}

[part='content'] > [part='close-button']:not([hidden]) ~ *:not([hidden]) {
  padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight, var(--pf-global--spacer--2xl, 3rem));
}

[part='header'] {
  display: flex;
  align-items: baseline;
}

[part='icon'] {
  color: var(--_header-icon-color);
  margin-right: var(--pf-c-popover__title-icon--MarginRight, var(--pf-global--spacer--sm, 0.5rem));
}

[part='icon'] ::slotted(*),
[part='icon'] * {
  vertical-align: -0.125em;
}

[part='icon'],
[part='heading']::slotted(:is(h2, h3, h4, h5, h6)),
[part='heading'] :is(h2, h3, h4, h5, h6) {
  font-size: var(--pf-c-popover__title--FontSize, var(--pf-global--FontSize--md, 1rem));
  font-weight: var(--pf-global--FontWeight--normal, 400);
  --pf-icon--size: var(
    --pf-c-popover__title--FontSize,
    var(--pf-global--FontSize--md, var(--pf-global--icon--FontSize--md, 1em))
  );
}

[part='heading']::slotted(:is(h2, h3, h4, h5, h6)),
[part='heading'] :is(h2, h3, h4, h5, h6) {
  color: var(--_header-text-color);
  margin-top: 0;
  margin-bottom: var(--pf-c-popover__title--MarginBottom, var(--pf-global--spacer--sm, 0.5rem));
  line-height: var(--pf-c-popover__title--LineHeight, var(--pf-global--LineHeight--md, 1.5));
  font-family: var(
    --pf-c-popover__title--FontFamily,
    var(
      --pf-global--FontFamily--heading--sans-serif,
      'RedHatDisplay',
      'Overpass',
      overpass,
      helvetica,
      arial,
      sans-serif
    )
  );
}

[part='body'] {
  display: block;
  word-wrap: break-word;
}

[part='footer'] {
  margin-top: var(--pf-c-popover__footer--MarginTop, var(--pf-global--spacer--md, 1rem));
}

:host([alert-severity='default']) {
  --_header-text-color: var(--pf-c-popover--m-default__title-text--Color, var(--pf-global--default-color--300, #003737));
  --_header-icon-color: var(--pf-c-popover--m-default__title-icon--Color, var(--pf-global--default-color--200, #009596));
}

:host([alert-severity='info']) {
  --_header-text-color: var(--pf-c-popover--m-info__title-text--Color, var(--pf-global--info-color--200, #002952));
  --_header-icon-color: var(--pf-c-popover--m-info__title-icon--Color, var(--pf-global--info-color--100, #2b9af3));
}

:host([alert-severity='warning']) {
  --_header-icon-color: var(--pf-c-popover--m-warning__title-icon--Color, var(--pf-global--warning-color--100, #f0ab00));
  --_header-text-color: var(--pf-c-popover--m-warning__title-text--Color, var(--pf-global--warning-color--200, #795600));
}

:host([alert-severity='success']) {
  --_header-icon-color: var(--pf-c-popover--m-success__title-icon--Color, var(--pf-global--success-color--100, #3e8635));
  --_header-text-color: var(--pf-c-popover--m-success__title-text--Color, var(--pf-global--success-color--200, #1e4f18));
}

:host([alert-severity='danger']) {
  --_header-icon-color: var(--pf-c-popover--m-danger__title-icon--Color, var(--pf-global--danger-color--100, #c9190b));
  --_header-text-color: var(--pf-c-popover--m-danger__title-text--Color, var(--pf-global--danger-color--200, #a30000));
}