Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

portico: Move `code-section` rules to `markdown.scss`. 

`code-section` is a feature of the markdown system, therefore the
associated CSS should be in the `markdown.scss` file. I also refactored
to use SCSS nesting.
This commit is contained in:
Alexandra Ciobica 2019-07-22 23:50:15 +03:00 committed by Tim Abbott
parent 8fef764960
commit 999209020f
2 changed files with 58 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
static/styles/portico/markdown.scss
View File

@ -5,12 +5,7 @@
overflow: auto;
-webkit-font-smoothing: antialiased;
.code-section {
ol {
margin-left: 15px;
margin-top: 10px;
}
}
h1[id],
h2[id],
@ -138,6 +133,10 @@
margin-left: 5px;
}
.codehilite {
background-color: hsl(0, 0%, 100%);
}
& > ul {
padding-left: 20px;
}
@ -298,8 +297,58 @@
background-color: hsl(106, 74%, 44%);
}
}
}
li div.codehilite {
background-color: hsl(0, 0%, 100%);
.code-section {
ol {
margin-left: 15px;
margin-top: 10px;
}
ul.nav {
margin: 0;
li {
display: inline-block;
padding: 5px 14px;
margin: 0;
cursor: pointer;
&.active {
color: hsl(176, 46%, 41%);
margin-bottom: -1px;
border: 1px solid hsl(0, 0%, 87%);
border-bottom: 1px solid hsl(0, 0%, 100%);
border-radius: 4px 4px 0px 0px;
}
}
}
&.no-tabs ul.nav {
display: none;
}
.blocks {
padding: 10px;
margin-bottom: 10px;
border: 1px solid hsl(0, 0%, 87%);
& > div {
display: none;
}
}
&.has-tabs .blocks {
border-radius: 0px 6px 6px 6px;
}
&.no-tabs .blocks {
border-radius: 6px;
}
&.no-tabs .blocks > div,
&.has-tabs .blocks > .active {
display: block;
}
}
}

48
static/styles/portico/portico.scss
View File

@ -87,45 +87,6 @@ body {
-moz-osx-font-smoothing: grayscale;
}
.code-section ul.nav {
margin: 0;
}
.code-section ul.nav li {
display: inline-block;
padding: 5px 14px;
margin: 0;
cursor: pointer;
}
.code-section ul.nav li.active {
color: hsl(176, 46%, 41%);
margin-bottom: -1px;
border: 1px solid hsl(0, 0%, 87%);
border-bottom: 1px solid hsl(0, 0%, 100%);
border-radius: 4px 4px 0px 0px;
}
.code-section.no-tabs ul.nav {
display: none;
}
.code-section .blocks {
padding: 10px;
margin-bottom: 10px;
border: 1px solid hsl(0, 0%, 87%);
}
.code-section.has-tabs .blocks {
border-radius: 0px 6px 6px 6px;
}
.code-section.no-tabs .blocks {
border-radius: 6px;
}
/* The API tabbed content tends to have a lot of code blocks,
which look nicer against a different background */
.api-center .code-section .blocks {
@ -143,15 +104,6 @@ body {
max-width: 500px;
}
.code-section .blocks > div {
display: none;
}
.code-section.no-tabs .blocks > div,
.code-section.has-tabs .blocks > .active {
display: block;
}
.digest-container {
padding-top: 100px;
}