Set opacity to 40% when disabled

2023-09-04 15:23:03 +01:00
parent 9af0239041
commit c316d52514
1 changed files with 3 additions and 1 deletions
--- a/extensions/ql-vscode/src/view/common/Dropdown.tsx
+++ b/extensions/ql-vscode/src/view/common/Dropdown.tsx
@@ -4,13 +4,15 @@ import { styled } from "styled-components";

 const DISABLED_VALUE = "-";

-const StyledDropdown = styled.select`
+const StyledDropdown = styled.select<{ disabled?: boolean }>`
  width: 100%;
  height: calc(var(--input-height) * 1px);
  background: var(--vscode-dropdown-background);
  color: var(--vscode-foreground);
  border: none;
  padding: 2px 6px 2px 8px;
+  opacity: ${(props) =>
+    props.disabled ? "var(--disabled-opacity)" : "inherit"};
 `;

 type Props = {