1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 | pre {
|
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 |
|
46 | [data-theme="invalid"],
|
47 | [data-theme="valid"] {
|
48 | position: relative;
|
49 | margin-bottom: 0 !important;
|
50 |
|
51 |
|
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 |
|
70 | code {
|
71 | padding: 1rem 0;
|
72 | }
|
73 | }
|
74 |
|
75 |
|
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 | }
|