feat(WEB-162): final design edit profile page

2024-06-18 08:15:57 +02:00
parent 5f3e417593
commit d84efcbb0f
81 changed files with 1538 additions and 711 deletions
--- a/components/TempDesignSystem/Select/select.module.css
+++ b/components/TempDesignSystem/Select/select.module.css
@@ -0,0 +1,68 @@
+.container {
+  position: relative;
+}
+
+.select {
+  border: 1px solid var(--Base-Border-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+}
+
+.select[data-focused="true"] {
+  border: 1px solid var(--Scandic-Blue-90);
+  outline: none;
+}
+
+.input {
+  align-items: center;
+  background-color: var(--Scandic-Opacity-White-100);
+  border: none;
+  border-radius: var(--Corner-radius-Medium);
+  color: var(--Base-Text-UI-High-contrast);
+  display: flex;
+  gap: var(--Spacing-x-half);
+  height: 60px;
+  outline: none;
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  text-align: left;
+}
+
+.inputContentWrapper {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+  flex: 1 0 0;
+}
+
+.popover {
+  background-color: var(--Main-Grey-White);
+  border-radius: var(--Corner-radius-Medium);
+  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+  overflow: auto;
+  width: 100%;
+}
+
+.listBox {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+}
+
+.listBoxItem {
+  padding: var(--Spacing-x2);
+}
+
+.listBoxItem[data-focused="true"] {
+  background: var(--UI-Input-Controls-Surface-Hover, var(--Scandic-Blue-00));
+  outline: none;
+}
+
+.listBoxItem[data-selected="true"] {
+  font-weight: 500;
+}