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

4 files changed, 51 insertions, 89 deletions

diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index de2cd600623..b2cc3e2428a 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -135,30 +135,6 @@
   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 {
   float: left;
   padding: 0 7px;
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 9e192cbe3fc..18eb10c1f23 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -22,26 +22,6 @@
 }
 
 /*
- * 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
  */
 @mixin basic-list {
@@ -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) {
   #{'-webkit-' + $property}: $value;
   #{$property}: $value;
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;
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 9c72dcbc54c..6156ab06234 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -225,8 +225,6 @@ $note-form-margin-left: 72px;
       overflow-y: hidden;
 
       .note-text {
-        // Reset ul style types since we're nested inside a ul already
-        @include bulleted-list;
         word-wrap: break-word;
       }
     }