spaCy/website/assets/css/_components/_code.sass

88 lines
2.0 KiB
Sass

// Variables
// ============================================================================
$code-background : color(grey, light)
$code-background-dark : color(black)
$code-block-border : 4px solid color($theme)
$code-block-padding : 2em 3em
$code-block-padding-small : 1em 1.5em
$code-inline-margin : 0.25em 0.5em 0 0.5em
$code-inline-padding : 0 0.25rem
$code-line-height : 2.25
$code-text-shadow : 1px 1px 0 color(white)
// Style
// ============================================================================
// General code style
// .code-inline - source code
// .code-small - smaller style
.code-inline
@extend .text-code
direction: ltr
text-shadow: $code-text-shadow
white-space: pre
word-spacing: normal
word-break: normal
.code-small
@extend .text-small
padding-top: 0
padding-bottom: 0
// Inline Code
// :not(.code-block) - style for items outside of code blocks
code
@extend .code-inline
:not(.code-block) > .code-inline
background: $code-background
display: inline
line-height: inherit
margin: $code-inline-margin
padding: $code-inline-padding
// Code blocks in preformatted text
// .code-block - block of source code
// .code - text content of code blocks
// [data-label] - style of code labels
// .code-block-small - smaller style
// .code-block-dark - alternative dark style
.code-block
@extend .block
background: $code-background
border-left: $code-block-border
max-width: 100%
overflow: auto
padding: 1em 0
white-space: pre
width: 100%
.code-inline
display: block
padding: $code-block-padding
&[data-label]:before
@extend .label-box
.code-block-small
@extend .code-small
.code-inline
padding: $code-block-padding-small
.code-block-dark
@extend .code-block
background: $code-background-dark
border: none
color: color(white)
.code-inline
text-shadow: none