1
1
mirror of https://github.com/primer/css.git synced 2024-12-19 04:01:49 +03:00
css/modules/primer-markdown/lib/markdown-body.scss

108 lines
2.2 KiB
SCSS
Raw Normal View History

2017-05-11 07:56:23 +03:00
// All of our block level items should have the same margin
// stylelint-disable selector-no-type
$margin: 16px;
// 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: 16px;
line-height: $body-line-height;
word-wrap: break-word;
// 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: $red-600;
}
.anchor {
float: left;
padding-right: 4px;
margin-left: -20px;
line-height: 1;
&:focus {
outline: none;
}
}
p,
blockquote,
ul,
ol,
dl,
table,
pre {
margin-top: 0;
margin-bottom: $margin;
}
hr {
height: 0.25em;
padding: 0;
margin: ($margin * 1.5) 0;
background-color: $gray-200;
border: 0;
}
blockquote {
padding: 0 1em;
color: $gray-500;
border-left: 0.25em solid lighten($gray-300, 5%);
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
}
kbd {
display: inline-block;
padding: 3px 5px;
font-size: 11px;
line-height: 10px;
color: $gray-700;
vertical-align: middle;
background-color: $gray-000;
border: solid 1px darken($gray-300, 4%);
border-bottom-color: $gray-400;
border-radius: 3px;
box-shadow: inset 0 -1px 0 $gray-400;
}
}