github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-14 20:40:17 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
[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
1 changed files with 34 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
services/web/frontend/stylesheets/bootstrap-5/pages/subscription.scss
View file

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