//html.sass .mixin-source .scss, html.scss .mixin-source .sass { @extend .hide;}
.mixin-source, .example-source, .function-source {
position: relative; @extend .fixed-font;
.syntaxhighlighter, pre {
&.scss, &.sass, &.css, &.haml, &.html { display: none; } } }
html.sass { .mixin-source, .example-source, .function-source { .syntaxhighlighter.sass { display: block; } } }
html.scss { .mixin-source, .example-source, .function-source { .syntaxhighlighter.scss { display: block; } } }
html.css .example-source .syntaxhighlighter.css { display: block; }
html.html .example-source .syntaxhighlighter.html { display: block; }
html.haml .example-source .syntaxhighlighter.haml { display: block; }
.mixin-source, .function-source { display: none; }
html.light .syntaxhighlighter, html.dark .syntaxhighlighter {
margin: 0 0 2px;
code { padding: 0; }
//font-size: 1.1em;
text-shadow: none;
.code-block { background: none; @extend .clear-box-shadow; }
table td.gutter { .line { &:first-child { padding-top: 10px !important; } &:last-child { padding-bottom: 10px !important; } } }
.toolbar { display: none; }
//a.help { font-size: 1.5em; @extend .pictos; color: #aaa; position: relative; right: 6px; top: 2px; }
}
a[rel="github-source"] {
position: relative;
float: right;
top: 1.1em;
}
pre {
margin: 1.5em 0;
overflow: auto;
.code-block:first-child { padding: .6em; display: block; }
.code-block:first-child { width: 100%; @include box-sizing(border-box); overflow: auto; }
}
.code-block { @extend .round-corners-4; @extend .fixed-font;
display: inline-block;
font-size: .95em;
padding: 0 .4em;
line-height: 1.5em;
}
.source-documentation {
@extend .round-corners-4;
padding: 10px 15px;
@include round-bottom-corners
}
h3 { @include round-corners;
padding: 10px 15px;
margin: 20px 0 20px;
font-weight: bold;
position: relative;
a { text-decoration: none;}
code, .arg { font-weight: normal; }
}
h3.mixin, h3.function { @include round-top-corners; margin-bottom: 2px;}
.arg {
display: inline-block;
padding: 0 2px;
&[data-default-value] {
font-style: italic;
&:before { content: "[" ; }
&:after { content: "]" ; }}
}
a[rel="view source"]{ float: right; padding: 9px 15px; margin-top: 20px; position: relative; z-index: 2; font-size: .8em; @include hover-link;}
h2 + a[rel="view source"]{ margin-top: 6px;}
.syntaxhighlighter {
a, div, code, table, table td, table tr, table tbody, table thead, table caption, textarea {
background: none; border: 0; bottom: auto; float: none; height: auto; left: auto; line-height: 1.2em !important;
padding: 0; margin: 0; outline: 0;
overflow: visible; position: static; right: auto;
text-align: left; top: auto; vertical-align: baseline;
width: auto;
font: { weight: normal; style: normal;
size: 1em;
}
min: { height: inherit; }
}
}
.syntaxhighlighter { width: 100%; margin: 1em 0 1em 0; position: relative; overflow: auto; font-size: 1em;
// set up bold and italic
.bold { font-weight: bold; }
.italic { font-style: italic; }
.line { white-space: pre; }
// main table and columns
table { width: 100%;
td.code { width: 100%;
.line { padding: 0 .6em; } }
td.gutter .line { text-align: right; padding: 0 0.8em 0 1em; } } // middle spacing between line numbers and lines
// Styles for the toolbar
.toolbar { position: absolute; right: 1px; top: 1px; width: 11px; height: 11px; font-size: 10px; z-index: 10;
span.title { display: inline; }
a { display: block; text-align: center; text-decoration: none; padding-top: 1px; } }
.container { position: relative; }
textarea { @include stretch(0, .65em, 0, .65em); @extend .fixed-font; font-size: .95em; line-height: 1.3em !important;}
}
.syntaxhighlighter, pre .code-block:first-child, pre {
&::-webkit-scrollbar { height: 12px; }
&::-webkit-scrollbar-button { &:start:decrement, &:end:increment { display: block; width: 0; height: 0; } }
&::-webkit-scrollbar-thumb:horizontal { -webkit-border-radius: 5px; -webkit-background-clip: padding-box; }
}