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:
@@ -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 {
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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),
|
||||||
|
|||||||
@@ -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(
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
@@ -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%;
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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%;
|
||||||
|
|||||||
@@ -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
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
@@ -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} />
|
||||||
|
|||||||
@@ -67,7 +67,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.logoWrapper {
|
.logoWrapper {
|
||||||
border-radius: var(--Corner-radius-sm);
|
border-radius: var(--Corner-Radius-sm);
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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%;
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -5,6 +5,6 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&:not(.fullWidth) {
|
&:not(.fullWidth) {
|
||||||
border-radius: var(--Corner-radius-xl);
|
border-radius: var(--Corner-Radius-xl);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
@@ -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
Reference in New Issue
Block a user