@syncfusion/ej2-inputs 27.2.4 → 28.1.37

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.
Files changed (195) hide show
  1. package/README.md +2 -2
  2. package/dist/ej2-inputs.min.js +3 -3
  3. package/dist/ej2-inputs.umd.min.js +3 -3
  4. package/dist/ej2-inputs.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-inputs.es2015.js +63 -65
  6. package/dist/es6/ej2-inputs.es2015.js.map +1 -1
  7. package/dist/es6/ej2-inputs.es5.js +64 -66
  8. package/dist/es6/ej2-inputs.es5.js.map +1 -1
  9. package/dist/global/ej2-inputs.min.js +3 -3
  10. package/dist/global/ej2-inputs.min.js.map +1 -1
  11. package/dist/global/index.d.ts +2 -2
  12. package/package.json +10 -14
  13. package/src/common/signature-base.js +22 -11
  14. package/src/numerictextbox/numerictextbox.js +1 -1
  15. package/src/otp-input/otp-input.js +35 -49
  16. package/src/slider/slider.d.ts +1 -0
  17. package/src/slider/slider.js +5 -4
  18. package/src/uploader/uploader.js +1 -1
  19. package/styles/bds-lite.css +5293 -0
  20. package/styles/bds-lite.scss +37 -0
  21. package/styles/bds.css +8139 -0
  22. package/styles/bds.scss +46 -0
  23. package/styles/bootstrap-dark-lite.css +4 -0
  24. package/styles/bootstrap-dark.css +4 -0
  25. package/styles/bootstrap-lite.css +4 -0
  26. package/styles/bootstrap.css +4 -0
  27. package/styles/bootstrap4-lite.css +4 -1
  28. package/styles/bootstrap4.css +4 -1
  29. package/styles/bootstrap5-dark-lite.css +7 -4
  30. package/styles/bootstrap5-dark.css +7 -4
  31. package/styles/bootstrap5-lite.css +5 -2
  32. package/styles/bootstrap5.3-lite.css +4 -1
  33. package/styles/bootstrap5.3.css +4 -1
  34. package/styles/bootstrap5.css +5 -2
  35. package/styles/color-picker/_bigger.scss +46 -7
  36. package/styles/color-picker/_layout.scss +41 -3
  37. package/styles/color-picker/_tailwind3-definition.scss +152 -0
  38. package/styles/color-picker/_theme.scss +13 -2
  39. package/styles/color-picker/bds.css +1080 -0
  40. package/styles/color-picker/bds.scss +12 -0
  41. package/styles/color-picker/bootstrap-dark.css +3 -0
  42. package/styles/color-picker/bootstrap.css +3 -0
  43. package/styles/color-picker/bootstrap4.css +3 -0
  44. package/styles/color-picker/bootstrap5-dark.css +3 -0
  45. package/styles/color-picker/bootstrap5.3.css +3 -0
  46. package/styles/color-picker/bootstrap5.css +3 -0
  47. package/styles/color-picker/fabric-dark.css +3 -0
  48. package/styles/color-picker/fabric.css +3 -0
  49. package/styles/color-picker/fluent-dark.css +3 -0
  50. package/styles/color-picker/fluent.css +3 -0
  51. package/styles/color-picker/fluent2.css +3 -0
  52. package/styles/color-picker/highcontrast-light.css +3 -0
  53. package/styles/color-picker/highcontrast.css +3 -0
  54. package/styles/color-picker/icons/_tailwind3.scss +9 -0
  55. package/styles/color-picker/material-dark.css +3 -0
  56. package/styles/color-picker/material.css +3 -0
  57. package/styles/color-picker/material3-dark.css +3 -0
  58. package/styles/color-picker/material3.css +3 -0
  59. package/styles/color-picker/tailwind-dark.css +3 -0
  60. package/styles/color-picker/tailwind.css +3 -0
  61. package/styles/color-picker/tailwind3.css +880 -0
  62. package/styles/color-picker/tailwind3.scss +12 -0
  63. package/styles/data-form/_tailwind3-definition.scss +41 -0
  64. package/styles/data-form/bds.css +236 -0
  65. package/styles/data-form/bds.scss +3 -0
  66. package/styles/data-form/tailwind3.css +236 -0
  67. package/styles/data-form/tailwind3.scss +3 -0
  68. package/styles/fabric-dark-lite.css +4 -0
  69. package/styles/fabric-dark.css +4 -0
  70. package/styles/fabric-lite.css +4 -0
  71. package/styles/fabric.css +4 -0
  72. package/styles/fluent-dark-lite.css +8 -5
  73. package/styles/fluent-dark.css +8 -5
  74. package/styles/fluent-lite.css +6 -3
  75. package/styles/fluent.css +6 -3
  76. package/styles/fluent2-lite.css +10 -6
  77. package/styles/fluent2.css +11 -7
  78. package/styles/highcontrast-light-lite.css +3 -0
  79. package/styles/highcontrast-light.css +3 -0
  80. package/styles/highcontrast-lite.css +3 -0
  81. package/styles/highcontrast.css +3 -0
  82. package/styles/input/_bigger.scss +124 -120
  83. package/styles/input/_layout.scss +143 -121
  84. package/styles/input/_tailwind3-definition.scss +511 -0
  85. package/styles/input/_theme.scss +67 -40
  86. package/styles/input/bds.css +4537 -0
  87. package/styles/input/bds.scss +5 -0
  88. package/styles/input/fluent2.css +2 -2
  89. package/styles/input/icons/_tailwind3.scss +17 -0
  90. package/styles/input/tailwind-dark.css +2 -0
  91. package/styles/input/tailwind.css +2 -0
  92. package/styles/input/tailwind3.css +8926 -0
  93. package/styles/input/tailwind3.scss +5 -0
  94. package/styles/maskedtextbox/_tailwind3-definition.scss +7 -0
  95. package/styles/maskedtextbox/bds.css +180 -0
  96. package/styles/maskedtextbox/bds.scss +5 -0
  97. package/styles/maskedtextbox/fluent2.css +1 -1
  98. package/styles/maskedtextbox/tailwind3.css +47 -0
  99. package/styles/maskedtextbox/tailwind3.scss +5 -0
  100. package/styles/material-dark-lite.css +4 -0
  101. package/styles/material-dark.css +4 -0
  102. package/styles/material-lite.css +4 -0
  103. package/styles/material.css +4 -0
  104. package/styles/material3-dark-lite.css +8 -4
  105. package/styles/material3-dark.css +8 -4
  106. package/styles/material3-lite.css +8 -4
  107. package/styles/material3.css +8 -4
  108. package/styles/numerictextbox/_tailwind3-definition.scss +3 -0
  109. package/styles/numerictextbox/bds.css +197 -0
  110. package/styles/numerictextbox/bds.scss +6 -0
  111. package/styles/numerictextbox/icons/_tailwind3.scss +11 -0
  112. package/styles/numerictextbox/tailwind3.css +64 -0
  113. package/styles/numerictextbox/tailwind3.scss +6 -0
  114. package/styles/otp-input/_tailwind3-definition.scss +59 -0
  115. package/styles/otp-input/bds.css +230 -0
  116. package/styles/otp-input/bds.scss +4 -0
  117. package/styles/otp-input/tailwind3.css +230 -0
  118. package/styles/otp-input/tailwind3.scss +4 -0
  119. package/styles/rating/_tailwind3-definition.scss +47 -0
  120. package/styles/rating/bds.css +323 -0
  121. package/styles/rating/bds.scss +5 -0
  122. package/styles/rating/tailwind3.css +319 -0
  123. package/styles/rating/tailwind3.scss +5 -0
  124. package/styles/signature/_layout.scss +3 -0
  125. package/styles/signature/_tailwind3-definition.scss +3 -0
  126. package/styles/signature/bds.css +13 -0
  127. package/styles/signature/bds.scss +3 -0
  128. package/styles/signature/tailwind3.css +15 -0
  129. package/styles/signature/tailwind3.scss +3 -0
  130. package/styles/slider/_layout.scss +29 -15
  131. package/styles/slider/_tailwind3-definition.scss +92 -0
  132. package/styles/slider/_theme.scss +4 -2
  133. package/styles/slider/bds.css +620 -0
  134. package/styles/slider/bds.scss +6 -0
  135. package/styles/slider/bootstrap-dark.css +1 -0
  136. package/styles/slider/bootstrap.css +1 -0
  137. package/styles/slider/bootstrap4.css +1 -1
  138. package/styles/slider/bootstrap5.3.css +1 -1
  139. package/styles/slider/fabric-dark.css +1 -0
  140. package/styles/slider/fabric.css +1 -0
  141. package/styles/slider/fluent-dark.css +1 -1
  142. package/styles/slider/fluent.css +1 -1
  143. package/styles/slider/fluent2.css +3 -2
  144. package/styles/slider/material-dark.css +1 -0
  145. package/styles/slider/material.css +1 -0
  146. package/styles/slider/material3-dark.css +1 -0
  147. package/styles/slider/material3.css +1 -0
  148. package/styles/slider/tailwind3.css +442 -0
  149. package/styles/slider/tailwind3.scss +6 -0
  150. package/styles/smart-textarea/_bootstrap5-definition.scss +3 -3
  151. package/styles/smart-textarea/_fluent-definition.scss +3 -3
  152. package/styles/smart-textarea/_material3-definition.scss +3 -3
  153. package/styles/smart-textarea/_tailwind-definition.scss +3 -3
  154. package/styles/smart-textarea/_tailwind3-definition.scss +3 -0
  155. package/styles/smart-textarea/_theme.scss +2 -29
  156. package/styles/smart-textarea/bds.css +67 -0
  157. package/styles/smart-textarea/bds.scss +4 -0
  158. package/styles/smart-textarea/bootstrap5-dark.css +4 -4
  159. package/styles/smart-textarea/bootstrap5.css +2 -2
  160. package/styles/smart-textarea/fluent-dark.css +4 -4
  161. package/styles/smart-textarea/fluent.css +2 -2
  162. package/styles/smart-textarea/material3-dark.css +4 -4
  163. package/styles/smart-textarea/material3.css +4 -4
  164. package/styles/smart-textarea/tailwind-dark.css +4 -4
  165. package/styles/smart-textarea/tailwind.css +2 -2
  166. package/styles/smart-textarea/tailwind3.css +67 -0
  167. package/styles/smart-textarea/tailwind3.scss +4 -0
  168. package/styles/tailwind-dark-lite.css +9 -4
  169. package/styles/tailwind-dark.css +9 -4
  170. package/styles/tailwind-lite.css +7 -2
  171. package/styles/tailwind.css +7 -2
  172. package/styles/tailwind3-lite.css +7247 -0
  173. package/styles/tailwind3-lite.scss +37 -0
  174. package/styles/tailwind3.css +12252 -0
  175. package/styles/tailwind3.scss +46 -0
  176. package/styles/textarea/_tailwind3-definition.scss +1 -0
  177. package/styles/textarea/bds.css +183 -0
  178. package/styles/textarea/bds.scss +5 -0
  179. package/styles/textarea/tailwind3.css +50 -0
  180. package/styles/textarea/tailwind3.scss +5 -0
  181. package/styles/textbox/_tailwind3-definition.scss +4 -0
  182. package/styles/textbox/bds.css +177 -0
  183. package/styles/textbox/bds.scss +5 -0
  184. package/styles/textbox/tailwind3.css +44 -0
  185. package/styles/textbox/tailwind3.scss +5 -0
  186. package/styles/uploader/_bigger.scss +3 -0
  187. package/styles/uploader/_layout.scss +3 -0
  188. package/styles/uploader/_tailwind3-definition.scss +211 -0
  189. package/styles/uploader/_theme.scss +21 -0
  190. package/styles/uploader/bds.css +1124 -0
  191. package/styles/uploader/bds.scss +7 -0
  192. package/styles/uploader/fluent2.css +2 -2
  193. package/styles/uploader/icons/_tailwind3.scss +34 -0
  194. package/styles/uploader/tailwind3.css +1036 -0
  195. package/styles/uploader/tailwind3.scss +7 -0
