xref: /aosp_15_r20/external/perfetto/ui/src/assets/widgets/menu.scss (revision 6dbdd20afdafa5e3ca9b8809fa73465d530080dc)
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// If we're in a popup menu, remove the padding
18.pf-popup-menu.pf-popup {
19  .pf-popup-content {
20    padding: 0;
21  }
22}
23
24.pf-menu {
25  display: flex;
26  flex-direction: column;
27  align-items: stretch;
28  margin: 4px 0;
29
30  .pf-menu-item {
31    font-family: $pf-font;
32    user-select: none;
33    text-align: left;
34    padding: 5px 10px;
35    white-space: nowrap;
36    min-width: max-content;
37    cursor: pointer;
38
39    background: $pf-minimal-background;
40    color: $pf-minimal-foreground;
41
42    & > .material-icons {
43      font-size: inherit;
44      line-height: inherit;
45    }
46
47    & > .pf-left-icon {
48      float: left;
49      margin-right: 6px; // Make some room between the icon and label
50    }
51
52    & > .pf-right-icon {
53      float: right;
54      margin-left: 6px; // Make some room between the icon and label
55    }
56
57    &:hover {
58      background: $pf-minimal-background-hover;
59    }
60
61    &:active,
62    &.pf-active {
63      background: $pf-minimal-background-active;
64    }
65
66    &[disabled] {
67      color: $pf-minimal-foreground-disabled;
68      background: $pf-minimal-background-disabled;
69      box-shadow: none;
70      cursor: not-allowed;
71    }
72
73    &:focus-visible {
74      @include focus;
75    }
76  }
77
78  .pf-menu-divider {
79    border-bottom: solid 1px $pf-colour-thin-border;
80    margin: 5px 0 5px 0;
81  }
82}
83