From 5e67f54fb48ff21acdf495da85354ce58938dbce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Enrique=20Alc=C3=A1ntara?= Date: Thu, 21 Mar 2019 22:14:30 +0000 Subject: Remove :not pseudo-class from md-table styles Rollback change that adds :not(js-syntax-highlight) pseudo-class to markdown selectors to fix syntax highlight tables in MR code suggestions. Removes redundant inclusion of md-typography mixin as an alternative fix. --- app/assets/stylesheets/framework/markdown_area.scss | 2 +- app/assets/stylesheets/framework/mixins.scss | 5 ++--- app/assets/stylesheets/framework/typography.scss | 12 +++++++++--- app/assets/stylesheets/pages/notes.scss | 5 ----- changelogs/unreleased/57655-fix-markdown-tables-border.yml | 5 +++++ 5 files changed, 17 insertions(+), 12 deletions(-) create mode 100644 changelogs/unreleased/57655-fix-markdown-tables-border.yml diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index d6c4e68f68f..6afe0d61232 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -150,7 +150,7 @@ } - table:not(.js-syntax-highlight) { + table { @include markdown-table; } } diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 955ae80cd58..9e192cbe3fc 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -29,15 +29,14 @@ display: block; overflow-x: auto; border: 0; - border-color: $gl-gray-100; tr { th { - border-bottom: solid 2px $gl-gray-100; + border-bottom: solid 2px $gl-gray-200; } td { - border-color: $gl-gray-100; + border-color: $gl-gray-200; } } } diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 55ce0d7004e..5e5e8bcc3d6 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -136,15 +136,21 @@ margin: 0 0 16px; } - table:not(.js-syntax-highlight) { + table { @extend .table; @extend .table-bordered; margin: 16px 0; color: $gl-text-color; border: 0; - th { - background: $label-gray-bg; + tr { + th { + border-bottom: solid 2px $gl-gray-200; + } + + td { + border-color: $gl-gray-200; + } } } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index faf85e151e3..88984cae513 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -224,14 +224,9 @@ $note-form-margin-left: 72px; overflow-y: hidden; .note-text { - @include md-typography; // Reset ul style types since we're nested inside a ul already @include bulleted-list; word-wrap: break-word; - - table { - @include markdown-table; - } } } diff --git a/changelogs/unreleased/57655-fix-markdown-tables-border.yml b/changelogs/unreleased/57655-fix-markdown-tables-border.yml new file mode 100644 index 00000000000..6a8ba8c4353 --- /dev/null +++ b/changelogs/unreleased/57655-fix-markdown-tables-border.yml @@ -0,0 +1,5 @@ +--- +title: Fix markdown table header and table content borders +merge_request: 25666 +author: +type: fixed -- cgit v1.2.1