@@ -0,0 +1,12 @@
1
+ @import 'ej2-base/styles/definition/tailwind3.scss';
2
+ @import 'ej2-buttons/styles/button/tailwind3-definition.scss';
3
+ @import 'ej2-popups/styles/popup/tailwind3-definition.scss';
4
+ @import 'ej2-splitbuttons/styles/split-button/tailwind3-definition.scss';
5
+ @import './../input/tailwind3-definition.scss';
6
+ @import './../numerictextbox/tailwind3-definition.scss';
7
+ @import './../slider/tailwind3-definition.scss';
8
+ @import 'ej2-popups/styles/tooltip/tailwind3-definition.scss';
9
+ @import 'tailwind3-definition.scss';
10
+ @import 'icons/tailwind3.scss';
11
+ @import 'all.scss';
12
+ @import 'bigger.scss';
@@ -0,0 +1,41 @@
1
+ /*! Form tailwind theme wise override definitions and variables */
2
+ // form field styles
3
+ $field-label-color: $content-text-color-alt1 !default;
4
+ $field-label-font-size: 12px !default;
5
+ $field-label-margin-bottom: 4px !default;
6
+ $field-label-font-weight: 400 !default;
7
+ $form-layout-margin-top: 20px !default;
8
+ $field-label-right-margin-top: 5px !default;
9
+
10
+ // group title styles
11
+ $group-title-color: $content-text-color-alt2 !default;
12
+ $group-title-border-color: $gray-300;
13
+ $form-group-border-none: none !default;
14
+ $form-padding-zero: 0 !default;
15
+ $form-margin-zero: 0 !default;
16
+ $form-group-title-position: relative !default;
17
+ $form-group-title-display: inline-block !default;
18
+ $form-group-title-padding-bottom: 8px !default;
19
+ $form-group-title-margin-bottom: 4px !default;
20
+ $form-group-title-font-size: 16px !default;
21
+ $form-group-title-border-position: absolute !default;
22
+ $form-group-title-border-bottom: 0 !default;
23
+ $form-group-title-border-left: 0 !default;
24
+ $form-group-title-border-width: 100% !default;
25
+ $form-group-title-border-height: 1px !default;
26
+ $form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
27
+
28
+ //tooltip styles
29
+ $form-tooltip-background-color: $danger-light !default;
30
+ $form-tooltip-color: $danger !default;
31
+ $form-validation-message-font-size: 12px;
32
+
33
+ // form common styles
34
+ $form-display-flex: flex !default;
35
+ $form-label-top-direction: column !default;
36
+ $form-label-text-align: center !default;
37
+ $form-button-left-justify: flex-start !default;
38
+ $form-button-right-justify: flex-end !default;
39
+ $form-button-center-justify: center !default;
40
+ $form-button-border-radius: 20px !default;
41
+ $form-button-padding: 7px 16px !default;
@@ -0,0 +1,236 @@
1
+
2
+
3
+
4
+
5
+ /*! FileManager's bds theme wise override definitions and variables */
6
+ /*! data-form layout */
7
+ .e-data-form {
8
+ /* stylelint-disable property-no-vendor-prefix */
9
+ /* stylelint-enable property-no-vendor-prefix */
10
+ }
11
+ .e-data-form .e-form-label {
12
+ font-size: 12px;
13
+ margin-bottom: 4px;
14
+ font-weight: 500;
15
+ }
16
+ .e-data-form .e-form-layout {
17
+ display: grid;
18
+ }
19
+ .e-data-form .e-grid-col-2 {
20
+ -ms-grid-columns: repeat(2, 1fr);
21
+ grid-template-columns: repeat(2, minmax(0, 1fr));
22
+ }
23
+ .e-data-form .e-grid-col-3 {
24
+ -ms-grid-columns: repeat(3, 1fr);
25
+ grid-template-columns: repeat(3, minmax(0, 1fr));
26
+ }
27
+ .e-data-form .e-grid-col-4 {
28
+ -ms-grid-columns: repeat(4, 1fr);
29
+ grid-template-columns: repeat(4, minmax(0, 1fr));
30
+ }
31
+ .e-data-form .e-grid-col-5 {
32
+ -ms-grid-columns: repeat(5, 1fr);
33
+ grid-template-columns: repeat(5, minmax(0, 1fr));
34
+ }
35
+ .e-data-form .e-grid-col-6 {
36
+ -ms-grid-columns: repeat(6, 1fr);
37
+ grid-template-columns: repeat(6, minmax(0, 1fr));
38
+ }
39
+ .e-data-form .e-grid-col-7 {
40
+ -ms-grid-columns: repeat(7, 1fr);
41
+ grid-template-columns: repeat(7, minmax(0, 1fr));
42
+ }
43
+ .e-data-form .e-grid-col-8 {
44
+ -ms-grid-columns: repeat(8, 1fr);
45
+ grid-template-columns: repeat(8, minmax(0, 1fr));
46
+ }
47
+ .e-data-form .e-grid-col-9 {
48
+ -ms-grid-columns: repeat(9, 1fr);
49
+ grid-template-columns: repeat(9, minmax(0, 1fr));
50
+ }
51
+ .e-data-form .e-grid-col-10 {
52
+ -ms-grid-columns: repeat(10, 1fr);
53
+ grid-template-columns: repeat(10, minmax(0, 1fr));
54
+ }
55
+ .e-data-form .e-grid-col-11 {
56
+ -ms-grid-columns: repeat(11, 1fr);
57
+ grid-template-columns: repeat(11, minmax(0, 1fr));
58
+ }
59
+ .e-data-form .e-grid-col-12 {
60
+ -ms-grid-columns: repeat(12, 1fr);
61
+ grid-template-columns: repeat(12, minmax(0, 1fr));
62
+ }
63
+ .e-data-form .e-colspan-1 {
64
+ grid-column: span 1/span 1;
65
+ }
66
+ .e-data-form .e-colspan-2 {
67
+ grid-column: span 2/span 2;
68
+ }
69
+ .e-data-form .e-colspan-3 {
70
+ grid-column: span 3/span 3;
71
+ }
72
+ .e-data-form .e-colspan-4 {
73
+ grid-column: span 4/span 4;
74
+ }
75
+ .e-data-form .e-colspan-5 {
76
+ grid-column: span 5/span 5;
77
+ }
78
+ .e-data-form .e-colspan-6 {
79
+ grid-column: span 6/span 6;
80
+ }
81
+ .e-data-form .e-colspan-7 {
82
+ grid-column: span 7/span 7;
83
+ }
84
+ .e-data-form .e-colspan-8 {
85
+ grid-column: span 8/span 8;
86
+ }
87
+ .e-data-form .e-colspan-9 {
88
+ grid-column: span 9/span 9;
89
+ }
90
+ .e-data-form .e-colspan-10 {
91
+ grid-column: span 10/span 10;
92
+ }
93
+ .e-data-form .e-colspan-11 {
94
+ grid-column: span 11/span 11;
95
+ }
96
+ .e-data-form .e-colspan-12 {
97
+ grid-column: span 12/span 12;
98
+ }
99
+ .e-data-form .e-label-position-left .e-form-item-wrapper {
100
+ -webkit-box-flex: 1;
101
+ -ms-flex: 1 1 auto;
102
+ flex: 1 1 auto;
103
+ max-width: calc(75% - 12px);
104
+ }
105
+ .e-data-form .e-label-position-left .e-form-label {
106
+ margin-right: 12px;
107
+ width: 25%;
108
+ text-align: end;
109
+ -webkit-box-orient: vertical;
110
+ -webkit-box-direction: normal;
111
+ -ms-flex-direction: column;
112
+ flex-direction: column;
113
+ -webkit-box-align: end;
114
+ -ms-flex-align: end;
115
+ align-items: flex-end;
116
+ -webkit-box-pack: start;
117
+ -ms-flex-pack: start;
118
+ justify-content: flex-start;
119
+ }
120
+ .e-data-form .e-label-position-left .validation-message {
121
+ display: -webkit-box;
122
+ display: -ms-flexbox;
123
+ display: flex;
124
+ }
125
+ .e-data-form .e-form-group {
126
+ border: none;
127
+ padding: 0;
128
+ margin: 0;
129
+ margin-top: 20px;
130
+ }
131
+ .e-data-form .e-form-group .e-group-title {
132
+ position: relative;
133
+ display: inline-block;
134
+ padding-bottom: 8px;
135
+ /* Gap between text and border */
136
+ margin-bottom: 4px;
137
+ font-size: 16px;
138
+ }
139
+ .e-data-form .e-form-group .e-group-title::after {
140
+ content: "";
141
+ position: absolute;
142
+ bottom: 0;
143
+ left: 0;
144
+ width: 100%;
145
+ height: 1px;
146
+ border-bottom: 1px solid var(--color-sf-border-primary);
147
+ }
148
+ .e-data-form .e-label-position-top {
149
+ display: -webkit-box;
150
+ display: -ms-flexbox;
151
+ display: flex;
152
+ -webkit-box-orient: vertical;
153
+ -webkit-box-direction: normal;
154
+ -ms-flex-direction: column;
155
+ flex-direction: column;
156
+ margin-top: 20px;
157
+ }
158
+ .e-data-form .e-label-position-top .e-label-right {
159
+ display: -webkit-box;
160
+ display: -ms-flexbox;
161
+ display: flex;
162
+ -webkit-box-align: center;
163
+ -ms-flex-align: center;
164
+ align-items: center;
165
+ }
166
+ .e-data-form .e-label-position-top .e-label-right .e-switch-wrapper + .e-form-label {
167
+ margin-top: 3px;
168
+ margin-left: 5px;
169
+ }
170
+ .e-data-form .e-label-position-top .e-label-right .e-checkbox-wrapper + .e-form-label {
171
+ margin-top: 6px;
172
+ }
173
+ .e-data-form .e-label-position-left {
174
+ display: -webkit-box;
175
+ display: -ms-flexbox;
176
+ display: flex;
177
+ text-align: center;
178
+ margin-top: 20px;
179
+ }
180
+ .e-data-form .e-button-left {
181
+ -webkit-box-pack: start;
182
+ -ms-flex-pack: start;
183
+ justify-content: flex-start;
184
+ }
185
+ .e-data-form .e-button-right {
186
+ -webkit-box-pack: end;
187
+ -ms-flex-pack: end;
188
+ justify-content: flex-end;
189
+ }
190
+ .e-data-form .e-button-center {
191
+ -webkit-box-pack: center;
192
+ -ms-flex-pack: center;
193
+ justify-content: center;
194
+ }
195
+ .e-data-form .e-button-left, .e-data-form .e-button-right, .e-data-form .e-button-center, .e-data-form .e-button-stretch {
196
+ margin-top: 24px;
197
+ display: -webkit-box;
198
+ display: -ms-flexbox;
199
+ display: flex;
200
+ gap: 10px;
201
+ }
202
+ .e-data-form .e-button-left .e-btn, .e-data-form .e-button-right .e-btn, .e-data-form .e-button-center .e-btn, .e-data-form .e-button-stretch .e-btn {
203
+ border-radius: 20px;
204
+ padding: 7px 16px;
205
+ }
206
+ .e-data-form .e-button-stretch .e-btn {
207
+ width: 100%;
208
+ }
209
+ .e-data-form > :first-child.e-form-layout {
210
+ margin-top: 0;
211
+ }
212
+
213
+ /*! data-form theme */
214
+ .e-data-form .e-form-label {
215
+ color: var(--color-sf-text-secondary);
216
+ }
217
+ .e-data-form .e-group-title {
218
+ color: var(--color-sf-text-tertiary);
219
+ }
220
+ .e-data-form .validation-message {
221
+ color: var(--color-sf-utility-danger);
222
+ font-size: 12px;
223
+ font-style: italic;
224
+ }
225
+
226
+ .e-tooltip-wrap.e-popup.e-error-tooltip {
227
+ background-color: var(--color-sf-utility-danger-light);
228
+ border: var(--color-sf-utility-danger-light);
229
+ }
230
+ .e-tooltip-wrap.e-popup.e-error-tooltip .e-tip-content .validation-message {
231
+ color: var(--color-sf-utility-danger);
232
+ }
233
+ .e-tooltip-wrap.e-popup.e-error-tooltip .e-arrow-tip .e-arrow-tip-outer.e-tip-top, .e-tooltip-wrap.e-popup.e-error-tooltip .e-arrow-tip .e-arrow-tip-inner.e-tip-top {
234
+ border-bottom-color: var(--color-sf-utility-danger-light);
235
+ color: var(--color-sf-utility-danger-light);
236
+ }
@@ -0,0 +1,3 @@
1
+ @import 'ej2-base/styles/definition/bds.scss';
2
+ @import 'bds-definition.scss';
3
+ @import 'all.scss';
@@ -0,0 +1,236 @@
1
+
2
+
3
+
4
+
5
+ /*! Form tailwind theme wise override definitions and variables */
6
+ /*! data-form layout */
7
+ .e-data-form {
8
+ /* stylelint-disable property-no-vendor-prefix */
9
+ /* stylelint-enable property-no-vendor-prefix */
10
+ }
11
+ .e-data-form .e-form-label {
12
+ font-size: 12px;
13
+ margin-bottom: 4px;
14
+ font-weight: 400;
15
+ }
16
+ .e-data-form .e-form-layout {
17
+ display: grid;
18
+ }
19
+ .e-data-form .e-grid-col-2 {
20
+ -ms-grid-columns: repeat(2, 1fr);
21
+ grid-template-columns: repeat(2, minmax(0, 1fr));
22
+ }
23
+ .e-data-form .e-grid-col-3 {
24
+ -ms-grid-columns: repeat(3, 1fr);
25
+ grid-template-columns: repeat(3, minmax(0, 1fr));
26
+ }
27
+ .e-data-form .e-grid-col-4 {
28
+ -ms-grid-columns: repeat(4, 1fr);
29
+ grid-template-columns: repeat(4, minmax(0, 1fr));
30
+ }
31
+ .e-data-form .e-grid-col-5 {
32
+ -ms-grid-columns: repeat(5, 1fr);
33
+ grid-template-columns: repeat(5, minmax(0, 1fr));
34
+ }
35
+ .e-data-form .e-grid-col-6 {
36
+ -ms-grid-columns: repeat(6, 1fr);
37
+ grid-template-columns: repeat(6, minmax(0, 1fr));
38
+ }
39
+ .e-data-form .e-grid-col-7 {
40
+ -ms-grid-columns: repeat(7, 1fr);
41
+ grid-template-columns: repeat(7, minmax(0, 1fr));
42
+ }
43
+ .e-data-form .e-grid-col-8 {
44
+ -ms-grid-columns: repeat(8, 1fr);
45
+ grid-template-columns: repeat(8, minmax(0, 1fr));
46
+ }
47
+ .e-data-form .e-grid-col-9 {
48
+ -ms-grid-columns: repeat(9, 1fr);
49
+ grid-template-columns: repeat(9, minmax(0, 1fr));
50
+ }
51
+ .e-data-form .e-grid-col-10 {
52
+ -ms-grid-columns: repeat(10, 1fr);
53
+ grid-template-columns: repeat(10, minmax(0, 1fr));
54
+ }
55
+ .e-data-form .e-grid-col-11 {
56
+ -ms-grid-columns: repeat(11, 1fr);
57
+ grid-template-columns: repeat(11, minmax(0, 1fr));
58
+ }
59
+ .e-data-form .e-grid-col-12 {
60
+ -ms-grid-columns: repeat(12, 1fr);
61
+ grid-template-columns: repeat(12, minmax(0, 1fr));
62
+ }
63
+ .e-data-form .e-colspan-1 {
64
+ grid-column: span 1/span 1;
65
+ }
66
+ .e-data-form .e-colspan-2 {
67
+ grid-column: span 2/span 2;
68
+ }
69
+ .e-data-form .e-colspan-3 {
70
+ grid-column: span 3/span 3;
71
+ }
72
+ .e-data-form .e-colspan-4 {
73
+ grid-column: span 4/span 4;
74
+ }
75
+ .e-data-form .e-colspan-5 {
76
+ grid-column: span 5/span 5;
77
+ }
78
+ .e-data-form .e-colspan-6 {
79
+ grid-column: span 6/span 6;
80
+ }
81
+ .e-data-form .e-colspan-7 {
82
+ grid-column: span 7/span 7;
83
+ }
84
+ .e-data-form .e-colspan-8 {
85
+ grid-column: span 8/span 8;
86
+ }
87
+ .e-data-form .e-colspan-9 {
88
+ grid-column: span 9/span 9;
89
+ }
90
+ .e-data-form .e-colspan-10 {
91
+ grid-column: span 10/span 10;
92
+ }
93
+ .e-data-form .e-colspan-11 {
94
+ grid-column: span 11/span 11;
95
+ }
96
+ .e-data-form .e-colspan-12 {
97
+ grid-column: span 12/span 12;
98
+ }
99
+ .e-data-form .e-label-position-left .e-form-item-wrapper {
100
+ -webkit-box-flex: 1;
101
+ -ms-flex: 1 1 auto;
102
+ flex: 1 1 auto;
103
+ max-width: calc(75% - 12px);
104
+ }
105
+ .e-data-form .e-label-position-left .e-form-label {
106
+ margin-right: 12px;
107
+ width: 25%;
108
+ text-align: end;
109
+ -webkit-box-orient: vertical;
110
+ -webkit-box-direction: normal;
111
+ -ms-flex-direction: column;
112
+ flex-direction: column;
113
+ -webkit-box-align: end;
114
+ -ms-flex-align: end;
115
+ align-items: flex-end;
116
+ -webkit-box-pack: start;
117
+ -ms-flex-pack: start;
118
+ justify-content: flex-start;
119
+ }
120
+ .e-data-form .e-label-position-left .validation-message {
121
+ display: -webkit-box;
122
+ display: -ms-flexbox;
123
+ display: flex;
124
+ }
125
+ .e-data-form .e-form-group {
126
+ border: none;
127
+ padding: 0;
128
+ margin: 0;
129
+ margin-top: 20px;
130
+ }
131
+ .e-data-form .e-form-group .e-group-title {
132
+ position: relative;
133
+ display: inline-block;
134
+ padding-bottom: 8px;
135
+ /* Gap between text and border */
136
+ margin-bottom: 4px;
137
+ font-size: 16px;
138
+ }
139
+ .e-data-form .e-form-group .e-group-title::after {
140
+ content: "";
141
+ position: absolute;
142
+ bottom: 0;
143
+ left: 0;
144
+ width: 100%;
145
+ height: 1px;
146
+ border-bottom: 1px solid #d1d5db;
147
+ }
148
+ .e-data-form .e-label-position-top {
149
+ display: -webkit-box;
150
+ display: -ms-flexbox;
151
+ display: flex;
152
+ -webkit-box-orient: vertical;
153
+ -webkit-box-direction: normal;
154
+ -ms-flex-direction: column;
155
+ flex-direction: column;
156
+ margin-top: 20px;
157
+ }
158
+ .e-data-form .e-label-position-top .e-label-right {
159
+ display: -webkit-box;
160
+ display: -ms-flexbox;
161
+ display: flex;
162
+ -webkit-box-align: center;
163
+ -ms-flex-align: center;
164
+ align-items: center;
165
+ }
166
+ .e-data-form .e-label-position-top .e-label-right .e-switch-wrapper + .e-form-label {
167
+ margin-top: 3px;
168
+ margin-left: 5px;
169
+ }
170
+ .e-data-form .e-label-position-top .e-label-right .e-checkbox-wrapper + .e-form-label {
171
+ margin-top: 5px;
172
+ }
173
+ .e-data-form .e-label-position-left {
174
+ display: -webkit-box;
175
+ display: -ms-flexbox;
176
+ display: flex;
177
+ text-align: center;
178
+ margin-top: 20px;
179
+ }
180
+ .e-data-form .e-button-left {
181
+ -webkit-box-pack: start;
182
+ -ms-flex-pack: start;
183
+ justify-content: flex-start;
184
+ }
185
+ .e-data-form .e-button-right {
186
+ -webkit-box-pack: end;
187
+ -ms-flex-pack: end;
188
+ justify-content: flex-end;
189
+ }
190
+ .e-data-form .e-button-center {
191
+ -webkit-box-pack: center;
192
+ -ms-flex-pack: center;
193
+ justify-content: center;
194
+ }
195
+ .e-data-form .e-button-left, .e-data-form .e-button-right, .e-data-form .e-button-center, .e-data-form .e-button-stretch {
196
+ margin-top: 24px;
197
+ display: -webkit-box;
198
+ display: -ms-flexbox;
199
+ display: flex;
200
+ gap: 10px;
201
+ }
202
+ .e-data-form .e-button-left .e-btn, .e-data-form .e-button-right .e-btn, .e-data-form .e-button-center .e-btn, .e-data-form .e-button-stretch .e-btn {
203
+ border-radius: 20px;
204
+ padding: 7px 16px;
205
+ }
206
+ .e-data-form .e-button-stretch .e-btn {
207
+ width: 100%;
208
+ }
209
+ .e-data-form > :first-child.e-form-layout {
210
+ margin-top: 0;
211
+ }
212
+
213
+ /*! data-form theme */
214
+ .e-data-form .e-form-label {
215
+ color: var(--color-sf-content-text-color-alt1);
216
+ }
217
+ .e-data-form .e-group-title {
218
+ color: var(--color-sf-content-text-color-alt2);
219
+ }
220
+ .e-data-form .validation-message {
221
+ color: var(--color-sf-danger);
222
+ font-size: 12px;
223
+ font-style: italic;
224
+ }
225
+
226
+ .e-tooltip-wrap.e-popup.e-error-tooltip {
227
+ background-color: var(--color-sf-danger-light);
228
+ border: var(--color-sf-danger-light);
229
+ }
230
+ .e-tooltip-wrap.e-popup.e-error-tooltip .e-tip-content .validation-message {
231
+ color: var(--color-sf-danger);
232
+ }
233
+ .e-tooltip-wrap.e-popup.e-error-tooltip .e-arrow-tip .e-arrow-tip-outer.e-tip-top, .e-tooltip-wrap.e-popup.e-error-tooltip .e-arrow-tip .e-arrow-tip-inner.e-tip-top {
234
+ border-bottom-color: var(--color-sf-danger-light);
235
+ color: var(--color-sf-danger-light);
236
+ }
@@ -0,0 +1,3 @@
1
+ @import 'ej2-base/styles/definition/tailwind3.scss';
2
+ @import 'tailwind3-definition.scss';
3
+ @import 'all.scss';
@@ -2830,6 +2830,7 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
2830
2830
  overflow: hidden;
