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

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

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-06-18 08:15:57 +02:00
committed by Christel Westerberg
parent 5f3e417593
commit d84efcbb0f
81 changed files with 1538 additions and 711 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
components/TempDesignSystem/Form/Country/country.module.css
View File

@@ -1,35 +1,46 @@
.container {
--select-border: 2px solid var(--UI-Grey-60);
--select-width: min(28rem, 100%);
position: relative;
}
.comboBoxContainer {
background-color: var(--Main-Grey-White);
border-color: var(--Scandic-Beige-40);
border-radius: var(--Corner-radius-Medium);
border-style: solid;
border-width: 1px;
display: grid;
grid-template-areas: "content";
width: var(--select-width);
gap: var(--Spacing-x-half);
grid-template-areas:
"label chevron"
"input chevron";
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
height: 60px;
padding: var(--Spacing-x1) var(--Spacing-x2);
}
.label {
grid-area: label;
}
.input {
background-color: var(--Main-Grey-White);
border: var(--select-border);
border-radius: var(--Corner-radius-Small);
grid-area: content;
height: 40px;
padding: var(--Spacing-x1) var(--Spacing-x2);
width: var(--select-width);
border: none;
grid-area: input;
height: 18px;
padding: 0;
}
.input,
.listBoxItem {
color: var(--UI-Grey-60);
color: var(--Main-Grey-100);
}
.button {
background: none;
border: none;
cursor: pointer;
grid-area: content;
grid-area: chevron;
height: 100%;
justify-self: flex-end;
padding-left: 0;
@@ -38,13 +49,27 @@
.popover {
background-color: var(--Main-Grey-White);
border: var(--select-border);
border-radius: var(--Corner-radius-Small);
border-color: var(--Scandic-Beige-40);
border-style: solid;
border-width: 1px;
border-radius: var(--Corner-radius-Medium);
left: 0px;
max-height: 400px;
overflow: auto;
padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x1);
width: var(--select-width);
padding: var(--Spacing-x2);
top: calc(60px + var(--Spacing-x1));
width: 100%;
}
.listBoxItem {
padding: 0 var(--Spacing-x1);
}
padding: var(--Spacing-x1) var(--Spacing-x1) var(--Spacing-x1)
var(--Spacing-x2);
}
.listBoxItem[data-selected="true"],
.listBoxItem:hover {
background-color: var(--Scandic-Blue-00);
border-radius: var(--Corner-radius-Medium);
cursor: pointer;
outline: none;
}