github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-10-17 21:05:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

Plans Page new design - Implement href for all of the CTA buttons for mobile screen (#19858)

Browse source 
* simplifying the logic of button rendering that matches the desktop version

* removing the plans_page_new_btn_buy_now_free mixin and adding the class .plans-cta-buttons-gap

* adding .plans-cta-buttons-gap to the desktop version

* changing table-header to mobile-card while calling the function

* adding styling into .plans-new-table-cta and removing plans-cta-buttons-gap usage from desktop version

* moving .plans-cta-buttons-gap into  .plans-card-cta-container-monthly-annual

* renaming the gap class to .plans-card-cta-buttons-container and using nth-child approach

* using the nth-child approach in .plans-new-table-cta

GitOrigin-RevId: 692814af8d8cf4dda0ea53dea9a3fe4adcf1dcd3
This commit is contained in:
Davinder Singh 2024-08-13 13:14:19 +01:00 committed by Copybot
parent 34fc43d59a
commit 3a084d9606
1 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -412,6 +412,9 @@
.plans-new-table-cta {
margin-top: auto;
a:nth-child(2) {
margin-top: var(--spacing-04);
}
}
}
@ -676,12 +679,6 @@
margin-top: var(--spacing-06);
}
.additional-link-buy-btn-container {
text-align: center;
width: 100%;
padding-top: var(--spacing-04);
}
.highlighted-plans-card {
border: 2px solid var(--green-50) !important;
}
@ -758,6 +755,15 @@
}
}
.plans-card-cta-container-monthly-annual {
margin-top: var(--spacing-08);
.plans-card-cta-buttons-container {
a:nth-child(2) {
margin-top: var(--spacing-04);
}
}
}
.group-members-picker-container-mobile {
margin-top: var(--spacing-08);
}