@syncfusion/ej2-inplace-editor 19.2.49 → 19.3.43
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/.eslintrc.json +2 -10
- package/CHANGELOG.md +11 -1
- package/dist/ej2-inplace-editor.umd.min.js +1 -1
- package/dist/global/ej2-inplace-editor.min.js +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +16 -16
- package/styles/bootstrap5-dark.css +924 -0
- package/styles/bootstrap5-dark.scss +1 -0
- package/styles/bootstrap5.css +924 -0
- package/styles/bootstrap5.scss +1 -0
- package/styles/inplace-editor/_bootstrap5-dark-definition.scss +1 -0
- package/styles/inplace-editor/_bootstrap5-definition.scss +67 -0
- package/styles/inplace-editor/_layout.scss +2 -2
- package/styles/inplace-editor/_tailwind-dark-definition.scss +1 -78
- package/styles/inplace-editor/_tailwind-definition.scss +26 -36
- package/styles/inplace-editor/_theme.scss +7 -1
- package/styles/inplace-editor/bootstrap5-dark.css +924 -0
- package/styles/inplace-editor/bootstrap5-dark.scss +26 -0
- package/styles/inplace-editor/bootstrap5.css +924 -0
- package/styles/inplace-editor/bootstrap5.scss +26 -0
- package/styles/inplace-editor/icons/_bootstrap5-dark.scss +1 -0
- package/styles/inplace-editor/icons/_bootstrap5.scss +19 -0
- package/styles/inplace-editor/icons/_tailwind-dark.scss +1 -19
- package/styles/inplace-editor/material-dark.css +1 -1
- package/styles/inplace-editor/tailwind-dark.css +2 -10
- package/styles/inplace-editor/tailwind.css +2 -10
- package/styles/material-dark.css +1 -1
- package/styles/tailwind-dark.css +2 -10
- package/styles/tailwind.css +2 -10
- package/tslint.json +0 -111
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import 'inplace-editor/bootstrap5.scss';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import './bootstrap5-definition.scss';
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
$inplace-skin: 'bootstrap5' !default;
|
|
2
|
+
//Layout Variable Start
|
|
3
|
+
$editor-big-value-text-font-size: $text-base !default;
|
|
4
|
+
$editor-nrml-value-text-font-size: $text-sm !default;
|
|
5
|
+
$editor-big-value-container-padding: 7px 12px 7px 12px !default;
|
|
6
|
+
$editor-nrml-value-container-padding: 3px 8px 5px 8px !default;
|
|
7
|
+
$editor-big-value-container-spin-padding: 8px !default;
|
|
8
|
+
$editor-nrml-value-container-spin-padding: 8px !default;
|
|
9
|
+
$editor-big-value-margin: 0 30px 0 0 !default;
|
|
10
|
+
$editor-nrml-value-margin: 0 28px 0 0 !default;
|
|
11
|
+
$editor-rtl-big-value-margin: 0 0 0 30px !default;
|
|
12
|
+
$editor-rtl-nrml-value-margin: 0 0 0 28px !default;
|
|
13
|
+
$editor-big-overlay-icon-size: $text-base !default;
|
|
14
|
+
$editor-nrml-overlay-icon-size: $text-sm !default;
|
|
15
|
+
$editor-big-overlay-icon-container-size: 20px !default;
|
|
16
|
+
$editor-nrml-overlay-icon-container-size: 20px !default;
|
|
17
|
+
$editor-big-overlay-icon-left-right: 8px !default;
|
|
18
|
+
$editor-nrml-overlay-icon-left-right: 8px !default;
|
|
19
|
+
$editor-tip-content-bdr-radius: 4px !default;
|
|
20
|
+
$editor-tip-title-font-weight: $font-weight-medium !default;
|
|
21
|
+
$editor-big-tip-title-font-size: $text-sm !default;
|
|
22
|
+
$editor-nrml-tip-title-font-size: $text-xs !default;
|
|
23
|
+
$editor-big-tip-title-padding: 12px 16px 12px 16px !default;
|
|
24
|
+
$editor-nrml-tip-title-padding: 9px 12px 9px 12px !default;
|
|
25
|
+
$editor-rtl-big-tip-title-padding: 12px 16px 12px 16px !default;
|
|
26
|
+
$editor-rtl-nrml-tip-title-padding: 9px 12px 9px 12px !default;
|
|
27
|
+
$editor-big-tip-title-container-size: 46px !default;
|
|
28
|
+
$editor-nrml-tip-title-container-size: 36px !default;
|
|
29
|
+
$editor-big-tip-wrapper-padding: 16px !default;
|
|
30
|
+
$editor-nrml-tip-wrapper-padding: 12px !default;
|
|
31
|
+
$editor-big-wrapper-title-with-padding: 16px !default;
|
|
32
|
+
$editor-nrml-wrapper-title-with-padding: 12px !default;
|
|
33
|
+
$editor-component-bottom-margin: 4px !default;
|
|
34
|
+
$editor-buttons-top-margin: 4px !default;
|
|
35
|
+
$editor-btn-save-icon-size: 16px !default;
|
|
36
|
+
$editor-btn-cancel-icon-size: 16px !default;
|
|
37
|
+
$editor-big-btn-save-margin: 0 4px 0 0 !default;
|
|
38
|
+
$editor-nrml-btn-save-margin: 0 4px 0 0 !default;
|
|
39
|
+
$editor-big-btn-cancel-margin: 0 0 0 4px !default;
|
|
40
|
+
$editor-nrml-btn-cancel-margin: 0 0 0 4px !default;
|
|
41
|
+
$editor-rtl-big-btn-save-margin: 0 0 0 4px !default;
|
|
42
|
+
$editor-rtl-nrml-btn-save-margin: 0 0 0 4px !default;
|
|
43
|
+
$editor-rtl-big-btn-cancel-margin: 0 4px 0 0 !default;
|
|
44
|
+
$editor-rtl-nrml-btn-cancel-margin: 0 4px 0 0 !default;
|
|
45
|
+
//Layout Variable End
|
|
46
|
+
|
|
47
|
+
//Theme Variable Start
|
|
48
|
+
$editor-value-hover-bg: $content-bg-color-alt2 !default;
|
|
49
|
+
$editor-value-text-color: $content-text-color !default;
|
|
50
|
+
$editor-overlay-icon-color: $icon-color !default;
|
|
51
|
+
$editor-value-text-border: 1px dashed $content-text-color !default;
|
|
52
|
+
$editor-background-color: $transparent !default;
|
|
53
|
+
$wrapper-background-color: $flyout-bg-color !default;
|
|
54
|
+
$editor-tip-border: 1px solid $border !default;
|
|
55
|
+
$editor-tip-bg: $content-bg-color !default;
|
|
56
|
+
$editor-tip-arrow-icon-color: $content-bg-color-alt1 !default;
|
|
57
|
+
$editor-tip-title-arrow-icon-color: $content-bg-color-alt1 !default;
|
|
58
|
+
$editor-tip-arrow-bdr-color: $content-bg-color-alt1 !default;
|
|
59
|
+
$editor-tip-title-arrow-bdr-color: $border !default;
|
|
60
|
+
$editor-tip-box-shadow: $shadow-lg !default;
|
|
61
|
+
$editor-tip-title-bg: $content-bg-color-alt1 !default;
|
|
62
|
+
$editor-tio-title-border-bottom: 0 !default;
|
|
63
|
+
$editor-tip-title-color: $content-text-color !default;
|
|
64
|
+
$editable-overlay-icon-height: inherit !default;
|
|
65
|
+
$editable-overlay-icon: 0 !default;
|
|
66
|
+
$editor-btn-icon-color: $icon-color !default;
|
|
67
|
+
//Theme Variable End
|
|
@@ -625,7 +625,7 @@
|
|
|
625
625
|
min-height: 70px;
|
|
626
626
|
}
|
|
627
627
|
|
|
628
|
-
@if $inplace-skin == 'tailwind' or $inplace-skin == '
|
|
628
|
+
@if $inplace-skin == 'tailwind' or $inplace-skin == 'bootstrap5' {
|
|
629
629
|
.e-control .e-inplaceeditor,
|
|
630
630
|
.e-tooltip-wrap.e-popup.e-inplaceeditor-tip.e-popup-open,
|
|
631
631
|
.e-inplaceeditor .e-input-group.e-control-wrapper.e-editable-elements {
|
|
@@ -633,7 +633,7 @@
|
|
|
633
633
|
}
|
|
634
634
|
}
|
|
635
635
|
|
|
636
|
-
@if $inplace-skin == 'tailwind' or $inplace-skin == '
|
|
636
|
+
@if $inplace-skin == 'tailwind' or $inplace-skin == 'bootstrap5' {
|
|
637
637
|
.e-bigger .e-inplaceeditor-tip.e-tooltip-wrap .e-tip-content {
|
|
638
638
|
padding: 0;
|
|
639
639
|
}
|
|
@@ -1,78 +1 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/*! Value element styles */
|
|
4
|
-
$inplace-skin: 'tailwind-dark' !default;
|
|
5
|
-
$editor-big-value-text-font-size: $text-base !default;
|
|
6
|
-
$editor-nrml-value-text-font-size: $text-sm !default;
|
|
7
|
-
$editor-big-value-container-padding: 7px 12px 7px 12px !default;
|
|
8
|
-
$editor-nrml-value-container-padding: 3px 8px 5px 8px !default;
|
|
9
|
-
$editor-big-value-container-spin-padding: 8px !default;
|
|
10
|
-
$editor-nrml-value-container-spin-padding: 8px !default;
|
|
11
|
-
$editor-big-value-margin: 0 30px 0 0 !default;
|
|
12
|
-
$editor-nrml-value-margin: 0 28px 0 0 !default;
|
|
13
|
-
$editor-rtl-big-value-margin: 0 0 0 30px !default;
|
|
14
|
-
$editor-rtl-nrml-value-margin: 0 0 0 28px !default;
|
|
15
|
-
$editor-big-overlay-icon-size: $text-base !default;
|
|
16
|
-
$editor-nrml-overlay-icon-size: $text-sm !default;
|
|
17
|
-
$editor-big-overlay-icon-container-size: 20px !default;
|
|
18
|
-
$editor-nrml-overlay-icon-container-size: 20px !default;
|
|
19
|
-
$editor-big-overlay-icon-left-right: 8px !default;
|
|
20
|
-
$editor-nrml-overlay-icon-left-right: 8px !default;
|
|
21
|
-
$editor-value-hover-bg: $content-bg-color-alt2 !default;
|
|
22
|
-
$content-text-color: $content-text-color !default;
|
|
23
|
-
$editor-value-text-color: $content-text-color !default;
|
|
24
|
-
$editor-overlay-icon-color: $icon-color !default;
|
|
25
|
-
$editor-value-text-border: 1px dashed $content-text-color !default;
|
|
26
|
-
$editor-background-color: $transparent !default;
|
|
27
|
-
$editable-overlay-icon-height: inherit !default;
|
|
28
|
-
$editable-overlay-icon: 0 !default;
|
|
29
|
-
|
|
30
|
-
/*! Tooltip styles */
|
|
31
|
-
$editor-tip-border: 1px solid $border-light !default;
|
|
32
|
-
$editor-tip-bg: $flyout-bg-color !default;
|
|
33
|
-
$editor-tip-arrow-icon-color: $flyout-bg-color !default;
|
|
34
|
-
$editor-tip-title-arrow-icon-color: $content-bg-color-alt2 !default;
|
|
35
|
-
$editor-tip-arrow-bdr-color: $content-bg-color-alt2 !default;
|
|
36
|
-
$editor-tip-title-arrow-bdr-color: $content-bg-color-alt2 !default;
|
|
37
|
-
$editor-tip-box-shadow: $shadow-lg !default;
|
|
38
|
-
|
|
39
|
-
/*! Tip Content styles */
|
|
40
|
-
$editor-tip-content-bdr-radius: 4px !default;
|
|
41
|
-
|
|
42
|
-
/*! Title styles */
|
|
43
|
-
$editor-tip-title-font-weight: 500 !default;
|
|
44
|
-
$editor-big-tip-title-font-size: $text-sm !default;
|
|
45
|
-
$editor-nrml-tip-title-font-size: $text-xs !default;
|
|
46
|
-
$editor-big-tip-title-padding: 7px 16px 7px 16px !default;
|
|
47
|
-
$editor-nrml-tip-title-padding: 6px 12px 6px 12px !default;
|
|
48
|
-
$editor-rtl-big-tip-title-padding: 7px 16px 7px 16px !default;
|
|
49
|
-
$editor-rtl-nrml-tip-title-padding: 6px 12px 6px 12px !default;
|
|
50
|
-
$editor-big-tip-title-container-size: 36px !default;
|
|
51
|
-
$editor-nrml-tip-title-container-size: 30px !default;
|
|
52
|
-
$editor-tip-title-bg: $content-bg-color-alt2 !default;
|
|
53
|
-
$editor-tio-title-border-bottom: 0 !default;
|
|
54
|
-
$editor-tip-title-color: $content-text-color-alt2 !default;
|
|
55
|
-
$wrapper-background-color: $flyout-bg-color !default;
|
|
56
|
-
|
|
57
|
-
/*! Wrapper styles */
|
|
58
|
-
$editor-big-tip-wrapper-padding: 16px !default;
|
|
59
|
-
$editor-nrml-tip-wrapper-padding: 12px !default;
|
|
60
|
-
$editor-big-wrapper-title-with-padding: 16px !default;
|
|
61
|
-
$editor-nrml-wrapper-title-with-padding: 12px !default;
|
|
62
|
-
|
|
63
|
-
/*! Component group styles */
|
|
64
|
-
$editor-component-bottom-margin: 4px !default;
|
|
65
|
-
|
|
66
|
-
/*! Button styles */
|
|
67
|
-
$editor-buttons-top-margin: 4px !default;
|
|
68
|
-
$editor-btn-save-icon-size: 18px !default;
|
|
69
|
-
$editor-btn-cancel-icon-size: 18px !default;
|
|
70
|
-
$editor-big-btn-save-margin: 0 4px 0 0 !default;
|
|
71
|
-
$editor-nrml-btn-save-margin: 0 4px 0 0 !default;
|
|
72
|
-
$editor-big-btn-cancel-margin: 0 0 0 4px !default;
|
|
73
|
-
$editor-nrml-btn-cancel-margin: 0 0 0 4px !default;
|
|
74
|
-
$editor-rtl-big-btn-save-margin: 0 0 0 4px !default;
|
|
75
|
-
$editor-rtl-nrml-btn-save-margin: 0 0 0 4px !default;
|
|
76
|
-
$editor-rtl-big-btn-cancel-margin: 0 4px 0 0 !default;
|
|
77
|
-
$editor-rtl-nrml-btn-cancel-margin: 0 4px 0 0 !default;
|
|
78
|
-
$editor-btn-icon-color: $icon-color !default;
|
|
1
|
+
@import './tailwind-definition.scss';
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
/*! Tailwind theme definitions and variables */
|
|
2
|
-
|
|
3
|
-
/*! Value element styles */
|
|
4
1
|
$inplace-skin: 'tailwind' !default;
|
|
2
|
+
//Layout Variable Start
|
|
5
3
|
$editor-big-value-text-font-size: $text-base !default;
|
|
6
4
|
$editor-nrml-value-text-font-size: $text-sm !default;
|
|
7
5
|
$editor-big-value-container-padding: 7px 12px 7px 12px !default;
|
|
@@ -18,27 +16,7 @@ $editor-big-overlay-icon-container-size: 20px !default;
|
|
|
18
16
|
$editor-nrml-overlay-icon-container-size: 20px !default;
|
|
19
17
|
$editor-big-overlay-icon-left-right: 8px !default;
|
|
20
18
|
$editor-nrml-overlay-icon-left-right: 8px !default;
|
|
21
|
-
$editor-value-hover-bg: $content-bg-color-alt2 !default;
|
|
22
|
-
$content-text-color: $content-text-color !default;
|
|
23
|
-
$editor-value-text-color: $content-text-color !default;
|
|
24
|
-
$editor-overlay-icon-color: $icon-color !default;
|
|
25
|
-
$editor-value-text-border: 1px dashed $content-text-color !default;
|
|
26
|
-
$editor-background-color: $transparent !default;
|
|
27
|
-
$wrapper-background-color: $flyout-bg-color !default;
|
|
28
|
-
|
|
29
|
-
/*! Tooltip styles */
|
|
30
|
-
$editor-tip-border: 1px solid $border-light !default;
|
|
31
|
-
$editor-tip-bg: $flyout-bg-color !default;
|
|
32
|
-
$editor-tip-arrow-icon-color: $flyout-bg-color !default;
|
|
33
|
-
$editor-tip-title-arrow-icon-color: $content-bg-color-alt2 !default;
|
|
34
|
-
$editor-tip-arrow-bdr-color: $content-bg-color-alt2 !default;
|
|
35
|
-
$editor-tip-title-arrow-bdr-color: $content-bg-color-alt2 !default;
|
|
36
|
-
$editor-tip-box-shadow: $shadow-lg !default;
|
|
37
|
-
|
|
38
|
-
/*! Tip Content styles */
|
|
39
19
|
$editor-tip-content-bdr-radius: 4px !default;
|
|
40
|
-
|
|
41
|
-
/*! Title styles */
|
|
42
20
|
$editor-tip-title-font-weight: 500 !default;
|
|
43
21
|
$editor-big-tip-title-font-size: $text-sm !default;
|
|
44
22
|
$editor-nrml-tip-title-font-size: $text-xs !default;
|
|
@@ -48,25 +26,14 @@ $editor-rtl-big-tip-title-padding: 7px 16px 7px 16px !default;
|
|
|
48
26
|
$editor-rtl-nrml-tip-title-padding: 6px 12px 6px 12px !default;
|
|
49
27
|
$editor-big-tip-title-container-size: 36px !default;
|
|
50
28
|
$editor-nrml-tip-title-container-size: 30px !default;
|
|
51
|
-
$editor-tip-title-bg: $content-bg-color-alt2 !default;
|
|
52
|
-
$editor-tio-title-border-bottom: 0 !default;
|
|
53
|
-
$editor-tip-title-color: $content-text-color-alt2 !default;
|
|
54
|
-
$editable-overlay-icon-height: inherit !default;
|
|
55
|
-
$editable-overlay-icon: 0 !default;
|
|
56
|
-
|
|
57
|
-
/*! Wrapper styles */
|
|
58
29
|
$editor-big-tip-wrapper-padding: 16px !default;
|
|
59
30
|
$editor-nrml-tip-wrapper-padding: 12px !default;
|
|
60
31
|
$editor-big-wrapper-title-with-padding: 16px !default;
|
|
61
32
|
$editor-nrml-wrapper-title-with-padding: 12px !default;
|
|
62
|
-
|
|
63
|
-
/*! Component group styles */
|
|
64
33
|
$editor-component-bottom-margin: 4px !default;
|
|
65
|
-
|
|
66
|
-
/*! Button styles */
|
|
67
34
|
$editor-buttons-top-margin: 4px !default;
|
|
68
|
-
$editor-btn-save-icon-size:
|
|
69
|
-
$editor-btn-cancel-icon-size:
|
|
35
|
+
$editor-btn-save-icon-size: 16px !default;
|
|
36
|
+
$editor-btn-cancel-icon-size: 16px !default;
|
|
70
37
|
$editor-big-btn-save-margin: 0 4px 0 0 !default;
|
|
71
38
|
$editor-nrml-btn-save-margin: 0 4px 0 0 !default;
|
|
72
39
|
$editor-big-btn-cancel-margin: 0 0 0 4px !default;
|
|
@@ -75,4 +42,27 @@ $editor-rtl-big-btn-save-margin: 0 0 0 4px !default;
|
|
|
75
42
|
$editor-rtl-nrml-btn-save-margin: 0 0 0 4px !default;
|
|
76
43
|
$editor-rtl-big-btn-cancel-margin: 0 4px 0 0 !default;
|
|
77
44
|
$editor-rtl-nrml-btn-cancel-margin: 0 4px 0 0 !default;
|
|
45
|
+
//Layout Variable End
|
|
46
|
+
|
|
47
|
+
//Theme Variable Start
|
|
48
|
+
$editor-value-hover-bg: $content-bg-color-alt2 !default;
|
|
49
|
+
$content-text-color: $content-text-color !default;
|
|
50
|
+
$editor-value-text-color: $content-text-color !default;
|
|
51
|
+
$editor-overlay-icon-color: $icon-color !default;
|
|
52
|
+
$editor-value-text-border: 1px dashed $content-text-color !default;
|
|
53
|
+
$editor-background-color: $transparent !default;
|
|
54
|
+
$wrapper-background-color: $flyout-bg-color !default;
|
|
55
|
+
$editor-tip-border: 1px solid $border-light !default;
|
|
56
|
+
$editor-tip-bg: $flyout-bg-color !default;
|
|
57
|
+
$editor-tip-arrow-icon-color: $flyout-bg-color !default;
|
|
58
|
+
$editor-tip-title-arrow-icon-color: $content-bg-color-alt2 !default;
|
|
59
|
+
$editor-tip-arrow-bdr-color: $content-bg-color-alt2 !default;
|
|
60
|
+
$editor-tip-title-arrow-bdr-color: $content-bg-color-alt2 !default;
|
|
61
|
+
$editor-tip-box-shadow: $shadow-lg !default;
|
|
62
|
+
$editor-tip-title-bg: $content-bg-color-alt2 !default;
|
|
63
|
+
$editor-tio-title-border-bottom: 0 !default;
|
|
64
|
+
$editor-tip-title-color: $content-text-color-alt2 !default;
|
|
65
|
+
$editable-overlay-icon-height: inherit !default;
|
|
66
|
+
$editable-overlay-icon: 0 !default;
|
|
78
67
|
$editor-btn-icon-color: $icon-color !default;
|
|
68
|
+
//Theme Variable End
|
|
@@ -119,6 +119,12 @@
|
|
|
119
119
|
box-shadow: 0 1px 4px 0 $black-color;
|
|
120
120
|
}
|
|
121
121
|
|
|
122
|
+
@else if $inplace-skin == 'bootstrap5' {
|
|
123
|
+
background-color: $content-bg-color;
|
|
124
|
+
border: 1px solid $border-light;
|
|
125
|
+
border-radius: 4px;
|
|
126
|
+
}
|
|
127
|
+
|
|
122
128
|
.e-btn-icon.e-icons {
|
|
123
129
|
color: $editor-btn-icon-color;
|
|
124
130
|
}
|
|
@@ -162,7 +168,7 @@
|
|
|
162
168
|
}
|
|
163
169
|
}
|
|
164
170
|
|
|
165
|
-
@if $inplace-skin == 'tailwind' or $inplace-skin == '
|
|
171
|
+
@if $inplace-skin == 'tailwind' or $inplace-skin == 'bootstrap5' {
|
|
166
172
|
.e-inplaceeditor .e-editable-value-wrapper {
|
|
167
173
|
background-color: $editor-background-color;
|
|
168
174
|
border-radius: 4px;
|