Initial Commit

src/components/drop-down/style.ts

@@ -0,0 +1,61 @@
+/**
+ * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
+ */
+import * as styled from 'styled-components';
+import Input from 'components/forms/Input';
+import Theme from 'theme';
+
+const {spacing, colors, typography, primaryBorderRadius} = Theme;
+
+export const DropdownContainer = styled.default.div`
+  width: 100%;
+  position: relative;
+  margin: ${spacing.xSmall} 0;
+`;
+
+export const DropdownInput = styled.default(Input)<{showMenu?: boolean}>`
+  ${({showMenu}) =>
+    showMenu &&
+    styled.css`
+      border-bottom-left-radius: 0px;
+      border-bottom-right-radius: 0px;
+      border-bottom-width: 0;
+    `}
+`;
+
+export const DropdownMenu = styled.default.div`
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  top: calc(100% - 4px);
+  position: absolute;
+  height: auto;
+  max-height: 210px;
+  border: 1px solid ${colors.gray400};
+  border-top-width: 0;
+  z-index: 4;
+  background-color: ${colors.white};
+  border-bottom-left-radius: ${primaryBorderRadius};
+  border-bottom-right-radius: ${primaryBorderRadius};
+`;
+
+export const DropdownMenuItem = styled.default.div<{
+  active?: boolean;
+  disabled?: boolean;
+  selected?: boolean;
+}>`
+  line-height: ${spacing.large};
+  padding: ${spacing.xsmall} ${spacing.medium};
+  font-size: ${typography.fontSizeS};
+  word-wrap: break-word;
+  ${({active, selected, disabled}) => styled.css`
+    background-color: ${active || selected ? colors.gray300 : 'transparent'};
+    font-weight: ${selected ? 'bold' : 'normal'};
+    color: ${disabled ? colors.gray500 : colors.gray900}
+
+    :hover{
+      background-color: ${disabled ? colors.white : colors.gray300};
+      cursor: ${disabled ? 'text' : 'pointer'};
+    }
+  `}
+`;