ui/src/widgets/popup.scss

// Copyright (C) 2023 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@use "../assets/theme" as *;

.pf-popup-portal {
  position: absolute;
  z-index: 10; // Hack to show popups over certain other elements

  // When width = 0 it can cause layout issues in popup content, so we give this
  // element some width manually
  width: 100%;

  // Move the portal to the top of the page. This appears to fix issues where
  // popups can sometimes be rendered below the rest of the page momentarily,
  // causing the whole page to judder up and down while popper.js sorts out the
  // positioning.
  // TODO(stevegolton): There is probably a better way to fix this issue.
  top: 0;
}

.pf-popup {
  background: var(--pf-color-background);
  border: solid 1px var(--pf-color-border);
  border-radius: $border-radius;
  box-shadow: 2px 2px 16px var(--pf-color-box-shadow);
  max-width: 350px; // Sensible default width for most popups

  .pf-popup-content {
    // Ensures all content is rendered above the arrow
    position: relative;
    // Default padding set to some sensible value that works for most content
    padding: 4px;
    overflow: hidden;
  }

  &--fit-content {
    max-width: unset;
  }

  &--match-width {
    // Width is handled in JS
    max-width: unset;
  }
}

.pf-popup-arrow,
.pf-popup-arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
  border: inherit;
}

.pf-popup-arrow {
  visibility: hidden;
}

.pf-popup-arrow::before {
  visibility: visible;
  content: "";
  transform: rotate(45deg);
}

.pf-popup[data-popper-placement^="top"] > .pf-popup-arrow {
  bottom: -4px;
  border-top: none;
  border-left: none;
}

.pf-popup[data-popper-placement^="bottom"] > .pf-popup-arrow {
  top: -6px;
  border-bottom: none;
  border-right: none;
}

.pf-popup[data-popper-placement^="left"] > .pf-popup-arrow {
  right: -4px;
  border-bottom: none;
  border-left: none;
}

.pf-popup[data-popper-placement^="right"] > .pf-popup-arrow {
  left: -6px;
  border-top: none;
  border-right: none;
}