github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-02-05 11:30:53 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #18845 from overleaf/mf-line-height-rem

Browse source 
[web] Create a new standardized font-size and line-height and use that in new plans page

GitOrigin-RevId: 7c9c92e58e55dd03d0459f5e7314a2832bc769ce
This commit is contained in:
M Fahru 2024-06-11 09:23:59 -07:00 committed by Copybot
parent f8e899b026
commit c8e8c5213c
3 changed files with 72 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -160,9 +160,9 @@
margin-bottom: 40px;
.plans-new-period-switcher {
font-size: 20px;
font-size: var(--font-size-05);
font-weight: 600;
line-height: 1.4;
line-height: var(--line-height-04);
text-align: center;
padding: 2px 8px;
height: @switcher-height;
@ -194,7 +194,7 @@
}
.plans-new-discount-badge {
font-size: 12px;
font-size: var(--font-size-01);
font-family: 'DM Mono', monospace;
padding: 2px 8px;
height: 20px;
@ -262,7 +262,7 @@
// css specificity issue
thead tr th .plans-new-table-header-title {
@media (max-width: @screen-md-max) {
font-size: 1rem; // 16px
font-size: var(--font-size-03);
}
}
}
@ -282,9 +282,9 @@
position: relative;
.plans-new-table-header-title {
font-size: 1.25rem; // 20px
font-size: var(--font-size-05);
font-weight: 600;
line-height: 1.4;
line-height: var(--line-height-04);
margin-bottom: @spacing-04;
color: var(--neutral-90);
text-align: center;
@ -294,8 +294,8 @@
position: absolute;
top: 50px;
left: 25px;
font-size: 1.125rem; // 18px
line-height: 1.778;
font-size: var(--font-size-04);
line-height: var(--line-height-05);
color: var(--neutral-40);
font-weight: 600;
@ -315,9 +315,9 @@
}
.plans-new-table-header-price {
font-size: 2.25rem; // 36px`
font-size: var(--font-size-08);
font-weight: 600;
line-height: 1.333;
line-height: var(--line-height-07);
color: var(--neutral-90);
}
@ -329,20 +329,20 @@
}
.plans-new-table-header-price-unit {
font-size: 0.875rem; // 14px
line-height: 1.428;
font-size: var(--font-size-02);
line-height: var(--line-height-02);
}
.plans-new-table-header-price-unit-total {
font-size: 0.75rem; // 12px
line-height: 1.333;
font-size: var(--font-size-01);
line-height: var(--line-height-01);
}
.plans-new-table-header-desc {
margin-top: @spacing-05;
margin-bottom: @spacing-08;
font-size: 0.875rem; // 14px
line-height: 1.428;
font-size: var(--font-size-02);
line-height: var(--line-height-02);
}
.plans-new-table-button {

27
services/web/frontend/stylesheets/variables/all.less
View file

@ -135,6 +135,33 @@
@spacing-15: 80px;
@spacing-16: 96px;
@font-size-01: 0.75rem; // 12px
@font-size-02: 0.875rem; // 14px
@font-size-03: 1rem; // 16px
@font-size-04: 1.125rem; // 18px
@font-size-05: 1.25rem; // 20px
@font-size-06: 1.5rem; // 24px
@font-size-07: 1.875rem; // 30px
@font-size-08: 2.25rem; // 36px
@font-size-09: 3rem; // 48px
@font-size-10: 3.25rem; // 52px
@font-size-11: 3.75rem; // 60px
@font-size-12: 4.5rem; // 72px
@font-size-13: 6rem; // 96px
@line-height-01: 1rem; // 16px
@line-height-02: 1.25rem; // 20px
@line-height-03: 1.5rem; // 24px
@line-height-04: 1.75rem; // 28px
@line-height-05: 2rem; // 32px
@line-height-06: 2.5rem; // 40px
@line-height-07: 3rem; // 48px
@line-height-08: 4rem; // 64px
@line-height-09: 4.25rem; // 68px
@line-height-10: 5rem; // 80px
@line-height-11: 6rem; // 96px
@line-height-12: 8rem; // 128px
//** Horizontal line color.
@hr-border: @neutral-20;

29
services/web/frontend/stylesheets/variables/css-variables.less
View file

@ -113,4 +113,33 @@
// layout
--header-height: @header-height;
// font-size
--font-size-01: @font-size-01;
--font-size-02: @font-size-02;
--font-size-03: @font-size-03;
--font-size-04: @font-size-04;
--font-size-05: @font-size-05;
--font-size-06: @font-size-06;
--font-size-07: @font-size-07;
--font-size-08: @font-size-08;
--font-size-09: @font-size-09;
--font-size-10: @font-size-10;
--font-size-11: @font-size-11;
--font-size-12: @font-size-12;
--font-size-13: @font-size-13;
// line-height
--line-height-01: @line-height-01;
--line-height-02: @line-height-02;
--line-height-03: @line-height-03;
--line-height-04: @line-height-04;
--line-height-05: @line-height-05;
--line-height-06: @line-height-06;
--line-height-07: @line-height-07;
--line-height-08: @line-height-08;
--line-height-09: @line-height-09;
--line-height-10: @line-height-10;
--line-height-11: @line-height-11;
--line-height-12: @line-height-12;
}