docs-v2/assets/styles/layouts/article/_code.scss

87 lines
1.9 KiB
SCSS

//////////////////////////////////// Code ////////////////////////////////////
code,pre {
background: $article-code-bg;
font-family: $code;
color: $article-code;
}
p,li,table {
code {
padding: .1rem .4rem .2rem;
border-radius: $radius;
color: $article-code;
white-space: nowrap;
font-size: 1rem;
font-style: normal;
}
}
// Don't allow code formatting in headings
h1,h2,h3,h4,h5,h6 {
code {
padding: inherit !important;
background: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
font-family: $proxima;
color: inherit !important;
}
}
a {
code {
font-weight: normal;
transition: color .2s;
position: relative;
color: $article-code-link;
&:after {
content: "";
position: absolute;
display: block;
top: 0;
right: 0;
border-style: solid;
border-width: 0 .4rem .4rem 0;
border-color: transparent rgba($article-code-link, .35) transparent transparent;
transition: border .2s;
}
}
&:hover {
code {
color: $article-code-link-hover;
&:after {
border-color: transparent $article-link-hover transparent transparent;
}
}
}
}
pre {
margin: 2rem 0 2.25rem;
padding: 1.75rem 1.75rem 1.25rem;
border-radius: $radius;
overflow-x: scroll;
overflow-y: hidden;
font-size: 1rem;
code {
padding: 0;
line-height: 1.7rem;
white-space: pre;
}
// These API method styles are imported because they are used in other places.
@import "code-api-methods";
}
////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
@include media(small) {
pre {
padding: 1.2em 1.2em .75rem;
}
}