1// Copyright (C) 2024 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@use "sass:math"; 16@import "theme"; 17 18// Adding these to a new layer makes other rules take precedence 19@layer widgets { 20 .pf-vtable { 21 overflow: auto; 22 font-family: $pf-font; 23 position: relative; 24 background: white; // Performance tweak - see b/335451611 25 26 .pf-vtable-content { 27 display: inline-flex; 28 flex-direction: column; 29 min-width: 100%; 30 31 .pf-vtable-header { 32 font-weight: bold; 33 position: sticky; 34 top: 0; 35 z-index: 1; 36 background: white; 37 white-space: nowrap; 38 padding-inline: 4px; 39 40 // A shadow improves distinction between header and content 41 box-shadow: #0001 0px 0px 8px; 42 } 43 44 .pf-vtable-data { 45 white-space: nowrap; 46 overflow: hidden; 47 text-overflow: ellipsis; 48 margin-right: 8px; 49 display: inline-block; 50 } 51 52 .pf-vtable-slider { 53 overflow: hidden; 54 55 // Necessary trig because we have a 45deg stripes 56 $pattern-density: 1px * math.sqrt(2); 57 $pattern-col: #ddd; 58 overflow: hidden; 59 60 background: repeating-linear-gradient( 61 -45deg, 62 $pattern-col, 63 $pattern-col $pattern-density, 64 white $pattern-density, 65 white $pattern-density * 2 66 ); 67 68 .pf-vtable-puck { 69 .pf-vtable-row { 70 display: flex; 71 align-items: center; 72 white-space: nowrap; 73 padding-inline: 4px; 74 75 &:nth-child(odd) { 76 background-color: hsl(214, 22%, 95%); 77 } 78 79 &:nth-child(even) { 80 background-color: white; 81 } 82 83 &:hover { 84 background-color: $table-hover-color; 85 } 86 } 87 } 88 } 89 } 90 } 91} 92