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 @@ -21,26 +21,6 @@ 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 */ @@ -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 + //

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 - //

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; } }