Commit 6ce05643 authored by Douwe Maan's avatar Douwe Maan

Move all Markdown styling to .md in typography

When https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/4765 was
created, comments were wrapped in `.note-text`, while Markdown previews
were wrapped in `.md.md-preview-holder`. Both `.note-text` and `.md`
included the `md-typography` mixin, but for some reason the bulleted
list styling had previously been only under `.note-text`, rather than
`md-typography`. It could've been moved there, but instead was moved to
a new `bulleted-list` mixin that now became included by both
`.md.md-preview-holder` and `.note-text`.

Since https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/5162,
comments have also been wrapped in `.md`, which means we only need to
define these bulleted list styles there!

Similarly, https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/10909
added table styling to `.md`, `.note-text`, and `.wiki` through the
`markdown-table` mixin.
https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/25666 removed it
from `.note-text`, since all `.note-text` elements already have `.md`
too, and copied some of the styling from this mixin into the
`md-typography` mixin which was used by both `.md` and `.wiki`. As of an
earlier commit in this MR, `.wiki` is gone, which means we only still
need it under `.md`.
parent 838f7e56
...@@ -135,30 +135,6 @@ ...@@ -135,30 +135,6 @@
width: 100%; width: 100%;
} }
.md:not(.use-csslab) {
&.md-preview-holder {
// Reset ul style types since we're nested inside a ul already
@include bulleted-list;
}
// On diffs code should wrap nicely and not overflow
code {
white-space: pre-wrap;
word-break: keep-all;
}
hr {
// Darken 'whitesmoke' a bit to make it more visible in note bodies
border-color: darken($gray-normal, 8%);
margin: 10px 0;
}
table {
@include markdown-table;
}
}
.toolbar-btn { .toolbar-btn {
float: left; float: left;
padding: 0 7px; padding: 0 7px;
......
...@@ -21,26 +21,6 @@ ...@@ -21,26 +21,6 @@
margin-right: auto; margin-right: auto;
} }
/*
* Mixin for markdown tables
*/
@mixin markdown-table {
width: auto;
display: block;
overflow-x: auto;
border: 0;
tr {
th {
border-bottom: solid 2px $gl-gray-200;
}
td {
border-color: $gl-gray-200;
}
}
}
/* /*
* Base mixin for lists in GitLab * Base mixin for lists in GitLab
*/ */
...@@ -93,20 +73,6 @@ ...@@ -93,20 +73,6 @@
} }
} }
@mixin bulleted-list {
> ul {
list-style-type: disc;
ul {
list-style-type: circle;
ul {
list-style-type: square;
}
}
}
}
@mixin webkit-prefix($property, $value) { @mixin webkit-prefix($property, $value) {
#{'-webkit-' + $property}: $value; #{'-webkit-' + $property}: $value;
#{$property}: $value; #{$property}: $value;
......
...@@ -10,8 +10,35 @@ ...@@ -10,8 +10,35 @@
text-align: initial; text-align: initial;
} }
*:first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
p {
color: $gl-text-color;
margin: 0 0 16px;
> code {
font-weight: inherit;
}
a:not(.no-attachment-icon) img {
// Remove bottom padding because
// <p> already has $gl-padding bottom
margin-bottom: 0;
}
}
a { a {
color: $blue-600; color: $blue-600;
> code {
color: $blue-600;
}
} }
img:not(.emoji) { img:not(.emoji) {
...@@ -40,25 +67,12 @@ ...@@ -40,25 +67,12 @@
max-height: calc(100vh - 100px); max-height: calc(100vh - 100px);
} }
p a:not(.no-attachment-icon) img {
// Remove bottom padding because
// <p> already has $gl-padding bottom
margin-bottom: 0;
}
*:first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
// Single code lines should wrap // Single code lines should wrap
code { code {
font-family: $monospace-font; font-family: $monospace-font;
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: normal; word-wrap: normal;
word-break: keep-all;
} }
kbd { kbd {
...@@ -143,9 +157,10 @@ ...@@ -143,9 +157,10 @@
} }
} }
p { hr {
color: $gl-text-color; // Darken 'whitesmoke' a bit to make it more visible in note bodies
margin: 0 0 16px; border-color: darken($gray-normal, 8%);
margin: 10px 0;
} }
table { table {
...@@ -154,6 +169,9 @@ ...@@ -154,6 +169,9 @@
margin: 16px 0; margin: 16px 0;
color: $gl-text-color; color: $gl-text-color;
border: 0; border: 0;
width: auto;
display: block;
overflow-x: auto;
tr { tr {
th { th {
...@@ -191,14 +209,6 @@ ...@@ -191,14 +209,6 @@
} }
} }
p > code {
font-weight: inherit;
}
a > code {
color: $blue-600;
}
dd { dd {
margin-left: $gl-padding; margin-left: $gl-padding;
} }
...@@ -214,6 +224,18 @@ ...@@ -214,6 +224,18 @@
margin: 3px 28px 3px 0 !important; margin: 3px 28px 3px 0 !important;
} }
> ul {
list-style-type: disc;
ul {
list-style-type: circle;
ul {
list-style-type: square;
}
}
}
li { li {
line-height: 1.6em; line-height: 1.6em;
margin-left: 25px; margin-left: 25px;
...@@ -257,11 +279,11 @@ ...@@ -257,11 +279,11 @@
&:hover::before { &:hover::before {
text-decoration: none; text-decoration: none;
} }
}
a.no-attachment-icon { &.no-attachment-icon {
&::before { &::before {
display: none; display: none;
}
} }
} }
......
...@@ -225,8 +225,6 @@ $note-form-margin-left: 72px; ...@@ -225,8 +225,6 @@ $note-form-margin-left: 72px;
overflow-y: hidden; overflow-y: hidden;
.note-text { .note-text {
// Reset ul style types since we're nested inside a ul already
@include bulleted-list;
word-wrap: break-word; word-wrap: break-word;
} }
} }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment