1
1
mirror of https://github.com/primer/css.git synced 2024-12-25 23:23:47 +03:00
css/packages/primer-markdown/lib/images.scss
2017-05-11 16:12:29 -04:00

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