diff options
Diffstat (limited to 'assets/scss/_primer/markdown')
| -rw-r--r-- | assets/scss/_primer/markdown/blob-csv.scss | 29 | ||||
| -rw-r--r-- | assets/scss/_primer/markdown/code.scss | 69 | ||||
| -rw-r--r-- | assets/scss/_primer/markdown/headings.scss | 72 | ||||
| -rw-r--r-- | assets/scss/_primer/markdown/images.scss | 131 | ||||
| -rw-r--r-- | assets/scss/_primer/markdown/index.scss | 8 | ||||
| -rw-r--r-- | assets/scss/_primer/markdown/lists.scss | 77 | ||||
| -rw-r--r-- | assets/scss/_primer/markdown/markdown-body.scss | 99 | ||||
| -rw-r--r-- | assets/scss/_primer/markdown/tables.scss | 36 |
8 files changed, 521 insertions, 0 deletions
diff --git a/assets/scss/_primer/markdown/blob-csv.scss b/assets/scss/_primer/markdown/blob-csv.scss new file mode 100644 index 0000000..e97e447 --- /dev/null +++ b/assets/scss/_primer/markdown/blob-csv.scss @@ -0,0 +1,29 @@ +// stylelint-disable selector-max-type +.markdown-body .csv-data { + td, + th { + // stylelint-disable-next-line primer/spacing + padding: 5px; + overflow: hidden; + font-size: $font-size-small; + line-height: $lh-condensed-ultra; + text-align: left; + white-space: nowrap; + } + + .blob-num { + // stylelint-disable-next-line primer/spacing + padding: 10px $spacer-2 9px; + text-align: right; + background: $bg-white; + border: 0; + } + + tr { border-top: 0; } + + th { + font-weight: $font-weight-bold; + background: $bg-gray; + border-top: 0; + } +} diff --git a/assets/scss/_primer/markdown/code.scss b/assets/scss/_primer/markdown/code.scss new file mode 100644 index 0000000..fbd2d16 --- /dev/null +++ b/assets/scss/_primer/markdown/code.scss @@ -0,0 +1,69 @@ +// stylelint-disable selector-max-type +.markdown-body { + // Inline code snippets + code, + tt { + // stylelint-disable-next-line primer/spacing + padding: 0.2em 0.4em; + margin: 0; + // stylelint-disable-next-line primer/typography + font-size: 85%; + // stylelint-disable-next-line primer/colors + background-color: rgba($black, 0.05); + border-radius: $border-radius; + + br { display: none; } + } + + del code { text-decoration: inherit; } + + pre { + word-wrap: normal; + + // Code tags within code blocks (<pre>s) + > code { + padding: 0; + margin: 0; + // stylelint-disable-next-line primer/typography + font-size: 100%; + word-break: normal; + white-space: pre; + background: transparent; + border: 0; + } + } + + .highlight { + margin-bottom: $spacer-3; + + pre { + margin-bottom: 0; + word-break: normal; + } + } + + .highlight pre, + pre { + padding: $spacer-3; + overflow: auto; + // stylelint-disable-next-line primer/typography + font-size: 85%; + // stylelint-disable-next-line primer/typography + line-height: 1.45; + background-color: $bg-gray; + border-radius: $border-radius; + } + + pre code, + pre tt { + display: inline; + max-width: auto; + padding: 0; + margin: 0; + overflow: visible; + line-height: inherit; + word-wrap: normal; + background-color: transparent; + border: 0; + } +} diff --git a/assets/scss/_primer/markdown/headings.scss b/assets/scss/_primer/markdown/headings.scss new file mode 100644 index 0000000..26347bb --- /dev/null +++ b/assets/scss/_primer/markdown/headings.scss @@ -0,0 +1,72 @@ +// Needs refactoring +// stylelint-disable selector-max-compound-selectors, selector-max-specificity +// stylelint-disable selector-max-type +.markdown-body { + // Headings + h1, + h2, + h3, + h4, + h5, + h6 { + margin-top: $spacer-4; + margin-bottom: $spacer-3; + font-weight: $font-weight-bold; + line-height: $lh-condensed; + + .octicon-link { + color: $text-black; + vertical-align: middle; + visibility: hidden; + } + + &:hover .anchor { + text-decoration: none; + + .octicon-link { + visibility: visible; + } + } + + tt, + code { + font-size: inherit; + } + } + + h1 { + // stylelint-disable-next-line primer/spacing + padding-bottom: 0.3em; + // stylelint-disable-next-line primer/typography + font-size: 2em; + border-bottom: $border-width $border-style $border-gray-light; + } + + h2 { + // stylelint-disable-next-line primer/spacing + padding-bottom: 0.3em; + // stylelint-disable-next-line primer/typography + font-size: 1.5em; + border-bottom: $border-width $border-style $border-gray-light; + } + + h3 { + // stylelint-disable-next-line primer/typography + font-size: 1.25em; + } + + h4 { + font-size: 1em; + } + + h5 { + // stylelint-disable-next-line primer/typography + font-size: 0.875em; + } + + h6 { + // stylelint-disable-next-line primer/typography + font-size: 0.85em; + color: $text-gray-light; + } +} diff --git a/assets/scss/_primer/markdown/images.scss b/assets/scss/_primer/markdown/images.scss new file mode 100644 index 0000000..caea502 --- /dev/null +++ b/assets/scss/_primer/markdown/images.scss @@ -0,0 +1,131 @@ +// Need to target base styles +// stylelint-disable selector-max-compound-selectors, selector-no-qualifying-type +// stylelint-disable selector-max-type +.markdown-body { + // Images & Stuff + img { + max-width: 100%; + // because we put padding on the images to hide header lines, and some people + // specify the width of their images in their markdown. + box-sizing: content-box; + background-color: $bg-white; + + &[align=right] { + // stylelint-disable-next-line primer/spacing + padding-left: 20px; + } + + &[align=left] { + // stylelint-disable-next-line primer/spacing + padding-right: 20px; + } + } + + .emoji { + max-width: none; + vertical-align: text-top; + // Override `<img>` styles so Emjois don't clash with zebra striping in our tables + background-color: transparent; + } + + // Gollum Image Tags + + // Framed + span.frame { + display: block; + overflow: hidden; + + > span { + display: block; + float: left; + width: auto; + // stylelint-disable-next-line primer/spacing + padding: 7px; + // stylelint-disable-next-line primer/spacing + margin: 13px 0 0; + overflow: hidden; + // stylelint-disable-next-line primer/borders + border: $border-width $border-style lighten($gray-300, 5%); + } + + span img { + display: block; + float: left; + } + + span span { + display: block; + // stylelint-disable-next-line primer/spacing + padding: 5px 0 0; + clear: both; + color: $text-gray-dark; + } + } + + span.align-center { + display: block; + overflow: hidden; + clear: both; + + > span { + display: block; + // stylelint-disable-next-line primer/spacing + margin: 13px auto 0; + overflow: hidden; + text-align: center; + } + + span img { + margin: 0 auto; + text-align: center; + } + } + + span.align-right { + display: block; + overflow: hidden; + clear: both; + + > span { + display: block; + // stylelint-disable-next-line primer/spacing + margin: 13px 0 0; + overflow: hidden; + text-align: right; + } + + span img { + margin: 0; + text-align: right; + } + } + + span.float-left { + display: block; + float: left; + // stylelint-disable-next-line primer/spacing + margin-right: 13px; + overflow: hidden; + + span { + // stylelint-disable-next-line primer/spacing + margin: 13px 0 0; + } + } + + span.float-right { + display: block; + float: right; + // stylelint-disable-next-line primer/spacing + margin-left: 13px; + overflow: hidden; + + > span { + display: block; + // stylelint-disable-next-line primer/spacing + margin: 13px auto 0; + overflow: hidden; + text-align: right; + } + } +} diff --git a/assets/scss/_primer/markdown/index.scss b/assets/scss/_primer/markdown/index.scss new file mode 100644 index 0000000..b2e8d3d --- /dev/null +++ b/assets/scss/_primer/markdown/index.scss @@ -0,0 +1,8 @@ +@import "../support/index.scss"; +@import "./markdown-body.scss"; +@import "./headings.scss"; +@import "./lists.scss"; +@import "./tables.scss"; +@import "./images.scss"; +@import "./code.scss"; +@import "./blob-csv.scss"; diff --git a/assets/scss/_primer/markdown/lists.scss b/assets/scss/_primer/markdown/lists.scss new file mode 100644 index 0000000..b680faf --- /dev/null +++ b/assets/scss/_primer/markdown/lists.scss @@ -0,0 +1,77 @@ +// Base styles +// stylelint-disable selector-no-qualifying-type +// stylelint-disable selector-max-type +.markdown-body { + + // Lists, Blockquotes & Such + ul, + ol { + // stylelint-disable-next-line primer/spacing + padding-left: 2em; + + &.no-list { + padding: 0; + list-style-type: none; + } + } + + // Did someone complain about list spacing? Encourage them + // to create the spacing with their markdown formatting. + // List behavior should be controled by the markup, not the css. + // + // For lists with padding between items, use blank + // lines between items. This will generate paragraphs with + // padding to space things out. + // + // - item + // + // - item + // + // - item + // + // For list without padding, don't use blank lines. + // + // - item + // - item + // - item + // + // Modifying the css to emulate these behaviors merely brakes + // one case in the process of solving another. Don't change + // this unless it's really really a bug. + ul ul, + ul ol, + ol ol, + ol ul { + margin-top: 0; + margin-bottom: 0; + } + + li { + word-wrap: break-all; + } + + li > p { + margin-top: $spacer-3; + } + + li + li { + margin-top: $em-spacer-3; + } + + dl { + padding: 0; + + dt { + padding: 0; + margin-top: $spacer-3; + font-size: 1em; + font-style: italic; + font-weight: $font-weight-bold; + } + + dd { + padding: 0 $spacer-3; + margin-bottom: $spacer-3; + } + } +} diff --git a/assets/scss/_primer/markdown/markdown-body.scss b/assets/scss/_primer/markdown/markdown-body.scss new file mode 100644 index 0000000..6581f19 --- /dev/null +++ b/assets/scss/_primer/markdown/markdown-body.scss @@ -0,0 +1,99 @@ +// All of our block level items should have the same margin +// stylelint-disable selector-max-type + +// This is styling for generic markdownized text. Anything you put in a +// container with .markdown-body on it should render generally well. It also +// includes some GitHub Flavored Markdown specific styling (like @mentions) +.markdown-body { + font-family: $body-font; + font-size: $h4-size; + line-height: $body-line-height; + word-wrap: break-word; + + @import "../base/kbd.scss"; // adds support for keyboard shortcuts + + // Clearfix on the markdown body + &::before { + display: table; + content: ""; + } + + &::after { + display: table; + clear: both; + content: ""; + } + + > *:first-child { + margin-top: 0 !important; + } + + > *:last-child { + margin-bottom: 0 !important; + } + + // Anchors like <a name="examples">. These sometimes end up wrapped around + // text when users mistakenly forget to close the tag or use self-closing tag + // syntax. We don't want them to appear like links. + // FIXME: a:not(:link):not(:visited) would be a little clearer here (and + // possibly faster to match), but it breaks styling of <a href> elements due + // to https://bugs.webkit.org/show_bug.cgi?id=142737. + a:not([href]) { + color: inherit; + text-decoration: none; + } + + // Link Colors + .absent { + color: $text-red; + } + + .anchor { + float: left; + padding-right: $spacer-1; + // stylelint-disable-next-line primer/spacing + margin-left: -20px; + line-height: $lh-condensed-ultra; + + &:focus { + outline: none; + } + } + + p, + blockquote, + ul, + ol, + dl, + table, + pre, + details { + margin-top: 0; + margin-bottom: $spacer-3; + } + + hr { + height: $em-spacer-3; + padding: 0; + margin: $spacer-4 0; + // stylelint-disable-next-line primer/colors + background-color: $gray-200; + border: 0; + } + + blockquote { + // stylelint-disable-next-line primer/spacing + padding: 0 1em; + color: $text-gray-light; + // stylelint-disable-next-line primer/borders + border-left: 0.25em $border-style lighten($gray-300, 5%); + + > :first-child { + margin-top: 0; + } + + > :last-child { + margin-bottom: 0; + } + } +} diff --git a/assets/scss/_primer/markdown/tables.scss b/assets/scss/_primer/markdown/tables.scss new file mode 100644 index 0000000..9d73d17 --- /dev/null +++ b/assets/scss/_primer/markdown/tables.scss @@ -0,0 +1,36 @@ +// Needs refactoring +// stylelint-disable selector-max-type +.markdown-body { + // Tables + table { + display: block; + width: 100%; + overflow: auto; + + th { + font-weight: $font-weight-bold; + } + + th, + td { + // stylelint-disable-next-line primer/spacing + padding: 6px 13px; + // stylelint-disable-next-line primer/borders + border: $border-width $border-style lighten($gray-300, 5%); + } + + tr { + background-color: $bg-white; + // stylelint-disable-next-line primer/borders + border-top: $border-width $border-style darken($gray-300, 4%); + + &:nth-child(2n) { + background-color: $bg-gray; + } + } + + img { + background-color: transparent; + } + } +} |