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 22.pf-popup { 23 background: white; 24 border: solid 1px $pf-colour-thin-border; 25 border-radius: $pf-border-radius; 26 box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.2); 27 28 .pf-popup-content { 29 // Ensures all content is rendered above the arrow 30 position: relative; 31 // Default padding set to some sensible value that works for most content 32 padding: 4px; 33 } 34} 35 36.pf-popup-arrow, 37.pf-popup-arrow::before { 38 position: absolute; 39 width: 8px; 40 height: 8px; 41 background: inherit; 42 border: inherit; 43} 44 45.pf-popup-arrow { 46 visibility: hidden; 47} 48 49.pf-popup-arrow::before { 50 visibility: visible; 51 content: ""; 52 transform: rotate(45deg); 53} 54 55.pf-popup[data-popper-placement^="top"] > .pf-popup-arrow { 56 bottom: -4px; 57 border-top: none; 58 border-left: none; 59} 60 61.pf-popup[data-popper-placement^="bottom"] > .pf-popup-arrow { 62 top: -6px; 63 border-bottom: none; 64 border-right: none; 65} 66 67.pf-popup[data-popper-placement^="left"] > .pf-popup-arrow { 68 right: -4px; 69 border-bottom: none; 70 border-left: none; 71} 72 73.pf-popup[data-popper-placement^="right"] > .pf-popup-arrow { 74 left: -6px; 75 border-top: none; 76 border-right: none; 77} 78