@moyarich/console-addon-resizable 0.0.0-stage → 0.2.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.
- package/README.md +38 -2
- package/dist/components/ResizableConsoleFrame/ResizableConsoleFrame.d.cts +50 -0
- package/dist/components/ResizableConsoleFrame/ResizableConsoleFrame.d.ts +50 -0
- package/dist/console-addon-resizable.css +293 -0
- package/dist/index.cjs +377 -0
- package/dist/index.d.cts +13 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.js +377 -0
- package/dist/locales/en.json +8 -0
- package/dist/locales/es.json +8 -0
- package/dist/locales/fr.json +8 -0
- package/dist/locales/pt.json +8 -0
- package/dist/localization.d.cts +3 -0
- package/dist/localization.d.ts +3 -0
- package/dist/styles.css +294 -0
- package/package.json +73 -4
package/README.md
CHANGED
|
@@ -1,3 +1,39 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @moyarich/console-addon-resizable
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Resize the Console panel. Add configurable resize handles, sizing limits, and resize callbacks without changing output behavior.
|
|
4
|
+
|
|
5
|
+
[Documentation and live examples](https://moyarich.github.io/console/)
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @moyarich/console @moyarich/console-addon-resizable react
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Configure the `@moyarich` scope and authenticate with GitHub Packages as described in the [installation guide](../../../README.md#installation).
|
|
14
|
+
|
|
15
|
+
Required peer dependencies: `@moyarich/console-core@^0.2.0`, `react@>=18`.
|
|
16
|
+
|
|
17
|
+
## Quick start
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import { Console } from "@moyarich/console";
|
|
21
|
+
import { createResizableConsoleAddon } from "@moyarich/console-addon-resizable";
|
|
22
|
+
|
|
23
|
+
const addons = [createResizableConsoleAddon()];
|
|
24
|
+
|
|
25
|
+
// Pass your application's structured messages to Console.
|
|
26
|
+
<Console messages={messages} addons={addons} />;
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
The addon is optional and can be combined with other Console addons. The host application remains responsible for supplying and retaining messages.
|
|
30
|
+
|
|
31
|
+
## Learn more
|
|
32
|
+
|
|
33
|
+
Explore [runnable package examples](./examples) and the [Console documentation](https://moyarich.github.io/console/) for available settings and integration patterns.
|
|
34
|
+
|
|
35
|
+
Review the [changelog](./CHANGELOG.md) for changes by version and [package metadata](./package.json) for dependency requirements.
|
|
36
|
+
|
|
37
|
+
## License
|
|
38
|
+
|
|
39
|
+
MIT
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { type AddonTranslations } from "../../localization.cjs";
|
|
2
|
+
|
|
3
|
+
import { type CSSProperties, type ReactNode } from "react";
|
|
4
|
+
import type { ConsoleMode } from "@moyarich/console-core";
|
|
5
|
+
export type ConsoleResizeDirection = "vertical" | "horizontal" | "both" | "block" | "inline";
|
|
6
|
+
export type ConsoleResizeEdge = "start" | "end";
|
|
7
|
+
export interface ConsoleResizeSize {
|
|
8
|
+
width: number;
|
|
9
|
+
height: number;
|
|
10
|
+
}
|
|
11
|
+
export interface ResizableConsoleAddonOptions {
|
|
12
|
+
locale?: string;
|
|
13
|
+
translations?: AddonTranslations;
|
|
14
|
+
/** Resize axis. Logical block/inline map to vertical/horizontal in the default writing mode. @default "both" */
|
|
15
|
+
direction?: ConsoleResizeDirection;
|
|
16
|
+
/** Initial width used when horizontal resizing is active. @default 720 */
|
|
17
|
+
defaultWidth?: number | string;
|
|
18
|
+
/** Initial height used when vertical resizing is active. @default 300 */
|
|
19
|
+
defaultHeight?: number | string;
|
|
20
|
+
/** Minimum width while dragging. @default 320 */
|
|
21
|
+
minWidth?: number;
|
|
22
|
+
/** Minimum height while dragging. @default 180 */
|
|
23
|
+
minHeight?: number;
|
|
24
|
+
/** Optional maximum width while dragging. The parent width is always respected. */
|
|
25
|
+
maxWidth?: number;
|
|
26
|
+
/** Optional maximum height while dragging. */
|
|
27
|
+
maxHeight?: number;
|
|
28
|
+
/** Physical edge that owns the horizontal resize handle. @default "end" */
|
|
29
|
+
horizontalEdge?: ConsoleResizeEdge;
|
|
30
|
+
/** Physical edge that owns the vertical resize handle. @default "end" */
|
|
31
|
+
verticalEdge?: ConsoleResizeEdge;
|
|
32
|
+
/** Additional class name applied to the addon-owned frame. */
|
|
33
|
+
className?: string;
|
|
34
|
+
/** Additional inline styles and CSS custom-property overrides applied to the addon-owned frame. */
|
|
35
|
+
style?: CSSProperties;
|
|
36
|
+
/** Called whenever a drag updates the rendered frame size. */
|
|
37
|
+
onResize?: (size: ConsoleResizeSize) => void;
|
|
38
|
+
}
|
|
39
|
+
interface ResizeAxes {
|
|
40
|
+
horizontal: boolean;
|
|
41
|
+
vertical: boolean;
|
|
42
|
+
}
|
|
43
|
+
interface ResizableConsoleFrameProps {
|
|
44
|
+
mode: ConsoleMode;
|
|
45
|
+
options: ResizableConsoleAddonOptions;
|
|
46
|
+
children: ReactNode;
|
|
47
|
+
}
|
|
48
|
+
export declare function resolveConsoleResizeAxes(direction: ConsoleResizeDirection): ResizeAxes;
|
|
49
|
+
export declare function ResizableConsoleFrame({ mode, options, children, }: ResizableConsoleFrameProps): import("react").JSX.Element;
|
|
50
|
+
export {};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { type AddonTranslations } from "../../localization.js";
|
|
2
|
+
|
|
3
|
+
import { type CSSProperties, type ReactNode } from "react";
|
|
4
|
+
import type { ConsoleMode } from "@moyarich/console-core";
|
|
5
|
+
export type ConsoleResizeDirection = "vertical" | "horizontal" | "both" | "block" | "inline";
|
|
6
|
+
export type ConsoleResizeEdge = "start" | "end";
|
|
7
|
+
export interface ConsoleResizeSize {
|
|
8
|
+
width: number;
|
|
9
|
+
height: number;
|
|
10
|
+
}
|
|
11
|
+
export interface ResizableConsoleAddonOptions {
|
|
12
|
+
locale?: string;
|
|
13
|
+
translations?: AddonTranslations;
|
|
14
|
+
/** Resize axis. Logical block/inline map to vertical/horizontal in the default writing mode. @default "both" */
|
|
15
|
+
direction?: ConsoleResizeDirection;
|
|
16
|
+
/** Initial width used when horizontal resizing is active. @default 720 */
|
|
17
|
+
defaultWidth?: number | string;
|
|
18
|
+
/** Initial height used when vertical resizing is active. @default 300 */
|
|
19
|
+
defaultHeight?: number | string;
|
|
20
|
+
/** Minimum width while dragging. @default 320 */
|
|
21
|
+
minWidth?: number;
|
|
22
|
+
/** Minimum height while dragging. @default 180 */
|
|
23
|
+
minHeight?: number;
|
|
24
|
+
/** Optional maximum width while dragging. The parent width is always respected. */
|
|
25
|
+
maxWidth?: number;
|
|
26
|
+
/** Optional maximum height while dragging. */
|
|
27
|
+
maxHeight?: number;
|
|
28
|
+
/** Physical edge that owns the horizontal resize handle. @default "end" */
|
|
29
|
+
horizontalEdge?: ConsoleResizeEdge;
|
|
30
|
+
/** Physical edge that owns the vertical resize handle. @default "end" */
|
|
31
|
+
verticalEdge?: ConsoleResizeEdge;
|
|
32
|
+
/** Additional class name applied to the addon-owned frame. */
|
|
33
|
+
className?: string;
|
|
34
|
+
/** Additional inline styles and CSS custom-property overrides applied to the addon-owned frame. */
|
|
35
|
+
style?: CSSProperties;
|
|
36
|
+
/** Called whenever a drag updates the rendered frame size. */
|
|
37
|
+
onResize?: (size: ConsoleResizeSize) => void;
|
|
38
|
+
}
|
|
39
|
+
interface ResizeAxes {
|
|
40
|
+
horizontal: boolean;
|
|
41
|
+
vertical: boolean;
|
|
42
|
+
}
|
|
43
|
+
interface ResizableConsoleFrameProps {
|
|
44
|
+
mode: ConsoleMode;
|
|
45
|
+
options: ResizableConsoleAddonOptions;
|
|
46
|
+
children: ReactNode;
|
|
47
|
+
}
|
|
48
|
+
export declare function resolveConsoleResizeAxes(direction: ConsoleResizeDirection): ResizeAxes;
|
|
49
|
+
export declare function ResizableConsoleFrame({ mode, options, children, }: ResizableConsoleFrameProps): import("react").JSX.Element;
|
|
50
|
+
export {};
|
|
@@ -0,0 +1,293 @@
|
|
|
1
|
+
/* ==========================================================================
|
|
2
|
+
Resizable console addon
|
|
3
|
+
========================================================================== */
|
|
4
|
+
|
|
5
|
+
.console-resizable-frame,
|
|
6
|
+
.console-resizable-frame *,
|
|
7
|
+
.console-resizable-frame *::before,
|
|
8
|
+
.console-resizable-frame *::after {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.console-resizable-frame {
|
|
13
|
+
--_console-resize-color-scheme: var(
|
|
14
|
+
--console-resize-color-scheme,
|
|
15
|
+
var(--console-panel-color-scheme, var(--console-color-scheme, inherit))
|
|
16
|
+
);
|
|
17
|
+
--_console-resize-separator-line-background-color: var(
|
|
18
|
+
--console-resize-separator-line-background-color,
|
|
19
|
+
color-mix(in oklab, currentColor 18%, transparent)
|
|
20
|
+
);
|
|
21
|
+
--_console-resize-separator-hover-line-background-color: var(
|
|
22
|
+
--console-resize-separator-hover-line-background-color,
|
|
23
|
+
color-mix(in oklab, currentColor 38%, transparent)
|
|
24
|
+
);
|
|
25
|
+
--_console-resize-separator-active-line-background-color: var(
|
|
26
|
+
--console-resize-separator-active-line-background-color,
|
|
27
|
+
light-dark(#635bff, #8b83ff)
|
|
28
|
+
);
|
|
29
|
+
--_console-resize-separator-grip-color: var(
|
|
30
|
+
--console-resize-separator-grip-color,
|
|
31
|
+
color-mix(in oklab, currentColor 58%, transparent)
|
|
32
|
+
);
|
|
33
|
+
--_console-resize-separator-active-grip-color: var(
|
|
34
|
+
--console-resize-separator-active-grip-color,
|
|
35
|
+
light-dark(#635bff, #8b83ff)
|
|
36
|
+
);
|
|
37
|
+
--_console-resize-separator-grip-border: var(
|
|
38
|
+
--console-resize-separator-grip-border,
|
|
39
|
+
1px solid color-mix(in oklab, currentColor 18%, transparent)
|
|
40
|
+
);
|
|
41
|
+
--_console-resize-separator-grip-background-color: var(
|
|
42
|
+
--console-resize-separator-grip-background-color,
|
|
43
|
+
light-dark(
|
|
44
|
+
color-mix(in oklab, white 96%, currentColor 4%),
|
|
45
|
+
color-mix(in oklab, #111113 94%, currentColor 6%)
|
|
46
|
+
)
|
|
47
|
+
);
|
|
48
|
+
--_console-resize-separator-grip-border-radius: var(
|
|
49
|
+
--console-resize-separator-grip-border-radius,
|
|
50
|
+
999px
|
|
51
|
+
);
|
|
52
|
+
--_console-resize-separator-grip-box-shadow: var(
|
|
53
|
+
--console-resize-separator-grip-box-shadow,
|
|
54
|
+
0 4px 14px color-mix(in oklab, currentColor 14%, transparent)
|
|
55
|
+
);
|
|
56
|
+
--_console-resize-handle-size: var(--console-resize-handle-size, 10px);
|
|
57
|
+
--_console-resize-corner-size: var(--console-resize-corner-size, 28px);
|
|
58
|
+
|
|
59
|
+
color-scheme: var(--_console-resize-color-scheme);
|
|
60
|
+
position: relative;
|
|
61
|
+
display: flex;
|
|
62
|
+
width: 100%;
|
|
63
|
+
max-width: 100%;
|
|
64
|
+
min-width: 0;
|
|
65
|
+
height: 100%;
|
|
66
|
+
max-height: 100%;
|
|
67
|
+
min-height: 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.console-resizable-frame[data-console-resize-direction="horizontal"],
|
|
71
|
+
.console-resizable-frame[data-console-resize-direction="inline"],
|
|
72
|
+
.console-resizable-frame[data-console-resize-direction="both"] {
|
|
73
|
+
width: var(--_console-resizable-width);
|
|
74
|
+
min-width: min(100%, var(--_console-resizable-min-width));
|
|
75
|
+
max-width: min(100%, var(--_console-resizable-max-width));
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.console-resizable-frame[data-console-resize-direction="vertical"],
|
|
79
|
+
.console-resizable-frame[data-console-resize-direction="block"],
|
|
80
|
+
.console-resizable-frame[data-console-resize-direction="both"] {
|
|
81
|
+
height: var(--_console-resizable-height);
|
|
82
|
+
min-height: min(100%, var(--_console-resizable-min-height));
|
|
83
|
+
max-height: min(100%, var(--_console-resizable-max-height));
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.console-resizable-frame-content {
|
|
87
|
+
display: flex;
|
|
88
|
+
width: 100%;
|
|
89
|
+
min-width: 0;
|
|
90
|
+
height: 100%;
|
|
91
|
+
min-height: 0;
|
|
92
|
+
overflow: hidden;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.console-resize-handle {
|
|
96
|
+
position: absolute;
|
|
97
|
+
z-index: 3;
|
|
98
|
+
display: flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
justify-content: center;
|
|
101
|
+
color: var(--_console-resize-separator-grip-color);
|
|
102
|
+
outline: none;
|
|
103
|
+
touch-action: none;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.console-resize-handle[data-console-resize-axis="horizontal"] {
|
|
107
|
+
top: 0;
|
|
108
|
+
width: var(--_console-resize-handle-size);
|
|
109
|
+
height: 100%;
|
|
110
|
+
cursor: col-resize;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.console-resizable-frame[data-console-resize-horizontal-edge="end"]
|
|
114
|
+
> .console-resize-handle[data-console-resize-axis="horizontal"] {
|
|
115
|
+
right: calc(var(--_console-resize-handle-size) / -2);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.console-resizable-frame[data-console-resize-horizontal-edge="start"]
|
|
119
|
+
> .console-resize-handle[data-console-resize-axis="horizontal"] {
|
|
120
|
+
left: calc(var(--_console-resize-handle-size) / -2);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.console-resize-handle[data-console-resize-axis="vertical"] {
|
|
124
|
+
left: 0;
|
|
125
|
+
width: 100%;
|
|
126
|
+
height: var(--_console-resize-handle-size);
|
|
127
|
+
cursor: row-resize;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.console-resizable-frame[data-console-resize-vertical-edge="end"]
|
|
131
|
+
> .console-resize-handle[data-console-resize-axis="vertical"] {
|
|
132
|
+
bottom: calc(var(--_console-resize-handle-size) / -2);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.console-resizable-frame[data-console-resize-vertical-edge="start"]
|
|
136
|
+
> .console-resize-handle[data-console-resize-axis="vertical"] {
|
|
137
|
+
top: calc(var(--_console-resize-handle-size) / -2);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.console-resize-handle::before {
|
|
141
|
+
position: absolute;
|
|
142
|
+
background: var(--_console-resize-separator-line-background-color);
|
|
143
|
+
content: "";
|
|
144
|
+
pointer-events: none;
|
|
145
|
+
transition: background 120ms ease;
|
|
146
|
+
margin-top: -1px;
|
|
147
|
+
border-radius: 6px;
|
|
148
|
+
opacity: 0;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.console-resize-handle[data-console-resize-axis="horizontal"]::before {
|
|
152
|
+
width: 5px;
|
|
153
|
+
height: 90%;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.console-resize-handle[data-console-resize-axis="vertical"]::before {
|
|
157
|
+
width: 90%;
|
|
158
|
+
height: 5px;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.console-resize-handle:hover::before,
|
|
162
|
+
.console-resize-handle:focus-visible::before {
|
|
163
|
+
background: var(--_console-resize-separator-hover-line-background-color);
|
|
164
|
+
opacity: 1;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.console-resize-handle[data-active="true"]::before {
|
|
168
|
+
background: var(--_console-resize-separator-active-line-background-color);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.console-resize-grip {
|
|
172
|
+
position: relative;
|
|
173
|
+
display: inline-flex;
|
|
174
|
+
align-items: center;
|
|
175
|
+
justify-content: center;
|
|
176
|
+
border: 1px solid transparent;
|
|
177
|
+
border-radius: var(--_console-resize-separator-grip-border-radius);
|
|
178
|
+
background: transparent;
|
|
179
|
+
box-shadow: none;
|
|
180
|
+
color: inherit;
|
|
181
|
+
opacity: 0.55;
|
|
182
|
+
pointer-events: none;
|
|
183
|
+
transition:
|
|
184
|
+
opacity 120ms ease,
|
|
185
|
+
background 120ms ease,
|
|
186
|
+
border-color 120ms ease,
|
|
187
|
+
box-shadow 120ms ease,
|
|
188
|
+
color 120ms ease;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.console-resize-handle[data-console-resize-axis="horizontal"]
|
|
192
|
+
> .console-resize-grip {
|
|
193
|
+
width: 22px;
|
|
194
|
+
height: 34px;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.console-resize-handle[data-console-resize-axis="vertical"]
|
|
198
|
+
> .console-resize-grip {
|
|
199
|
+
width: 34px;
|
|
200
|
+
height: 22px;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.console-resize-handle:hover > .console-resize-grip,
|
|
204
|
+
.console-resize-handle:focus-visible > .console-resize-grip,
|
|
205
|
+
.console-resize-handle[data-active="true"] > .console-resize-grip {
|
|
206
|
+
border: var(--_console-resize-separator-grip-border);
|
|
207
|
+
background: var(--_console-resize-separator-grip-background-color);
|
|
208
|
+
box-shadow: var(--_console-resize-separator-grip-box-shadow);
|
|
209
|
+
opacity: 1;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.console-resize-handle[data-active="true"] > .console-resize-grip {
|
|
213
|
+
color: var(--_console-resize-separator-active-grip-color);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.console-resize-corner-handle {
|
|
217
|
+
position: absolute;
|
|
218
|
+
z-index: 4;
|
|
219
|
+
display: flex;
|
|
220
|
+
width: var(--_console-resize-corner-size);
|
|
221
|
+
height: var(--_console-resize-corner-size);
|
|
222
|
+
align-items: center;
|
|
223
|
+
justify-content: center;
|
|
224
|
+
border: 1px solid transparent;
|
|
225
|
+
border-radius: 8px;
|
|
226
|
+
background: transparent;
|
|
227
|
+
box-shadow: none;
|
|
228
|
+
color: var(--_console-resize-separator-grip-color);
|
|
229
|
+
opacity: 0.65;
|
|
230
|
+
outline: none;
|
|
231
|
+
touch-action: none;
|
|
232
|
+
transition:
|
|
233
|
+
opacity 120ms ease,
|
|
234
|
+
background 120ms ease,
|
|
235
|
+
border-color 120ms ease,
|
|
236
|
+
box-shadow 120ms ease,
|
|
237
|
+
color 120ms ease;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.console-resizable-frame[data-console-resize-horizontal-edge="end"]
|
|
241
|
+
> .console-resize-corner-handle {
|
|
242
|
+
right: -4px;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.console-resizable-frame[data-console-resize-horizontal-edge="start"]
|
|
246
|
+
> .console-resize-corner-handle {
|
|
247
|
+
left: -4px;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.console-resizable-frame[data-console-resize-vertical-edge="end"]
|
|
251
|
+
> .console-resize-corner-handle {
|
|
252
|
+
bottom: -4px;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.console-resizable-frame[data-console-resize-vertical-edge="start"]
|
|
256
|
+
> .console-resize-corner-handle {
|
|
257
|
+
top: -4px;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.console-resizable-frame[data-console-resize-horizontal-edge="end"][data-console-resize-vertical-edge="end"]
|
|
261
|
+
> .console-resize-corner-handle,
|
|
262
|
+
.console-resizable-frame[data-console-resize-horizontal-edge="start"][data-console-resize-vertical-edge="start"]
|
|
263
|
+
> .console-resize-corner-handle {
|
|
264
|
+
cursor: nwse-resize;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.console-resizable-frame[data-console-resize-horizontal-edge="end"][data-console-resize-vertical-edge="start"]
|
|
268
|
+
> .console-resize-corner-handle,
|
|
269
|
+
.console-resizable-frame[data-console-resize-horizontal-edge="start"][data-console-resize-vertical-edge="end"]
|
|
270
|
+
> .console-resize-corner-handle {
|
|
271
|
+
cursor: nesw-resize;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.console-resize-corner-handle:hover,
|
|
275
|
+
.console-resize-corner-handle:focus-visible,
|
|
276
|
+
.console-resize-corner-handle[data-active="true"] {
|
|
277
|
+
border: var(--_console-resize-separator-grip-border);
|
|
278
|
+
background: var(--_console-resize-separator-grip-background-color);
|
|
279
|
+
box-shadow: var(--_console-resize-separator-grip-box-shadow);
|
|
280
|
+
opacity: 1;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.console-resize-corner-handle[data-active="true"] {
|
|
284
|
+
color: var(--_console-resize-separator-active-grip-color);
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
@media (prefers-reduced-motion: reduce) {
|
|
288
|
+
.console-resize-handle::before,
|
|
289
|
+
.console-resize-grip,
|
|
290
|
+
.console-resize-corner-handle {
|
|
291
|
+
transition: none;
|
|
292
|
+
}
|
|
293
|
+
}
|