// vf-code-example @import 'package.variables.scss'; // Debug information from component's `package.json`: // --- /*! * Component: #{map-get($componentInfo, 'name')} * Version: #{map-get($componentInfo, 'version')} * Location: #{map-get($componentInfo, 'location')} */ // sass-lint:disable force-element-nesting $vf-code-example-enable-hljs: true !default; .vf-content pre, .vf-content code, .vf-code-example__pre, .vf-code-example { // pre and code should always be monospace @include set-type(text-body--1,$vf-font-family--monospace, $custom-margin-bottom: 0, $color: secondary); @include padding--block(all,map-get($vf-spacing-map, vf-spacing--100)); background: neutral(100); border-radius: $vf-radius--xs; } .vf-content code, .vf-code-example { font-size: inherit; } .vf-content pre, .vf-code-example__pre { border: 1px; display: block; margin-bottom: map-get($vf-spacing-map, vf-spacing--400); min-width: 0; overflow: auto; white-space: pre-wrap; @include padding--inline(all,map-get($vf-spacing-map, vf-spacing--200)); } @if $vf-code-example-enable-hljs == true { /* github.com style (c) Vasily Polovnyov */ .hljs { background: neutral(100); color: ui-color(black); display: block; overflow-x: auto; padding: .5em; } .hljs-comment, .hljs-quote { color: text-color(primary); font-style: italic; } .hljs-keyword, .hljs-selector-tag, .hljs-subst { color: text-color(secondary); font-weight: bold; } .hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr { color: color(blue--dark); } .hljs-string, .hljs-doctag { color: color(red); } .hljs-title, .hljs-section, .hljs-selector-id { color: color(red--dark); font-weight: bold; } .hljs-subst { font-weight: normal; } .hljs-type, .hljs-class .hljs-title { color: color(blue); font-weight: bold; } .hljs-tag, .hljs-name, .hljs-attribute { color: color(blue--dark); font-weight: normal; } .hljs-regexp, .hljs-link { color: color(green); } .hljs-symbol, .hljs-bullet { color: color(red--dark); } .hljs-built_in, .hljs-builtin-name { color: color(blue); } .hljs-meta { color: color(grey--lightest); font-weight: bold; } .hljs-deletion { background: color(red--light); } .hljs-addition { background: color(bright-green--light); } .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: bold; } }