mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-14 20:40:17 -05:00
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:
parent
52eb08ae96
commit
c5e1c63959
1 changed files with 34 additions and 32 deletions
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue