chore: Replaced deprecated Spacing variables with current values
Approved-by: Matilda Landström
This commit is contained in:
@@ -1,20 +1,20 @@
|
||||
.container {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.bookingCode {
|
||||
height: 60px;
|
||||
background-color: var(--Background-Primary);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
padding: var(--Spacing-x1) var(--Space-x15);
|
||||
padding: var(--Space-x1) var(--Space-x15);
|
||||
}
|
||||
|
||||
.bookingCodeLabel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
position: relative;
|
||||
color: var(--Text-Secondary);
|
||||
}
|
||||
@@ -39,7 +39,7 @@
|
||||
.bookingCodeRemember,
|
||||
.bookingCodeRememberVisible {
|
||||
display: none;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.bookingCodeRememberVisible {
|
||||
@@ -49,7 +49,7 @@
|
||||
|
||||
.bookingCodeTooltip {
|
||||
max-width: 560px;
|
||||
margin-top: var(--Spacing-x2);
|
||||
margin-top: var(--Space-x2);
|
||||
color: var(--Text-Secondary);
|
||||
}
|
||||
|
||||
@@ -94,12 +94,12 @@
|
||||
background: var(--Base-Surface-Primary-light-Normal);
|
||||
border-radius: var(--Space-x15);
|
||||
box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
|
||||
padding: var(--Spacing-x2);
|
||||
padding: var(--Space-x2);
|
||||
width: 320px;
|
||||
}
|
||||
.popover {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
.overlayTrigger {
|
||||
position: absolute;
|
||||
@@ -107,7 +107,7 @@
|
||||
bottom: 0;
|
||||
display: block;
|
||||
left: 0;
|
||||
right: var(--Spacing-x3);
|
||||
right: var(--Space-x3);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -124,10 +124,10 @@
|
||||
border: 1px solid var(--Border-Interactive-Focus);
|
||||
}
|
||||
.bookingCodeRememberVisible {
|
||||
padding: var(--Spacing-x2);
|
||||
padding: var(--Space-x2);
|
||||
position: absolute;
|
||||
top: calc(100% + var(--Spacing-x3));
|
||||
left: calc(0% - var(--Spacing-x-half));
|
||||
top: calc(100% + var(--Space-x3));
|
||||
left: calc(0% - var(--Space-x05));
|
||||
width: 360px;
|
||||
box-shadow: var(--popup-box-shadow);
|
||||
}
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
|
||||
.rewardNightTooltip {
|
||||
max-width: 560px;
|
||||
margin-top: var(--Spacing-x2);
|
||||
margin-top: var(--Space-x2);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
border-radius: var(--Corner-radius-md);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
outline: none;
|
||||
padding: var(--Spacing-x1);
|
||||
padding: var(--Space-x1);
|
||||
}
|
||||
|
||||
.default {
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
left: 0;
|
||||
list-style: none;
|
||||
overflow-y: auto;
|
||||
padding: var(--Spacing-x2) var(--Spacing-x3);
|
||||
padding: var(--Space-x2) var(--Space-x3);
|
||||
position: fixed;
|
||||
top: calc(140px + max(var(--sitewide-alert-sticky-height), 25px));
|
||||
width: 100%;
|
||||
@@ -16,15 +16,15 @@
|
||||
}
|
||||
|
||||
.default {
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.error {
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
}
|
||||
|
||||
.search {
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@@ -32,11 +32,11 @@
|
||||
position: absolute;
|
||||
width: 360px;
|
||||
/**
|
||||
* var(--Spacing-x4) to account for padding inside
|
||||
* var(--Space-x4) to account for padding inside
|
||||
* the bookingwidget and to add the padding for the
|
||||
* box itself
|
||||
*/
|
||||
top: calc(100% + var(--Spacing-x4));
|
||||
top: calc(100% + var(--Space-x4));
|
||||
z-index: 99;
|
||||
box-shadow: var(--popup-box-shadow);
|
||||
max-height: 380px;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.listItem {
|
||||
border-radius: var(--Corner-radius-md);
|
||||
cursor: pointer;
|
||||
padding: var(--Spacing-x1);
|
||||
padding: var(--Space-x1);
|
||||
}
|
||||
|
||||
.default {
|
||||
|
||||
@@ -5,5 +5,5 @@
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 0 var(--Spacing-x1);
|
||||
padding: 0 var(--Space-x1);
|
||||
}
|
||||
|
||||
@@ -17,19 +17,19 @@
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: var(--Spacing-x2) var(--Spacing-x0) var(--Spacing-x1);
|
||||
margin: var(--Space-x2) 0 var(--Space-x1);
|
||||
}
|
||||
|
||||
.noResultsDivider {
|
||||
margin: var(--Spacing-x2) 0;
|
||||
margin: var(--Space-x2) 0;
|
||||
}
|
||||
|
||||
.heading {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 0 var(--Spacing-x1);
|
||||
padding: 0 var(--Space-x1);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: var(--Corner-radius-md);
|
||||
padding: var(--Spacing-x1) var(--Space-x15);
|
||||
padding: var(--Space-x1) var(--Space-x15);
|
||||
position: relative;
|
||||
height: 60px;
|
||||
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
|
||||
.option {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x2);
|
||||
margin-top: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
margin-top: var(--Space-x2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
.voucherSkeletonContainer {
|
||||
padding: var(--Spacing-x1) var(--Space-x15);
|
||||
padding: var(--Space-x1) var(--Space-x15);
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
@@ -32,7 +32,7 @@
|
||||
@media screen and (min-width: 768px) {
|
||||
.options {
|
||||
flex-direction: row;
|
||||
gap: var(--Spacing-x4);
|
||||
gap: var(--Space-x4);
|
||||
}
|
||||
.option {
|
||||
margin-top: 0;
|
||||
@@ -41,7 +41,7 @@
|
||||
.optionsContainer {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
column-gap: var(--Spacing-x2);
|
||||
column-gap: var(--Space-x2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
.options {
|
||||
flex-direction: column;
|
||||
max-width: 190px;
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
}
|
||||
.option:hover {
|
||||
cursor: not-allowed;
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
.buttonContainer {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.showOnTablet {
|
||||
@@ -36,14 +36,14 @@
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.voucherContainer {
|
||||
padding: var(--Spacing-x2) 0 var(--Spacing-x4);
|
||||
padding: var(--Space-x2) 0 var(--Space-x4);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1366px) {
|
||||
.inputContainer {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.rooms,
|
||||
@@ -55,7 +55,7 @@
|
||||
|
||||
.rooms,
|
||||
.when {
|
||||
padding: var(--Spacing-x1) var(--Space-x15);
|
||||
padding: var(--Space-x1) var(--Space-x15);
|
||||
}
|
||||
|
||||
.button {
|
||||
@@ -86,7 +86,7 @@
|
||||
.inputContainer {
|
||||
display: flex;
|
||||
flex: 2;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
margin-left: calc(-1 * var(--Space-x15));
|
||||
}
|
||||
.voucherContainer {
|
||||
@@ -106,7 +106,7 @@
|
||||
|
||||
.rooms,
|
||||
.when {
|
||||
padding: var(--Spacing-x1) var(--Space-x15);
|
||||
padding: var(--Space-x1) var(--Space-x15);
|
||||
border-radius: var(--Corner-radius-md);
|
||||
}
|
||||
|
||||
@@ -147,7 +147,7 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.inputContainer {
|
||||
padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x2)
|
||||
padding: var(--Space-x2) var(--Space-x2) var(--Space-x2)
|
||||
var(--Layout-Tablet-Margin-Margin-min);
|
||||
flex-basis: 80%;
|
||||
}
|
||||
@@ -156,7 +156,7 @@
|
||||
margin: 0;
|
||||
}
|
||||
.input .buttonContainer .button {
|
||||
padding: var(--Spacing-x1);
|
||||
padding: var(--Space-x1);
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
@@ -171,7 +171,7 @@
|
||||
display: flex;
|
||||
background: var(--Base-Surface-Primary-light-Hover);
|
||||
border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
|
||||
padding: var(--Spacing-x2) var(--Layout-Tablet-Margin-Margin-min);
|
||||
padding: var(--Space-x2) var(--Layout-Tablet-Margin-Margin-min);
|
||||
}
|
||||
|
||||
.showOnTablet {
|
||||
@@ -184,7 +184,7 @@
|
||||
|
||||
@media screen and (min-width: 1367px) {
|
||||
.input {
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.bookingCodeDisabled {
|
||||
|
||||
Reference in New Issue
Block a user