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

Merge pull request #20485 from overleaf/jel-cms-bs5-mobile-breakpoint

Browse source 
[web] Update mobile breakpoint for CMS pages using BS5

GitOrigin-RevId: b855faf378b03788caff8574747d88b96706de2a
This commit is contained in:
MoxAmber 2024-09-19 14:41:28 +01:00 committed by Copybot
parent d9e5411ef3
commit 68eaec6d8e
1 changed files with 35 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
View file

@ -78,15 +78,6 @@
max-width: 1440px;
}
// TODO: update if mobile breakpoint changes
@include media-breakpoint-down(md) {
div[class*='col-'] {
&:not(:first-child) {
padding-top: var(--spacing-13);
}
}
}
padding-bottom: 0;
img {
@ -359,18 +350,6 @@
bottom: 1px;
}
// `Layout | Grid` display options
.row-equal-column-heights {
@include media-breakpoint-down(md) {
div[class*='col-'] {
.card,
.no-card {
height: 100%;
}
}
}
}
.vertically-center-col {
// remove margin to better vertically align
// some elements need to be nested within a container, and others are directly within .no-card/.card
@ -399,20 +378,6 @@
margin-bottom: 0;
}
}
@include media-breakpoint-up(md) {
display: flex;
div[class*='col-'] {
align-self: center;
}
}
}
.reverse-col-order-mobile {
@include media-breakpoint-down(md) {
flex-direction: column-reverse;
}
}
.row-within-card {
@ -471,7 +436,41 @@
padding-bottom: var(--spacing-11);
}
@include media-breakpoint-up(md) {
// Desktop layout options depdendent on mobile breakpoint
@include media-breakpoint-up(lg) {
.row-equal-column-heights {
div[class*='col-'] {
.card,
.no-card {
height: 100%;
}
}
}
.vertically-center-col {
div[class*='col-'] {
align-self: center;
}
}
}
// Mobile layout options depdendent on mobile breakpoint
@include media-breakpoint-down(lg) {
.cms-page {
div[class*='col-'] {
&:not(:first-child) {
padding-top: var(--spacing-13);
}
}
.reverse-col-order-mobile {
flex-direction: column-reverse;
}
}
}
// TODO: will be deprecated and gap option used instead
@include media-breakpoint-up(lg) {
.desktop-left-margin-sm {
margin-left: var(--spacing-05);
}