172 lines
3.8 KiB
SCSS
172 lines
3.8 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";
|
|
}
|
|
|
|
////////////// Styles for calling out specific code in code blocks /////////////
|
|
///
|
|
span.code-callout, .code-placeholder {
|
|
font-weight:bold;
|
|
margin:0 .15rem;
|
|
|
|
&.green {color: $article-code-accent3;}
|
|
&.magenta {color: $br-new-magenta;}
|
|
&.orange {color: $r-curacao;}
|
|
}
|
|
|
|
/////////////// Styles for code placeholders that can be updated ///////////////
|
|
.code-placeholder-wrapper {
|
|
display: inline;
|
|
position: relative;
|
|
|
|
.code-placeholder {
|
|
display: inline-block;
|
|
margin:0 .15rem;
|
|
padding: 0;
|
|
line-height: 1.4em;
|
|
color: $code-placeholder;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
border-bottom: 1px dotted;
|
|
transition: color .2s;
|
|
cursor: pointer;
|
|
|
|
.code-placeholder-edit-icon{
|
|
font-style: normal;
|
|
&::before {
|
|
margin-left: .2rem;
|
|
font-size: .8em;
|
|
transition: opacity .2s;
|
|
opacity: .65;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
color: $code-placeholder-hover;
|
|
.code-placeholder-edit-icon::before {opacity: 1}
|
|
}
|
|
}
|
|
|
|
.code-input-wrapper {
|
|
position: absolute;
|
|
top: -3px;
|
|
left: -4.5px;
|
|
z-index: 1;
|
|
color: inherit;
|
|
|
|
input.placeholder-edit {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
border: 1px solid $sidebar-search-bg;
|
|
border-radius: $radius * 2;
|
|
background-color: $sidebar-search-bg;
|
|
padding: 2px 20px 2px 6px;
|
|
color: $code-placeholder-hover;
|
|
font-weight: normal;
|
|
&:focus {
|
|
outline: none;
|
|
border-color: rgba($code-placeholder-hover, .75);
|
|
box-shadow: 1px 1px 8px rgba($code-placeholder-hover, .5);
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
|
|
&:hover {cursor: pointer;}
|
|
|
|
&:after {
|
|
content: "\e937";
|
|
color: $code-placeholder-hover;
|
|
font-family: 'icomoon-v4';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 3px;
|
|
}
|
|
}
|
|
}
|
|
.code-placeholder-key code {color: $code-placeholder}
|
|
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
@include media(small) {
|
|
pre {
|
|
padding: 1.2em 1.2em .75rem;
|
|
}
|
|
}
|