@bsuite/page-builder 0.2.4 → 0.2.5
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
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* BSuite page-builder — react-grid-layout style overrides + base handle styles
|
|
3
|
+
*
|
|
4
|
+
* react-grid-layout requires base CSS from `react-grid-layout/css/styles.css`
|
|
5
|
+
* + `react-resizable/css/styles.css` to render the resize handle visibly.
|
|
6
|
+
* Consumer apps usually don't import those, so we inline the handle styles
|
|
7
|
+
* here. Without this, the handle has zero size and corner-drag is silently
|
|
8
|
+
* non-functional (issue #539, 2026-05-06).
|
|
9
|
+
*
|
|
10
|
+
* The handle is only rendered into the DOM when the grid is in edit mode
|
|
11
|
+
* (rgl reads `isResizable` per item), so we don't need a separate edit-mode
|
|
12
|
+
* gate — the styles below apply only when the handle is present.
|
|
13
|
+
*/
|
|
14
|
+
|
|
1
15
|
.react-grid-layout {
|
|
2
16
|
position: relative;
|
|
3
17
|
transition: height 200ms ease;
|
|
@@ -13,6 +27,44 @@
|
|
|
13
27
|
opacity: 0.16;
|
|
14
28
|
}
|
|
15
29
|
|
|
30
|
+
/* Resize handle (bottom-right corner). Visible 20×20 hit target with a
|
|
31
|
+
* diagonal-arrow marker. z-index sits above widget content but below
|
|
32
|
+
* modal overlays. */
|
|
16
33
|
.react-grid-item > .react-resizable-handle {
|
|
34
|
+
position: absolute;
|
|
35
|
+
width: 20px;
|
|
36
|
+
height: 20px;
|
|
37
|
+
bottom: 0;
|
|
38
|
+
right: 0;
|
|
39
|
+
cursor: se-resize;
|
|
17
40
|
z-index: 35;
|
|
41
|
+
padding: 0 3px 3px 0;
|
|
42
|
+
box-sizing: border-box;
|
|
43
|
+
background-color: transparent;
|
|
44
|
+
/* Subtle by default — opacity ramps on widget hover. */
|
|
45
|
+
opacity: 0.5;
|
|
46
|
+
transition: opacity 120ms ease;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/* Stronger handle when hovering the parent widget so users discover it. */
|
|
50
|
+
.react-grid-item:hover > .react-resizable-handle {
|
|
51
|
+
opacity: 1;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* Diagonal-arrow marker (two L-shaped border lines). */
|
|
55
|
+
.react-grid-item > .react-resizable-handle::after {
|
|
56
|
+
content: "";
|
|
57
|
+
position: absolute;
|
|
58
|
+
right: 3px;
|
|
59
|
+
bottom: 3px;
|
|
60
|
+
width: 6px;
|
|
61
|
+
height: 6px;
|
|
62
|
+
border-right: 2px solid var(--text-secondary, rgba(0, 0, 0, 0.45));
|
|
63
|
+
border-bottom: 2px solid var(--text-secondary, rgba(0, 0, 0, 0.45));
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Highlight the marker when hovering the handle itself. */
|
|
67
|
+
.react-grid-item > .react-resizable-handle:hover::after {
|
|
68
|
+
border-right-color: var(--accent-primary, var(--primary, #2563eb));
|
|
69
|
+
border-bottom-color: var(--accent-primary, var(--primary, #2563eb));
|
|
18
70
|
}
|