UNPKG

1.92 kBSCSSView Raw
1/**
2 * Docs: Code
3 */
4
5// Custom spacings for <pre> (vertically aligned with <article> content)
6pre {
7
8 @if map-get($breakpoints, "sm") and
9 map-get($spacing-factor, "sm") and
10 $enable-responsive-spacings {
11
12 @media (min-width: map-get($breakpoints, "sm")) {
13 padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
14 }
15 }
16
17 @if map-get($breakpoints, "md") and
18 map-get($spacing-factor, "md") and
19 $enable-responsive-spacings {
20
21 @media (min-width: map-get($breakpoints, "md")) {
22 padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
23 }
24 }
25
26 @if map-get($breakpoints, "lg") and
27 map-get($spacing-factor, "lg") and
28 $enable-responsive-spacings {
29
30 @media (min-width: map-get($breakpoints, "lg")) {
31 padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
32 }
33 }
34
35 @if map-get($breakpoints, "xl") and
36 map-get($spacing-factor, "xl") and
37 $enable-responsive-spacings {
38
39 @media (min-width: map-get($breakpoints, "xl")) {
40 padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
41 }
42 }
43}
44
45// Badge for Valid & Invalid code
46[data-theme="invalid"],
47[data-theme="valid"] {
48 position: relative;
49 margin-bottom: 0 !important;
50
51 // Label
52 &:before {
53 display: block;
54 position: absolute;
55 top: 0;
56 right: 0;
57 padding: .375rem .75rem;
58 border-radius: 0;
59 color: var(--primary-inverse);
60 font-size: 14px;
61 line-height: 1;
62
63 @media (min-width: map-get($breakpoints, "lg")) {
64 top: $spacing-gutter;
65 right: $spacing-gutter;
66 }
67 }
68
69 // Spacing for Valid & Invalid badge
70 code {
71 padding: 1rem 0;
72 }
73}
74
75// Color for Valid & Invalid code
76[data-theme="invalid"] {
77 &:before {
78 background: var(--invalid);
79 content: 'Not so great';
80 }
81}
82
83[data-theme="valid"] {
84 &:before {
85 background: var(--valid);
86 content: 'Great';
87 }
88}