Merge pull request #21766 from overleaf/mf-checkout-main-layout-flexbox

[web] Use flex for layout of the new payment page to match figma width on the left card

GitOrigin-RevId: ca2b104ee50b7df0f352c3baaa610514e0432ffd
This commit is contained in:
M Fahru 2024-11-12 07:29:40 -07:00 committed by Copybot
parent 52eb08ae96
commit c5e1c63959

View file

@ -141,50 +141,52 @@
.payment-container {
padding-top: var(--spacing-13);
display: flex;
gap: var(--spacing-10);
justify-content: center;
.payment-row {
display: flex;
gap: var(--spacing-10);
justify-content: center;
@include media-breakpoint-down(lg) {
flex-direction: column;
align-items: center;
}
.payment-review-panel {
width: 339px;
@include media-breakpoint-down(lg) {
width: 100%;
}
h4 {
color: var(--neutral-70);
font-weight: 600;
@include heading-sm;
}
.price-feature-description {
color: var(--neutral-70);
font-weight: 400;
@include body-base;
.payment-review-panel {
h4 {
color: var(--neutral-70);
font-weight: 600;
@include heading-sm;
margin-bottom: var(--spacing-06);
}
.price-feature-description {
color: var(--neutral-70);
font-weight: 400;
@include body-base;
h4 {
margin-bottom: var(--spacing-06);
}
.features-list {
margin-top: var(--spacing-08);
}
}
hr {
.features-list {
margin-top: var(--spacing-08);
margin-bottom: var(--spacing-08);
}
}
.payment-right-section {
padding: var(--spacing-08);
hr {
margin-top: var(--spacing-08);
margin-bottom: var(--spacing-08);
}
}
@include media-breakpoint-up(md) {
.payment-review-panel {
padding: 0;
}
.payment-right-section {
padding: var(--spacing-08);
}
}