chore: Replaced deprecated Spacing variables with current values
Approved-by: Matilda Landström
This commit is contained in:
@@ -1,11 +1,11 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin-top: var(--Spacing-x2);
|
||||
margin-top: var(--Space-x2);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
display: none;
|
||||
@@ -16,7 +16,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
align-items: flex-end;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
@@ -28,8 +28,8 @@
|
||||
.matchedAccountSection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x3);
|
||||
padding: var(--Spacing-x4) var(--Space-x15);
|
||||
gap: var(--Space-x3);
|
||||
padding: var(--Space-x4) var(--Space-x15);
|
||||
width: 100%;
|
||||
background-color: var(--Surface-Primary-On-Surface-Default);
|
||||
border: 1px solid var(--Border-Default);
|
||||
@@ -39,7 +39,7 @@
|
||||
0px 4px 4px 0px rgba(255, 255, 255, 0.29) inset;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
padding: var(--Spacing-x4) var(--Spacing-x3);
|
||||
padding: var(--Space-x4) var(--Space-x3);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -47,10 +47,10 @@
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
gap: var(--Spacing-x7);
|
||||
gap: var(--Space-x7);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -63,12 +63,12 @@
|
||||
.tierMatchStatus {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
gap: var(--Space-x2);
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
border: 1px solid var(--Border-Divider-Accent);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
padding: var(--Spacing-x2);
|
||||
padding: var(--Space-x2);
|
||||
background:
|
||||
linear-gradient(
|
||||
0deg,
|
||||
@@ -83,7 +83,7 @@
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -94,13 +94,13 @@
|
||||
.stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
}
|
||||
|
||||
.caption {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
color: var(--Text-Tertiary);
|
||||
align-self: flex-start;
|
||||
}
|
||||
@@ -116,7 +116,7 @@
|
||||
.tierMatchText {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x1);
|
||||
gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.label {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
.card {
|
||||
@@ -10,12 +10,12 @@
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x3);
|
||||
padding: var(--Spacing-x3) var(--Spacing-x9);
|
||||
gap: var(--Space-x3);
|
||||
padding: var(--Space-x3) var(--Space-x9);
|
||||
background-color: var(--Background-Secondary);
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
|
||||
margin-top: var(--Spacing-x9);
|
||||
margin-top: var(--Space-x9);
|
||||
}
|
||||
|
||||
.highFive {
|
||||
@@ -37,9 +37,9 @@
|
||||
.labelWithIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
color: var(--Text-Tertiary);
|
||||
margin-bottom: var(--Spacing-x-half);
|
||||
margin-bottom: var(--Space-x05);
|
||||
}
|
||||
|
||||
.transferContainer {
|
||||
@@ -69,15 +69,15 @@
|
||||
|
||||
.balanceLabel {
|
||||
color: var(--Text-Tertiary);
|
||||
margin-top: var(--Spacing-x3);
|
||||
margin-top: var(--Space-x3);
|
||||
}
|
||||
|
||||
.formWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
width: 100%;
|
||||
padding: var(--Spacing-x4);
|
||||
padding: var(--Space-x4);
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -122,7 +122,7 @@
|
||||
transform: translateX(-50%) translateY(4px);
|
||||
background-color: var(--Surface-Brand-Primary-1-OnSurface-Default);
|
||||
color: var(--Text-Brand-OnPrimary-2-Accent);
|
||||
padding: var(--Spacing-x-half) var(--Spacing-x1);
|
||||
padding: var(--Space-x05) var(--Space-x1);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
opacity: 0;
|
||||
transition:
|
||||
@@ -204,8 +204,8 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: var(--Spacing-x3);
|
||||
padding-inline: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
padding-inline: var(--Space-x3);
|
||||
}
|
||||
|
||||
.expiryText {
|
||||
@@ -214,15 +214,15 @@
|
||||
|
||||
.divider {
|
||||
background-color: var(--Border-Divider-Subtle);
|
||||
width: calc(100% + var(--Spacing-x6) + var(--Spacing-x6));
|
||||
width: calc(100% + var(--Space-x6) + var(--Space-x6));
|
||||
height: 1px;
|
||||
margin-inline: calc(var(--Spacing-x6) * -1);
|
||||
margin-inline: calc(var(--Space-x6) * -1);
|
||||
}
|
||||
|
||||
.buttonContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x3);
|
||||
gap: var(--Space-x3);
|
||||
}
|
||||
|
||||
.pointsOutput {
|
||||
@@ -230,16 +230,16 @@
|
||||
background-color: var(--Surface-Primary-Disabled);
|
||||
height: 100%;
|
||||
color: var(--Text-Tertiary);
|
||||
padding: var(--Spacing-x1) var(--Spacing-x2);
|
||||
padding: var(--Space-x1) var(--Space-x2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x-half);
|
||||
gap: var(--Space-x05);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.card {
|
||||
padding: var(--Spacing-x3);
|
||||
padding-top: var(--Spacing-x6);
|
||||
padding: var(--Space-x3);
|
||||
padding-top: var(--Space-x6);
|
||||
}
|
||||
|
||||
.highFive {
|
||||
@@ -249,7 +249,7 @@
|
||||
|
||||
.transferContainer {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--Spacing-x4);
|
||||
gap: var(--Space-x4);
|
||||
}
|
||||
.transferFrom {
|
||||
flex-direction: row;
|
||||
@@ -278,7 +278,7 @@
|
||||
|
||||
.inputsWrapper {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
column-gap: var(--Spacing-x1);
|
||||
column-gap: var(--Space-x1);
|
||||
}
|
||||
|
||||
.conversionRate {
|
||||
@@ -292,6 +292,6 @@
|
||||
}
|
||||
|
||||
.modalContainer {
|
||||
padding-inline: var(--Spacing-x2);
|
||||
padding-inline: var(--Space-x2);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user