|
1 |
| -.admonition { |
| 1 | +@mixin admonition($primary-color) { |
2 | 2 | @extend .alert;
|
3 | 3 | @extend .my-4;
|
4 |
| - padding: 24px 32px; |
| 4 | + |
| 5 | + $sm-space: calc($spacer * 0.75); |
| 6 | + $md-space: calc($spacer * 1.50); |
| 7 | + $lg-space: calc($spacer * 1.75); |
| 8 | + |
| 9 | + display: flex; |
| 10 | + flex-direction: column; |
| 11 | + gap: $md-space; |
| 12 | + |
| 13 | + padding: 0 $lg-space $md-space $lg-space; |
5 | 14 | color: #{$gray-100};
|
6 |
| - border-color: var(--admonition-color); |
| 15 | + border-color: $primary-color; |
7 | 16 |
|
8 | 17 | .admonition-title {
|
9 | 18 | @extend .gap-2;
|
10 | 19 |
|
11 | 20 | display: flex;
|
12 | 21 | align-items: center;
|
13 |
| - border-radius: 8px 8px 0px 0px; |
14 |
| - padding: 24px 32px 24px 32px; |
| 22 | + border-radius: $border-radius $border-radius 0px 0px; |
| 23 | + padding: $sm-space $lg-space; |
15 | 24 | background-color: #{$gray-700};
|
16 | 25 | font-size: 24px;
|
17 |
| - margin: -24px -32px 24px -32px; |
| 26 | + margin: 0 -#{$lg-space}; |
18 | 27 | }
|
19 | 28 |
|
| 29 | + // This is for icon containers, mostly used in admonition-title. |
20 | 30 | .admonition-img {
|
21 | 31 | display: flex;
|
22 | 32 | align-items: center;
|
23 | 33 | justify-content: center;
|
24 |
| - padding: 8px; |
| 34 | + padding: calc($spacer * 0.5); |
25 | 35 | border-radius: var(--bs-border-radius-pill);
|
26 |
| - background-color: var(--admonition-color); |
| 36 | + background-color: $primary-color; |
| 37 | + } |
| 38 | + |
| 39 | + pre { |
| 40 | + margin: 0px; |
27 | 41 | }
|
28 | 42 | }
|
29 | 43 |
|
30 | 44 | .admonition-note, .admonition-abstract, .admonition-info {
|
31 |
| - @extend .admonition; |
32 |
| - --admonition-color: #{$neon-tint-200}; |
| 45 | + @include admonition($neon-tint-200); |
33 | 46 | }
|
34 | 47 |
|
35 | 48 | .admonition-tip, .admonition-example, .admonition-question {
|
36 |
| - @extend .admonition; |
37 |
| - --admonition-color: #{$violet-shade-100}; |
| 49 | + @include admonition($violet-shade-100); |
38 | 50 | }
|
39 | 51 |
|
40 | 52 | .admonition-success, .admonition-quote {
|
41 |
| - @extend .admonition; |
42 |
| - --admonition-color: #{$teal-tint-100}; |
| 53 | + @include admonition($teal-tint-100); |
43 | 54 | }
|
44 | 55 |
|
45 | 56 | .admonition-bug, .admonition-warning, .admonition-fail, .admonition-danger {
|
46 |
| - @extend .admonition; |
47 |
| - --admonition-color: #{$peach-tint-100}; |
| 57 | + @include admonition($peach-tint-100); |
48 | 58 | }
|
49 | 59 |
|
50 | 60 | .admonition-generic {
|
51 |
| - @extend .admonition; |
52 |
| - --admonition-color: #{$slate-tint-1000}; |
| 61 | + @include admonition($slate-tint-1000); |
53 | 62 | padding: 0px;
|
| 63 | + gap: 0; |
54 | 64 |
|
55 | 65 | .admonition-title {
|
56 | 66 | display: none;
|
|
62 | 72 |
|
63 | 73 | div.code-block {
|
64 | 74 | border: none !important;
|
65 |
| - border-radius: 8px 8px 0px 0px !important; |
| 75 | + border-radius: $border-radius $border-radius 0px 0px !important; |
66 | 76 | margin: 0px 0px !important;
|
67 | 77 | pre {
|
68 | 78 | border-radius: inherit;
|
|
0 commit comments