@hyperbook/markdown 0.30.0 → 0.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,8 @@
1
+ :root {
2
+ --alert-color: var(--color-nav-border);
3
+ --alert-content: "";
4
+ }
5
+
1
6
  .directive-alert>p {
2
7
  margin-bottom: 0;
3
8
  }
@@ -15,97 +20,54 @@
15
20
  position: relative;
16
21
  border-left-width: 4px;
17
22
  border-left-style: solid;
23
+ background-color: var(--color-nav);
24
+ border-left-color: var(--alert-color);
25
+ border-left-style: solid;
26
+ border-left-width: 4px;
27
+
28
+ a,
29
+ strong {
30
+ color: var(--alert-color);
31
+ }
32
+
33
+ :first-child {
34
+ margin-top: 0;
35
+ }
18
36
  }
19
37
 
20
- .directive-alert::before {
38
+ .directive-alert.icon::before {
21
39
  border-radius: 100%;
22
40
  font-size: 14px;
23
41
  font-weight: 700;
24
- left: -12px;
25
- line-height: 20px;
42
+ left: -14px;
26
43
  display: flex;
27
44
  align-items: center;
28
45
  justify-content: center;
29
46
  position: absolute;
30
- height: 20px;
31
- width: 20px;
32
- text-align: center;
33
- top: 12px;
34
- }
35
-
36
- .directive-alert.success {
37
- border-left-style: solid;
38
- border-left-width: 4px;
39
- }
40
-
41
- .directive-alert.success::before {
42
- content: "✓";
43
- }
44
-
45
- .directive-alert.info {
46
- border-left-style: solid;
47
- border-left-width: 4px;
48
- }
49
-
50
- .directive-alert.info::before {
51
- content: "i";
52
- }
53
-
54
- .directive-alert.warn {
55
- border-left-style: solid;
56
- border-left-width: 4px;
57
- }
58
-
59
- .directive-alert.warn::before {
60
- content: "!";
61
- }
62
-
63
- .directive-alert.error {
64
- border-left-style: solid;
65
- border-left-width: 4px;
66
- }
67
-
68
- .directive-alert.error::before {
69
- content: "x";
70
- }
71
-
72
- .directive-alert {
73
- background-color: var(--color-nav);
74
- border-left-color: var(--color-nav-border);
75
- }
76
-
77
- .directive-alert::before {
47
+ height: 24px;
48
+ width: 24px;
49
+ top: 8px;
78
50
  color: #fff;
51
+ content: var(--alert-content);
52
+ background-color: var(--alert-color);
79
53
  }
80
54
 
81
55
  .directive-alert.success {
82
- border-left-color: #00c851;
83
- }
84
-
85
- .directive-alert.success::before {
86
- background-color: #00c851;
56
+ --alert-color: #00c851;
57
+ --alert-content: "✓";
87
58
  }
88
59
 
89
60
  .directive-alert.info {
90
- border-left-color: #33b5e5;
91
- }
92
-
93
- .directive-alert.info::before {
94
- background-color: #33b5e5;
61
+ --alert-color: #33b5e5;
62
+ --alert-content: "i";
95
63
  }
96
64
 
97
65
  .directive-alert.warn {
98
- border-left-color: #f0b429;
99
- }
100
-
101
- .directive-alert.warn::before {
102
- background-color: #f0b429;
66
+ --alert-color: #f0b429;
67
+ --alert-content: "!";
103
68
  }
104
69
 
105
70
  .directive-alert.error {
106
- border-left-color: #ef4e4e;
107
- }
108
-
109
- .directive-alert.error::before {
110
- background-color: #ef4e4e;
71
+ --alert-color: #ef4e4e;
72
+ --alert-content: "x";
111
73
  }
package/dist/index.js CHANGED
@@ -63991,10 +63991,16 @@ var remarkDirectiveAlert_default = (ctx) => () => {
63991
63991
  const data = node3.data || (node3.data = {});
63992
63992
  expectContainerDirective(node3, file, name);
63993
63993
  registerDirective(file, name, [], ["style.css"], []);
63994
- const type = Object.keys(node3.attributes || {}).join(" ");
63994
+ const color2 = node3.attributes?.color;
63995
+ const content5 = node3.attributes?.label;
63996
+ const type = Object.keys(node3.attributes || {}).join(" ").trim();
63997
+ const icon = content5 || type;
63998
+ delete node3.attributes?.color;
63999
+ delete node3.attributes?.label;
63995
64000
  data.hName = "div";
63996
64001
  data.hProperties = {
63997
- class: ("directive-alert " + type).trim()
64002
+ class: `directive-alert ${type} ${icon ? "icon" : ""}`.trim(),
64003
+ style: `${color2 ? `--alert-color: ${color2};` : ""} ${content5 ? `--alert-content: '${content5}';` : ""}`
63998
64004
  };
63999
64005
  }
64000
64006
  });