@zohodesk/components 1.2.18 → 1.2.19
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/.cli/AppearanceThemeValidationExcludeFiles.js +1 -0
- package/.cli/propValidation_report.html +1 -1
- package/README.md +6 -0
- package/assets/Appearance/dark/mode/Component_DarkMode.module.css +3 -0
- package/assets/Appearance/light/mode/Component_LightMode.module.css +3 -0
- package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +3 -0
- package/es/Avatar/Avatar.module.css +12 -0
- package/es/AvatarTeam/AvatarTeam.module.css +2 -0
- package/es/Button/css/Button.module.css +9 -1
- package/es/Buttongroup/Buttongroup.module.css +2 -0
- package/es/CheckBox/CheckBox.module.css +2 -0
- package/es/DateTime/DateTime.module.css +1 -0
- package/es/DateTime/dateFormatUtils/dateFormat.js +6 -1
- package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css +7 -0
- package/es/DropBox/css/DropBox.module.css +1 -0
- package/es/DropDown/DropDownHeading.module.css +6 -0
- package/es/DropDown/DropDownItem.module.css +3 -0
- package/es/Label/Label.module.css +1 -0
- package/es/ListItem/ListItem.module.css +21 -0
- package/es/PopOver/PopOver.module.css +1 -0
- package/es/Radio/Radio.module.css +1 -0
- package/es/Ribbon/Ribbon.module.css +4 -0
- package/es/Switch/Switch.module.css +2 -0
- package/es/Tag/Tag.module.css +6 -0
- package/es/TextBox/TextBox.module.css +20 -0
- package/es/TextBoxIcon/TextBoxIcon.module.css +5 -0
- package/es/Textarea/Textarea.module.css +6 -0
- package/es/Tooltip/Tooltip.module.css +4 -0
- package/es/common/customscroll.module.css +37 -0
- package/es/v1/Modal/Modal.js +86 -114
- package/es/v1/Typography/css/Typography.module.css +83 -112
- package/es/v1/Typography/css/cssJSLogic.js +6 -2
- package/es/v1/Typography/props/propTypes.js +2 -2
- package/es/v1/Typography/utils/index.js +50 -0
- package/lib/Avatar/Avatar.module.css +12 -0
- package/lib/AvatarTeam/AvatarTeam.module.css +2 -0
- package/lib/Button/css/Button.module.css +9 -1
- package/lib/Buttongroup/Buttongroup.module.css +2 -0
- package/lib/CheckBox/CheckBox.module.css +2 -0
- package/lib/DateTime/DateTime.module.css +1 -0
- package/lib/DateTime/dateFormatUtils/dateFormat.js +6 -1
- package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css +7 -0
- package/lib/DropBox/css/DropBox.module.css +1 -0
- package/lib/DropDown/DropDownHeading.module.css +6 -0
- package/lib/DropDown/DropDownItem.module.css +3 -0
- package/lib/Label/Label.module.css +1 -0
- package/lib/ListItem/ListItem.module.css +21 -0
- package/lib/PopOver/PopOver.module.css +1 -0
- package/lib/Radio/Radio.module.css +1 -0
- package/lib/Ribbon/Ribbon.module.css +4 -0
- package/lib/Switch/Switch.module.css +2 -0
- package/lib/Tag/Tag.module.css +6 -0
- package/lib/TextBox/TextBox.module.css +20 -0
- package/lib/TextBoxIcon/TextBoxIcon.module.css +5 -0
- package/lib/Textarea/Textarea.module.css +6 -0
- package/lib/Tooltip/Tooltip.module.css +4 -0
- package/lib/common/customscroll.module.css +37 -0
- package/lib/v1/Modal/Modal.js +118 -164
- package/lib/v1/Typography/css/Typography.module.css +83 -112
- package/lib/v1/Typography/css/cssJSLogic.js +7 -3
- package/lib/v1/Typography/props/propTypes.js +2 -2
- package/lib/v1/Typography/utils/index.js +59 -0
- package/package.json +8 -6
- package/result.json +1 -1
- package/es/v1/Typography/css/letterSpacingMap.js +0 -12
- package/lib/v1/Typography/css/letterSpacingMap.js +0 -20
package/README.md
CHANGED
|
@@ -32,6 +32,12 @@ In this Package, we Provide Some Basic Components to Build Web App
|
|
|
32
32
|
- TextBoxIcon
|
|
33
33
|
- Tooltip
|
|
34
34
|
|
|
35
|
+
# 1.2.19
|
|
36
|
+
|
|
37
|
+
- Typography - lineheight unitless prop added
|
|
38
|
+
- v1/Modal - converted to functional component
|
|
39
|
+
- DateWidget - Manual Type TimeZone Issue Fixed
|
|
40
|
+
|
|
35
41
|
# 1.2.18
|
|
36
42
|
|
|
37
43
|
- TextBox - MaxLength Default Prop Removed
|
|
@@ -345,4 +345,7 @@
|
|
|
345
345
|
--zdt_customscroll_thump_dark_hover_bg: hsla(0, 0.00%, calc(88.24% + var(--zdc_default_inverse_low)), calc( 0.14 + var(--zdc_alpha_low)));
|
|
346
346
|
--zdt_customscroll_dark_border: hsla(0, 0.00%, calc(88.24% + var(--zdc_lighter_medium)), calc( 0.12 + var(--zdc_alpha_low)));
|
|
347
347
|
--zdt_customscroll_dark_bg: hsla(0, 0.00%, calc(88.24% + var(--zdc_default_low)), calc( 0.06 + var(--zdc_alpha_low)));
|
|
348
|
+
|
|
349
|
+
/* popover */
|
|
350
|
+
--zdt_popover_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
348
351
|
}
|
|
@@ -345,4 +345,7 @@
|
|
|
345
345
|
--zdt_customscroll_thump_dark_hover_bg: hsla(0, 0.00%, calc(88.24% + var(--zdc_default_inverse_low)), calc( 0.17 + var(--zdc_alpha_low)));
|
|
346
346
|
--zdt_customscroll_dark_border: hsla(0, 0.00%, calc(88.24% + var(--zdc_lighter_medium)), calc( 0.12 + var(--zdc_alpha_low)));
|
|
347
347
|
--zdt_customscroll_dark_bg: hsla(0, 0.00%, calc(88.24% + var(--zdc_default_low)), calc( 0.06 + var(--zdc_alpha_low)));
|
|
348
|
+
|
|
349
|
+
/* popover */
|
|
350
|
+
--zdt_popover_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
348
351
|
}
|
|
@@ -345,4 +345,7 @@
|
|
|
345
345
|
--zdt_customscroll_thump_dark_hover_bg: hsla(0, 0.00%, calc(88.24% + var(--zdc_default_inverse_low)), calc( 0.14 + var(--zdc_alpha_low)));
|
|
346
346
|
--zdt_customscroll_dark_border: hsla(0, 0.00%, calc(88.24% + var(--zdc_lighter_medium)), calc( 0.12 + var(--zdc_alpha_low)));
|
|
347
347
|
--zdt_customscroll_dark_bg: hsla(0, 0.00%, calc(88.24% + var(--zdc_default_low)), calc( 0.06 + var(--zdc_alpha_low)));
|
|
348
|
+
|
|
349
|
+
/* popover */
|
|
350
|
+
--zdt_popover_default_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
|
|
348
351
|
}
|
|
@@ -18,19 +18,31 @@
|
|
|
18
18
|
composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
|
|
19
19
|
vertical-align: middle;
|
|
20
20
|
font-size: var(--avatar_font_size);
|
|
21
|
+
/* css:theme-validation:ignore */
|
|
21
22
|
color: var(--avatar_text_color);
|
|
22
23
|
border-width: var(--avatar_border_width);
|
|
23
24
|
border-style: var(--avatar_border_style);
|
|
24
25
|
}
|
|
25
26
|
|
|
26
27
|
.border {
|
|
28
|
+
/* css:theme-validation:ignore */
|
|
27
29
|
border-color: var(--avatar_border_color);
|
|
28
30
|
}
|
|
29
31
|
|
|
32
|
+
.borderOnHover:hover,
|
|
33
|
+
.borderOnActive {
|
|
34
|
+
/* css:theme-validation:ignore */
|
|
35
|
+
}
|
|
36
|
+
|
|
30
37
|
.borderOnHover:hover, .borderOnActive {
|
|
31
38
|
border-color: var(--avatar_border_hoverColor);
|
|
32
39
|
}
|
|
33
40
|
|
|
41
|
+
.avatar,
|
|
42
|
+
.primary {
|
|
43
|
+
/* css:theme-validation:ignore */
|
|
44
|
+
}
|
|
45
|
+
|
|
34
46
|
.avatar, .primary {
|
|
35
47
|
background-color: var(--avatar_bg_color);
|
|
36
48
|
}
|
|
@@ -25,6 +25,8 @@
|
|
|
25
25
|
composes: varClass;
|
|
26
26
|
composes: posab from '../common/common.module.css';
|
|
27
27
|
top: var(--avatarteam_top_top);
|
|
28
|
+
/* css:theme-validation:ignore */
|
|
29
|
+
/* css:theme-validation:ignore */
|
|
28
30
|
width: var(--avatarteam_width);
|
|
29
31
|
height: var(--avatarteam_height);
|
|
30
32
|
outline-width: var(--avatarteam_outline_width);
|
|
@@ -48,10 +48,13 @@
|
|
|
48
48
|
composes: dotted from '../../common/common.module.css';
|
|
49
49
|
position: relative;
|
|
50
50
|
font-size: var(--button_font_size);
|
|
51
|
+
/* css:theme-validation:ignore */
|
|
51
52
|
color: var(--button_text_color);
|
|
52
53
|
font-family: var(--button_font_family);
|
|
53
54
|
text-transform: var(--button_text_transform);
|
|
55
|
+
/* css:theme-validation:ignore */
|
|
54
56
|
min-width: var(--button_min_width);
|
|
57
|
+
/* css:theme-validation:ignore */
|
|
55
58
|
height: var(--button_height);
|
|
56
59
|
background-color: var(--button_bg_color);
|
|
57
60
|
border-radius: var(--button_border_radius);
|
|
@@ -295,6 +298,7 @@
|
|
|
295
298
|
.loadingelement:after {
|
|
296
299
|
content: '';
|
|
297
300
|
position: absolute;
|
|
301
|
+
/* css:theme-validation:ignore */
|
|
298
302
|
}
|
|
299
303
|
|
|
300
304
|
.loadingelement:before, .loadingelement:after {
|
|
@@ -468,6 +472,7 @@
|
|
|
468
472
|
transform-origin: center;
|
|
469
473
|
border-width: 2px 2px 0 0;
|
|
470
474
|
border-style: solid;
|
|
475
|
+
/* css:theme-validation:ignore */
|
|
471
476
|
border-color: var(--button_success_border_color);
|
|
472
477
|
animation: tick var(--zd_no_transition3) ease 0s forwards;
|
|
473
478
|
}
|
|
@@ -523,4 +528,7 @@
|
|
|
523
528
|
}
|
|
524
529
|
}
|
|
525
530
|
|
|
526
|
-
.loader{
|
|
531
|
+
.loader{
|
|
532
|
+
/* css:theme-validation:ignore */
|
|
533
|
+
color:var(--dot_mirror)
|
|
534
|
+
}
|
|
@@ -11,6 +11,8 @@
|
|
|
11
11
|
.buttonGroup {
|
|
12
12
|
composes: varClass;
|
|
13
13
|
composes: cboth from '../common/common.module.css';
|
|
14
|
+
/* css:theme-validation:ignore */
|
|
15
|
+
/* css:theme-validation:ignore */
|
|
14
16
|
background-color: var(--buttongroup_bg_color);
|
|
15
17
|
box-shadow: var(--buttongroup_box_shadow);
|
|
16
18
|
padding: var(--buttongroup_padding);
|
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
}
|
|
35
35
|
.boxContainer {
|
|
36
36
|
composes: offSelection from '../common/common.module.css';
|
|
37
|
+
/* css:theme-validation:ignore */
|
|
37
38
|
border-radius: 2px;
|
|
38
39
|
background-color: var(--checkbox_bg_color);
|
|
39
40
|
}
|
|
@@ -120,6 +121,7 @@
|
|
|
120
121
|
|
|
121
122
|
.checkedprimaryLabel,
|
|
122
123
|
.checkeddangerLabel {
|
|
124
|
+
/* css:theme-validation:ignore */
|
|
123
125
|
color: var(--checkbox_checked_active_color);
|
|
124
126
|
}
|
|
125
127
|
.activeprimaryLabel:hover
|
|
@@ -407,7 +407,12 @@ export function getSelectedDate(values, props) {
|
|
|
407
407
|
selectedValue = '';
|
|
408
408
|
|
|
409
409
|
if (isDateTime) {
|
|
410
|
-
|
|
410
|
+
if (timeZone) {
|
|
411
|
+
selectedInMillis = datetime.tz.tzToUtc(Date.UTC(year, month, date, hour, mins), timeZone);
|
|
412
|
+
} else {
|
|
413
|
+
selectedInMillis = Date.UTC(year, month, date, hour, mins);
|
|
414
|
+
}
|
|
415
|
+
|
|
411
416
|
selectedValue = datetime.ISO(selectedInMillis);
|
|
412
417
|
} else {
|
|
413
418
|
selectedInMillis = Date.UTC(year, month, date);
|
|
@@ -18,6 +18,11 @@
|
|
|
18
18
|
box-shadow: var(--dropbox_box_shadow);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
.defaultPalette,
|
|
22
|
+
.darkPalette {
|
|
23
|
+
/* css:theme-validation:ignore */
|
|
24
|
+
}
|
|
25
|
+
|
|
21
26
|
.defaultPalette, .darkPalette {
|
|
22
27
|
background-color: var(--dropbox_bg_color);
|
|
23
28
|
}
|
|
@@ -207,6 +212,7 @@
|
|
|
207
212
|
height: var(--zd_size10) ;
|
|
208
213
|
width: var(--zd_size10) ;
|
|
209
214
|
box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
|
|
215
|
+
/* css:theme-validation:ignore */
|
|
210
216
|
background-color: var(--dropbox_bg_color);
|
|
211
217
|
-webkit-transform: rotateZ(-45deg);
|
|
212
218
|
transform: rotateZ(-45deg);
|
|
@@ -416,6 +422,7 @@
|
|
|
416
422
|
.closeBar {
|
|
417
423
|
/* Variable:Ignore */
|
|
418
424
|
height: 6px;
|
|
425
|
+
/* css:theme-validation:ignore */
|
|
419
426
|
width: 20% ;
|
|
420
427
|
border-radius: 5px;
|
|
421
428
|
background-color: var(--dropbox_mob_close_bg_color);
|
|
@@ -18,7 +18,9 @@
|
|
|
18
18
|
font-size: var(--zd_font_size11) ;
|
|
19
19
|
letter-spacing: 0.6px;
|
|
20
20
|
text-transform: var(--dropdownheading_text_transform);
|
|
21
|
+
/* css:theme-validation:ignore */
|
|
21
22
|
color: var(--dropdownheading_text_color);
|
|
23
|
+
/* css:theme-validation:ignore */
|
|
22
24
|
padding: var(--dropdownheading_padding);
|
|
23
25
|
background-color: var(--dropdownheading_bg_color);
|
|
24
26
|
}
|
|
@@ -33,6 +35,10 @@
|
|
|
33
35
|
.light {
|
|
34
36
|
composes: default;
|
|
35
37
|
}
|
|
38
|
+
.light::after,
|
|
39
|
+
.dark::after {
|
|
40
|
+
/* css:theme-validation:ignore */
|
|
41
|
+
}
|
|
36
42
|
.light::after, .dark::after {
|
|
37
43
|
background-color: var(--dropdownheading_underline_bg_color);
|
|
38
44
|
}
|
|
@@ -20,6 +20,8 @@
|
|
|
20
20
|
position: relative;
|
|
21
21
|
color: var(--zdt_dropdown_default_text);
|
|
22
22
|
font-size: var(--zd_font_size13) ;
|
|
23
|
+
/* css:theme-validation:ignore */
|
|
24
|
+
/* css:theme-validation:ignore */
|
|
23
25
|
padding: var(--dropdownitem-padding);
|
|
24
26
|
border-style: solid;
|
|
25
27
|
border-color: var(--dropdownitem-border-color);
|
|
@@ -74,6 +76,7 @@
|
|
|
74
76
|
opacity: 0;
|
|
75
77
|
visibility: hidden;
|
|
76
78
|
width: var(--dropdownitem-user-width);
|
|
79
|
+
/* css:theme-validation:ignore */
|
|
77
80
|
border-width: var(--dropdownitem-user-border-width);
|
|
78
81
|
border-style: var(--dropdownitem-user-border-style);
|
|
79
82
|
border-color: var(--dropdownitem-user-border-color);
|
|
@@ -23,8 +23,10 @@
|
|
|
23
23
|
composes: varClass;
|
|
24
24
|
position: relative;
|
|
25
25
|
list-style: none;
|
|
26
|
+
/* css:theme-validation:ignore */
|
|
26
27
|
color: var(--listitem_text_color);
|
|
27
28
|
font-size: var(--zd_font_size13) ;
|
|
29
|
+
/* css:theme-validation:ignore */
|
|
28
30
|
height: var(--listitem_height);
|
|
29
31
|
min-height: var(--listitem_min_height);
|
|
30
32
|
text-decoration: none;
|
|
@@ -34,6 +36,11 @@
|
|
|
34
36
|
border-color: var(--listitem_border_color);
|
|
35
37
|
cursor: pointer;
|
|
36
38
|
}
|
|
39
|
+
.list,
|
|
40
|
+
.default,
|
|
41
|
+
.secondary {
|
|
42
|
+
/* css:theme-validation:ignore */
|
|
43
|
+
}
|
|
37
44
|
.list, .default, .secondary {
|
|
38
45
|
background-color: var(--listitem_bg_color);
|
|
39
46
|
}
|
|
@@ -94,6 +101,13 @@
|
|
|
94
101
|
margin: var(--listitem_avatar_margin);
|
|
95
102
|
}
|
|
96
103
|
|
|
104
|
+
.defaultHover,
|
|
105
|
+
.primaryHover,
|
|
106
|
+
.secondaryHover,
|
|
107
|
+
.darkHover {
|
|
108
|
+
/* css:theme-validation:ignore */
|
|
109
|
+
}
|
|
110
|
+
|
|
97
111
|
.defaultHover, .primaryHover, .secondaryHover, .darkHover {
|
|
98
112
|
background-color: var(--listitem_highlight_bg_color);
|
|
99
113
|
}
|
|
@@ -135,6 +149,12 @@
|
|
|
135
149
|
--listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
|
|
136
150
|
--listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
|
|
137
151
|
}
|
|
152
|
+
.activedefault,
|
|
153
|
+
.activeprimary,
|
|
154
|
+
.activesecondary,
|
|
155
|
+
.activedark {
|
|
156
|
+
/* css:theme-validation:ignore */
|
|
157
|
+
}
|
|
138
158
|
.activedefault, .activeprimary, .activesecondary, .activedark {
|
|
139
159
|
background-color: var(--listitem_active_bg_color);
|
|
140
160
|
}
|
|
@@ -160,6 +180,7 @@
|
|
|
160
180
|
.defaultTick,
|
|
161
181
|
.darkTick {
|
|
162
182
|
position: absolute;
|
|
183
|
+
/* css:theme-validation:ignore */
|
|
163
184
|
color: var(--listitem_tickicon_color);
|
|
164
185
|
}
|
|
165
186
|
|
|
@@ -35,9 +35,12 @@
|
|
|
35
35
|
.basic {
|
|
36
36
|
composes: varClass;
|
|
37
37
|
position: relative;
|
|
38
|
+
/* css:theme-validation:ignore */
|
|
38
39
|
color: var(--ribbon_text_color);
|
|
39
40
|
text-transform: var(--ribbon_text_transform);
|
|
40
41
|
font-size: var(--ribbon_font_size);
|
|
42
|
+
/* css:theme-validation:ignore */
|
|
43
|
+
/* css:theme-validation:ignore */
|
|
41
44
|
line-height: var(--ribbon_line_height);
|
|
42
45
|
padding: var(--ribbon_padding);
|
|
43
46
|
background-color: var(--ribbon_bg_color);
|
|
@@ -334,6 +337,7 @@
|
|
|
334
337
|
position: absolute;
|
|
335
338
|
content: '';
|
|
336
339
|
top: var(--ribbon_tag_before_top);
|
|
340
|
+
/* css:theme-validation:ignore */
|
|
337
341
|
width: var(--ribbon_tag_before_width);
|
|
338
342
|
height: var(--ribbon_tag_before_height);
|
|
339
343
|
background-color: inherit;
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
display: inline-block;
|
|
27
27
|
position: relative;
|
|
28
28
|
transition: box-shadow var(--zd_transition3) ease-in-out;
|
|
29
|
+
/* css:theme-validation:ignore */
|
|
29
30
|
background-color: var(--switch_off_bg_color);
|
|
30
31
|
border-radius: 20px;
|
|
31
32
|
cursor: pointer;
|
|
@@ -44,6 +45,7 @@
|
|
|
44
45
|
right: 50% ;
|
|
45
46
|
transition: all var(--zd_transition2);
|
|
46
47
|
box-shadow: var(--switch_cricle_box_shadow);
|
|
48
|
+
/* css:theme-validation:ignore */
|
|
47
49
|
background-color: var(--switch_circle_bg_color);
|
|
48
50
|
border-radius: var(--switch_circle_border_radius);
|
|
49
51
|
}
|
package/es/Tag/Tag.module.css
CHANGED
|
@@ -34,10 +34,13 @@
|
|
|
34
34
|
composes: dInflex alignVertical flexrow from '../common/common.module.css';
|
|
35
35
|
position: relative;
|
|
36
36
|
vertical-align: middle;
|
|
37
|
+
/* css:theme-validation:ignore */
|
|
37
38
|
color: var(--tag_text_color);
|
|
39
|
+
/* css:theme-validation:ignore */
|
|
38
40
|
font-size: var(--tag_font_size);
|
|
39
41
|
letter-spacing: var(--tag_letter_spacing);
|
|
40
42
|
height: var(--tag_height);
|
|
43
|
+
/* css:theme-validation:ignore */
|
|
41
44
|
max-width: 100% ;
|
|
42
45
|
background-color: var(--tag_bg_color);
|
|
43
46
|
border-radius: var(--tag_border_radius);
|
|
@@ -122,11 +125,13 @@
|
|
|
122
125
|
display: block;
|
|
123
126
|
}
|
|
124
127
|
.close {
|
|
128
|
+
/* css:theme-validation:ignore */
|
|
125
129
|
color: var(--tag_closeicon_color);
|
|
126
130
|
display: none;
|
|
127
131
|
position: absolute;
|
|
128
132
|
top: 0 ;
|
|
129
133
|
bottom: 0 ;
|
|
134
|
+
/* css:theme-validation:ignore */
|
|
130
135
|
padding: var(--tag_closeicon_padding);
|
|
131
136
|
cursor: var(--tag_closeicon_cursor);
|
|
132
137
|
border-radius: var(--tag_closeicon_border_radius);
|
|
@@ -224,6 +229,7 @@
|
|
|
224
229
|
}
|
|
225
230
|
|
|
226
231
|
.icon {
|
|
232
|
+
/* css:theme-validation:ignore */
|
|
227
233
|
margin: var(--tag_icon_margin);
|
|
228
234
|
background-color: var(--tag_icon_bg_color);
|
|
229
235
|
}
|
|
@@ -25,29 +25,37 @@
|
|
|
25
25
|
-moz-appearance: none;
|
|
26
26
|
appearance: none;
|
|
27
27
|
letter-spacing: var(--textbox_letter_spacing);
|
|
28
|
+
/* css:theme-validation:ignore */
|
|
28
29
|
border: var(--textbox_border_width);
|
|
29
30
|
cursor: var(--textbox_cursor);
|
|
30
31
|
}
|
|
31
32
|
.basic::placeholder {
|
|
33
|
+
/* css:theme-validation:ignore */
|
|
32
34
|
color: var(--textbox_placeholder_text_color);
|
|
33
35
|
}
|
|
34
36
|
.basic::-webkit-placeholder {
|
|
37
|
+
/* css:theme-validation:ignore */
|
|
35
38
|
color: var(--textbox_placeholder_text_color);
|
|
36
39
|
}
|
|
37
40
|
.basic::-moz-placeholder {
|
|
41
|
+
/* css:theme-validation:ignore */
|
|
38
42
|
color: var(--textbox_placeholder_text_color);
|
|
39
43
|
}
|
|
40
44
|
.basic::-ms-placeholder {
|
|
45
|
+
/* css:theme-validation:ignore */
|
|
41
46
|
color: var(--textbox_placeholder_text_color);
|
|
42
47
|
}
|
|
43
48
|
.container {
|
|
44
49
|
composes: basic;
|
|
50
|
+
/* css:theme-validation:ignore */
|
|
45
51
|
transition: border var(--zd_transition2) linear 0s;
|
|
46
52
|
-moz-transition: border var(--zd_transition2) linear 0s;
|
|
47
53
|
width: var(--textbox_width);
|
|
54
|
+
/* css:theme-validation:ignore */
|
|
48
55
|
color: var(--textbox_text_color);
|
|
49
56
|
font-size: var(--textbox_font_size);
|
|
50
57
|
height: var(--textbox_height);
|
|
58
|
+
/* css:theme-validation:ignore */
|
|
51
59
|
line-height: var(--textbox_line_height);
|
|
52
60
|
background-color: var(--textbox_bg_color);
|
|
53
61
|
-webkit-transition: border var(--zd_transition2) linear 0s;
|
|
@@ -68,15 +76,19 @@
|
|
|
68
76
|
--textbox_bg_color: none;
|
|
69
77
|
}
|
|
70
78
|
.container::placeholder {
|
|
79
|
+
/* css:theme-validation:ignore */
|
|
71
80
|
color: var(--textbox_placeholder_text_color);
|
|
72
81
|
}
|
|
73
82
|
.container::-webkit-placeholder {
|
|
83
|
+
/* css:theme-validation:ignore */
|
|
74
84
|
color: var(--textbox_placeholder_text_color);
|
|
75
85
|
}
|
|
76
86
|
.container::-moz-placeholder {
|
|
87
|
+
/* css:theme-validation:ignore */
|
|
77
88
|
color: var(--textbox_placeholder_text_color);
|
|
78
89
|
}
|
|
79
90
|
.container::-ms-placeholder {
|
|
91
|
+
/* css:theme-validation:ignore */
|
|
80
92
|
color: var(--textbox_placeholder_text_color);
|
|
81
93
|
}
|
|
82
94
|
.pointer {
|
|
@@ -87,12 +99,20 @@
|
|
|
87
99
|
border-width: var(--textbox_border_width);
|
|
88
100
|
border-style: var(--textbox_border_style);
|
|
89
101
|
}
|
|
102
|
+
.effect:hover,
|
|
103
|
+
.effect:focus {
|
|
104
|
+
/* css:theme-validation:ignore */
|
|
105
|
+
}
|
|
90
106
|
.effect:hover, .effect:focus {
|
|
91
107
|
border-color: var(--textbox_border_color);
|
|
92
108
|
}
|
|
93
109
|
.border {
|
|
94
110
|
--textbox_border_width: 0 0 1px 0;
|
|
95
111
|
}
|
|
112
|
+
.borderColor_transparent,
|
|
113
|
+
.borderColor_default {
|
|
114
|
+
/* css:theme-validation:ignore */
|
|
115
|
+
}
|
|
96
116
|
.borderColor_transparent, .borderColor_default {
|
|
97
117
|
border-color: var(--textbox_border_color);
|
|
98
118
|
}
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
cursor: var(--textboxicon_icon_cursor);
|
|
25
25
|
}
|
|
26
26
|
.iconContainer {
|
|
27
|
+
/* css:theme-validation:ignore */
|
|
27
28
|
color: var(--textboxicon_icon_color);
|
|
28
29
|
}
|
|
29
30
|
.effect:hover .iconContainer,
|
|
@@ -50,6 +51,10 @@
|
|
|
50
51
|
right: 0 ;
|
|
51
52
|
left: 0 ;
|
|
52
53
|
}
|
|
54
|
+
.line,
|
|
55
|
+
.borderColor_default {
|
|
56
|
+
/* css:theme-validation:ignore */
|
|
57
|
+
}
|
|
53
58
|
.line, .borderColor_default {
|
|
54
59
|
background-color: var(--textboxicon_line_color);
|
|
55
60
|
}
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
appearance: none;
|
|
20
20
|
outline: 0;
|
|
21
21
|
letter-spacing: 0.1px;
|
|
22
|
+
/* css:theme-validation:ignore */
|
|
22
23
|
color: var(--textarea_text_color);
|
|
23
24
|
cursor: var(--textarea_cursor);
|
|
24
25
|
}
|
|
@@ -26,15 +27,19 @@
|
|
|
26
27
|
border-width: var(--textarea_border_width);
|
|
27
28
|
}
|
|
28
29
|
.basic::placeholder {
|
|
30
|
+
/* css:theme-validation:ignore */
|
|
29
31
|
color: var(--textarea_placeholder_text_color);
|
|
30
32
|
}
|
|
31
33
|
.basic::-webkit-placeholder {
|
|
34
|
+
/* css:theme-validation:ignore */
|
|
32
35
|
color: var(--textarea_placeholder_text_color);
|
|
33
36
|
}
|
|
34
37
|
.basic::-moz-placeholder {
|
|
38
|
+
/* css:theme-validation:ignore */
|
|
35
39
|
color: var(--textarea_placeholder_text_color);
|
|
36
40
|
}
|
|
37
41
|
.basic::-ms-placeholder {
|
|
42
|
+
/* css:theme-validation:ignore */
|
|
38
43
|
color: var(--textarea_placeholder_text_color);
|
|
39
44
|
}
|
|
40
45
|
.basic:disabled {
|
|
@@ -67,6 +72,7 @@
|
|
|
67
72
|
min-width: var(--zd_size100) ;
|
|
68
73
|
font-size: var(--textarea_font_size);
|
|
69
74
|
line-height: var(--textarea_line_height);
|
|
75
|
+
/* css:theme-validation:ignore */
|
|
70
76
|
height: var(--textarea_height);
|
|
71
77
|
-webkit-transition: border var(--zd_transition2) linear 0s,
|
|
72
78
|
height var(--zd_transition2) linear 0s;
|
|
@@ -49,7 +49,9 @@
|
|
|
49
49
|
height: 11px;
|
|
50
50
|
border-top: solid 6px var(--zdt_tooltip_default_bg);
|
|
51
51
|
border-left: solid 6px var(--zdt_tooltip_default_bg);
|
|
52
|
+
/* css:theme-validation:ignore */
|
|
52
53
|
border-right: solid 6px transparent;
|
|
54
|
+
/* css:theme-validation:ignore */
|
|
53
55
|
border-bottom: solid 6px transparent;
|
|
54
56
|
box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
|
|
55
57
|
z-index: -1;
|
|
@@ -69,7 +71,9 @@
|
|
|
69
71
|
height: 11px;
|
|
70
72
|
border-top: solid 6px var(--zdt_tooltip_default_bg);
|
|
71
73
|
border-left: solid 6px var(--zdt_tooltip_default_bg);
|
|
74
|
+
/* css:theme-validation:ignore */
|
|
72
75
|
border-right: solid 6px transparent;
|
|
76
|
+
/* css:theme-validation:ignore */
|
|
73
77
|
border-bottom: solid 6px transparent;
|
|
74
78
|
box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
|
|
75
79
|
z-index: -1;
|
|
@@ -23,9 +23,17 @@
|
|
|
23
23
|
-ms-scrollbar-highlight-color: var(--zd-scroll-bg);
|
|
24
24
|
-ms-scrollbar-face-color: var(--zd-scroll-thump);
|
|
25
25
|
}
|
|
26
|
+
.scroll::-webkit-scrollbar,
|
|
27
|
+
.scroll ::-webkit-scrollbar {
|
|
28
|
+
/* css:theme-validation:ignore */
|
|
29
|
+
}
|
|
26
30
|
.scroll::-webkit-scrollbar, .scroll ::-webkit-scrollbar {
|
|
27
31
|
background: var(--zd-scroll-corner-bg);
|
|
28
32
|
}
|
|
33
|
+
.scroll::-webkit-scrollbar:hover,
|
|
34
|
+
.scroll ::-webkit-scrollbar:hover {
|
|
35
|
+
/* css:theme-validation:ignore */
|
|
36
|
+
}
|
|
29
37
|
.scroll::-webkit-scrollbar:hover, .scroll ::-webkit-scrollbar:hover {
|
|
30
38
|
background: var(--zd-scroll-bg);
|
|
31
39
|
}
|
|
@@ -43,6 +51,11 @@
|
|
|
43
51
|
width: 0 ;
|
|
44
52
|
height: 0 ;
|
|
45
53
|
}
|
|
54
|
+
.scroll::-webkit-scrollbar-track:vertical,
|
|
55
|
+
.scroll ::-webkit-scrollbar-track:vertical {
|
|
56
|
+
/* css:theme-validation:ignore */
|
|
57
|
+
/* css:theme-validation:ignore */
|
|
58
|
+
}
|
|
46
59
|
[dir=ltr] .scroll::-webkit-scrollbar-track:vertical, [dir=ltr] .scroll ::-webkit-scrollbar-track:vertical {
|
|
47
60
|
border-left: 1px solid transparent;
|
|
48
61
|
border-right: 1px solid transparent;
|
|
@@ -51,13 +64,26 @@
|
|
|
51
64
|
border-right: 1px solid transparent;
|
|
52
65
|
border-left: 1px solid transparent;
|
|
53
66
|
}
|
|
67
|
+
.scroll::-webkit-scrollbar-track:vertical:hover,
|
|
68
|
+
.scroll ::-webkit-scrollbar-track:vertical:hover {
|
|
69
|
+
/* css:theme-validation:ignore */
|
|
70
|
+
}
|
|
54
71
|
.scroll::-webkit-scrollbar-track:vertical:hover, .scroll ::-webkit-scrollbar-track:vertical:hover {
|
|
55
72
|
border-color: var(--zd-scroll-border);
|
|
56
73
|
}
|
|
74
|
+
.scroll::-webkit-scrollbar-track:horizontal,
|
|
75
|
+
.scroll ::-webkit-scrollbar-track:horizontal {
|
|
76
|
+
/* css:theme-validation:ignore */
|
|
77
|
+
/* css:theme-validation:ignore */
|
|
78
|
+
}
|
|
57
79
|
.scroll::-webkit-scrollbar-track:horizontal, .scroll ::-webkit-scrollbar-track:horizontal {
|
|
58
80
|
border-top: 1px solid transparent;
|
|
59
81
|
border-bottom: 1px solid transparent;
|
|
60
82
|
}
|
|
83
|
+
.scroll::-webkit-scrollbar-track:horizontal:hover,
|
|
84
|
+
.scroll ::-webkit-scrollbar-track:horizontal:hover {
|
|
85
|
+
/* css:theme-validation:ignore */
|
|
86
|
+
}
|
|
61
87
|
.scroll::-webkit-scrollbar-track:horizontal:hover, .scroll ::-webkit-scrollbar-track:horizontal:hover {
|
|
62
88
|
border-color: var(--zd-scroll-border);
|
|
63
89
|
}
|
|
@@ -66,6 +92,8 @@
|
|
|
66
92
|
}
|
|
67
93
|
.scroll::-webkit-scrollbar-thumb,
|
|
68
94
|
.scroll ::-webkit-scrollbar-thumb {
|
|
95
|
+
/* css:theme-validation:ignore */
|
|
96
|
+
/* css:theme-validation:ignore */
|
|
69
97
|
/* display: none; */
|
|
70
98
|
}
|
|
71
99
|
.scroll::-webkit-scrollbar-thumb, .scroll ::-webkit-scrollbar-thumb {
|
|
@@ -74,6 +102,11 @@
|
|
|
74
102
|
background-clip: padding-box;
|
|
75
103
|
border: 3px solid transparent;
|
|
76
104
|
}
|
|
105
|
+
.scroll::-webkit-scrollbar-thumb:hover,
|
|
106
|
+
.scroll ::-webkit-scrollbar-thumb:hover {
|
|
107
|
+
/* css:theme-validation:ignore */
|
|
108
|
+
/* css:theme-validation:ignore */
|
|
109
|
+
}
|
|
77
110
|
.scroll::-webkit-scrollbar-thumb:hover, .scroll ::-webkit-scrollbar-thumb:hover {
|
|
78
111
|
background: var(--zd-scroll-thump-hoverbg);
|
|
79
112
|
background-clip: padding-box;
|
|
@@ -83,6 +116,10 @@
|
|
|
83
116
|
.scroll *:hover > ::-webkit-scrollbar-thumb {
|
|
84
117
|
display: block;
|
|
85
118
|
} */
|
|
119
|
+
.scroll::-webkit-scrollbar-corner,
|
|
120
|
+
.scroll ::-webkit-scrollbar-corner {
|
|
121
|
+
/* css:theme-validation:ignore */
|
|
122
|
+
}
|
|
86
123
|
.scroll::-webkit-scrollbar-corner, .scroll ::-webkit-scrollbar-corner {
|
|
87
124
|
background: var(--zd-scroll-corner-bg);
|
|
88
125
|
}
|