| 1 |
efrain |
1 |
// Inline code
|
|
|
2 |
code {
|
|
|
3 |
padding: 0.35rem 0.45rem;
|
|
|
4 |
background-color: rgba($code-color, .2);
|
|
|
5 |
border-radius: 3px;
|
|
|
6 |
font-size: $code-font-size;
|
|
|
7 |
font-weight: $font-weight-medium;
|
|
|
8 |
color: $body-color;
|
|
|
9 |
line-height: 2;
|
|
|
10 |
word-wrap: break-word;
|
|
|
11 |
|
|
|
12 |
.theme-dark & {
|
|
|
13 |
background-color: rgba($white, .2);
|
|
|
14 |
color: $black;
|
|
|
15 |
}
|
|
|
16 |
|
|
|
17 |
pre & {
|
|
|
18 |
background-color: transparent;
|
|
|
19 |
padding: 0;
|
|
|
20 |
}
|
|
|
21 |
|
|
|
22 |
// Streamline the style when inside anchors to avoid broken underline and more
|
|
|
23 |
a > & {
|
|
|
24 |
color: inherit;
|
|
|
25 |
}
|
|
|
26 |
}
|
|
|
27 |
|
|
|
28 |
// User input typically entered via keyboard
|
|
|
29 |
kbd {
|
|
|
30 |
padding: $kbd-padding-y $kbd-padding-x;
|
|
|
31 |
@include font-size($kbd-font-size);
|
|
|
32 |
color: $kbd-color;
|
|
|
33 |
background-color: $kbd-bg;
|
|
|
34 |
@include border-radius($border-radius-sm);
|
|
|
35 |
@include box-shadow($kbd-box-shadow);
|
|
|
36 |
|
|
|
37 |
.theme-dark & {color: $dm-kbd-color;}
|
|
|
38 |
|
|
|
39 |
kbd {
|
|
|
40 |
padding: 0;
|
|
|
41 |
@include font-size(100%);
|
|
|
42 |
font-weight: $nested-kbd-font-weight;
|
|
|
43 |
@include box-shadow(none);
|
|
|
44 |
}
|
|
|
45 |
}
|
|
|
46 |
|
|
|
47 |
// Blocks of code
|
|
|
48 |
pre {
|
|
|
49 |
display: block;
|
|
|
50 |
@include font-size($code-font-size);
|
|
|
51 |
color: $pre-color;
|
|
|
52 |
|
|
|
53 |
.theme-dark & {
|
|
|
54 |
color: $dm-pre-color;
|
|
|
55 |
}
|
|
|
56 |
|
|
|
57 |
// Account for some code outputs that place code tags in pre tags
|
|
|
58 |
code {
|
|
|
59 |
@include font-size(inherit);
|
|
|
60 |
color: inherit;
|
|
|
61 |
word-break: normal;
|
|
|
62 |
}
|
|
|
63 |
}
|
|
|
64 |
|
|
|
65 |
.CodeMirror-wrap pre,
|
|
|
66 |
.theme-dark .CodeMirror-wrap pre {
|
|
|
67 |
color: inherit;
|
|
|
68 |
}
|
|
|
69 |
|
|
|
70 |
.theme-dark div[class*='cm-'] {max-width: 100%;}
|
|
|
71 |
.theme-dark .CodeMirror-gutters {background-color: $dm-gray-200}
|
|
|
72 |
.theme-dark .CodeMirror {background-color: $dm-gray-100; color: $dm-body-color; }
|
|
|
73 |
.theme-dark .CodeMirror-cursor {border-left: 1px solid $dm-gray-800;}
|
|
|
74 |
.theme-dark .cm-s-default .cm-qualifier {color: $gray-500 !important;}
|
|
|
75 |
.theme-dark .cm-s-default .cm-attribute {color: $blue-400 !important;}
|
|
|
76 |
.theme-dark .cm-s-default .cm-string { color: #e07575; }
|
|
|
77 |
.theme-dark .cm-s-default .cm-tag { color: #64bc56;}
|
|
|
78 |
.theme-dark .cm-s-default .cm-meta { color: #8a8a8a; }
|
|
|
79 |
|
|
|
80 |
// Enable scrollable blocks of code
|
|
|
81 |
.pre-scrollable {
|
|
|
82 |
max-height: $pre-scrollable-max-height;
|
|
|
83 |
overflow-y: scroll;
|
|
|
84 |
}
|