mirror of
https://github.com/primer/css.git
synced 2024-12-26 07:35:04 +03:00
120 lines
2.1 KiB
SCSS
120 lines
2.1 KiB
SCSS
|
// Need to target base styles
|
||
|
// stylelint-disable selector-max-compound-selectors, selector-no-qualifying-type, primer/selector-no-utility
|
||
|
// stylelint-disable selector-no-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] {
|
||
|
padding-left: 20px;
|
||
|
}
|
||
|
|
||
|
&[align=left] {
|
||
|
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;
|
||
|
padding: 7px;
|
||
|
margin: 13px 0 0;
|
||
|
overflow: hidden;
|
||
|
border: 1px solid lighten($gray-300, 5%);
|
||
|
}
|
||
|
|
||
|
span img {
|
||
|
display: block;
|
||
|
float: left;
|
||
|
}
|
||
|
|
||
|
span span {
|
||
|
display: block;
|
||
|
padding: 5px 0 0;
|
||
|
clear: both;
|
||
|
color: $text-gray-dark;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
span.align-center {
|
||
|
display: block;
|
||
|
overflow: hidden;
|
||
|
clear: both;
|
||
|
|
||
|
> span {
|
||
|
display: block;
|
||
|
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;
|
||
|
margin: 13px 0 0;
|
||
|
overflow: hidden;
|
||
|
text-align: right;
|
||
|
}
|
||
|
|
||
|
span img {
|
||
|
margin: 0;
|
||
|
text-align: right;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
span.float-left {
|
||
|
display: block;
|
||
|
float: left;
|
||
|
margin-right: 13px;
|
||
|
overflow: hidden;
|
||
|
|
||
|
span {
|
||
|
margin: 13px 0 0;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
span.float-right {
|
||
|
display: block;
|
||
|
float: right;
|
||
|
margin-left: 13px;
|
||
|
overflow: hidden;
|
||
|
|
||
|
> span {
|
||
|
display: block;
|
||
|
margin: 13px auto 0;
|
||
|
overflow: hidden;
|
||
|
text-align: right;
|
||
|
}
|
||
|
}
|
||
|
}
|