feat: add more generic Select component

2024-05-24 14:04:54 +02:00
parent 675228e4e9
commit 653cccaddb
4 changed files with 169 additions and 45 deletions
--- a/components/TempDesignSystem/Form/Select/select.module.css
+++ b/components/TempDesignSystem/Form/Select/select.module.css
@@ -0,0 +1,57 @@
+.date {
+  position: relative;
+}
+
+.label {
+  color: var(--Base-Text-UI-Placeholder);
+  font-family: var(--ff-fira-sans);
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  font-weight: 400;
+  position: absolute;
+  left: 1.6rem;
+}
+
+.select {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.input {
+  align-items: end;
+  background-color: var(--some-white-color, #fff);
+  border: 1px solid var(--Base-Input-Controls-Border-Normal, #b8a79a);
+  border-radius: 0.8rem;
+  color: var(--some-black-color, #757575);
+  display: grid;
+  font-family: var(--ff-fira-sans);
+  font-size: 1.6rem;
+  font-weight: 400;
+  gap: 1rem;
+  grid-template-columns: 1fr auto;
+  height: 5.6rem;
+  /* letter-spacing: -1.5%; */
+  line-height: 2.4rem;
+  padding: 0.8rem 1.6rem;
+}
+
+.popover {
+  background-color: var(--some-white-color, #fff);
+  border: var(--border);
+  border-radius: var(--radius);
+  overflow: auto;
+  width: 100%;
+}
+
+.listBox {
+  padding: 1.6rem 1.6rem 1.6rem 0.8rem;
+}
+
+.listBoxItem {
+  padding: 0 0.8rem;
+}
+
+.listBoxItem[data-selected="true"],
+.listBoxItem[data-focused="true"] {
+  background-color: rgba(75, 75, 75, 0.2);
+}