1// Copyright (C) 2023 The Android Open Source Project 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); 4// you may not use this file except in compliance with the License. 5// You may obtain a copy of the License at 6// 7// http://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, 11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12// See the License for the specific language governing permissions and 13// limitations under the License. 14 15@import "theme"; 16 17.pf-popup-portal { 18 position: absolute; 19 z-index: 10; // Hack to show popups over certain other elements 20 21 // When width = 0 it can cause layout issues in popup content, so we give this 22 // element some width manually 23 width: 100%; 24 25 // Move the portal to the top of the page. This appears to fix issues where 26 // popups can sometimes be rendered below the rest of the page momentarily, 27 // causing the whole page to judder up and down while popper.js sorts out the 28 // positioning. 29 // TODO(stevegolton): There is probably a better way to fix this issue. 30 top: 0; 31} 32 33.pf-popup { 34 background: white; 35 border: solid 1px $pf-colour-thin-border; 36 border-radius: $pf-border-radius; 37 box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.2); 38 39 .pf-popup-content { 40 // Ensures all content is rendered above the arrow 41 position: relative; 42 // Default padding set to some sensible value that works for most content 43 padding: 4px; 44 } 45} 46 47.pf-popup-arrow, 48.pf-popup-arrow::before { 49 position: absolute; 50 width: 8px; 51 height: 8px; 52 background: inherit; 53 border: inherit; 54} 55 56.pf-popup-arrow { 57 visibility: hidden; 58} 59 60.pf-popup-arrow::before { 61 visibility: visible; 62 content: ""; 63 transform: rotate(45deg); 64} 65 66.pf-popup[data-popper-placement^="top"] > .pf-popup-arrow { 67 bottom: -4px; 68 border-top: none; 69 border-left: none; 70} 71 72.pf-popup[data-popper-placement^="bottom"] > .pf-popup-arrow { 73 top: -6px; 74 border-bottom: none; 75 border-right: none; 76} 77 78.pf-popup[data-popper-placement^="left"] > .pf-popup-arrow { 79 right: -4px; 80 border-bottom: none; 81 border-left: none; 82} 83 84.pf-popup[data-popper-placement^="right"] > .pf-popup-arrow { 85 left: -6px; 86 border-top: none; 87 border-right: none; 88} 89