@progress/kendo-theme-core 14.5.1-dev.7 → 14.6.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/package.json
CHANGED
|
@@ -1,12 +1,116 @@
|
|
|
1
1
|
@use "sass:math";
|
|
2
2
|
@use "../../color-system/_constants.scss" as *;
|
|
3
|
+
@use "../../spacing/index.scss" as *;
|
|
4
|
+
@use "../../z-index/index.scss" as *;
|
|
5
|
+
@use "../../border-radii/index.scss" as *;
|
|
3
6
|
@use "./variables.scss" as *;
|
|
4
7
|
@use "../toolbar/_variables.scss" as *;
|
|
5
8
|
|
|
9
|
+
// Shared box model for the Crop/Resize/Rotate overlay frames
|
|
10
|
+
@mixin kendo-image-editor-frame-base() {
|
|
11
|
+
width: 100%;
|
|
12
|
+
height: 100%;
|
|
13
|
+
border-width: $kendo-image-editor-frame-border-width;
|
|
14
|
+
border-style: $kendo-image-editor-frame-border-style;
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
position: absolute;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
// Rule-of-thirds guide lines, shared by Crop and Rotate
|
|
20
|
+
@mixin kendo-image-editor-grid-lines() {
|
|
21
|
+
position: absolute;
|
|
22
|
+
inset: 0;
|
|
23
|
+
opacity: .5;
|
|
24
|
+
pointer-events: none;
|
|
25
|
+
background-repeat: no-repeat;
|
|
26
|
+
background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px;
|
|
27
|
+
background-position:
|
|
28
|
+
calc(100% / 3 - 1px) 0,
|
|
29
|
+
calc(100% / 3 * 2 - 1px) 0,
|
|
30
|
+
0 calc(100% / 3 - 1px),
|
|
31
|
+
0 calc(100% / 3 * 2 - 1px);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// Pill-shaped edge handles (n/s/w/e), shared by Crop and Resize
|
|
35
|
+
@mixin kendo-image-editor-edge-handles() {
|
|
36
|
+
$edge-offset: calc(-1 * (#{$kendo-image-editor-frame-border-width} + #{$kendo-image-editor-handle-thickness}) / 2);
|
|
37
|
+
|
|
38
|
+
.k-resize-n,
|
|
39
|
+
.k-resize-s {
|
|
40
|
+
left: calc( 50% - ($kendo-image-editor-handle-size / 2) );
|
|
41
|
+
width: $kendo-image-editor-handle-size;
|
|
42
|
+
height: $kendo-image-editor-handle-thickness;
|
|
43
|
+
border-style: solid;
|
|
44
|
+
border-width: $kendo-image-editor-handle-border-width;
|
|
45
|
+
border-radius: $kendo-image-editor-handle-border-radius;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.k-resize-w,
|
|
49
|
+
.k-resize-e {
|
|
50
|
+
top: calc( 50% - ($kendo-image-editor-handle-size / 2) );
|
|
51
|
+
width: $kendo-image-editor-handle-thickness;
|
|
52
|
+
height: $kendo-image-editor-handle-size;
|
|
53
|
+
border-style: solid;
|
|
54
|
+
border-width: $kendo-image-editor-handle-border-width;
|
|
55
|
+
border-radius: $kendo-image-editor-handle-border-radius;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.k-resize-n {
|
|
59
|
+
top: $edge-offset;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.k-resize-s {
|
|
63
|
+
bottom: $edge-offset;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.k-resize-w {
|
|
67
|
+
left: $edge-offset;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.k-resize-e {
|
|
71
|
+
right: $edge-offset;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// Round "scale handle" corner anchors, shared by Resize and Rotate
|
|
76
|
+
@mixin kendo-image-editor-scale-handle-corners() {
|
|
77
|
+
$scale-handle-offset: calc(-1 * $kendo-image-editor-scale-handle-size / 2);
|
|
78
|
+
|
|
79
|
+
.k-scale-handle {
|
|
80
|
+
position: absolute;
|
|
81
|
+
width: $kendo-image-editor-scale-handle-size;
|
|
82
|
+
height: $kendo-image-editor-scale-handle-size;
|
|
83
|
+
border-style: solid;
|
|
84
|
+
border-width: $kendo-image-editor-handle-border-width;
|
|
85
|
+
border-radius: $kendo-image-editor-handle-border-radius;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.k-scale-handle.k-resize-nw {
|
|
89
|
+
top: $scale-handle-offset;
|
|
90
|
+
left: $scale-handle-offset;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.k-scale-handle.k-resize-ne {
|
|
94
|
+
top: $scale-handle-offset;
|
|
95
|
+
right: $scale-handle-offset;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.k-scale-handle.k-resize-sw {
|
|
99
|
+
bottom: $scale-handle-offset;
|
|
100
|
+
left: $scale-handle-offset;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.k-scale-handle.k-resize-se {
|
|
104
|
+
bottom: $scale-handle-offset;
|
|
105
|
+
right: $scale-handle-offset;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
6
109
|
@mixin kendo-image-editor--layout-base() {
|
|
7
110
|
|
|
8
111
|
// Image Editor
|
|
9
112
|
.k-imageeditor {
|
|
113
|
+
position: relative;
|
|
10
114
|
margin-block: $kendo-image-editor-margin-y;
|
|
11
115
|
margin-inline: $kendo-image-editor-margin-x;
|
|
12
116
|
padding-block: $kendo-image-editor-padding-y;
|
|
@@ -34,6 +138,101 @@
|
|
|
34
138
|
.k-imageeditor-toolbar {
|
|
35
139
|
border-width: 0;
|
|
36
140
|
border-block-end-width: $kendo-toolbar-border-width;
|
|
141
|
+
|
|
142
|
+
.k-input,
|
|
143
|
+
.k-picker {
|
|
144
|
+
width: 7em;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// Non-scrolling frame: hosts the overlay so it never moves with the scrolled items
|
|
149
|
+
.k-imageeditor-sidebar {
|
|
150
|
+
display: flex;
|
|
151
|
+
flex-flow: column nowrap;
|
|
152
|
+
position: relative;
|
|
153
|
+
box-sizing: border-box;
|
|
154
|
+
border-style: solid;
|
|
155
|
+
border-width: 0 $kendo-toolbar-border-width 0 0;
|
|
156
|
+
border-bottom-left-radius: inherit;
|
|
157
|
+
|
|
158
|
+
// Scroll overlay (toggled together with -scrollable-start/-scrollable-end by the widget)
|
|
159
|
+
&.k-imageeditor-sidebar-scrollable {
|
|
160
|
+
&::before,
|
|
161
|
+
&::after {
|
|
162
|
+
content: "";
|
|
163
|
+
width: 100%;
|
|
164
|
+
aspect-ratio: 1;
|
|
165
|
+
position: absolute;
|
|
166
|
+
inset-inline-start: 0;
|
|
167
|
+
z-index: k-z-index("base", 3);
|
|
168
|
+
border-radius: inherit;
|
|
169
|
+
pointer-events: none;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
&::before {
|
|
173
|
+
inset-block-start: 0;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
&::after {
|
|
177
|
+
inset-block-end: 0;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
&.k-imageeditor-sidebar-scrollable-start::before,
|
|
181
|
+
&.k-imageeditor-sidebar-scrollable-end::after {
|
|
182
|
+
display: none;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
// Adaptive mode: horizontal scrolling with overlays on left and right
|
|
188
|
+
.k-imageeditor-adaptive .k-imageeditor-sidebar {
|
|
189
|
+
&.k-imageeditor-sidebar-scrollable {
|
|
190
|
+
&::before,
|
|
191
|
+
&::after {
|
|
192
|
+
width: auto;
|
|
193
|
+
height: 100%;
|
|
194
|
+
aspect-ratio: 1;
|
|
195
|
+
inset-block-start: 0;
|
|
196
|
+
inset-block-end: 0;
|
|
197
|
+
border-radius: inherit;
|
|
198
|
+
pointer-events: none;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
&::before {
|
|
202
|
+
inset-inline-start: 0;
|
|
203
|
+
inset-inline-end: auto;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
&::after {
|
|
207
|
+
inset-inline-start: auto;
|
|
208
|
+
inset-inline-end: 0;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
&.k-imageeditor-sidebar-scrollable-start::before,
|
|
212
|
+
&.k-imageeditor-sidebar-scrollable-end::after {
|
|
213
|
+
display: none;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
// Actual scrolling element, kept separate from .k-imageeditor-sidebar so its overlay stays put
|
|
219
|
+
.k-imageeditor-sidebar-items {
|
|
220
|
+
display: flex;
|
|
221
|
+
flex-flow: column nowrap;
|
|
222
|
+
align-items: center;
|
|
223
|
+
justify-content: flex-start;
|
|
224
|
+
gap: $kendo-toolbar-md-spacing;
|
|
225
|
+
padding-block: $kendo-toolbar-md-padding-y;
|
|
226
|
+
padding-inline: $kendo-toolbar-md-padding-x;
|
|
227
|
+
box-sizing: border-box;
|
|
228
|
+
flex: 1 1 auto;
|
|
229
|
+
overflow-x: hidden;
|
|
230
|
+
overflow-y: auto;
|
|
231
|
+
scrollbar-width: none;
|
|
232
|
+
|
|
233
|
+
&::-webkit-scrollbar {
|
|
234
|
+
display: none;
|
|
235
|
+
}
|
|
37
236
|
}
|
|
38
237
|
|
|
39
238
|
|
|
@@ -44,6 +243,8 @@
|
|
|
44
243
|
border-color: inherit;
|
|
45
244
|
display: flex;
|
|
46
245
|
flex-flow: row nowrap;
|
|
246
|
+
border-bottom-left-radius: inherit;
|
|
247
|
+
border-bottom-right-radius: inherit;
|
|
47
248
|
}
|
|
48
249
|
|
|
49
250
|
|
|
@@ -53,7 +254,11 @@
|
|
|
53
254
|
display: flex;
|
|
54
255
|
flex-flow: row nowrap;
|
|
55
256
|
overflow: auto;
|
|
257
|
+
padding: k-spacing(6);
|
|
258
|
+
box-sizing: border-box;
|
|
259
|
+
border-bottom-right-radius: inherit;
|
|
56
260
|
}
|
|
261
|
+
|
|
57
262
|
.k-imageeditor-canvas {
|
|
58
263
|
margin: auto;
|
|
59
264
|
display: flex;
|
|
@@ -61,19 +266,49 @@
|
|
|
61
266
|
position: relative;
|
|
62
267
|
}
|
|
63
268
|
|
|
269
|
+
// Placeholder: replaces the canvas for non-editable states (empty, loading, error)
|
|
270
|
+
.k-imageeditor-placeholder {
|
|
271
|
+
display: flex;
|
|
272
|
+
flex-flow: column nowrap;
|
|
273
|
+
align-items: center;
|
|
274
|
+
justify-content: center;
|
|
275
|
+
flex: 1 1 auto;
|
|
276
|
+
width: 100%;
|
|
277
|
+
box-sizing: border-box;
|
|
278
|
+
border-width: 1px;
|
|
279
|
+
border-style: solid;
|
|
280
|
+
text-align: center;
|
|
281
|
+
|
|
282
|
+
.k-imageeditor-placeholder-icon,
|
|
283
|
+
.k-imageeditor-placeholder-loader {
|
|
284
|
+
margin-block-end: k-spacing(6);
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.k-imageeditor-placeholder-hint {
|
|
288
|
+
display: flex;
|
|
289
|
+
flex-flow: column nowrap;
|
|
290
|
+
align-items: center;
|
|
291
|
+
gap: k-spacing(2);
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.k-imageeditor-placeholder-title {
|
|
295
|
+
font-size: var(--kendo-font-size-xl);
|
|
296
|
+
font-weight: var(--kendo-font-weight-medium);
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
|
|
64
300
|
|
|
65
301
|
// Action Pane
|
|
66
302
|
.k-imageeditor-action-pane {
|
|
67
|
-
padding-block: $kendo-image-editor-action-pane-padding-y;
|
|
68
|
-
padding-inline: $kendo-image-editor-action-pane-padding-x;
|
|
69
303
|
width: $kendo-image-editor-action-pane-width;
|
|
70
304
|
border-width: 0;
|
|
71
|
-
border-inline-
|
|
305
|
+
border-inline-end-width: $kendo-image-editor-content-border-width;
|
|
72
306
|
border-style: solid;
|
|
73
307
|
border-color: inherit;
|
|
74
308
|
box-sizing: border-box;
|
|
309
|
+
display: flex;
|
|
310
|
+
flex-flow: column nowrap;
|
|
75
311
|
flex: none;
|
|
76
|
-
overflow-y: auto;
|
|
77
312
|
|
|
78
313
|
.k-input-inner,
|
|
79
314
|
.k-input-value-text {
|
|
@@ -81,6 +316,149 @@
|
|
|
81
316
|
}
|
|
82
317
|
}
|
|
83
318
|
|
|
319
|
+
// Legacy single-block pane content (e.g. Resize), kept flush with the action pane's own frame
|
|
320
|
+
.k-imageeditor-pane-form {
|
|
321
|
+
padding-block: $kendo-image-editor-action-pane-padding-y;
|
|
322
|
+
padding-inline: $kendo-image-editor-action-pane-padding-x;
|
|
323
|
+
flex: 1 1 auto;
|
|
324
|
+
overflow-y: auto;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
// Pane chrome: header (title + close), content (scrollable fields), footer (actions)
|
|
328
|
+
.k-imageeditor-pane {
|
|
329
|
+
display: flex;
|
|
330
|
+
flex-flow: column nowrap;
|
|
331
|
+
flex: 1 1 auto;
|
|
332
|
+
min-height: 0;
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
.k-imageeditor-pane-header {
|
|
336
|
+
padding-block: $kendo-image-editor-pane-header-padding-y;
|
|
337
|
+
padding-inline: $kendo-image-editor-pane-header-padding-x;
|
|
338
|
+
display: flex;
|
|
339
|
+
flex-flow: row nowrap;
|
|
340
|
+
align-items: center;
|
|
341
|
+
justify-content: space-between;
|
|
342
|
+
gap: $kendo-image-editor-pane-header-gap;
|
|
343
|
+
flex: none;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.k-imageeditor-pane-title {
|
|
347
|
+
font-size: var(--kendo-font-size-xl);
|
|
348
|
+
font-weight: var(--kendo-font-weight-medium);
|
|
349
|
+
line-height: 1.2;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.k-imageeditor-pane-content {
|
|
353
|
+
padding-block-start: $kendo-image-editor-pane-content-padding-top;
|
|
354
|
+
padding-block-end: $kendo-image-editor-pane-content-padding-bottom;
|
|
355
|
+
padding-inline: $kendo-image-editor-pane-content-padding-x;
|
|
356
|
+
display: flex;
|
|
357
|
+
flex-flow: column nowrap;
|
|
358
|
+
gap: $kendo-image-editor-pane-content-gap;
|
|
359
|
+
flex: 1 1 auto;
|
|
360
|
+
overflow-y: auto;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
.k-imageeditor-pane-footer {
|
|
364
|
+
padding-block: $kendo-image-editor-pane-footer-padding-y;
|
|
365
|
+
padding-inline: $kendo-image-editor-pane-footer-padding-x;
|
|
366
|
+
flex: none;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
// Adjustment row: a slider paired with its numeric input (Brightness, Contrast, ...)
|
|
370
|
+
.k-imageeditor-adjustment-editor {
|
|
371
|
+
display: flex;
|
|
372
|
+
flex-flow: row nowrap;
|
|
373
|
+
align-items: center;
|
|
374
|
+
gap: $kendo-image-editor-adjustment-row-gap;
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
.k-imageeditor-adjustment-slider {
|
|
378
|
+
flex: 1 1 auto;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
// Option list: a horizontally-scrollable row of option previews (aspect ratios, shapes, presets, ...)
|
|
382
|
+
.k-imageeditor-option-list {
|
|
383
|
+
position: relative;
|
|
384
|
+
width: 100%;
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
// Actual scrolling element. The scroll-fade overlay lives here (rather than on the
|
|
388
|
+
// non-scrolling .k-imageeditor-option-list wrapper) so it aligns with the negative
|
|
389
|
+
// margins below and fully covers the selected chip's shadow ring at the scroll edges.
|
|
390
|
+
.k-imageeditor-option-list-items {
|
|
391
|
+
display: flex;
|
|
392
|
+
flex-flow: row nowrap;
|
|
393
|
+
align-items: center;
|
|
394
|
+
gap: $kendo-image-editor-option-list-gap;
|
|
395
|
+
width: 100%;
|
|
396
|
+
overflow-x: auto;
|
|
397
|
+
position: relative;
|
|
398
|
+
// Extra padding keeps the selected chip's outer shadow ring from being clipped at the ends of the scroll range (block: overflow-x: auto forces overflow-y to auto too; inline: no room past the first/last item's border-box); the negative margins cancel the added size.
|
|
399
|
+
padding-block: 3px;
|
|
400
|
+
margin-block: -3px;
|
|
401
|
+
padding-inline: 3px;
|
|
402
|
+
margin-inline: -3px;
|
|
403
|
+
scrollbar-width: none;
|
|
404
|
+
|
|
405
|
+
&::-webkit-scrollbar {
|
|
406
|
+
display: none;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
.k-imageeditor-option-list-scrollable & {
|
|
410
|
+
&::before,
|
|
411
|
+
&::after {
|
|
412
|
+
content: "";
|
|
413
|
+
height: 100%;
|
|
414
|
+
aspect-ratio: 1;
|
|
415
|
+
position: absolute;
|
|
416
|
+
inset-block-start: 0;
|
|
417
|
+
z-index: k-z-index("base", 3);
|
|
418
|
+
pointer-events: none;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
&::before {
|
|
422
|
+
inset-inline-start: 0;
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
&::after {
|
|
426
|
+
inset-inline-end: 0;
|
|
427
|
+
}
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
.k-imageeditor-option-list-scrollable-start &::before,
|
|
431
|
+
.k-imageeditor-option-list-scrollable-end &::after {
|
|
432
|
+
display: none;
|
|
433
|
+
}
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
.k-imageeditor-option-preview {
|
|
437
|
+
display: flex;
|
|
438
|
+
flex-flow: column nowrap;
|
|
439
|
+
align-items: center;
|
|
440
|
+
justify-content: center;
|
|
441
|
+
flex: none;
|
|
442
|
+
width: $kendo-image-editor-option-preview-width;
|
|
443
|
+
padding-block: $kendo-image-editor-option-preview-padding-y;
|
|
444
|
+
padding-inline: $kendo-image-editor-option-preview-padding-x;
|
|
445
|
+
border-width: 1px;
|
|
446
|
+
border-style: solid;
|
|
447
|
+
border-radius: $kendo-image-editor-option-preview-border-radius;
|
|
448
|
+
font-size: var(--kendo-font-size-xs);
|
|
449
|
+
box-sizing: border-box;
|
|
450
|
+
cursor: pointer;
|
|
451
|
+
user-select: none;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.k-imageeditor-preview-thumbnail-label {
|
|
455
|
+
max-width: 100%;
|
|
456
|
+
overflow: hidden;
|
|
457
|
+
white-space: nowrap;
|
|
458
|
+
text-overflow: ellipsis;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
|
|
84
462
|
|
|
85
463
|
// Crop Tool
|
|
86
464
|
.k-imageeditor-crop-overlay {
|
|
@@ -92,70 +470,226 @@
|
|
|
92
470
|
}
|
|
93
471
|
|
|
94
472
|
.k-imageeditor-crop {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
473
|
+
@include kendo-image-editor-frame-base();
|
|
474
|
+
|
|
475
|
+
// Rule-of-thirds guide lines
|
|
476
|
+
.k-imageeditor-crop-grid {
|
|
477
|
+
@include kendo-image-editor-grid-lines();
|
|
478
|
+
}
|
|
101
479
|
|
|
102
480
|
.k-resize-handle {
|
|
103
|
-
margin-block: $kendo-image-editor-
|
|
104
|
-
margin-inline: $kendo-image-editor-
|
|
105
|
-
|
|
106
|
-
border-width: $kendo-image-editor-resize-handle-border-width;
|
|
481
|
+
margin-block: $kendo-image-editor-handle-margin-y;
|
|
482
|
+
margin-inline: $kendo-image-editor-handle-margin-x;
|
|
483
|
+
box-sizing: border-box;
|
|
107
484
|
}
|
|
108
485
|
|
|
486
|
+
// Distance handles are pulled outward so they straddle the crop border instead of
|
|
487
|
+
// sitting flush with it, matching the Figma spec. Corners need to clear the border on
|
|
488
|
+
// both edges meeting at that point plus their own stroke; edge pills are simply
|
|
489
|
+
// centered on the border line.
|
|
490
|
+
$corner-offset: calc(-1 * (2 * #{$kendo-image-editor-frame-border-width} + #{$kendo-image-editor-handle-border-width}));
|
|
491
|
+
|
|
492
|
+
// Corner handles: an exact reproduction of the Figma "Crop Handle" glyph (a rounded
|
|
493
|
+
// L-bracket with a sharp inner corner), via 2 stacked clip-paths so the stroke and
|
|
494
|
+
// fill can use different colors. The base shape hugs the top+left edges (nw); the
|
|
495
|
+
// other 3 corners reuse it through rotation.
|
|
109
496
|
.k-resize-sw,
|
|
110
497
|
.k-resize-se,
|
|
111
498
|
.k-resize-nw,
|
|
112
499
|
.k-resize-ne {
|
|
113
|
-
width:
|
|
114
|
-
height:
|
|
500
|
+
width: 22px;
|
|
501
|
+
height: 22px;
|
|
502
|
+
clip-path: path("M5 22C7.76 22 10 19.76 10 17V10H17C19.76 10 22 7.76 22 5C22 2.24 19.76 0 17 0H5C2.24 0 0 2.24 0 5V17C0 19.76 2.24 22 5 22Z");
|
|
503
|
+
|
|
504
|
+
&::before {
|
|
505
|
+
position: absolute;
|
|
506
|
+
inset: 0;
|
|
507
|
+
clip-path: path("M6.09 20C8.35 20 10.18 18.17 10.18 15.91V10.18H15.91C18.17 10.18 20 8.35 20 6.09C20 3.83 18.17 2 15.91 2H6.09C6.02 2 5.95 2 5.88 2.01C3.79 2.11 2.11 3.79 2.01 5.88L2 6.08C2 6.08 2 6.08 2 6.09L2 6.12V15.91C2 18.17 3.83 20 6.09 20Z");
|
|
508
|
+
}
|
|
115
509
|
}
|
|
116
510
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
511
|
+
// Edge handles: a solid pill, centered on the midpoint of the edge
|
|
512
|
+
@include kendo-image-editor-edge-handles();
|
|
513
|
+
|
|
514
|
+
.k-resize-ne {
|
|
515
|
+
transform: rotate(90deg);
|
|
122
516
|
}
|
|
123
517
|
|
|
124
|
-
.k-resize-
|
|
125
|
-
|
|
126
|
-
top: calc( 50% - ($kendo-image-editor-resize-handle-size / 2) );
|
|
127
|
-
width: 0;
|
|
128
|
-
height: $kendo-image-editor-resize-handle-size;
|
|
518
|
+
.k-resize-se {
|
|
519
|
+
transform: rotate(180deg);
|
|
129
520
|
}
|
|
130
521
|
|
|
131
|
-
.k-resize-
|
|
132
|
-
transform: rotate(
|
|
522
|
+
.k-resize-sw {
|
|
523
|
+
transform: rotate(270deg);
|
|
133
524
|
}
|
|
134
525
|
|
|
135
526
|
.k-resize-nw {
|
|
136
|
-
|
|
527
|
+
top: $corner-offset;
|
|
528
|
+
left: $corner-offset;
|
|
137
529
|
}
|
|
138
530
|
|
|
531
|
+
.k-resize-ne {
|
|
532
|
+
top: $corner-offset;
|
|
533
|
+
right: $corner-offset;
|
|
534
|
+
}
|
|
139
535
|
|
|
140
536
|
.k-resize-sw {
|
|
141
|
-
|
|
537
|
+
bottom: $corner-offset;
|
|
538
|
+
left: $corner-offset;
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
.k-resize-se {
|
|
542
|
+
bottom: $corner-offset;
|
|
543
|
+
right: $corner-offset;
|
|
142
544
|
}
|
|
545
|
+
}
|
|
546
|
+
|
|
547
|
+
|
|
548
|
+
// Resize Tool: selection frame spans the full image; edge handles reuse the Crop tool's
|
|
549
|
+
// pill geometry, corners use a round "scale handle" instead of the Crop tool's L-bracket.
|
|
550
|
+
.k-imageeditor-resize {
|
|
551
|
+
@include kendo-image-editor-frame-base();
|
|
552
|
+
|
|
553
|
+
.k-resize-handle,
|
|
554
|
+
.k-scale-handle {
|
|
555
|
+
margin-block: $kendo-image-editor-handle-margin-y;
|
|
556
|
+
margin-inline: $kendo-image-editor-handle-margin-x;
|
|
557
|
+
box-sizing: border-box;
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
@include kendo-image-editor-edge-handles();
|
|
561
|
+
@include kendo-image-editor-scale-handle-corners();
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
|
|
565
|
+
// Rotate Tool: selection frame spans the full image with a rule-of-thirds guide (reusing the
|
|
566
|
+
// Crop tool's grid) and a round "scale handle" anchor at every corner and edge midpoint.
|
|
567
|
+
.k-imageeditor-rotate {
|
|
568
|
+
@include kendo-image-editor-frame-base();
|
|
569
|
+
|
|
570
|
+
.k-imageeditor-crop-grid {
|
|
571
|
+
@include kendo-image-editor-grid-lines();
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
.k-scale-handle {
|
|
575
|
+
margin-block: $kendo-image-editor-handle-margin-y;
|
|
576
|
+
margin-inline: $kendo-image-editor-handle-margin-x;
|
|
577
|
+
box-sizing: border-box;
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
@include kendo-image-editor-scale-handle-corners();
|
|
581
|
+
|
|
582
|
+
// Extra edge-midpoint anchors: Rotate is the only tool where every one of the 8
|
|
583
|
+
// positions (not just the 4 corners) uses the round scale handle.
|
|
584
|
+
$scale-handle-offset: calc(-1 * $kendo-image-editor-scale-handle-size / 2);
|
|
143
585
|
|
|
144
|
-
.k-resize-n {
|
|
145
|
-
top:
|
|
586
|
+
.k-scale-handle.k-resize-n {
|
|
587
|
+
top: $scale-handle-offset;
|
|
588
|
+
left: calc(50% - ($kendo-image-editor-scale-handle-size / 2));
|
|
146
589
|
}
|
|
147
590
|
|
|
148
|
-
.k-resize-s {
|
|
149
|
-
bottom:
|
|
591
|
+
.k-scale-handle.k-resize-s {
|
|
592
|
+
bottom: $scale-handle-offset;
|
|
593
|
+
left: calc(50% - ($kendo-image-editor-scale-handle-size / 2));
|
|
150
594
|
}
|
|
151
595
|
|
|
152
|
-
.k-resize-w {
|
|
153
|
-
left:
|
|
596
|
+
.k-scale-handle.k-resize-w {
|
|
597
|
+
left: $scale-handle-offset;
|
|
598
|
+
top: calc(50% - ($kendo-image-editor-scale-handle-size / 2));
|
|
154
599
|
}
|
|
155
600
|
|
|
156
|
-
.k-resize-e {
|
|
157
|
-
right:
|
|
601
|
+
.k-scale-handle.k-resize-e {
|
|
602
|
+
right: $scale-handle-offset;
|
|
603
|
+
top: calc(50% - ($kendo-image-editor-scale-handle-size / 2));
|
|
158
604
|
}
|
|
159
605
|
}
|
|
160
606
|
|
|
607
|
+
// Mobile: single scoping class for every part that needs a different layout on small screens
|
|
608
|
+
.k-imageeditor-adaptive {
|
|
609
|
+
display: flex;
|
|
610
|
+
flex-flow: column nowrap;
|
|
611
|
+
|
|
612
|
+
.k-imageeditor-content {
|
|
613
|
+
flex: 1 1 auto;
|
|
614
|
+
flex-flow: column nowrap;
|
|
615
|
+
min-height: 0;
|
|
616
|
+
}
|
|
617
|
+
|
|
618
|
+
.k-imageeditor-sidebar {
|
|
619
|
+
flex-flow: row nowrap;
|
|
620
|
+
border-width: $kendo-toolbar-border-width 0 0;
|
|
621
|
+
border-bottom-left-radius: inherit;
|
|
622
|
+
border-bottom-right-radius: inherit;
|
|
623
|
+
|
|
624
|
+
.k-imageeditor-sidebar-items {
|
|
625
|
+
flex-flow: row nowrap;
|
|
626
|
+
overflow-x: auto;
|
|
627
|
+
overflow-y: hidden;
|
|
628
|
+
}
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
.k-imageeditor-canvas-container {
|
|
632
|
+
padding: k-spacing(4);
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
// Bottom sheet: pane sits below the canvas, above the sidebar bar
|
|
636
|
+
.k-imageeditor-action-pane {
|
|
637
|
+
width: auto;
|
|
638
|
+
height: 301px;
|
|
639
|
+
flex: none;
|
|
640
|
+
min-height: 0;
|
|
641
|
+
border-width: 0;
|
|
642
|
+
// box-shadow (not border-width) avoids a mitered triangle artifact where the top
|
|
643
|
+
// border meets the 0-width side borders at the rounded corners below
|
|
644
|
+
box-shadow: inset 0 $kendo-image-editor-content-border-width 0 0 $kendo-image-editor-border;
|
|
645
|
+
border-start-start-radius: k-border-radius(xxl);
|
|
646
|
+
border-start-end-radius: k-border-radius(xxl);
|
|
647
|
+
z-index: k-z-index("base", 2);
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
// Bottom-sheet header: Close (start), Title (centered), Confirm (end)
|
|
651
|
+
.k-imageeditor-pane-header .k-imageeditor-pane-title {
|
|
652
|
+
flex: 1 1 auto;
|
|
653
|
+
text-align: center;
|
|
654
|
+
}
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
.k-imageeditor-field-row {
|
|
658
|
+
display: flex;
|
|
659
|
+
gap: k-spacing(4);
|
|
660
|
+
align-items: center;
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
.k-imageeditor-controls {
|
|
664
|
+
display: flex;
|
|
665
|
+
gap: k-spacing(2);
|
|
666
|
+
}
|
|
667
|
+
|
|
668
|
+
.k-imageeditor-option-grid {
|
|
669
|
+
display: grid;
|
|
670
|
+
grid-template-columns: repeat(3, 1fr);
|
|
671
|
+
gap: k-spacing(3);
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
.k-imageeditor-dialog-row {
|
|
675
|
+
display: flex;
|
|
676
|
+
gap: k-spacing(6);
|
|
677
|
+
|
|
678
|
+
.k-form {
|
|
679
|
+
flex: 1 1 auto;
|
|
680
|
+
}
|
|
681
|
+
}
|
|
682
|
+
|
|
683
|
+
.k-imageeditor-option-content {
|
|
684
|
+
display: flex;
|
|
685
|
+
flex-direction: column;
|
|
686
|
+
align-items: center;
|
|
687
|
+
gap: 6px;
|
|
688
|
+
width: 100%;
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
.k-imageeditor-option-label {
|
|
692
|
+
font-size: $kendo-image-editor-option-label-font-size;
|
|
693
|
+
}
|
|
694
|
+
|
|
161
695
|
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
@use "../../mixins/index.scss" as *;
|
|
2
|
+
@use "../../color-system/_functions.scss" as *;
|
|
2
3
|
@use "./variables.scss" as *;
|
|
4
|
+
@use "../toolbar/variables.scss" as *;
|
|
3
5
|
|
|
4
6
|
@mixin kendo-image-editor--theme-base() {
|
|
5
7
|
|
|
@@ -35,20 +37,178 @@
|
|
|
35
37
|
);
|
|
36
38
|
}
|
|
37
39
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
+
.k-imageeditor-pane-title {
|
|
41
|
+
color: $kendo-image-editor-pane-title-text;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// Option list scroll-fade overlay (aspect ratios, shapes, presets, ...)
|
|
45
|
+
.k-imageeditor-option-list-scrollable .k-imageeditor-option-list-items {
|
|
46
|
+
&::before {
|
|
47
|
+
background: linear-gradient(270deg, $kendo-image-editor-option-list-scroll-gradient);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&::after {
|
|
51
|
+
background: linear-gradient(90deg, $kendo-image-editor-option-list-scroll-gradient);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.k-imageeditor-option-preview {
|
|
40
56
|
@include fill(
|
|
41
|
-
$kendo-image-editor-
|
|
42
|
-
$kendo-image-editor-
|
|
43
|
-
$kendo-image-editor-
|
|
57
|
+
$kendo-image-editor-option-preview-text,
|
|
58
|
+
$kendo-image-editor-option-preview-bg,
|
|
59
|
+
$kendo-image-editor-option-preview-border
|
|
44
60
|
);
|
|
61
|
+
|
|
62
|
+
&:hover,
|
|
63
|
+
&.k-hover {
|
|
64
|
+
@include fill(
|
|
65
|
+
$kendo-image-editor-option-preview-hover-text,
|
|
66
|
+
$kendo-image-editor-option-preview-hover-bg
|
|
67
|
+
);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&:focus,
|
|
71
|
+
&:focus-visible,
|
|
72
|
+
&.k-focus {
|
|
73
|
+
box-shadow: $kendo-image-editor-option-preview-focus-shadow;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&.k-selected {
|
|
77
|
+
@include fill(
|
|
78
|
+
$kendo-image-editor-option-preview-selected-text,
|
|
79
|
+
null,
|
|
80
|
+
$kendo-image-editor-option-preview-selected-border
|
|
81
|
+
);
|
|
82
|
+
box-shadow: $kendo-image-editor-option-preview-selected-shadow;
|
|
83
|
+
font-weight: $kendo-image-editor-option-preview-selected-font-weight;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
// Crop/Resize/Rotate overlay frame, shared border/bg/text
|
|
88
|
+
.k-imageeditor-crop,
|
|
89
|
+
.k-imageeditor-resize,
|
|
90
|
+
.k-imageeditor-rotate {
|
|
91
|
+
@include fill(
|
|
92
|
+
$kendo-image-editor-frame-text,
|
|
93
|
+
$kendo-image-editor-frame-bg,
|
|
94
|
+
$kendo-image-editor-frame-border
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
// Rule-of-thirds guide lines, shared by Crop and Rotate
|
|
99
|
+
.k-imageeditor-crop .k-imageeditor-crop-grid,
|
|
100
|
+
.k-imageeditor-rotate .k-imageeditor-crop-grid {
|
|
101
|
+
background-image:
|
|
102
|
+
linear-gradient($kendo-image-editor-grid-line-color, $kendo-image-editor-grid-line-color),
|
|
103
|
+
linear-gradient($kendo-image-editor-grid-line-color, $kendo-image-editor-grid-line-color),
|
|
104
|
+
linear-gradient($kendo-image-editor-grid-line-color, $kendo-image-editor-grid-line-color),
|
|
105
|
+
linear-gradient($kendo-image-editor-grid-line-color, $kendo-image-editor-grid-line-color);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// Handle color, shared by Crop's edge pills, Resize's pills/scale handles and Rotate's scale handles
|
|
109
|
+
.k-imageeditor-crop .k-resize-handle,
|
|
110
|
+
.k-imageeditor-resize .k-resize-handle,
|
|
111
|
+
.k-imageeditor-resize .k-scale-handle,
|
|
112
|
+
.k-imageeditor-rotate .k-scale-handle {
|
|
113
|
+
border-color: $kendo-image-editor-handle-border;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.k-imageeditor-resize .k-resize-handle,
|
|
117
|
+
.k-imageeditor-resize .k-scale-handle,
|
|
118
|
+
.k-imageeditor-rotate .k-scale-handle {
|
|
119
|
+
background-color: $kendo-image-editor-handle-bg;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// Crop tool's L-bracket corner handles
|
|
123
|
+
.k-imageeditor-crop {
|
|
124
|
+
.k-resize-sw,
|
|
125
|
+
.k-resize-se,
|
|
126
|
+
.k-resize-nw,
|
|
127
|
+
.k-resize-ne {
|
|
128
|
+
background-color: $kendo-image-editor-handle-border;
|
|
129
|
+
|
|
130
|
+
&::before {
|
|
131
|
+
background-color: $kendo-image-editor-handle-bg;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.k-resize-n,
|
|
136
|
+
.k-resize-s,
|
|
137
|
+
.k-resize-w,
|
|
138
|
+
.k-resize-e {
|
|
139
|
+
background-color: $kendo-image-editor-handle-bg;
|
|
140
|
+
}
|
|
45
141
|
}
|
|
46
142
|
|
|
47
|
-
// Crop Overlay
|
|
143
|
+
// Crop Overlay: accent-tinted layer (matches the frame/handle color) stacked over a neutral dark scrim
|
|
48
144
|
.k-imageeditor-crop-overlay {
|
|
49
|
-
|
|
50
|
-
$bg
|
|
145
|
+
background-image:
|
|
146
|
+
linear-gradient($kendo-image-editor-crop-overlay-accent-bg, $kendo-image-editor-crop-overlay-accent-bg),
|
|
147
|
+
linear-gradient($kendo-image-editor-crop-overlay-bg, $kendo-image-editor-crop-overlay-bg);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.k-imageeditor-sidebar {
|
|
151
|
+
@include fill(
|
|
152
|
+
$color: $kendo-toolbar-flat-text,
|
|
153
|
+
$bg: var(--kendo-color-surface-alt),
|
|
154
|
+
$border: $kendo-toolbar-flat-border
|
|
51
155
|
);
|
|
156
|
+
|
|
157
|
+
&.k-imageeditor-sidebar-scrollable {
|
|
158
|
+
&::before {
|
|
159
|
+
background: linear-gradient(180deg, $kendo-toolbar-scroll-overlay);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
&::after {
|
|
163
|
+
background: linear-gradient(0deg, $kendo-toolbar-scroll-overlay);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
// Adaptive mode: horizontal scrollable sidebar with left/right overlays
|
|
169
|
+
.k-imageeditor-adaptive .k-imageeditor-sidebar {
|
|
170
|
+
&.k-imageeditor-sidebar-scrollable {
|
|
171
|
+
&::before {
|
|
172
|
+
background: linear-gradient(90deg, $kendo-toolbar-scroll-overlay);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
&::after {
|
|
176
|
+
background: linear-gradient(270deg, $kendo-toolbar-scroll-overlay);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
// RTL: reverse gradient directions for horizontal scrolling
|
|
182
|
+
:is(.k-rtl .k-imageeditor-adaptive .k-imageeditor-sidebar-scrollable, [dir="rtl"] .k-imageeditor-adaptive .k-imageeditor-sidebar-scrollable, .k-imageeditor-adaptive .k-imageeditor-sidebar-scrollable.k-rtl, .k-imageeditor-adaptive .k-imageeditor-sidebar-scrollable[dir="rtl"] ) {
|
|
183
|
+
&::before {
|
|
184
|
+
background: linear-gradient(270deg, $kendo-toolbar-scroll-overlay);
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
&::after {
|
|
188
|
+
background: linear-gradient(90deg, $kendo-toolbar-scroll-overlay);
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
// Forward the sidebar's border-color so nested .k-separator (border-color: inherit) still matches it
|
|
193
|
+
.k-imageeditor-sidebar-items {
|
|
194
|
+
border-color: inherit;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.k-imageeditor-placeholder {
|
|
198
|
+
border-color: k-color(border);
|
|
199
|
+
|
|
200
|
+
.k-imageeditor-placeholder-icon {
|
|
201
|
+
color: k-color(secondary);
|
|
202
|
+
opacity: .5;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.k-imageeditor-placeholder-title {
|
|
206
|
+
color: k-color(on-app-surface);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.k-imageeditor-placeholder-text {
|
|
210
|
+
color: k-color(subtle);
|
|
211
|
+
}
|
|
52
212
|
}
|
|
53
213
|
|
|
54
214
|
}
|
|
@@ -16,13 +16,39 @@ $kendo-image-editor-action-pane-padding-y: null !default;
|
|
|
16
16
|
$kendo-image-editor-action-pane-padding-x: null !default;
|
|
17
17
|
$kendo-image-editor-action-pane-width: null !default;
|
|
18
18
|
|
|
19
|
-
$kendo-image-editor-
|
|
20
|
-
$kendo-image-editor-
|
|
19
|
+
$kendo-image-editor-pane-header-padding-y: null !default;
|
|
20
|
+
$kendo-image-editor-pane-header-padding-x: null !default;
|
|
21
|
+
$kendo-image-editor-pane-header-gap: null !default;
|
|
21
22
|
|
|
22
|
-
$kendo-image-editor-
|
|
23
|
-
$kendo-image-editor-
|
|
24
|
-
$kendo-image-editor-
|
|
25
|
-
$kendo-image-editor-
|
|
23
|
+
$kendo-image-editor-pane-content-padding-top: null !default;
|
|
24
|
+
$kendo-image-editor-pane-content-padding-bottom: null !default;
|
|
25
|
+
$kendo-image-editor-pane-content-padding-x: null !default;
|
|
26
|
+
$kendo-image-editor-pane-content-gap: null !default;
|
|
27
|
+
|
|
28
|
+
$kendo-image-editor-adjustment-row-gap: null !default;
|
|
29
|
+
|
|
30
|
+
$kendo-image-editor-pane-footer-padding-y: null !default;
|
|
31
|
+
$kendo-image-editor-pane-footer-padding-x: null !default;
|
|
32
|
+
|
|
33
|
+
$kendo-image-editor-option-list-gap: null !default;
|
|
34
|
+
$kendo-image-editor-option-list-scroll-gradient: null !default;
|
|
35
|
+
$kendo-image-editor-option-preview-padding-y: null !default;
|
|
36
|
+
$kendo-image-editor-option-preview-padding-x: null !default;
|
|
37
|
+
$kendo-image-editor-option-preview-border-radius: null !default;
|
|
38
|
+
$kendo-image-editor-option-preview-width: null !default;
|
|
39
|
+
$kendo-image-editor-option-label-font-size: null !default;
|
|
40
|
+
|
|
41
|
+
$kendo-image-editor-frame-border-width: null !default;
|
|
42
|
+
$kendo-image-editor-frame-border-style: null !default;
|
|
43
|
+
|
|
44
|
+
$kendo-image-editor-handle-margin-x: null !default;
|
|
45
|
+
$kendo-image-editor-handle-margin-y: null !default;
|
|
46
|
+
$kendo-image-editor-handle-border-width: null !default;
|
|
47
|
+
$kendo-image-editor-handle-size: null !default;
|
|
48
|
+
$kendo-image-editor-handle-thickness: null !default;
|
|
49
|
+
$kendo-image-editor-handle-border-radius: null !default;
|
|
50
|
+
|
|
51
|
+
$kendo-image-editor-scale-handle-size: null !default;
|
|
26
52
|
|
|
27
53
|
$kendo-image-editor-bg: null !default;
|
|
28
54
|
$kendo-image-editor-text: null !default;
|
|
@@ -36,8 +62,27 @@ $kendo-image-editor-action-pane-bg: null !default;
|
|
|
36
62
|
$kendo-image-editor-action-pane-text: null !default;
|
|
37
63
|
$kendo-image-editor-action-pane-border: null !default;
|
|
38
64
|
|
|
39
|
-
$kendo-image-editor-
|
|
40
|
-
|
|
41
|
-
$kendo-image-editor-
|
|
65
|
+
$kendo-image-editor-pane-title-text: null !default;
|
|
66
|
+
|
|
67
|
+
$kendo-image-editor-option-preview-bg: null !default;
|
|
68
|
+
$kendo-image-editor-option-preview-text: null !default;
|
|
69
|
+
$kendo-image-editor-option-preview-border: null !default;
|
|
70
|
+
$kendo-image-editor-option-preview-hover-bg: null !default;
|
|
71
|
+
$kendo-image-editor-option-preview-hover-text: null !default;
|
|
72
|
+
$kendo-image-editor-option-preview-focus-shadow: null !default;
|
|
73
|
+
$kendo-image-editor-option-preview-selected-shadow: null !default;
|
|
74
|
+
$kendo-image-editor-option-preview-selected-border: null !default;
|
|
75
|
+
$kendo-image-editor-option-preview-selected-text: null !default;
|
|
76
|
+
$kendo-image-editor-option-preview-selected-font-weight: null !default;
|
|
77
|
+
|
|
78
|
+
$kendo-image-editor-frame-bg: null !default;
|
|
79
|
+
$kendo-image-editor-frame-text: null !default;
|
|
80
|
+
$kendo-image-editor-frame-border: null !default;
|
|
42
81
|
|
|
43
82
|
$kendo-image-editor-crop-overlay-bg: null !default;
|
|
83
|
+
$kendo-image-editor-crop-overlay-accent-bg: null !default;
|
|
84
|
+
|
|
85
|
+
$kendo-image-editor-grid-line-color: null !default;
|
|
86
|
+
|
|
87
|
+
$kendo-image-editor-handle-bg: null !default;
|
|
88
|
+
$kendo-image-editor-handle-border: null !default;
|