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 #16797 from overleaf/mf-fix-premium-label-not-inline

Browse source 
[website-redesign] Make the premium label inline to fix styling for the very small screen.

GitOrigin-RevId: 71246b2ea11cf6f6369185d798f89e7bf8b757ff
This commit is contained in:
M Fahru 2024-02-08 07:03:27 -07:00 committed by Copybot
parent ef0e1cff8d
commit 25d3d3c972
1 changed files with 34 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
services/web/frontend/stylesheets/app/website-redesign.less
View file

@ -265,41 +265,6 @@
margin-top: 4px; margin-top: 4px;
display: block; display: block;
} }
ul {
list-style-type: none;
padding: 0;
margin: 0;
li {
margin-bottom: 12px;
font-size: 1.125rem;
line-height: 1.333;
// flex is needed in the case of "premium" label being on the same line
display: flex;
@media (max-width: @screen-sm-max) {
font-size: 1rem;
line-height: 1.375;
// only for label-premium that appears directly as a child of li
> .label-premium {
align-self: center;
}
}
h4 {
margin-top: 0;
margin-bottom: 8px;
font-size: 20px;
font-weight: 600;
}
p {
margin-bottom: 0;
}
}
}
} }
.features-card-description { .features-card-description {
@ -315,6 +280,40 @@
font-size: 1.875rem; font-size: 1.875rem;
line-height: 1.5; line-height: 1.5;
} }
ul.list-simple-text,
ul.list-heading-text {
list-style-type: none;
padding: 0;
margin: 0;
li {
margin-bottom: 12px;
font-size: 1.125rem;
line-height: 1.333;
display: flex;
.label-premium {
margin-left: 0;
}
@media (max-width: @screen-sm-max) {
font-size: 1rem;
line-height: 1.375;
}
}
}
ul.list-heading-text {
li {
h4 {
margin-top: 0;
margin-bottom: 8px;
font-size: 20px;
font-weight: 600;
}
}
}
} }
} }
@ -861,20 +860,6 @@
max-width: 64px; max-width: 64px;
} }
.premium-badge {
.premium-badge-img {
margin-left: 10px;
}
@media (max-width: @screen-xs-max) {
display: flex;
.premium-badge-img {
width: 87px;
margin-left: auto;
}
}
}
.responsive-button-container { .responsive-button-container {
display: flex; display: flex;
margin-top: 24px; margin-top: 24px;