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

feat: add initial design to Select

Browse Source
This commit is contained in:
Arvid Norlin
2024-05-29 14:49:15 +02:00
parent 714799e0ef
commit e649a842c6
2 changed files with 60 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
.date {
.container {
position: relative;
}
@@ -7,51 +7,76 @@
font-family: var(--typography-Footnote-Regular-fontFamily);
font-size: var(--typography-Footnote-Regular-fontSize);
font-weight: 400;
position: absolute;
left: 1.6rem;
line-height: 100%;
}
.select {
display: flex;
flex-direction: column;
gap: 0.4rem;
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);
outline: none;
}
.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(--typography-Body-Regular-fontFamily);
display: flex;
align-items: center;
gap: 0.4rem;
background-color: var(--Scandic-Opacity-White-100);
border: none;
border-radius: var(--Corner-radius-Medium);
color: var(--Base-Text-UI-High-contrast);
height: 5.6rem;
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;
letter-spacing: var(--typography-Body-Regular-letterSpacing);
line-height: 100%;
outline: none;
padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
text-align: left;
}
.inputContentWrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.6rem;
flex: 1 0 0;
}
.popover {
background-color: var(--some-white-color, #fff);
border: var(--border);
border-radius: var(--radius);
border-radius: var(--Corner-radius-Medium);
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 {
padding: 1.6rem 1.6rem 1.6rem 0.8rem;
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
}
.listBoxItem {
padding: 0 0.8rem;
padding: var(--Spacing-x2);
}
.listBoxItem[data-selected="true"],
.listBoxItem[data-focused="true"] {
background-color: rgba(75, 75, 75, 0.2);
background: var(--UI-Input-Controls-Surface-Hover, var(--Scandic-Blue-00));
outline: none;
}
.listBoxItem[data-selected="true"] {
font-weight: 500;
}