1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | article > footer.code {
|
7 | background: var(--article-code-background-color);
|
8 | }
|
9 | article pre,
|
10 | article pre code {
|
11 | margin-bottom: 0;
|
12 | background: transparent;
|
13 | }
|
14 |
|
15 |
|
16 |
|
17 | section > pre {
|
18 | margin: var(--block-spacing-vertical) 0;
|
19 | padding: calc(var(--block-spacing-vertical) / 1.5)
|
20 | var(--block-spacing-horizontal);
|
21 | background: var(--article-code-background-color);
|
22 | box-shadow: var(--card-box-shadow);
|
23 | }
|
24 |
|
25 |
|
26 | [data-theme="invalid"],
|
27 | [data-theme="valid"] {
|
28 | position: relative;
|
29 | margin-bottom: 0 !important;
|
30 |
|
31 |
|
32 | &:before {
|
33 | display: block;
|
34 | position: absolute;
|
35 | top: 0;
|
36 | right: 0;
|
37 | padding: 0.375rem 0.75rem;
|
38 | border-radius: 0;
|
39 | color: var(--primary-inverse);
|
40 | font-size: 14px;
|
41 | line-height: 1;
|
42 |
|
43 | @media (min-width: map-get($breakpoints, "lg")) {
|
44 | top: var(--spacing);
|
45 | right: var(--spacing);
|
46 | }
|
47 | }
|
48 |
|
49 |
|
50 | code {
|
51 | padding: calc(var(--block-spacing-vertical) / 1.5 + 14px + 0.75rem)
|
52 | var(--block-spacing-horizontal);
|
53 | }
|
54 | }
|
55 |
|
56 |
|
57 | [data-theme="invalid"] {
|
58 | &:before {
|
59 | background: var(--invalid-color);
|
60 | content: "Not so great";
|
61 | }
|
62 | }
|
63 |
|
64 | [data-theme="valid"] {
|
65 | &:before {
|
66 | background: var(--valid-color);
|
67 | content: "Great";
|
68 | }
|
69 | }
|