diff options
Diffstat (limited to 'app/assets/stylesheets/framework/typography.scss')
-rw-r--r-- | app/assets/stylesheets/framework/typography.scss | 142 |
1 files changed, 85 insertions, 57 deletions
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 1b36c1f4862..7c152efd9c7 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -1,13 +1,44 @@ -@mixin md-typography { +/** + * Apply Markdown typography + * + */ +.md:not(.use-csslab) { color: $gl-text-color; word-wrap: break-word; - [dir="auto"] { + [dir='auto'] { 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) { @@ -28,18 +59,12 @@ max-width: 100%; } - 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; + &:not(.md-file) img:not(.emoji) { + border: 1px solid $white-normal; + padding: 5px; + margin: 5px 0; + // Ensure that image does not exceed viewport + max-height: calc(100vh - 100px); } // Single code lines should wrap @@ -47,6 +72,7 @@ font-family: $monospace-font; white-space: pre-wrap; word-wrap: normal; + word-break: keep-all; } kbd { @@ -131,20 +157,34 @@ } } - 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:not(.js-syntax-highlight) { + table:not(.code) { @extend .table; @extend .table-bordered; margin: 16px 0; color: $gl-text-color; border: 0; + width: auto; + display: block; + overflow-x: auto; - th { - background: $label-gray-bg; + tbody { + background-color: $white-light; + } + + tr { + th { + border-bottom: solid 2px $gl-gray-200; + } + + td { + border-color: $gl-gray-200; + } } } @@ -173,14 +213,6 @@ } } - p > code { - font-weight: inherit; - } - - a > code { - color: $blue-600; - } - dd { margin-left: $gl-padding; } @@ -196,6 +228,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; @@ -224,8 +268,8 @@ } } - a[href*="/uploads/"], - a[href*="storage.googleapis.com/google-code-attachments/"] { + a[href*='/uploads/'], + a[href*='storage.googleapis.com/google-code-attachments/'] { &::before { margin-right: 4px; @@ -233,17 +277,17 @@ font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; - content: "\f0c6"; + content: '\f0c6'; } &:hover::before { text-decoration: none; } - } - a.no-attachment-icon { - &::before { - display: none; + &.no-attachment-icon { + &::before { + display: none; + } } } @@ -362,28 +406,6 @@ code { } /** - * Apply Markdown typography - * - */ -.wiki:not(.use-csslab) { - @include md-typography; -} - -.md:not(.use-csslab) { - @include md-typography; - - &:not(.wiki) { - img:not(.emoji) { - border: 1px solid $white-normal; - padding: 5px; - margin: 5px 0; - // Ensure that image does not exceed viewport - max-height: calc(100vh - 100px); - } - } -} - -/** * Textareas intended for GFM * */ @@ -423,6 +445,7 @@ h4 { /** * form text input i.e. search bar, comments, forms, etc. */ +/* stylelint-disable selector-no-vendor-prefix */ input, textarea { &::-webkit-input-placeholder { @@ -447,5 +470,10 @@ textarea { color: $gl-text-color-tertiary; } } +/* stylelint-enable */ .lh-100 { line-height: 1; } + +wbr { + display: inline-block; +} |