| /* |
| * Copyright 2023 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. |
| */ |
| |
| .select-button { |
| display: flex; |
| |
| --override-button-no-right-border-radius: 1; /* True */ |
| } |
| |
| .select-button devtools-button { |
| position: relative; /* Needed for outline to appear on top of the next element */ |
| } |
| |
| .select-menu-item-content-with-icon { |
| display: flex; |
| align-items: center; |
| } |
| |
| .select-menu-item-content-with-icon::before { |
| content: ""; |
| position: relative; |
| left: 0; |
| top: 0; |
| background-color: var(--color-text-primary); |
| display: inline-block; |
| mask-repeat: no-repeat; |
| -webkit-mask-repeat: no-repeat; |
| mask-position: center; |
| -webkit-mask-position: center; |
| width: 24px; |
| height: 24px; |
| margin-right: 4px; |
| mask-image: var(--item-mask-icon); |
| -webkit-mask-image: var(--item-mask-icon); |
| } |
| |
| devtools-select-menu { |
| height: var(--override-select-menu-height, 24px); |
| border-radius: 0 4px 4px 0; |
| box-sizing: border-box; |
| |
| --override-select-menu-show-button-outline: var(--color-button-outline-focus); |
| --override-select-menu-label-with-arrow-padding: 0; |
| --override-select-menu-border: none; |
| --override-select-menu-show-button-padding: 0 6px 0 0; |
| } |
| |
| devtools-select-menu.primary { |
| border: none; |
| border-left: 1px solid var(--override-icon-and-text-color); |
| |
| --override-icon-and-text-color: var(--color-background); |
| --override-select-menu-arrow-color: var(--override-icon-and-text-color); |
| --override-divider-color: var(--override-icon-and-text-color); |
| --override-select-menu-background-color: var(--color-primary-old); |
| --override-select-menu-active-background-color: |
| var( |
| --override-select-menu-background-color |
| ); |
| } |
| |
| devtools-select-menu.primary:hover { |
| --override-select-menu-background-color: |
| var( |
| --color-button-primary-background-hovering |
| ); |
| } |
| |
| devtools-select-menu[disabled].primary, |
| devtools-select-menu[disabled].primary:hover { |
| --override-icon-and-text-color: var(--color-text-disabled); |
| --override-select-menu-background-color: var(--color-background-elevation-1); |
| } |
| |
| devtools-select-menu.secondary { |
| border: 1px solid var(--color-details-hairline); |
| border-left: none; |
| |
| --override-icon-and-text-color: var(--color-primary-old); |
| --override-select-menu-arrow-color: var(--override-icon-and-text-color); |
| --override-divider-color: var(--color-details-hairline); |
| --override-select-menu-background-color: var(--color-background); |
| --override-select-menu-active-background-color: |
| var( |
| --override-select-menu-background-color |
| ); |
| } |
| |
| devtools-select-menu.secondary:hover { |
| --override-select-menu-background-color: |
| var( |
| --color-button-secondary-background-hovering |
| ); |
| } |
| |
| devtools-select-menu[disabled].secondary, |
| devtools-select-menu[disabled].secondary:hover { |
| border: 1px solid var(--color-background-elevation-1); |
| border-left: none; |
| |
| --override-icon-and-text-color: var(--color-text-disabled); |
| --override-select-menu-background-color: var(--color-background); |
| } |