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`.

1 files changed, 51 insertions, 29 deletions

diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 89b8957543d..0be8f26c2e1 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -10,8 +10,35 @@
     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 {
     color: $blue-600;
+
+    > code {
+      color: $blue-600;
+    }
   }
 
   img:not(.emoji) {
@@ -40,25 +67,12 @@
     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
   code {
     font-family: $monospace-font;
     white-space: pre-wrap;
     word-wrap: normal;
+    word-break: keep-all;
   }
 
   kbd {
@@ -143,9 +157,10 @@
     }
   }
 
-  p {
-    color: $gl-text-color;
-    margin: 0 0 16px;
+  hr {
+    // Darken 'whitesmoke' a bit to make it more visible in note bodies
+    border-color: darken($gray-normal, 8%);
+    margin: 10px 0;
   }
 
   table {
@@ -154,6 +169,9 @@
     margin: 16px 0;
     color: $gl-text-color;
     border: 0;
+    width: auto;
+    display: block;
+    overflow-x: auto;
 
     tr {
       th {
@@ -191,14 +209,6 @@
     }
   }
 
-  p > code {
-    font-weight: inherit;
-  }
-
-  a > code {
-    color: $blue-600;
-  }
-
   dd {
     margin-left: $gl-padding;
   }
@@ -214,6 +224,18 @@
     margin: 3px 28px 3px 0 !important;
   }
 
+  > ul {
+    list-style-type: disc;
+
+    ul {
+      list-style-type: circle;
+
+      ul {
+        list-style-type: square;
+      }
+    }
+  }
+
   li {
     line-height: 1.6em;
     margin-left: 25px;
@@ -257,11 +279,11 @@
     &:hover::before {
       text-decoration: none;
     }
-  }
 
-  a.no-attachment-icon {
-    &::before {
-      display: none;
+    &.no-attachment-icon {
+      &::before {
+        display: none;
+      }
     }
   }