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

89 lines
2.0 KiB
Sass
Raw Normal View History

2016-10-31 21:04:15 +03:00
//- 💫 CSS > COMPONENTS > CODE
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
//- Code block
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
.c-code-block
2016-10-31 21:04:15 +03:00
background: $color-front
color: $color-back
padding: 0.75em 0
border-radius: 2px
2016-10-03 21:19:13 +03:00
overflow: auto
width: 100%
max-width: 100%
white-space: pre
direction: ltr
2016-03-31 17:24:48 +03:00
&.c-code-block--has-icon
padding: 0
display: flex
.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
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
//- Code block content
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
.c-code-block__content
display: block
2016-10-31 21:04:15 +03:00
font: normal normal 1.1rem/#{2} $font-code
padding: 1em 2em
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
//- Inline code
2016-03-31 17:24:48 +03:00
2016-10-31 21:04:15 +03:00
*:not(.c-code-block) > code
font: normal 600 0.8em/#{1} $font-code
2017-05-19 02:05:25 +03:00
background: darken($color-theme-light, 5)
box-shadow: 1px 1px 0 rgba($color-front, 0.05)
2017-03-26 12:14:36 +03:00
text-shadow: 1px 1px 0 rgba($color-back, 0.5)
2016-10-03 21:19:13 +03:00
color: $color-front
2016-10-31 21:04:15 +03:00
padding: 0.1em 0.5em
margin: 0
border-radius: 1px
2017-03-26 12:14:36 +03:00
box-decoration-break: clone
2017-05-03 20:40:30 +03:00
white-space: nowrap
2016-10-31 21:04:15 +03:00
.c-aside__content &
background: lighten($color-front, 10)
2016-10-31 21:04:15 +03:00
color: $color-back
2017-03-26 12:14:36 +03:00
text-shadow: none
2016-10-03 21:19:13 +03:00
//- 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)
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
&.selector, &.attr-name, &.string, &.char, &.builtin, &.inserted
color: map-get($syntax-highlighting, selector)
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
@at-root .language-css .token.string,
&.operator, &.entity, &.url, &.variable
color: map-get($syntax-highlighting, operator)
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
&.atrule, &.attr-value, &.function
color: map-get($syntax-highlighting, function)
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
&.regex, &.important
color: map-get($syntax-highlighting, regex)
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
&.keyword
color: map-get($syntax-highlighting, keyword)
2016-03-31 17:24:48 +03:00
2016-10-03 21:19:13 +03:00
&.italic
font-style: italic