spaCy/website/assets/css/_components/_code.sass
2017-10-03 14:14:52 +02:00

107 lines
2.3 KiB
Sass

//- 💫 CSS > COMPONENTS > CODE
//- Code block
.c-code-block
background: $color-front
color: darken($color-back, 20)
padding: 0.75em 0
border-radius: $border-radius
overflow: auto
width: 100%
max-width: 100%
white-space: pre
direction: ltr
&.c-code-block--has-icon
padding: 0
display: flex
border-top-left-radius: 0
border-bottom-left-radius: 0
.c-code-block__icon
padding: 0 0 0 1rem
display: flex
justify-content: center
align-items: center
&.c-code-block__icon--border
border-left: 6px solid
//- Code block content
.c-code-block__content
display: block
font: normal normal 1.1rem/#{2} $font-code
padding: 1em 2em
&[data-prompt]:before,
content: attr(data-prompt)
margin-right: 0.65em
display: inline-block
vertical-align: middle
opacity: 0.5
//- Code
code
-webkit-font-smoothing: subpixel-antialiased
-moz-osx-font-smoothing: auto
//- Inline code
*:not(a):not(.c-code-block) > code
color: $color-dark
*:not(.c-code-block) > code
font-size: 90%
background-color: $color-subtle-light
padding: 0.2rem 0.4rem
border-radius: 0.25rem
font-family: $font-code
white-space: nowrap
margin: 0
box-decoration-break: clone
white-space: nowrap
.c-aside__content &
background: lighten($color-front, 10)
color: $color-back
text-shadow: none
//- 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