spaCy/website/assets/css/_components/_code.sass
2016-10-03 20:19:13 +02:00

82 lines
1.8 KiB
Sass

//- ----------------------------------
//- 💫 COMPONENTS > CODE
//- ----------------------------------
//- Code block
.c-code-block
background: $color-subtle-light
padding: 1em 0
border-left: 5px solid $color-theme
overflow: auto
width: 100%
max-width: 100%
white-space: pre
direction: ltr
:not(.o-block)
margin-bottom: 2rem
//- Code block content
.c-code-block__content
display: block
padding: 2em 2.5em
//- Code block label
.c-code-block__label
display: inline-block
background: $color-theme
color: $color-back
padding: 1rem
margin-bottom: 1.5rem
//- Inline code
:not(.c-code-block) > code
@extend .u-code-small
background: $color-subtle-light
box-shadow: 1px 1px 0 $color-subtle
color: $color-front
padding: 0.15em 0.5em
margin: 0 0.25em
border-radius: 2px
text-shadow: 1px 1px 0 $color-back
//- Syntax Highlighting
[class*="language-"] .token
&.comment, &.prolog, &.doctype, &.cdata, &.punctuation
color: map-get($syntax-highlighting, comment)
&.property, &.tag, &.constant, &.symbol, &.deleted
color: map-get($syntax-highlighting, tag)
&.boolean, &.number
color: map-get($syntax-highlighting, number)
&.selector, &.attr-name, &.string, &.char, &.builtin, &.inserted
color: map-get($syntax-highlighting, selector)
@at-root .language-css .token.string,
&.operator, &.entity, &.url, &.variable
color: map-get($syntax-highlighting, operator)
&.atrule, &.attr-value, &.function
color: map-get($syntax-highlighting, function)
&.regex, &.important
color: map-get($syntax-highlighting, regex)
&.keyword
color: map-get($syntax-highlighting, keyword)
&.italic
font-style: italic