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:
@@ -1,5 +1,5 @@
|
||||
.hotelListingItem {
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
@@ -23,7 +23,7 @@
|
||||
gap: var(--Space-x05);
|
||||
background-color: var(--Surface-Primary-Default);
|
||||
padding: var(--Space-x025) var(--Space-x1);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
border-radius: var(--Corner-Radius-sm);
|
||||
color: var(--Text-Interactive-Default);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.container {
|
||||
align-items: center;
|
||||
background-color: var(--UI-Grey-10);
|
||||
border-radius: var(--Corner-radius-xl);
|
||||
border-radius: var(--Corner-Radius-xl);
|
||||
display: flex;
|
||||
height: 370px;
|
||||
justify-content: center;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
padding: var(--Space-x2);
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
border: 1px solid var(--Base-Border-Subtle);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
}
|
||||
|
||||
.deadline {
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
.card {
|
||||
background-color: var(--Scandic-Brand-Pale-Peach);
|
||||
border-radius: var(--Corner-radius-xl);
|
||||
border-radius: var(--Corner-Radius-xl);
|
||||
display: grid;
|
||||
gap: var(--Space-x2);
|
||||
min-height: 280px;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.card {
|
||||
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);
|
||||
position: relative;
|
||||
min-height: 200px;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
}
|
||||
|
||||
.teamMemberCardButton {
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
color: var(--Text-Brand-OnPrimary-3-Accent);
|
||||
|
||||
&:focus,
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
border: none;
|
||||
border-collapse: collapse;
|
||||
background-color: var(--UI-Opacity-White-100);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
color: var(--UI-Grey-100);
|
||||
}
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
}
|
||||
|
||||
.levelRequirements {
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
background-color: var(--Scandic-Brand-Pale-Peach);
|
||||
color: var(--Scandic-Peach-80);
|
||||
padding: var(--Space-x05) var(--Space-x1);
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
display: none;
|
||||
position: relative;
|
||||
background-color: var(--UI-Opacity-White-100);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
}
|
||||
|
||||
.mobileColumns {
|
||||
@@ -48,7 +48,7 @@
|
||||
|
||||
.columnHeader:nth-child(2) {
|
||||
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) {
|
||||
@@ -76,7 +76,7 @@
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
.columnHeader:nth-child(2) {
|
||||
border-top-right-radius: var(--Corner-radius-md);
|
||||
border-top-right-radius: var(--Corner-Radius-md);
|
||||
}
|
||||
|
||||
.columns {
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: auto;
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
border-radius: var(--Corner-Radius-sm);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.container {
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
border-radius: var(--Corner-Radius-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
}
|
||||
|
||||
.list {
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
border: 1px solid var(--Border-Default);
|
||||
background: var(--Surface-Primary-Default);
|
||||
}
|
||||
@@ -29,8 +29,8 @@
|
||||
}
|
||||
|
||||
.yearHeader:first-child {
|
||||
border-radius: calc(var(--Corner-radius-md) - 1px)
|
||||
calc(var(--Corner-radius-md) - 1px) 0 0;
|
||||
border-radius: calc(var(--Corner-Radius-md) - 1px)
|
||||
calc(var(--Corner-Radius-md) - 1px) 0 0;
|
||||
}
|
||||
|
||||
.listContent {
|
||||
@@ -59,7 +59,7 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
border-radius: var(--Corner-Radius-sm);
|
||||
color: var(--Text-Tertiary);
|
||||
background: var(--Surface-Secondary-Default, #f2ece6);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.card {
|
||||
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);
|
||||
position: relative;
|
||||
min-height: 200px;
|
||||
@@ -44,7 +44,7 @@
|
||||
.description {
|
||||
margin-top: auto;
|
||||
padding: var(--Space-x2);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
background: var(--Surface-Primary-Default);
|
||||
}
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: var(--Space-x1);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
background: var(--Surface-Primary-Default);
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
.card {
|
||||
background-color: var(--UI-Opacity-White-100);
|
||||
border: 1px solid var(--Base-Border-Subtle);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.card {
|
||||
align-items: center;
|
||||
background-color: var(--Scandic-Brand-Burgundy);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
border-radius: var(--Corner-Radius-sm);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Space-x2);
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
|
||||
.modal {
|
||||
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);
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
@@ -124,7 +124,7 @@
|
||||
}
|
||||
|
||||
.rewardBadge {
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
border-radius: var(--Corner-Radius-sm);
|
||||
padding: var(--Space-x1) var(--Space-x15);
|
||||
background: var(--Base-Surface-Secondary-light-Normal);
|
||||
display: grid;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
border-radius: var(--Corner-Radius-lg);
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--Scandic-Blue-60),
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
width: 100%;
|
||||
background-color: var(--Surface-Primary-On-Surface-Default);
|
||||
border: 1px solid var(--Border-Default);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
box-shadow:
|
||||
0px 0px 4px 2px rgba(0, 0, 0, 0.1),
|
||||
0px 4px 4px 0px rgba(255, 255, 255, 0.29) inset;
|
||||
@@ -67,7 +67,7 @@
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
border: 1px solid var(--Border-Divider-Accent);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
border-radius: var(--Corner-Radius-sm);
|
||||
padding: var(--Space-x2);
|
||||
background:
|
||||
linear-gradient(
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
gap: var(--Space-x3);
|
||||
padding: var(--Space-x3) var(--Space-x9);
|
||||
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);
|
||||
margin-top: var(--Space-x9);
|
||||
}
|
||||
@@ -100,7 +100,7 @@
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: var(--Border-Divider-Accent);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
border-radius: var(--Corner-Radius-sm);
|
||||
opacity: 0.3;
|
||||
transition: background-color 300ms ease;
|
||||
}
|
||||
@@ -112,7 +112,7 @@
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
border-radius: var(--Corner-Radius-sm);
|
||||
}
|
||||
|
||||
.sliderOutput {
|
||||
@@ -123,7 +123,7 @@
|
||||
background-color: var(--Surface-Brand-Primary-1-OnSurface-Default);
|
||||
color: var(--Text-Brand-OnPrimary-2-Accent);
|
||||
padding: var(--Space-x05) var(--Space-x1);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
border-radius: var(--Corner-Radius-sm);
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 0.15s,
|
||||
@@ -226,7 +226,7 @@
|
||||
}
|
||||
|
||||
.pointsOutput {
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
background-color: var(--Surface-Primary-Disabled);
|
||||
height: 100%;
|
||||
color: var(--Text-Tertiary);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.nextStayCard {
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
border-radius: var(--Corner-Radius-lg);
|
||||
border: 1px solid var(--Border-Default);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
@@ -11,7 +11,7 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
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:
|
||||
linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%),
|
||||
lightgray 50% / cover no-repeat,
|
||||
@@ -148,7 +148,7 @@
|
||||
flex: 1;
|
||||
aspect-ratio: 16/9;
|
||||
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 {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.link {
|
||||
outline: 1px solid var(--Base-Border-Subtle);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
overflow: hidden;
|
||||
|
||||
&:focus,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.card {
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
border-radius: var(--Corner-Radius-lg);
|
||||
border: 1px solid var(--Border-Default);
|
||||
background: var(--Surface-Secondary-Default);
|
||||
display: flex;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.l6Progress {
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
border: 1px solid var(--Border-Divider-Default);
|
||||
background: var(--Surface-Primary-Default);
|
||||
padding: var(--Space-x3);
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
.yearHeader {
|
||||
background: var(--Surface-Primary-Hover-Accent);
|
||||
padding: var(--Space-x1) var(--Space-x2);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
border-radius: var(--Corner-Radius-sm);
|
||||
}
|
||||
|
||||
.yearText {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.card {
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
border-radius: var(--Corner-Radius-lg);
|
||||
border: 1px solid var(--Border-Default);
|
||||
background: var(--Text-Brand-OnPrimary-3-Default);
|
||||
display: flex;
|
||||
@@ -25,7 +25,7 @@
|
||||
max-width: 80px;
|
||||
height: 108px;
|
||||
max-height: 108px;
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -57,7 +57,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--Space-x05);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
border-radius: var(--Corner-Radius-sm);
|
||||
background: var(--Surface-Secondary-Default);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
@@ -4,14 +4,14 @@
|
||||
background: var(--Base-Surface-Primary-light-Normal);
|
||||
border: 1px solid var(--Border-Default);
|
||||
overflow: hidden;
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
border-radius: var(--Corner-Radius-lg);
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
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:
|
||||
linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%),
|
||||
lightgray 50% / cover no-repeat,
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
background: var(--Surface-Secondary-Default);
|
||||
border: 1px solid var(--Border-Default);
|
||||
overflow: hidden;
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
border-radius: var(--Corner-Radius-lg);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
display: grid;
|
||||
grid-template-rows: 1fr min(50px);
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
min-height: 250px;
|
||||
margin-bottom: var(--Space-x05);
|
||||
overflow: hidden;
|
||||
@@ -41,7 +41,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--Space-x3);
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
border-radius: var(--Corner-Radius-lg);
|
||||
background: var(--Surface-Brand-Primary-1-Default);
|
||||
}
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
.yearHeader {
|
||||
background: var(--Surface-Primary-Hover-Accent);
|
||||
padding: var(--Space-x1) var(--Space-x2);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
border-radius: var(--Corner-Radius-sm);
|
||||
}
|
||||
|
||||
.yearText {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.container {
|
||||
background-color: var(--Surface-Primary-Default);
|
||||
border: 1px solid var(--Border-Default);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
overflow: hidden;
|
||||
color: var(--Text-Default);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.container {
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
border-radius: var(--Corner-Radius-lg);
|
||||
background-color: var(--Surface-Primary-OnSurface-Default);
|
||||
padding: 0 var(--Space-x2);
|
||||
display: flex;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.list {
|
||||
height: fit-content;
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
}
|
||||
@@ -18,7 +18,7 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@media screen and (max-width: 1366px) {
|
||||
.section {
|
||||
border-radius: var(--Corner-radius-md);
|
||||
border-radius: var(--Corner-Radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
.column {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.tableWrapper {
|
||||
display: grid;
|
||||
border: 1px solid var(--Border-Default);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
border-radius: var(--Corner-Radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user