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