feat(BOOK-391): Added theme and logos for Bassin Seven

* chore: Updated border-radius variables after import change

Approved-by: Linus Flood
This commit is contained in:
Erik Tiekstra
2026-01-22 07:03:25 +00:00
parent ef98c4b552
commit 4de24e9f2a
297 changed files with 5252 additions and 648 deletions

View File

@@ -5,7 +5,7 @@
align-items: flex-end; align-items: flex-end;
justify-content: center; justify-content: center;
padding: var(--Space-x4); padding: var(--Space-x4);
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
overflow: hidden; overflow: hidden;
&::after { &::after {

View File

@@ -1,6 +1,6 @@
.container { .container {
background-color: var(--Main-Grey-White); background-color: var(--Main-Grey-White);
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
display: grid; display: grid;
gap: var(--Space-x3); gap: var(--Space-x3);
padding: var(--Space-x2) var(--Space-x2) var(--Space-x4); padding: var(--Space-x2) var(--Space-x2) var(--Space-x4);

View File

@@ -60,7 +60,7 @@
margin-right: auto; margin-right: auto;
background: var(--Background-Primary); background: var(--Background-Primary);
padding: var(--Space-x5); padding: var(--Space-x5);
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
display: grid; display: grid;
gap: var(--Space-x3); gap: var(--Space-x3);
} }
@@ -89,7 +89,7 @@
height: 24px; height: 24px;
min-width: 24px; min-width: 24px;
border: 1px solid var(--UI-Input-Controls-Border-Normal); border: 1px solid var(--UI-Input-Controls-Border-Normal);
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
transition: all 0.3s; transition: all 0.3s;
display: flex; display: flex;
align-items: center; align-items: center;

View File

@@ -7,12 +7,12 @@
width: 100%; width: 100%;
padding: var(--Space-x3) var(--Space-x3) var(--Space-x4); padding: var(--Space-x3) var(--Space-x3) var(--Space-x4);
text-align: center; text-align: center;
border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0; border-radius: var(--Corner-Radius-md) var(--Corner-Radius-md) 0 0;
margin-top: auto; margin-top: auto;
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
& { & {
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
margin-top: initial; margin-top: initial;
width: 560px; width: 560px;
} }

View File

@@ -7,12 +7,12 @@
width: 100%; width: 100%;
padding: var(--Space-x3); padding: var(--Space-x3);
text-align: center; text-align: center;
border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0; border-radius: var(--Corner-Radius-md) var(--Corner-Radius-md) 0 0;
margin-top: auto; margin-top: auto;
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
& { & {
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
margin-top: initial; margin-top: initial;
width: 512px; width: 512px;
} }
@@ -44,7 +44,7 @@
padding: var(--Space-x3) 0; padding: var(--Space-x3) 0;
font-family: var(--typography-Body-Regular-fontFamily); font-family: var(--typography-Body-Regular-fontFamily);
border: 1px solid var(--Base-Border-Normal); border: 1px solid var(--Base-Border-Normal);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
text-align: center; text-align: center;
&.active { &.active {

View File

@@ -17,7 +17,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Space-x3); gap: var(--Space-x3);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
align-items: center; align-items: center;
width: 100%; width: 100%;
} }

View File

@@ -1,5 +1,5 @@
.hotelListingItem { .hotelListingItem {
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
overflow: hidden; overflow: hidden;
display: grid; display: grid;
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
@@ -23,7 +23,7 @@
gap: var(--Space-x05); gap: var(--Space-x05);
background-color: var(--Surface-Primary-Default); background-color: var(--Surface-Primary-Default);
padding: var(--Space-x025) var(--Space-x1); padding: var(--Space-x025) var(--Space-x1);
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
color: var(--Text-Interactive-Default); color: var(--Text-Interactive-Default);
} }

View File

@@ -1,7 +1,7 @@
.container { .container {
align-items: center; align-items: center;
background-color: var(--UI-Grey-10); background-color: var(--UI-Grey-10);
border-radius: var(--Corner-radius-xl); border-radius: var(--Corner-Radius-xl);
display: flex; display: flex;
height: 370px; height: 370px;
justify-content: center; justify-content: center;

View File

@@ -4,7 +4,7 @@
padding: var(--Space-x2); padding: var(--Space-x2);
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
border: 1px solid var(--Base-Border-Subtle); border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
} }
.deadline { .deadline {

View File

@@ -14,7 +14,7 @@
.card { .card {
background-color: var(--Scandic-Brand-Pale-Peach); background-color: var(--Scandic-Brand-Pale-Peach);
border-radius: var(--Corner-radius-xl); border-radius: var(--Corner-Radius-xl);
display: grid; display: grid;
gap: var(--Space-x2); gap: var(--Space-x2);
min-height: 280px; min-height: 280px;

View File

@@ -1,6 +1,6 @@
.card { .card {
background-color: var(--Surface-Brand-Primary-3-Default); background-color: var(--Surface-Brand-Primary-3-Default);
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
padding: var(--Space-x3) var(--Space-x2); padding: var(--Space-x3) var(--Space-x2);
position: relative; position: relative;
min-height: 200px; min-height: 200px;

View File

@@ -3,7 +3,7 @@
} }
.teamMemberCardButton { .teamMemberCardButton {
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
color: var(--Text-Brand-OnPrimary-3-Accent); color: var(--Text-Brand-OnPrimary-3-Accent);
&:focus, &:focus,

View File

@@ -2,7 +2,7 @@
border: none; border: none;
border-collapse: collapse; border-collapse: collapse;
background-color: var(--UI-Opacity-White-100); background-color: var(--UI-Opacity-White-100);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
color: var(--UI-Grey-100); color: var(--UI-Grey-100);
} }

View File

@@ -7,7 +7,7 @@
} }
.levelRequirements { .levelRequirements {
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
background-color: var(--Scandic-Brand-Pale-Peach); background-color: var(--Scandic-Brand-Pale-Peach);
color: var(--Scandic-Peach-80); color: var(--Scandic-Peach-80);
padding: var(--Space-x05) var(--Space-x1); padding: var(--Space-x05) var(--Space-x1);

View File

@@ -11,7 +11,7 @@
display: none; display: none;
position: relative; position: relative;
background-color: var(--UI-Opacity-White-100); background-color: var(--UI-Opacity-White-100);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
} }
.mobileColumns { .mobileColumns {
@@ -48,7 +48,7 @@
.columnHeader:nth-child(2) { .columnHeader:nth-child(2) {
padding-left: var(--Space-x1); padding-left: var(--Space-x1);
border-top-left-radius: var(--Corner-radius-md); border-top-left-radius: var(--Corner-Radius-md);
} }
.columnHeader:nth-child(2):has(+ .columnHeader) { .columnHeader:nth-child(2):has(+ .columnHeader) {
@@ -76,7 +76,7 @@
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
} }
.columnHeader:nth-child(2) { .columnHeader:nth-child(2) {
border-top-right-radius: var(--Corner-radius-md); border-top-right-radius: var(--Corner-Radius-md);
} }
.columns { .columns {

View File

@@ -2,11 +2,11 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-x: auto; overflow-x: auto;
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.container { .container {
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
} }
} }

View File

@@ -5,7 +5,7 @@
} }
.list { .list {
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
border: 1px solid var(--Border-Default); border: 1px solid var(--Border-Default);
background: var(--Surface-Primary-Default); background: var(--Surface-Primary-Default);
} }
@@ -29,8 +29,8 @@
} }
.yearHeader:first-child { .yearHeader:first-child {
border-radius: calc(var(--Corner-radius-md) - 1px) border-radius: calc(var(--Corner-Radius-md) - 1px)
calc(var(--Corner-radius-md) - 1px) 0 0; calc(var(--Corner-Radius-md) - 1px) 0 0;
} }
.listContent { .listContent {
@@ -59,7 +59,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
color: var(--Text-Tertiary); color: var(--Text-Tertiary);
background: var(--Surface-Secondary-Default, #f2ece6); background: var(--Surface-Secondary-Default, #f2ece6);
} }

View File

@@ -1,6 +1,6 @@
.card { .card {
background: var(--Surface-Brand-Primary-1-Default); background: var(--Surface-Brand-Primary-1-Default);
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
padding: var(--Space-x3) var(--Space-x2); padding: var(--Space-x3) var(--Space-x2);
position: relative; position: relative;
min-height: 200px; min-height: 200px;
@@ -44,7 +44,7 @@
.description { .description {
margin-top: auto; margin-top: auto;
padding: var(--Space-x2); padding: var(--Space-x2);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
background: var(--Surface-Primary-Default); background: var(--Surface-Primary-Default);
} }
@@ -61,7 +61,7 @@
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
gap: var(--Space-x1); gap: var(--Space-x1);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
background: var(--Surface-Primary-Default); background: var(--Surface-Primary-Default);
} }

View File

@@ -9,7 +9,7 @@
.card { .card {
background-color: var(--UI-Opacity-White-100); background-color: var(--UI-Opacity-White-100);
border: 1px solid var(--Base-Border-Subtle); border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;

View File

@@ -1,7 +1,7 @@
.card { .card {
align-items: center; align-items: center;
background-color: var(--Scandic-Brand-Burgundy); background-color: var(--Scandic-Brand-Burgundy);
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Space-x2); gap: var(--Space-x2);

View File

@@ -41,7 +41,7 @@
.modal { .modal {
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
box-shadow: var(--modal-box-shadow); box-shadow: var(--modal-box-shadow);
width: 100%; width: 100%;
max-height: 90vh; max-height: 90vh;
@@ -124,7 +124,7 @@
} }
.rewardBadge { .rewardBadge {
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
padding: var(--Space-x1) var(--Space-x15); padding: var(--Space-x1) var(--Space-x15);
background: var(--Base-Surface-Secondary-light-Normal); background: var(--Base-Surface-Secondary-light-Normal);
display: grid; display: grid;

View File

@@ -1,7 +1,7 @@
.container { .container {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
background: linear-gradient( background: linear-gradient(
to right, to right,
var(--Scandic-Blue-60), var(--Scandic-Blue-60),

View File

@@ -33,7 +33,7 @@
width: 100%; width: 100%;
background-color: var(--Surface-Primary-On-Surface-Default); background-color: var(--Surface-Primary-On-Surface-Default);
border: 1px solid var(--Border-Default); border: 1px solid var(--Border-Default);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
box-shadow: box-shadow:
0px 0px 4px 2px rgba(0, 0, 0, 0.1), 0px 0px 4px 2px rgba(0, 0, 0, 0.1),
0px 4px 4px 0px rgba(255, 255, 255, 0.29) inset; 0px 4px 4px 0px rgba(255, 255, 255, 0.29) inset;
@@ -67,7 +67,7 @@
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
border: 1px solid var(--Border-Divider-Accent); border: 1px solid var(--Border-Divider-Accent);
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
padding: var(--Space-x2); padding: var(--Space-x2);
background: background:
linear-gradient( linear-gradient(

View File

@@ -13,7 +13,7 @@
gap: var(--Space-x3); gap: var(--Space-x3);
padding: var(--Space-x3) var(--Space-x9); padding: var(--Space-x3) var(--Space-x9);
background-color: var(--Background-Secondary); background-color: var(--Background-Secondary);
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
margin-top: var(--Space-x9); margin-top: var(--Space-x9);
} }
@@ -100,7 +100,7 @@
display: block; display: block;
position: absolute; position: absolute;
background-color: var(--Border-Divider-Accent); background-color: var(--Border-Divider-Accent);
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
opacity: 0.3; opacity: 0.3;
transition: background-color 300ms ease; transition: background-color 300ms ease;
} }
@@ -112,7 +112,7 @@
position: relative; position: relative;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
} }
.sliderOutput { .sliderOutput {
@@ -123,7 +123,7 @@
background-color: var(--Surface-Brand-Primary-1-OnSurface-Default); background-color: var(--Surface-Brand-Primary-1-OnSurface-Default);
color: var(--Text-Brand-OnPrimary-2-Accent); color: var(--Text-Brand-OnPrimary-2-Accent);
padding: var(--Space-x05) var(--Space-x1); padding: var(--Space-x05) var(--Space-x1);
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
opacity: 0; opacity: 0;
transition: transition:
opacity 0.15s, opacity 0.15s,
@@ -226,7 +226,7 @@
} }
.pointsOutput { .pointsOutput {
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
background-color: var(--Surface-Primary-Disabled); background-color: var(--Surface-Primary-Disabled);
height: 100%; height: 100%;
color: var(--Text-Tertiary); color: var(--Text-Tertiary);

View File

@@ -1,5 +1,5 @@
.nextStayCard { .nextStayCard {
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
border: 1px solid var(--Border-Default); border: 1px solid var(--Border-Default);
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@@ -11,7 +11,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
aspect-ratio: 16/9; aspect-ratio: 16/9;
border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0; border-radius: var(--Corner-Radius-lg) var(--Corner-Radius-lg) 0 0;
background: background:
linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%),
lightgray 50% / cover no-repeat, lightgray 50% / cover no-repeat,
@@ -148,7 +148,7 @@
flex: 1; flex: 1;
aspect-ratio: 16/9; aspect-ratio: 16/9;
width: 100%; width: 100%;
border-radius: var(--Corner-radius-lg) 0 0 var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg) 0 0 var(--Corner-Radius-lg);
} }
.content { .content {

View File

@@ -1,6 +1,6 @@
.link { .link {
outline: 1px solid var(--Base-Border-Subtle); outline: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
overflow: hidden; overflow: hidden;
&:focus, &:focus,

View File

@@ -1,5 +1,5 @@
.card { .card {
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
border: 1px solid var(--Border-Default); border: 1px solid var(--Border-Default);
background: var(--Surface-Secondary-Default); background: var(--Surface-Secondary-Default);
display: flex; display: flex;

View File

@@ -1,5 +1,5 @@
.l6Progress { .l6Progress {
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
border: 1px solid var(--Border-Divider-Default); border: 1px solid var(--Border-Divider-Default);
background: var(--Surface-Primary-Default); background: var(--Surface-Primary-Default);
padding: var(--Space-x3); padding: var(--Space-x3);

View File

@@ -21,7 +21,7 @@
.yearHeader { .yearHeader {
background: var(--Surface-Primary-Hover-Accent); background: var(--Surface-Primary-Hover-Accent);
padding: var(--Space-x1) var(--Space-x2); padding: var(--Space-x1) var(--Space-x2);
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
} }
.yearText { .yearText {

View File

@@ -1,5 +1,5 @@
.card { .card {
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
border: 1px solid var(--Border-Default); border: 1px solid var(--Border-Default);
background: var(--Text-Brand-OnPrimary-3-Default); background: var(--Text-Brand-OnPrimary-3-Default);
display: flex; display: flex;
@@ -25,7 +25,7 @@
max-width: 80px; max-width: 80px;
height: 108px; height: 108px;
max-height: 108px; max-height: 108px;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
object-fit: cover; object-fit: cover;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -57,7 +57,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: var(--Space-x05); gap: var(--Space-x05);
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
background: var(--Surface-Secondary-Default); background: var(--Surface-Secondary-Default);
width: fit-content; width: fit-content;
} }

View File

@@ -4,14 +4,14 @@
background: var(--Base-Surface-Primary-light-Normal); background: var(--Base-Surface-Primary-light-Normal);
border: 1px solid var(--Border-Default); border: 1px solid var(--Border-Default);
overflow: hidden; overflow: hidden;
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
} }
.imageContainer { .imageContainer {
position: relative; position: relative;
width: 100%; width: 100%;
aspect-ratio: 16/9; aspect-ratio: 16/9;
border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0; border-radius: var(--Corner-Radius-lg) var(--Corner-Radius-lg) 0 0;
background: background:
linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%),
lightgray 50% / cover no-repeat, lightgray 50% / cover no-repeat,

View File

@@ -4,7 +4,7 @@
background: var(--Surface-Secondary-Default); background: var(--Surface-Secondary-Default);
border: 1px solid var(--Border-Default); border: 1px solid var(--Border-Default);
overflow: hidden; overflow: hidden;
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;

View File

@@ -2,7 +2,7 @@
display: grid; display: grid;
grid-template-rows: 1fr min(50px); grid-template-rows: 1fr min(50px);
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
min-height: 250px; min-height: 250px;
margin-bottom: var(--Space-x05); margin-bottom: var(--Space-x05);
overflow: hidden; overflow: hidden;
@@ -41,7 +41,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: var(--Space-x3); gap: var(--Space-x3);
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
background: var(--Surface-Brand-Primary-1-Default); background: var(--Surface-Brand-Primary-1-Default);
} }

View File

@@ -21,7 +21,7 @@
.yearHeader { .yearHeader {
background: var(--Surface-Primary-Hover-Accent); background: var(--Surface-Primary-Hover-Accent);
padding: var(--Space-x1) var(--Space-x2); padding: var(--Space-x1) var(--Space-x2);
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
} }
.yearText { .yearText {

View File

@@ -1,7 +1,7 @@
.container { .container {
background-color: var(--Surface-Primary-Default); background-color: var(--Surface-Primary-Default);
border: 1px solid var(--Border-Default); border: 1px solid var(--Border-Default);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
overflow: hidden; overflow: hidden;
color: var(--Text-Default); color: var(--Text-Default);
} }

View File

@@ -1,5 +1,5 @@
.container { .container {
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
background-color: var(--Surface-Primary-OnSurface-Default); background-color: var(--Surface-Primary-OnSurface-Default);
padding: 0 var(--Space-x2); padding: 0 var(--Space-x2);
display: flex; display: flex;

View File

@@ -1,6 +1,6 @@
.list { .list {
height: fit-content; height: fit-content;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
overflow: hidden; overflow: hidden;
list-style: none; list-style: none;
} }
@@ -18,7 +18,7 @@
} }
.listItem:last-child .link { .listItem:last-child .link {
border-radius: 0 0 var(--Corner-radius-md) var(--Corner-radius-md); border-radius: 0 0 var(--Corner-Radius-md) var(--Corner-Radius-md);
} }
.link:focus-visible { .link:focus-visible {

View File

@@ -1,6 +1,6 @@
@media screen and (max-width: 1366px) { @media screen and (max-width: 1366px) {
.section { .section {
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
overflow: hidden; overflow: hidden;
} }
.column { .column {

View File

@@ -1,7 +1,7 @@
.tableWrapper { .tableWrapper {
display: grid; display: grid;
border: 1px solid var(--Border-Default); border: 1px solid var(--Border-Default);
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
overflow: hidden; overflow: hidden;
} }

View File

@@ -47,7 +47,7 @@
height: 24px; height: 24px;
padding: 0 var(--Space-x1); padding: 0 var(--Space-x1);
flex-shrink: 0; flex-shrink: 0;
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
border: 1px solid var(--Border-Inverted); border: 1px solid var(--Border-Inverted);
} }
} }

View File

@@ -47,7 +47,7 @@
.dot { .dot {
height: 8px; height: 8px;
width: 8px; width: 8px;
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
background: var(--UI-Grey-40); background: var(--UI-Grey-40);
transition: width 0.3s ease; transition: width 0.3s ease;
} }

View File

@@ -1,5 +1,5 @@
.content { .content {
border-radius: var(--Corner-radius-Large); border-radius: var(--Corner-Radius-Large);
transform: translateY(-170px); transform: translateY(-170px);
margin: 0 auto -170px; margin: 0 auto -170px;
width: 90%; width: 90%;
@@ -13,7 +13,7 @@
width: 100%; width: 100%;
height: 478px; height: 478px;
position: relative; position: relative;
border-radius: var(--Corner-radius-Large); border-radius: var(--Corner-Radius-Large);
} }
.benefitList { .benefitList {
@@ -70,7 +70,7 @@
.hero { .hero {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
border-radius: var(--Corner-radius-Large); border-radius: var(--Corner-Radius-Large);
overflow: hidden; overflow: hidden;
min-height: 478px; min-height: 478px;
height: 100%; height: 100%;

View File

@@ -41,6 +41,9 @@ export function getButtonColor(
case Theme.downtownCamper: case Theme.downtownCamper:
case Theme.haymarket: case Theme.haymarket:
case Theme.marski: case Theme.marski:
case Theme.bassinSeven:
buttonColor = "Primary"
break
default: default:
break break
} }

View File

@@ -2,7 +2,7 @@
display: grid; display: grid;
background-color: var(--Surface-Primary-Default); background-color: var(--Surface-Primary-Default);
border: 1px solid var(--Border-Default); border: 1px solid var(--Border-Default);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
overflow: hidden; overflow: hidden;
scroll-margin-top: var(--Space-x2); scroll-margin-top: var(--Space-x2);
} }
@@ -34,7 +34,7 @@
gap: var(--Space-x05); gap: var(--Space-x05);
background-color: var(--Surface-Primary-Default); background-color: var(--Surface-Primary-Default);
padding: var(--Space-x025) var(--Space-x1); padding: var(--Space-x025) var(--Space-x1);
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
color: var(--Text-Interactive-Default); color: var(--Text-Interactive-Default);
} }

View File

@@ -42,7 +42,7 @@
@media screen and (max-width: 949px) { @media screen and (max-width: 949px) {
.cityMapCard { .cityMapCard {
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
} }
} }

View File

@@ -1,5 +1,5 @@
.card { .card {
border-radius: var(--Corner-radius-Medium); border-radius: var(--Corner-Radius-Medium);
background-color: var(--Surface-Primary-Default); background-color: var(--Surface-Primary-Default);
display: flex; display: flex;
height: 80px; height: 80px;

View File

@@ -9,7 +9,7 @@
@media screen and (max-width: 949px) { @media screen and (max-width: 949px) {
.content { .content {
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
} }
} }

View File

@@ -1,7 +1,7 @@
.container { .container {
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
border: 1px solid var(--Base-Border-Subtle); border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
overflow: hidden; overflow: hidden;
} }

View File

@@ -1,7 +1,7 @@
.container { .container {
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
border: 1px solid var(--Base-Border-Subtle); border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
overflow: hidden; overflow: hidden;
} }
@@ -27,7 +27,7 @@
gap: var(--Space-x05); gap: var(--Space-x05);
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
padding: var(--Space-x025) var(--Space-x1); padding: var(--Space-x025) var(--Space-x1);
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
color: var(--Text-Interactive-Default); color: var(--Text-Interactive-Default);
} }

View File

@@ -1,7 +1,7 @@
.trigger { .trigger {
background: var(--Base-Surface-Primary-light-Normal); background: var(--Base-Surface-Primary-light-Normal);
border: 1px solid var(--Border-Default); border: 1px solid var(--Border-Default);
border-radius: var(--Corner-radius-rounded); border-radius: var(--Corner-Radius-Rounded);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: var(--Space-x15) var(--Space-x15) var(--Space-x15) var(--Space-x3); padding: var(--Space-x15) var(--Space-x15) var(--Space-x15) var(--Space-x3);
@@ -25,7 +25,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: var(--Corner-radius-Rounded); border-radius: var(--Corner-Radius-Rounded);
color: var(--Base-Text-Inverted); color: var(--Base-Text-Inverted);
} }
@@ -49,7 +49,7 @@
left: 0; left: 0;
right: 0; right: 0;
height: calc(100dvh - max(var(--sitewide-alert-sticky-height), 20px)); height: calc(100dvh - max(var(--sitewide-alert-sticky-height), 20px));
border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0; border-radius: var(--Corner-Radius-md) var(--Corner-Radius-md) 0 0;
background-color: var(--Surface-Primary-Default); background-color: var(--Surface-Primary-Default);
box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);

View File

@@ -2,7 +2,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
} }
.accordion { .accordion {

View File

@@ -1,7 +1,7 @@
.imageContainer { .imageContainer {
position: relative; position: relative;
min-width: 177px; min-width: 177px;
border-radius: var(--Corner-radius-md) 0 0 var(--Corner-radius-md); border-radius: var(--Corner-Radius-md) 0 0 var(--Corner-Radius-md);
overflow: hidden; overflow: hidden;
} }
@@ -13,7 +13,7 @@
position: absolute; position: absolute;
left: 7px; left: 7px;
top: 7px; top: 7px;
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
} }
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {

View File

@@ -1,7 +1,7 @@
.wrapper { .wrapper {
background: var(--Base-Surface-Primary-light-Normal); background: var(--Base-Surface-Primary-light-Normal);
border: 1px solid var(--Base-Border-Subtle); border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
flex-direction: row; flex-direction: row;
display: flex; display: flex;

View File

@@ -4,7 +4,7 @@
height: 28px !important; height: 28px !important;
background-color: var(--Base-Text-High-contrast); background-color: var(--Base-Text-High-contrast);
border: 4px solid var(--Base-Surface-Primary-light-Normal); border: 4px solid var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-rounded); border-radius: var(--Corner-Radius-Rounded);
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;

View File

@@ -7,7 +7,7 @@
background-color: var(--Base-Text-High-contrast); background-color: var(--Base-Text-High-contrast);
border: 4px solid var(--Base-Surface-Primary-light-Normal); border: 4px solid var(--Base-Surface-Primary-light-Normal);
color: var(--Base-Text-Inverted); color: var(--Base-Text-Inverted);
border-radius: var(--Corner-radius-rounded); border-radius: var(--Corner-Radius-Rounded);
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;

View File

@@ -11,7 +11,7 @@
height: 200px; height: 200px;
max-height: 40dvh; max-height: 40dvh;
width: 100%; width: 100%;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
} }
.image.clickable { .image.clickable {

View File

@@ -41,7 +41,7 @@
color: var(--Text-Default); color: var(--Text-Default);
width: 100%; width: 100%;
padding: var(--Space-x05) var(--Space-x1); padding: var(--Space-x05) var(--Space-x1);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
transition: background-color 0.3s; transition: background-color 0.3s;
@@ -70,7 +70,7 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0; border-radius: var(--Corner-Radius-lg) var(--Corner-Radius-lg) 0 0;
} }
.sidebar.fullscreen + .backdrop { .sidebar.fullscreen + .backdrop {

View File

@@ -1,6 +1,6 @@
.amenitiesContainer { .amenitiesContainer {
background-color: var(--Surface-Secondary-Default); background-color: var(--Surface-Secondary-Default);
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
padding: var(--Space-x3) var(--Space-x3) var(--Space-x15) var(--Space-x3); padding: var(--Space-x3) var(--Space-x3) var(--Space-x15) var(--Space-x3);
display: grid; display: grid;
gap: var(--Space-x15); gap: var(--Space-x15);

View File

@@ -26,7 +26,7 @@
.imageWrapper { .imageWrapper {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
width: 100%; width: 100%;
height: 100%; height: 100%;
} }

View File

@@ -4,7 +4,7 @@
border-width: 0; border-width: 0;
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
overflow: hidden; overflow: hidden;
flex: 1; flex: 1;
} }
@@ -24,6 +24,6 @@
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.imageButton { .imageButton {
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
} }
} }

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -5,6 +5,9 @@ import { cx } from "class-variance-authority"
import { Theme } from "@scandic-hotels/common/utils/theme" import { Theme } from "@scandic-hotels/common/utils/theme"
import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon" import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon"
import { BassinSevenLogoLarge } from "@/components/ContentType/HotelPage/Hero/Logos/BassinSevenLarge"
import { BassinSevenLogoSmall } from "@/components/ContentType/HotelPage/Hero/Logos/BassinSevenSmall"
import { DowntownCamperLogoLarge } from "./DowntownCamperLarge" import { DowntownCamperLogoLarge } from "./DowntownCamperLarge"
import { DowntownCamperLogoSmall } from "./DowntownCamperSmall" import { DowntownCamperLogoSmall } from "./DowntownCamperSmall"
import { GrandHotelLogoLarge } from "./GrandHotelLarge" import { GrandHotelLogoLarge } from "./GrandHotelLarge"
@@ -82,6 +85,13 @@ export function BrandedHotelLogo({ theme, className }: BrandedHotelLogoProps) {
<TheDockLogoLarge className={cx(styles.logoLarge, className)} /> <TheDockLogoLarge className={cx(styles.logoLarge, className)} />
</> </>
) )
case Theme.bassinSeven:
return (
<>
<BassinSevenLogoSmall className={cx(styles.logoSmall, className)} />
<BassinSevenLogoLarge className={cx(styles.logoLarge, className)} />
</>
)
case Theme.scandic: case Theme.scandic:
default: default:
return <ScandicLogoIcon className={className} /> return <ScandicLogoIcon className={className} />

View File

@@ -67,7 +67,7 @@
} }
.logoWrapper { .logoWrapper {
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
justify-content: center; justify-content: center;
} }

View File

@@ -6,8 +6,8 @@
right: 0; right: 0;
background-color: var(--Surface-Primary-Default); background-color: var(--Surface-Primary-Default);
padding: var(--Space-x3); padding: var(--Space-x3);
border-top-left-radius: var(--Corner-radius-md); border-top-left-radius: var(--Corner-Radius-md);
border-top-right-radius: var(--Corner-radius-md); border-top-right-radius: var(--Corner-Radius-md);
} }
.poiList { .poiList {

View File

@@ -7,7 +7,7 @@
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: var(--Space-x05); gap: var(--Space-x05);
align-items: center; align-items: center;
border-radius: var(--Corner-radius-Rounded); border-radius: var(--Corner-Radius-Rounded);
background-color: var(--Component-Button-Inverted-Fill-Default); background-color: var(--Component-Button-Inverted-Fill-Default);
box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.15); box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.15);
padding: 6px; padding: 6px;

View File

@@ -1,5 +1,5 @@
.roomCard { .roomCard {
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
background-color: var(--Surface-Primary-Default); background-color: var(--Surface-Primary-Default);
border: 1px solid var(--Border-Default); border: 1px solid var(--Border-Default);
display: grid; display: grid;

View File

@@ -9,5 +9,5 @@
height: 240px; height: 240px;
min-width: 0; /* Prevents image from causing flex item overflow by allowing shrinking below content size */ min-width: 0; /* Prevents image from causing flex item overflow by allowing shrinking below content size */
width: 100%; width: 100%;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
} }

View File

@@ -18,7 +18,7 @@
.imageContainer { .imageContainer {
position: relative; position: relative;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
overflow: hidden; overflow: hidden;
} }

View File

@@ -5,7 +5,7 @@
} }
.awards { .awards {
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
background: var(--Surface-Primary-Default); background: var(--Surface-Primary-Default);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -24,7 +24,7 @@
.iframe { .iframe {
width: 100%; width: 100%;
border-width: 0; border-width: 0;
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
/* Adjustments for devices with tiny screen height */ /* Adjustments for devices with tiny screen height */
min-height: max(50dvh, 300px); min-height: max(50dvh, 300px);

View File

@@ -6,6 +6,6 @@
.openingHours { .openingHours {
display: grid; display: grid;
padding: var(--Space-x2) var(--Space-x3); padding: var(--Space-x2) var(--Space-x3);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
background: var(--Surface-Secondary-Default); background: var(--Surface-Secondary-Default);
} }

View File

@@ -1,6 +1,6 @@
.card { .card {
background-color: var(--Surface-Primary-Default); background-color: var(--Surface-Primary-Default);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
border: 1px solid var(--Border-Default); border: 1px solid var(--Border-Default);
display: grid; display: grid;
overflow: hidden; overflow: hidden;
@@ -36,7 +36,7 @@
.infoTable { .infoTable {
background-color: var(--Surface-Primary-OnSurface-Default); background-color: var(--Surface-Primary-OnSurface-Default);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
padding: var(--Space-x2); padding: var(--Space-x2);
display: grid; display: grid;
gap: var(--Space-x2); gap: var(--Space-x2);

View File

@@ -4,7 +4,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--Space-x6); gap: var(--Space-x6);
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
background: var(--Surface-Secondary-Default); background: var(--Surface-Secondary-Default);
} }

View File

@@ -1,7 +1,7 @@
.hero { .hero {
--card-float-offset: -170px; --card-float-offset: -170px;
--card-width: 90%; --card-width: 90%;
--card-radius: var(--Corner-radius-Large); --card-radius: var(--Corner-Radius-Large);
position: relative; position: relative;
display: block; display: block;
@@ -112,7 +112,7 @@
padding: var(--Space-x15); padding: var(--Space-x15);
gap: var(--Space-x1); gap: var(--Space-x1);
background-color: var(--Surface-Primary-Default); background-color: var(--Surface-Primary-Default);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
border: 1px solid var(--Border-Default); border: 1px solid var(--Border-Default);
align-items: start; align-items: start;
} }

View File

@@ -8,12 +8,12 @@
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 179px; /* Exact mobile height from Figma */ height: 179px; /* Exact mobile height from Figma */
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
} }
.imageTop { .imageTop {
width: 100%; width: 100%;
height: 180px; height: 180px;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
} }
.imageContainer { .imageContainer {

View File

@@ -4,7 +4,7 @@
gap: var(--Space-x15); gap: var(--Space-x15);
padding: var(--Space-x1) var(--Space-x15); padding: var(--Space-x1) var(--Space-x15);
cursor: pointer; cursor: pointer;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
transition: background-color 0.3s; transition: background-color 0.3s;
@media (hover: hover) { @media (hover: hover) {

View File

@@ -15,7 +15,7 @@
.dialog { .dialog {
width: min(80dvw, 960px); width: min(80dvw, 960px);
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08); box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
overflow: hidden; overflow: hidden;

View File

@@ -35,7 +35,7 @@
.modal { .modal {
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
box-shadow: var(--modal-box-shadow); box-shadow: var(--modal-box-shadow);
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@@ -9,7 +9,7 @@
display: grid; display: grid;
gap: var(--Space-x6); gap: var(--Space-x6);
border-radius: var(--Corner-radius-Medium) var(--Corner-radius-Medium) 0 0; border-radius: var(--Corner-Radius-Medium) var(--Corner-Radius-Medium) 0 0;
} }
.buttons { .buttons {
@@ -23,7 +23,7 @@
border-top: 1px solid var(--Border-Divider-Subtle); border-top: 1px solid var(--Border-Divider-Subtle);
background: var(--Base-Surface-Primary-light-Normal); background: var(--Base-Surface-Primary-light-Normal);
border-radius: 0 0 var(--Corner-radius-Medium) var(--Corner-radius-Medium); border-radius: 0 0 var(--Corner-Radius-Medium) var(--Corner-Radius-Medium);
button { button {
width: 100%; width: 100%;

View File

@@ -5,7 +5,7 @@
width: 100%; width: 100%;
padding: var(--Space-x1); padding: var(--Space-x1);
gap: var(--Space-x15); gap: var(--Space-x15);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
color: var(--Text-Interactive-Default); color: var(--Text-Interactive-Default);
&:hover { &:hover {

View File

@@ -13,7 +13,7 @@
); /* 3.5rem is the height of the main menu + bottom padding. */ ); /* 3.5rem is the height of the main menu + bottom padding. */
right: 0; right: 0;
background-color: var(--Surface-Primary-Default); background-color: var(--Surface-Primary-Default);
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
box-shadow: 0 0 0.875rem 0.375rem rgba(0, 0, 0, 0.1); box-shadow: 0 0 0.875rem 0.375rem rgba(0, 0, 0, 0.1);
min-width: 20rem; min-width: 20rem;
z-index: var(--menu-overlay-z-index); z-index: var(--menu-overlay-z-index);

View File

@@ -53,7 +53,7 @@
); /* 3.5rem is the height of the main menu + bottom padding. */ ); /* 3.5rem is the height of the main menu + bottom padding. */
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
box-shadow: var(--popup-box-shadow); box-shadow: var(--popup-box-shadow);
&.isExpanded { &.isExpanded {

View File

@@ -3,7 +3,7 @@
margin-bottom: var(--Space-x2); margin-bottom: var(--Space-x2);
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
border-radius: var(--Corner-radius-xl); border-radius: var(--Corner-Radius-xl);
margin: 0; margin: 0;
} }

View File

@@ -5,6 +5,6 @@
overflow: hidden; overflow: hidden;
&:not(.fullWidth) { &:not(.fullWidth) {
border-radius: var(--Corner-radius-xl); border-radius: var(--Corner-Radius-xl);
} }
} }

View File

@@ -4,7 +4,7 @@
gap: var(--Space-x15); gap: var(--Space-x15);
padding: var(--Space-x1) var(--Space-x15); padding: var(--Space-x1) var(--Space-x15);
cursor: pointer; cursor: pointer;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
transition: background-color 0.3s; transition: background-color 0.3s;
@media (hover: hover) { @media (hover: hover) {

View File

@@ -11,7 +11,7 @@
.dialog { .dialog {
width: min(80dvw, 960px); width: min(80dvw, 960px);
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08); box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
overflow: hidden; overflow: hidden;
@@ -37,7 +37,7 @@
.badge { .badge {
background-color: var(--Base-Text-Accent); background-color: var(--Base-Text-Accent);
border-radius: var(--Corner-radius-xl); border-radius: var(--Corner-Radius-xl);
width: 20px; width: 20px;
height: 20px; height: 20px;
color: var(--Base-Surface-Primary-light-Normal); color: var(--Base-Surface-Primary-light-Normal);

View File

@@ -32,7 +32,7 @@
.image { .image {
aspect-ratio: 2 / 1; aspect-ratio: 2 / 1;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
object-fit: cover; object-fit: cover;
width: 100%; width: 100%;
height: auto; height: auto;

View File

@@ -9,14 +9,14 @@
justify-content: space-between; justify-content: space-between;
background-color: var(--Surface-Brand-Primary-2-OnSurface-Accent); background-color: var(--Surface-Brand-Primary-2-OnSurface-Accent);
padding: var(--Space-x1) var(--Space-x15); padding: var(--Space-x1) var(--Space-x15);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
} }
.guarantee { .guarantee {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Space-x2); gap: var(--Space-x2);
background-color: var(--Surface-Secondary-Default); background-color: var(--Surface-Secondary-Default);
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
padding: var(--Space-x2); padding: var(--Space-x2);
} }
@@ -41,5 +41,5 @@
} }
.accordionItem { .accordionItem {
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
} }

View File

@@ -3,7 +3,7 @@
align-items: center; align-items: center;
gap: var(--Space-x15); gap: var(--Space-x15);
padding: var(--Space-x15); padding: var(--Space-x15);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
background-color: var(--Surface-Primary-OnSurface-Default); background-color: var(--Surface-Primary-OnSurface-Default);
} }

View File

@@ -4,13 +4,13 @@
gap: var(--Space-x1); gap: var(--Space-x1);
align-self: stretch; align-self: stretch;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
border: 1px solid var(--Border-Divider-Subtle); border: 1px solid var(--Border-Divider-Subtle);
background: var(--Surface-Primary-Default); background: var(--Surface-Primary-Default);
} }
.image { .image {
border-radius: var(--Corner-radius-sm); border-radius: var(--Corner-Radius-sm);
} }
.cost { .cost {

View File

@@ -15,7 +15,7 @@
align-items: center; align-items: center;
gap: var(--Space-x15); gap: var(--Space-x15);
padding: var(--Space-x15); padding: var(--Space-x15);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
background-color: var(--Surface-Primary-OnSurface-Default); background-color: var(--Surface-Primary-OnSurface-Default);
} }

View File

@@ -1,6 +1,6 @@
.container { .container {
display: flex; display: flex;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
background: var(--Surface-Primary-OnSurface-Default); background: var(--Surface-Primary-OnSurface-Default);
width: 100%; width: 100%;
align-items: flex-start; align-items: flex-start;
@@ -38,7 +38,7 @@
.spendablePoints { .spendablePoints {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0; border-radius: var(--Corner-Radius-md) var(--Corner-Radius-md) 0 0;
background: var(--Surface-Brand-Primary-1-Default); background: var(--Surface-Brand-Primary-1-Default);
width: 100%; width: 100%;
padding: var(--Space-x1) var(--Space-x15); padding: var(--Space-x1) var(--Space-x15);

View File

@@ -33,7 +33,7 @@
display: flex; display: flex;
padding: var(--Space-x15); padding: var(--Space-x15);
flex: 1 0 0; flex: 1 0 0;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
border: 1px solid var(--Base-Border-Subtle); border: 1px solid var(--Base-Border-Subtle);
background: var(--Surface-Feedback-Information-light); background: var(--Surface-Feedback-Information-light);

View File

@@ -9,7 +9,7 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: var(--Space-x1); gap: var(--Space-x1);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
} }
.showOnDesktop { .showOnDesktop {

View File

@@ -4,7 +4,7 @@
flex-direction: column; flex-direction: column;
gap: var(--Space-x2); gap: var(--Space-x2);
align-self: stretch; align-self: stretch;
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-Radius-lg);
border: 1px solid var(--Border-Divider-Default); border: 1px solid var(--Border-Divider-Default);
background: var(--Surface-Primary-Default); background: var(--Surface-Primary-Default);
} }

View File

@@ -13,7 +13,7 @@
background: var(--Surface-Primary-OnSurface-Default); background: var(--Surface-Primary-OnSurface-Default);
padding: var(--Space-x15); padding: var(--Space-x15);
gap: var(--Space-x2); gap: var(--Space-x2);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
} }
.buttons { .buttons {

View File

@@ -31,7 +31,7 @@
.ancillaryMobile { .ancillaryMobile {
background-color: var(--Background-Primary); background-color: var(--Background-Primary);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Space-x1); gap: var(--Space-x1);
@@ -41,7 +41,7 @@
display: none; display: none;
padding: var(--Space-x2); padding: var(--Space-x2);
background-color: var(--Background-Primary); background-color: var(--Background-Primary);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
flex-direction: column; flex-direction: column;
gap: var(--Space-x1); gap: var(--Space-x1);
} }

View File

@@ -20,7 +20,7 @@
} }
.chip { .chip {
border-radius: var(--Corner-radius-rounded); border-radius: var(--Corner-Radius-Rounded);
padding: calc(var(--Space-x1) + var(--Space-x025)) var(--Space-x2); padding: calc(var(--Space-x1) + var(--Space-x025)) var(--Space-x2);
cursor: pointer; cursor: pointer;
border: 1px solid var(--Border-Interactive-Default); border: 1px solid var(--Border-Interactive-Default);

View File

@@ -8,7 +8,7 @@
.image { .image {
width: 152px; width: 152px;
height: 152px; height: 152px;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
} }
.content { .content {

View File

@@ -4,7 +4,7 @@
align-items: center; align-items: center;
background-color: var(--Main-Brand-PalePeach); background-color: var(--Main-Brand-PalePeach);
padding: var(--Space-x3) 0; padding: var(--Space-x3) 0;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-Radius-md);
gap: var(--Space-x2); gap: var(--Space-x2);
} }

Some files were not shown because too many files have changed in this diff Show More