@conduction/docusaurus-preset 1.3.0 → 1.3.1
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.
package/package.json
CHANGED
|
@@ -86,11 +86,11 @@ export default function HexCard({
|
|
|
86
86
|
return (
|
|
87
87
|
<Tag className={composed}>
|
|
88
88
|
{decoration && (
|
|
89
|
-
|
|
90
|
-
<span className={`${styles.deco} ${styles.deco1}`}
|
|
91
|
-
<span className={`${styles.deco} ${styles.deco2}`}
|
|
92
|
-
<span className={`${styles.deco} ${styles.deco3}`}
|
|
93
|
-
|
|
89
|
+
<span className={styles.decoFrame} aria-hidden="true">
|
|
90
|
+
<span className={`${styles.deco} ${styles.deco1}`} />
|
|
91
|
+
<span className={`${styles.deco} ${styles.deco2}`} />
|
|
92
|
+
<span className={`${styles.deco} ${styles.deco3}`} />
|
|
93
|
+
</span>
|
|
94
94
|
)}
|
|
95
95
|
|
|
96
96
|
{glyph && (
|
|
@@ -1,62 +1,68 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* <HexCard /> styles. Tinted academy panel with a
|
|
3
|
-
*
|
|
4
|
-
* right-side actions slot.
|
|
2
|
+
* <HexCard /> styles. Tinted academy panel with a corner hex badge
|
|
3
|
+
* and an optional right-edge decorative hex motif.
|
|
5
4
|
*
|
|
6
|
-
* Layout:
|
|
7
|
-
*
|
|
8
|
-
*
|
|
5
|
+
* Layout: the badge is absolute-positioned and centered on the
|
|
6
|
+
* top-left corner of the card (half outside, half inside). Card
|
|
7
|
+
* padding has extra inset on the left and bottom so the title and
|
|
8
|
+
* the last list item never collide with the protruding hex.
|
|
9
9
|
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
10
|
+
* ┌── ⬢ ────────────────────────┐
|
|
11
|
+
* │ ⬢ Title [actions]│
|
|
12
|
+
* │ body / list / paragraph │
|
|
13
|
+
* │ │
|
|
14
|
+
* └─────────────────────────────┘
|
|
14
15
|
*/
|
|
15
16
|
|
|
16
17
|
.card {
|
|
17
18
|
position: relative;
|
|
18
19
|
display: grid;
|
|
19
|
-
grid-template-columns:
|
|
20
|
+
grid-template-columns: 1fr;
|
|
20
21
|
grid-template-areas:
|
|
21
|
-
"
|
|
22
|
-
"body
|
|
23
|
-
column-gap: var(--space-4);
|
|
22
|
+
"head"
|
|
23
|
+
"body";
|
|
24
24
|
row-gap: var(--space-3);
|
|
25
25
|
align-items: start;
|
|
26
26
|
background: var(--c-cobalt-50);
|
|
27
27
|
border: 1px solid var(--c-cobalt-100);
|
|
28
28
|
border-radius: var(--radius-lg);
|
|
29
|
-
padding: var(--space-6) var(--space-
|
|
29
|
+
padding: var(--space-6) var(--space-8) var(--space-10) var(--space-12);
|
|
30
30
|
margin: var(--space-8) 0;
|
|
31
|
-
overflow:
|
|
31
|
+
overflow: visible;
|
|
32
32
|
font-family: var(--conduction-typography-font-family-body);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.hasActions {
|
|
36
|
-
grid-template-columns:
|
|
36
|
+
grid-template-columns: 1fr auto;
|
|
37
37
|
grid-template-areas:
|
|
38
|
-
"
|
|
39
|
-
"body
|
|
38
|
+
"head actions"
|
|
39
|
+
"body actions";
|
|
40
40
|
align-items: center;
|
|
41
41
|
column-gap: var(--space-5);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
@media (max-width: 720px) {
|
|
45
45
|
.hasActions {
|
|
46
|
-
grid-template-columns:
|
|
46
|
+
grid-template-columns: 1fr;
|
|
47
47
|
grid-template-areas:
|
|
48
|
-
"
|
|
49
|
-
"body
|
|
50
|
-
"actions
|
|
48
|
+
"head"
|
|
49
|
+
"body"
|
|
50
|
+
"actions";
|
|
51
51
|
}
|
|
52
|
-
.card { padding: var(--space-
|
|
52
|
+
.card { padding: var(--space-6) var(--space-5) var(--space-8) var(--space-10); }
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
+
/* Hex badge centered on the top-left corner. Half overflows the
|
|
56
|
+
card to the upper-left so the badge reads as a corner mark, not
|
|
57
|
+
an inset glyph. z-index lifts it above the deco frame. */
|
|
55
58
|
.badge {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
+
position: absolute;
|
|
60
|
+
top: 0;
|
|
61
|
+
left: 0;
|
|
62
|
+
transform: translate(-50%, -50%);
|
|
63
|
+
z-index: 2;
|
|
59
64
|
display: inline-flex;
|
|
65
|
+
pointer-events: none;
|
|
60
66
|
}
|
|
61
67
|
|
|
62
68
|
.head {
|
|
@@ -103,16 +109,23 @@
|
|
|
103
109
|
white-space: nowrap;
|
|
104
110
|
}
|
|
105
111
|
|
|
106
|
-
/*
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
112
|
+
/* Wraps the decorative right-edge hexes. Absolute, fills the card,
|
|
113
|
+
inherits border-radius, and clips its own children so the deco
|
|
114
|
+
stays inside the rounded panel even though the card itself has
|
|
115
|
+
overflow: visible (needed for the corner badge). */
|
|
116
|
+
.decoFrame {
|
|
117
|
+
position: absolute;
|
|
118
|
+
inset: 0;
|
|
119
|
+
border-radius: inherit;
|
|
120
|
+
overflow: hidden;
|
|
121
|
+
pointer-events: none;
|
|
122
|
+
z-index: 0;
|
|
123
|
+
}
|
|
124
|
+
|
|
110
125
|
.deco {
|
|
111
126
|
position: absolute;
|
|
112
127
|
background: var(--c-cobalt-100);
|
|
113
128
|
clip-path: var(--hex-pointy-top);
|
|
114
|
-
pointer-events: none;
|
|
115
|
-
z-index: 0;
|
|
116
129
|
}
|
|
117
130
|
|
|
118
131
|
.deco1 {
|