chore: Replaced deprecated Spacing variables with current values
Approved-by: Matilda Landström
This commit is contained in:
@@ -1,12 +1,12 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
|
||||
width: min(696px, 100%);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
||||
width: min(696px, 100%);
|
||||
}
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
|
||||
overflow: hidden;
|
||||
padding: var(--Spacing-x5) var(--Spacing-x3);
|
||||
padding: var(--Space-x5) var(--Space-x3);
|
||||
width: min(90dvw, 560px);
|
||||
|
||||
&[data-entering] {
|
||||
@@ -82,7 +82,7 @@
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.text {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
.selections {
|
||||
@@ -9,13 +9,13 @@
|
||||
border-radius: var(--Corner-radius-Large);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
padding: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
padding: var(--Space-x2);
|
||||
}
|
||||
|
||||
.checkboxContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
width: min(800px, 100%);
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
.modalContent {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.innerModalContent {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
.newPrice {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
.form {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
width: min(100%, 696px);
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: var(--Spacing-x1);
|
||||
margin-top: var(--Space-x1);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
.container {
|
||||
display: grid;
|
||||
grid-column: 1/-1;
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
.additionalFormData {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x4);
|
||||
gap: var(--Space-x4);
|
||||
}
|
||||
|
||||
.dateField {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.required:after {
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
.form {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
width: min(100%, 696px);
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: var(--Spacing-x1);
|
||||
margin-top: var(--Space-x1);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
.wrapper {
|
||||
margin-top: var(--Spacing-x3);
|
||||
margin-top: var(--Space-x3);
|
||||
max-width: min(100%, 620px);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x1);
|
||||
padding-top: var(--Spacing-x2);
|
||||
gap: var(--Space-x1);
|
||||
padding-top: var(--Space-x2);
|
||||
}
|
||||
|
||||
.content ol {
|
||||
@@ -13,7 +13,7 @@
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
}
|
||||
|
||||
.summary::-webkit-details-marker,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.container {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.card {
|
||||
@@ -27,7 +27,7 @@
|
||||
|
||||
.priceItem {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.priceItem > span {
|
||||
|
||||
@@ -4,12 +4,12 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: var(--Spacing-x2);
|
||||
padding: var(--Space-x2);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container .heading {
|
||||
margin-bottom: var(--Spacing-x1);
|
||||
margin-bottom: var(--Space-x1);
|
||||
}
|
||||
|
||||
.messageContainer {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.paymentSection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x4);
|
||||
gap: var(--Space-x4);
|
||||
}
|
||||
|
||||
.disabled {
|
||||
@@ -12,14 +12,14 @@
|
||||
.paymentContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x4);
|
||||
gap: var(--Space-x4);
|
||||
max-width: 696px;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.paymentOptionContainer {
|
||||
@@ -46,7 +46,7 @@
|
||||
.checkboxContainer {
|
||||
background-color: var(--Surface-Secondary-Default);
|
||||
border-radius: var(--Corner-radius-Large);
|
||||
padding: var(--Spacing-x2);
|
||||
padding: var(--Space-x2);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1367px) {
|
||||
|
||||
@@ -20,16 +20,16 @@
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: var(--Spacing-x4);
|
||||
padding: var(--Space-x4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x4);
|
||||
gap: var(--Space-x4);
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
position: absolute;
|
||||
top: var(--Spacing-x4);
|
||||
right: var(--Spacing-x4);
|
||||
top: var(--Space-x4);
|
||||
right: var(--Space-x4);
|
||||
}
|
||||
|
||||
.roomsSection {
|
||||
@@ -39,10 +39,10 @@
|
||||
}
|
||||
|
||||
.rowContainer {
|
||||
padding: var(--Spacing-x2) 0;
|
||||
padding: var(--Space-x2) 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.roomContainer:first-child {
|
||||
@@ -61,21 +61,21 @@
|
||||
.updatedPrice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center;
|
||||
gap: var(--Spacing-x2);
|
||||
padding-top: var(--Spacing-x6);
|
||||
gap: var(--Space-x2);
|
||||
padding-top: var(--Space-x6);
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1367px) {
|
||||
.dialog {
|
||||
padding: var(--Spacing-x6);
|
||||
padding: var(--Space-x6);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -91,6 +91,6 @@
|
||||
|
||||
.footer {
|
||||
flex-direction: row;
|
||||
padding: var(--Spacing-x6) 0;
|
||||
padding: var(--Space-x6) 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -58,37 +58,37 @@
|
||||
box-shadow: var(--modal-box-shadow);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x4);
|
||||
padding: var(--Spacing-x5) var(--Spacing-x4);
|
||||
gap: var(--Space-x4);
|
||||
padding: var(--Space-x5) var(--Space-x4);
|
||||
width: 100dvw;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.titleContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
}
|
||||
|
||||
.modal .prices {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--Spacing-x-half);
|
||||
padding-top: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
padding-top: var(--Space-x05);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1367px) {
|
||||
@@ -98,7 +98,7 @@
|
||||
|
||||
.dialog {
|
||||
border-radius: var(--Corner-radius-md);
|
||||
padding: var(--Spacing-x6);
|
||||
padding: var(--Space-x6);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.header {
|
||||
padding-bottom: var(--Spacing-x3);
|
||||
padding-bottom: var(--Space-x3);
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
}
|
||||
|
||||
.contentWrapper {
|
||||
padding-bottom: var(--Spacing-x3);
|
||||
padding-bottom: var(--Space-x3);
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
.main {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
|
||||
padding-bottom: var(--Spacing-x3);
|
||||
padding-bottom: var(--Space-x3);
|
||||
}
|
||||
|
||||
.headerContainer {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.entry {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user