scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(WEB-304): remaning UI from design system primitives

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-07 10:36:23 +02:00
parent 6737970f54
commit 7c4b8401e9
228 changed files with 3516 additions and 3237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/TempDesignSystem/Form/Select/select.module.css
View File

@@ -6,61 +6,60 @@
color: var(--Base-Text-UI-Placeholder);
font-family: var(--typography-Footnote-Regular-fontFamily);
font-size: var(--typography-Footnote-Regular-fontSize);
font-weight: 400;
line-height: 100%;
font-weight: var(--typography-Footnote-Regular-fontWeight);
line-height: var(--typography-Footnote-Regular-lineHeight);
}
.select {
border: 1px solid var(--Base-Border-Normal);
border-radius: var(--Corner-radius-Medium);
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
border: 1px solid var(--Base-Border-Normal);
border-radius: var(--Corner-radius-Medium);
}
.select[data-focused="true"] {
border: 1px solid var(--UI-Text-Active, #0d1f5f);
border: 1px solid var(--Scandic-Blue-90);
outline: none;
}
.input {
display: flex;
align-items: center;
gap: var(--Spacing-x-half);
background-color: var(--Scandic-Opacity-White-100);
border: none;
border-radius: var(--Corner-radius-Medium);
color: var(--Base-Text-UI-High-contrast);
height: 56px;
font-family: var(--ff-fira-sans);
display: flex;
gap: var(--Spacing-x-half);
height: 560px;
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
font-weight: 400;
font-weight: var(--typography-Body-Regular-fontWeight);
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: 100%;
line-height: var(--typography-Body-Regular-lineHeight);
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;
align-items: flex-start;
/*6px in Figma but not available as variable*/
gap: var(--Spacing-x-half);
flex: 1 0 0;
}
.popover {
background-color: var(--some-white-color, #fff);
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;
font-size: var(--typography-Body-Regular-fontSize);
gap: var(--Spacing-x1);
overflow: auto;
width: 100%;
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
}
.listBox {
@@ -80,4 +79,4 @@
.listBoxItem[data-selected="true"] {
font-weight: 500;
}
}