github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-01-30 20:52:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #20477 from overleaf/as-jel-cms-bs5-quotes

Browse source 
[web] Use Bootstrap 5 for CMS Quotes

GitOrigin-RevId: 9f3699cd4588412176466ebfea1ddfa160da1535
This commit is contained in:
MoxAmber 2024-09-19 14:42:44 +01:00 committed by Copybot
parent 4b281becdd
commit 2c53687ea1
2 changed files with 111 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
services/web/frontend/stylesheets/bootstrap-5/components/all.scss
View file

@ -11,6 +11,7 @@
@import 'form';
@import 'input-suggestions';
@import 'modal';
@import 'quote';
@import 'footer';
@import 'nav';
@import 'navbar';

110
services/web/frontend/stylesheets/bootstrap-5/components/quote.scss Normal file
View file

@ -0,0 +1,110 @@
blockquote {
p {
display: inline;
}
}
blockquote.quote-large-text-centered {
text-align: center;
font-size: var(--font-size-07);
font-weight: 600;
line-height: var(--line-height-06);
// customize open/close quote placement.
// Otherwise, close is after footer and before is above quote
&::before,
&::after {
content: none;
}
.quote {
margin-bottom: var(--spacing-08);
&::before {
content: open-quote;
}
&::after {
content: close-quote;
}
}
.quote-img {
img {
border-radius: 50%;
height: 64px;
max-width: 64px;
}
}
footer {
color: inherit;
font-size: var(--font-size-03);
font-weight: 400;
line-height: var(--line-height-03);
padding: var(--spacing-04) 0 0 0;
&::before {
content: none;
}
.quote-link {
text-align: center;
margin-top: var(--spacing-05);
}
}
@include media-breakpoint-down(lg) {
font-size: var(--font-size-04);
line-height: var(--line-height-04);
footer {
font-size: var(--font-size-02);
line-height: var(--line-height-02);
}
}
}
blockquote.quote-left-green-border {
border-left: 2px solid var(--green-60);
text-align: left;
font-size: var(--font-size-07);
font-weight: 600;
line-height: var(--line-height-06);
color: var(--neutral-90);
padding: var(--spacing-04) 0 var(--spacing-04) var(--spacing-06);
// customize open/close quote placement.
// Otherwise, close is after footer and before is above quote
&::before,
&::after {
content: none;
}
.quote {
&::before {
content: open-quote;
}
&::after {
content: close-quote;
}
}
footer {
@include heading-xs;
color: var(--neutral-70);
font-weight: 400;
margin: var(--spacing-09) 0 0 0;
padding: 0;
&::before {
content: '\2014 \00A0';
}
}
.quote-link {
margin-top: var(--spacing-05);
}
}