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 #19094 from overleaf/ds-plans-page-new-design-plans-config-2

Browse source 
Website redesign - Displaying information on the plan cards via config object mobile version

GitOrigin-RevId: fca965b3fd7f35a90c9562b60a0b265667ea080e
This commit is contained in:
Davinder Singh 2024-07-10 09:44:03 +01:00 committed by Copybot
parent 920b35c6fa
commit f201e795c4
1 changed files with 31 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -318,7 +318,7 @@
padding: @spacing-06 @spacing-08;
@media (max-width: @screen-md-max) {
padding: @spacing-05;
padding: var(--spacing-05);
}
}
@ -331,7 +331,7 @@
font-size: var(--font-size-05);
font-weight: 600;
line-height: var(--line-height-04);
margin-bottom: @spacing-04;
margin-bottom: var(--spacing-04);
color: var(--neutral-90);
text-align: center;
}
@ -395,8 +395,8 @@
}
.plans-new-table-header-desc {
margin-top: @spacing-05;
margin-bottom: @spacing-08;
margin-top: var(--spacing-05);
margin-bottom: var(--spacing-08);
font-size: var(--font-size-02);
line-height: var(--line-height-02);
}
@ -440,7 +440,7 @@
background-color: var(--neutral-10);
}
&:nth-child(even):not(.plans-new-table-heading-row) {
background-color: white;
background-color: var(--white);
}
}
@ -499,7 +499,7 @@
text-align: center;
line-height: @highlighted-heading-line-height;
background-color: var(--green-50);
color: white;
color: var(--white);
}
.plans-new-table-highlighted-cell {
@ -530,62 +530,60 @@
}
}
// ------------------------------------------------------------------
// ------------------------------------------------------------------
// These comments will be deleted when the cards section is completed for mobile screens.
// Below is the styling for plans cards on mobile screen
.plans-card-container-mobile {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--spacing-06);
.mt-spacing-06 {
margin-top: @spacing-06;
margin-top: var(--spacing-06);
}
.highlighted-plans-card {
border: 2px solid @green-50 !important;
border: 2px solid var(--green-50) !important;
}
.plans-card-mobile {
padding: @spacing-09;
border: 2px solid @neutral-20;
padding: var(--spacing-09);
border: 2px solid var(--neutral-20);
width: 100%; // might need max-width
border-radius: 8px;
display: flex;
flex-direction: column;
.plans-card-title-mobile {
color: @neutral-90;
font-size: @font-size-05; // 20px
color: var(--neutral-90);
font-size: var(--font-size-05); // 20px
font-weight: 600;
line-height: @line-height-04;
line-height: var(--line-height-04);
}
.old-price-plans-card-mobile {
padding: @spacing-04 0 0 0;
color: @neutral-40;
font-size: @font-size-04; // 18px
padding: var(--spacing-04) 0 0 0;
color: var(--neutral-40);
font-size: var(--font-size-04); // 18px
font-weight: 600;
line-height: @line-height-05;
margin-bottom: -@spacing-04;
line-height: var(--line-height-05);
margin-bottom: var(--spacing-04);
}
.plans-card-price-container-mobile {
display: flex;
align-items: baseline;
.plans-card-price-mobile {
color: @neutral-90;
font-size: @font-size-08; // 36px
color: var(--neutral-90);
font-size: var(--font-size-08); // 36px
font-weight: 600;
line-height: @line-height-07;
margin-right: @spacing-03;
line-height: var(--line-height-07);
margin-right: var(--spacing-03);
}
}
.light-gray-text {
color: @neutral-70;
font-size: @font-size-02; // 14px
line-height: @line-height-02;
color: var(--neutral-70);
font-size: var(--font-size-02); // 14px
line-height: var(--line-height-02);
}
.plans-card-description-mobile {
@ -600,20 +598,18 @@
margin-bottom: unset;
li {
display: flex;
margin-top: @spacing-05;
margin-top: var(--spacing-05);
}
}
.plans-card-cta-buy-now-mobile {
width: 100%;
margin-top: @spacing-08;
line-height: @line-height-03;
margin-top: var(--spacing-08);
line-height: var(--line-height-03);
}
}
}
}
// ------------------------------------------------------------------
// ------------------------------------------------------------------
}
.plans-faq {