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

Merge pull request #18862 from overleaf/mf-simplify-non-discounted-text-new-plans-page

Browse source 
[web] Improve the structure of the price elements on the new plans table by using grid display

GitOrigin-RevId: 08052aec5037432af7ad4d4c554e529582d4acfc
This commit is contained in:
M Fahru 2024-06-13 08:17:58 -07:00 committed by Copybot
parent d80046c757
commit 65592194ec
1 changed files with 48 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
services/web/frontend/stylesheets/app/plans/plans-new-design.less
View file

@ -287,7 +287,7 @@
} }
.plans-new-table-group { .plans-new-table-group {
.plans-new-table-header-price-container { .plans-new-table-header-grid-container {
min-height: 85px; min-height: 85px;
} }
@ -322,52 +322,62 @@
text-align: center; text-align: center;
} }
.plans-new-table-header-nondiscounted-price { .plans-new-table-header-grid-container {
position: absolute; display: grid;
top: 50px; grid-column-gap: var(--spacing-04);
left: 25px; // priceUnitTotal is an optional row
font-size: var(--font-size-04); grid-template:
line-height: var(--line-height-05); 'nonDiscountedPrice price .' 2fr
color: var(--neutral-40); 'priceUnit priceUnit priceUnit' 1fr
font-weight: 600; 'priceUnitTotal priceUnitTotal priceUnitTotal' auto / 1fr 1fr 1fr;
@media (max-width: @screen-md-max) { .plans-new-table-header-price {
left: 0; grid-area: price;
justify-self: center;
font-size: var(--font-size-08);
font-weight: 600;
line-height: var(--line-height-07);
color: var(--neutral-90);
} }
@media (max-width: @screen-sm-max) { .plans-new-table-header-price-unit {
left: -22px; grid-area: priceUnit;
justify-self: center;
font-size: var(--font-size-02);
line-height: var(--line-height-02);
} }
}
.plans-new-table-header-price-container { .plans-new-table-header-price-unit-total {
display: flex; grid-area: priceUnitTotal;
flex-direction: column; justify-self: center;
align-items: center;
}
.plans-new-table-header-price { font-size: var(--font-size-01);
font-size: var(--font-size-08); line-height: var(--line-height-01);
font-weight: 600; }
line-height: var(--line-height-07);
color: var(--neutral-90);
}
.plans-new-table-header-icon { .plans-new-table-header-nondiscounted-price {
margin-top: @spacing-02; grid-area: nonDiscountedPrice;
font-size: 56px; justify-self: end;
align-self: center; align-self: end;
color: var(--neutral-90);
}
.plans-new-table-header-price-unit { font-size: var(--font-size-04);
font-size: var(--font-size-02); line-height: var(--line-height-05);
line-height: var(--line-height-02); color: var(--neutral-40);
} font-weight: 600;
}
.plans-new-table-header-price-unit-total { .plans-new-table-header-icon {
font-size: var(--font-size-01); // this element should only be placed in the grid
line-height: var(--line-height-01); // where it's the only element in the grid
// the grid-area below will make sure that it covers the whole grid
grid-area: ~'span 2 / span 3';
justify-self: center;
font-size: 56px;
color: var(--neutral-90);
}
} }
.plans-new-table-header-desc { .plans-new-table-header-desc {