2831
2831
  left: calc(50% - 2px);
2832
2832
  width: 4px;
2833
+ border-radius: 4px;
2833
2834
  }
2834
2835
  .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
2835
2836
  height: 100%;
@@ -4217,6 +4218,9 @@ body.e-colorpicker-overflow {
4217
4218
  .e-rtl .e-container .e-selected-value .e-float-input input {
4218
4219
  padding-right: 0;
4219
4220
  }
4221
+ .e-rtl .e-container .e-selected-value .e-float-input .e-float-text {
4222
+ right: -12px !important; /* stylelint-disable-line declaration-no-important */
4223
+ }
4220
4224
  .e-rtl .e-container .e-selected-value .e-value-switch-btn {
4221
4225
  -webkit-transform: rotate(180deg);
4222
4226
  transform: rotate(180deg);
@@ -4659,6 +4659,7 @@ textarea.e-input.e-bigger.e-small,
4659
4659
  overflow: hidden;
4660
4660
  left: calc(50% - 2px);
4661
4661
  width: 4px;
4662
+ border-radius: 4px;
4662
4663
  }
4663
4664
  .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
4664
4665
  height: 100%;
@@ -6573,6 +6574,9 @@ body.e-colorpicker-overflow {
6573
6574
  .e-rtl .e-container .e-selected-value .e-float-input input {
6574
6575
  padding-right: 0;
6575
6576
  }
6577
+ .e-rtl .e-container .e-selected-value .e-float-input .e-float-text {
6578
+ right: -12px !important; /* stylelint-disable-line declaration-no-important */
6579
+ }
6576
6580
  .e-rtl .e-container .e-selected-value .e-value-switch-btn {
6577
6581
  -webkit-transform: rotate(180deg);
6578
6582
  transform: rotate(180deg);
@@ -2830,6 +2830,7 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
2830
2830
  overflow: hidden;
2831
2831
  left: calc(50% - 2px);
2832
2832
  width: 4px;
2833
+ border-radius: 4px;
2833
2834
  }
2834
2835
  .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
2835
2836
  height: 100%;
@@ -4216,6 +4217,9 @@ body.e-colorpicker-overflow {
4216
4217
  .e-rtl .e-container .e-selected-value .e-float-input input {
4217
4218
  padding-right: 0;
4218
4219
  }
4220
+ .e-rtl .e-container .e-selected-value .e-float-input .e-float-text {
4221
+ right: -12px !important; /* stylelint-disable-line declaration-no-important */
4222
+ }
4219
4223
  .e-rtl .e-container .e-selected-value .e-value-switch-btn {
4220
4224
  -webkit-transform: rotate(180deg);
4221
4225
  transform: rotate(180deg);
package/styles/fabric.css CHANGED
@@ -4659,6 +4659,7 @@ textarea.e-input.e-bigger.e-small,
4659
4659
  overflow: hidden;
4660
4660
  left: calc(50% - 2px);
4661
4661
  width: 4px;
4662
+ border-radius: 4px;
4662
4663
  }
4663
4664
  .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
4664
4665
  height: 100%;
@@ -6572,6 +6573,9 @@ body.e-colorpicker-overflow {
6572
6573
  .e-rtl .e-container .e-selected-value .e-float-input input {
6573
6574
  padding-right: 0;
6574
6575
  }
6576
+ .e-rtl .e-container .e-selected-value .e-float-input .e-float-text {
6577
+ right: -12px !important; /* stylelint-disable-line declaration-no-important */
6578
+ }
6575
6579
  .e-rtl .e-container .e-selected-value .e-value-switch-btn {
6576
6580
  -webkit-transform: rotate(180deg);
6577
6581
  transform: rotate(180deg);
@@ -2866,7 +2866,7 @@ textarea.e-input:hover:not(.e-success):not(.e-warning):not(.e-error):not([disabl
2866
2866
  overflow: hidden;
2867
2867
  left: calc(50% - 2px);
2868
2868
  width: 4px;
2869
- border-radius: 2px;
2869
+ border-radius: 4px;
2870
2870
  }
2871
2871
  .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
2872
2872
  height: 100%;
@@ -4294,6 +4294,9 @@ body.e-colorpicker-overflow {
4294
4294
  .e-rtl .e-container .e-selected-value .e-float-input input {
4295
4295
  padding-right: 0;
4296
4296
  }
4297
+ .e-rtl .e-container .e-selected-value .e-float-input .e-float-text {
4298
+ right: -12px !important; /* stylelint-disable-line declaration-no-important */
4299
+ }
4297
4300
  .e-rtl .e-container .e-selected-value .e-value-switch-btn {
4298
4301
  -webkit-transform: rotate(180deg);
4299
4302
  transform: rotate(180deg);
@@ -5109,10 +5112,10 @@ body.e-colorpicker-overflow {
5109
5112
  }
5110
5113
  }
5111
5114
  .smart-textarea-suggestion-overlay {
5112
- background-color: #fff;
5113
- color: #201f1e;
5114
- -webkit-box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.4);
5115
- box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.4);
5115
+ background-color: #1b1a19;
5116
+ color: #f3f2f1;
5117
+ -webkit-box-shadow: 0 1.25px 4px 0 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
5118
+ box-shadow: 0 1.25px 4px 0 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
5116
5119
  }
5117
5120
 
5118
5121
  [data-suggestion-visible]::-moz-selection {
@@ -4714,7 +4714,7 @@ textarea.e-input.e-bigger.e-small,
4714
4714
  overflow: hidden;
4715
4715
  left: calc(50% - 2px);
4716
4716
  width: 4px;
4717
- border-radius: 2px;
4717
+ border-radius: 4px;
4718
4718
  }
4719
4719
  .e-control-wrapper.e-slider-container.e-vertical.e-small-size.e-slider-btn {
4720
4720
  height: 100%;
@@ -6723,6 +6723,9 @@ body.e-colorpicker-overflow {
6723
6723
  .e-rtl .e-container .e-selected-value .e-float-input input {
6724
6724
  padding-right: 0;
6725
6725
  }
6726
+ .e-rtl .e-container .e-selected-value .e-float-input .e-float-text {
6727
+ right: -12px !important; /* stylelint-disable-line declaration-no-important */
6728
+ }
6726
6729
  .e-rtl .e-container .e-selected-value .e-value-switch-btn {
6727
6730
  -webkit-transform: rotate(180deg);
6728
6731
  transform: rotate(180deg);
@@ -7874,10 +7877,10 @@ body.e-colorpicker-overflow {
7874
7877
  }
7875
7878
  }
7876
7879
  .smart-textarea-suggestion-overlay {
7877
- background-color: #fff;
7878
- color: #201f1e;
7879
- -webkit-box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.4);
7880
- box-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.4);
7880
+ background-color: #1b1a19;
7881
+ color: #f3f2f1;
7882
+ -webkit-box-shadow: 0 1.25px 4px 0 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
7883
+ box-shadow: 0 1.25px 4px 0 0 25.6px 57.6px 0 rgba(0, 0, 0, 0.22), 0 4.8px 14.4px 0 rgba(0, 0, 0, 0.18);
7881
7884
  }
7882
7885
 
7883
7886
  [data-suggestion-visible]::-moz-selection {