xref: /aosp_15_r20/external/perfetto/ui/src/assets/widgets/button.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.pf-button {
18  font-family: $pf-font;
19  line-height: 1;
20  user-select: none;
21  transition:
22    background $pf-anim-timing,
23    box-shadow $pf-anim-timing;
24  border-radius: $pf-border-radius;
25  padding: 4px 8px;
26  white-space: nowrap;
27  min-width: max-content;
28
29  & > .pf-left-icon {
30    float: left;
31    margin-right: 6px; // Make some room between the icon and label
32  }
33
34  & > .pf-right-icon {
35    float: right;
36    margin-left: 6px; // Make some room between the icon and label
37  }
38
39  & > .material-icons,
40  & > .material-icons-filled {
41    font-size: inherit;
42    line-height: inherit;
43  }
44
45  &:focus-visible {
46    @include focus;
47  }
48
49  background: $pf-minimal-background;
50  color: inherit;
51
52  &:hover {
53    background: $pf-minimal-background-hover;
54  }
55
56  &:active,
57  &.pf-active {
58    background: $pf-minimal-background-active;
59  }
60
61  &[disabled] {
62    color: $pf-minimal-foreground-disabled;
63    background: $pf-minimal-background-disabled;
64    cursor: not-allowed;
65  }
66
67  // Remove default background in minimal mode, showing only the text
68  &.pf-intent-primary {
69    color: $pf-primary-foreground;
70    background: $pf-primary-background;
71
72    &:hover {
73      background: $pf-primary-background-hover;
74    }
75
76    &:active,
77    &.pf-active {
78      transition: none;
79      background: $pf-primary-background-active;
80      box-shadow: inset 1px 1px 4px #00000040;
81    }
82    &[disabled] {
83      background: $pf-primary-background-disabled;
84      color: $pf-primary-foreground-disabled;
85      box-shadow: none;
86      cursor: not-allowed;
87    }
88  }
89
90  // Reduce padding when compact
91  &.pf-compact {
92    padding: 2px 4px;
93    & > .pf-left-icon {
94      margin-right: 2px;
95    }
96
97    & > .pf-right-icon {
98      margin-left: 2px;
99    }
100  }
101
102  // Reduce padding when we are icon-only
103  &.pf-icon-only {
104    & > .pf-left-icon {
105      margin: 0;
106    }
107
108    padding: 4px;
109
110    &.pf-compact {
111      padding: 0;
112    }
113  }
114}
115
116.pf-button-bar {
117  display: flex;
118  flex-direction: row;
119  gap: 2px;
120}
121