xref: /aosp_15_r20/external/perfetto/ui/src/assets/widgets/multiselect.scss (revision 6dbdd20afdafa5e3ca9b8809fa73465d530080dc)
1*6dbdd20aSAndroid Build Coastguard Worker// Copyright (C) 2023 The Android Open Source Project
2*6dbdd20aSAndroid Build Coastguard Worker//
3*6dbdd20aSAndroid Build Coastguard Worker// Licensed under the Apache License, Version 2.0 (the "License");
4*6dbdd20aSAndroid Build Coastguard Worker// you may not use this file except in compliance with the License.
5*6dbdd20aSAndroid Build Coastguard Worker// You may obtain a copy of the License at
6*6dbdd20aSAndroid Build Coastguard Worker//
7*6dbdd20aSAndroid Build Coastguard Worker//      http://www.apache.org/licenses/LICENSE-2.0
8*6dbdd20aSAndroid Build Coastguard Worker//
9*6dbdd20aSAndroid Build Coastguard Worker// Unless required by applicable law or agreed to in writing, software
10*6dbdd20aSAndroid Build Coastguard Worker// distributed under the License is distributed on an "AS IS" BASIS,
11*6dbdd20aSAndroid Build Coastguard Worker// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12*6dbdd20aSAndroid Build Coastguard Worker// See the License for the specific language governing permissions and
13*6dbdd20aSAndroid Build Coastguard Worker// limitations under the License.
14*6dbdd20aSAndroid Build Coastguard Worker
15*6dbdd20aSAndroid Build Coastguard Worker// Generic list with y-overflow, move me to a common file if we want to reuse.
16*6dbdd20aSAndroid Build Coastguard Worker.pf-list {
17*6dbdd20aSAndroid Build Coastguard Worker  overflow-y: auto;
18*6dbdd20aSAndroid Build Coastguard Worker}
19*6dbdd20aSAndroid Build Coastguard Worker
20*6dbdd20aSAndroid Build Coastguard Worker.pf-multi-select-fixed-size {
21*6dbdd20aSAndroid Build Coastguard Worker  max-height: 300px;
22*6dbdd20aSAndroid Build Coastguard Worker}
23*6dbdd20aSAndroid Build Coastguard Worker
24*6dbdd20aSAndroid Build Coastguard Worker.pf-multiselect-panel {
25*6dbdd20aSAndroid Build Coastguard Worker  font-family: $pf-font;
26*6dbdd20aSAndroid Build Coastguard Worker  display: flex;
27*6dbdd20aSAndroid Build Coastguard Worker  flex-direction: column;
28*6dbdd20aSAndroid Build Coastguard Worker  align-items: stretch;
29*6dbdd20aSAndroid Build Coastguard Worker  width: 280px;
30*6dbdd20aSAndroid Build Coastguard Worker  & > .pf-search-bar {
31*6dbdd20aSAndroid Build Coastguard Worker    margin-bottom: 8px;
32*6dbdd20aSAndroid Build Coastguard Worker    display: flex;
33*6dbdd20aSAndroid Build Coastguard Worker    & > .pf-search-box {
34*6dbdd20aSAndroid Build Coastguard Worker      flex-grow: 1;
35*6dbdd20aSAndroid Build Coastguard Worker    }
36*6dbdd20aSAndroid Build Coastguard Worker  }
37*6dbdd20aSAndroid Build Coastguard Worker  .pf-multiselect-item {
38*6dbdd20aSAndroid Build Coastguard Worker    display: block; // Put each item on a new line
39*6dbdd20aSAndroid Build Coastguard Worker    margin-top: 5px;
40*6dbdd20aSAndroid Build Coastguard Worker  }
41*6dbdd20aSAndroid Build Coastguard Worker  .pf-multiselect-header {
42*6dbdd20aSAndroid Build Coastguard Worker    align-items: baseline;
43*6dbdd20aSAndroid Build Coastguard Worker    display: flex;
44*6dbdd20aSAndroid Build Coastguard Worker    position: sticky;
45*6dbdd20aSAndroid Build Coastguard Worker    top: 0;
46*6dbdd20aSAndroid Build Coastguard Worker    font-size: 1em;
47*6dbdd20aSAndroid Build Coastguard Worker    background-color: white;
48*6dbdd20aSAndroid Build Coastguard Worker    z-index: 1;
49*6dbdd20aSAndroid Build Coastguard Worker    font-size: 0.75em;
50*6dbdd20aSAndroid Build Coastguard Worker    border-bottom: solid 1px $pf-minimal-foreground;
51*6dbdd20aSAndroid Build Coastguard Worker    padding-bottom: 2px;
52*6dbdd20aSAndroid Build Coastguard Worker    min-width: max-content;
53*6dbdd20aSAndroid Build Coastguard Worker    & > span {
54*6dbdd20aSAndroid Build Coastguard Worker      margin-right: auto;
55*6dbdd20aSAndroid Build Coastguard Worker    }
56*6dbdd20aSAndroid Build Coastguard Worker  }
57*6dbdd20aSAndroid Build Coastguard Worker  .pf-multiselect-container {
58*6dbdd20aSAndroid Build Coastguard Worker    position: relative;
59*6dbdd20aSAndroid Build Coastguard Worker    margin-bottom: 16px;
60*6dbdd20aSAndroid Build Coastguard Worker  }
61*6dbdd20aSAndroid Build Coastguard Worker}
62