github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-09-16 02:52:31 -04:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1455 from sharelatex/jel-cms-color-block

Browse source 
Add color block feature to CMS pages

GitOrigin-RevId: 51a9828d62275308422bdb0d6e2e90cfef0a638a
This commit is contained in:
Jessica Lawshe 2019-02-14 12:07:34 -06:00 committed by sharelatex
parent cc613f4370
commit c9eab36031
2 changed files with 70 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
services/web/public/stylesheets/app/cms-page.less
View file

@ -4,6 +4,7 @@
including About and Blog
*/
.cms-page {
padding-bottom: 0;
img {
height: auto;
max-width: 100%;
@ -12,8 +13,11 @@
margin-right: @margin-sm;
}
/*
Tabs
*/
.tab-content {
float: left;
padding: 0;
width: 100%;
}
@ -41,14 +45,6 @@
}
}
/*
All content from CMS is in .row-spaced.
Margin below is to fix extra whitespace for first rows
*/
.container > .row:nth-child(2), .content-container > .row:first-child {
//- .container first child is page header, don't correct margin
margin-top: 0;
}
.tab-pane {
.row:first-child {
margin-top: 0;
@ -59,6 +55,7 @@
quotes
*/
blockquote {
margin: 0;
/*
type.less sets <p> inline, so that quotation mark is inline
but sometimes we have multiple <p>,

64
services/web/public/stylesheets/app/content_page.less
View file

@ -18,4 +18,68 @@
min-width: 80px;
overflow: hidden;
}
.page-header {
margin-top: 0;
}
/*
section
*/
section {
padding: @line-height-computed (@grid-gutter-width / 2);
&.color-block {
&.green-dark {
background-color: @ol-dark-green;
}
&.green {
background-color: @ol-green;
}
&.blue-gray-dark {
background-color: @ol-blue-gray-5;
}
&.blue-gray-light {
background-color: @ol-blue-gray-1;
}
}
.section-row {
margin: 0 auto;
/* match .col-sm-10 */
/* @grid-gutter-width is used for margins */
max-width: (@screen-sm * (10/12)) - @grid-gutter-width;
@media (min-width: @screen-md-min) {
max-width: (@screen-md * (10/12)) - @grid-gutter-width;
}
@media (min-width: @screen-lg-min) {
max-width: (@screen-lg * (10/12)) - @grid-gutter-width;
}
}
}
.content-container > section:first-child {
/* header */
padding-bottom: 0;
padding-top: 0;
}
.content-container > section:nth-child(2) {
/* first content section */
padding-top: 0;
}
section.no-top-padding {
/* opt out of padding via the CMS */
padding-top: 0;
}
.container-small {
section .section-row {
/* match col-sm-8 */
/* @grid-gutter-width is used for margins */
max-width: (@screen-sm * (8/12)) - @grid-gutter-width;
@media (min-width: @screen-md-min) {
max-width: (@screen-md * (8/12)) - @grid-gutter-width;
}
@media (min-width: @screen-lg-min) {
max-width: (@screen-lg * (8/12)) - @grid-gutter-width;
}
}
}
}