@zohodesk/dot 1.0.0-temp-89 → 1.0.0-temp.888

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 (163) hide show
  1. package/README.md +13 -0
  2. package/es/ActionButton/ActionButton.js +7 -4
  3. package/es/ActionButton/ActionButton.module.css +9 -25
  4. package/es/AlphabeticList/AlphabeticList.module.css +4 -7
  5. package/es/Attachment/Attachment.module.css +9 -20
  6. package/es/AttachmentViewer/AttachmentViewer.module.css +27 -89
  7. package/es/ChannelIcon/ChannelIcon.module.css +21 -30
  8. package/es/Drawer/Drawer.module.css +11 -59
  9. package/es/FlipCard/FlipCard.module.css +5 -14
  10. package/es/FormAction/FormAction.module.css +9 -34
  11. package/es/FreezeLayer/FreezeLayer.module.css +2 -6
  12. package/es/IconButton/IconButton.module.css +1 -1
  13. package/es/ImportantNotes/ImportantNotes.module.css +2 -7
  14. package/es/Loader/Loader.module.css +4 -25
  15. package/es/Message/Message.module.css +9 -42
  16. package/es/MessageBanner/MessageBanner.module.css +4 -12
  17. package/es/NewStar/NewStar.module.css +5 -42
  18. package/es/Provider.js +5 -105
  19. package/es/ToastMessage/ToastMessage.module.css +25 -96
  20. package/es/Upload/Upload.module.css +8 -27
  21. package/es/alert/AlertHeader/AlertHeader.module.css +3 -21
  22. package/es/alert/AlertLookup/AlertLookup.module.css +2 -6
  23. package/es/avatar/AvatarClose/AvatarClose.module.css +3 -9
  24. package/es/avatar/AvatarCollision/AvatarCollision.module.css +4 -18
  25. package/es/avatar/AvatarIcon/AvatarIcon.module.css +4 -3
  26. package/es/avatar/AvatarStatus/AvatarStatus.module.css +9 -59
  27. package/es/avatar/AvatarThread/AvatarThread.module.css +5 -55
  28. package/es/avatar/AvatarUser/AvatarUser.module.css +10 -81
  29. package/es/avatar/AvatarWithTeam/AvatarWithTeam.module.css +3 -10
  30. package/es/common/dot_animation.module.css +3 -16
  31. package/es/deprecated/SelectDropdown/SelectDropdown.module.css +3 -11
  32. package/es/docs/formDocs.js +5 -1
  33. package/es/docs/generalDocs.js +5 -2
  34. package/es/dropdown/ToggleDropDown/ToggleDropDown.module.css +9 -21
  35. package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css +4 -12
  36. package/es/emptystate/EditionPage/EditionPage.css +3 -9
  37. package/es/errorstate/EmptyStates.module.css +10 -13
  38. package/es/errorstate/Inconvenience/Inconvenience.module.css +0 -3
  39. package/es/errorstate/LinkText/LinkText.module.css +1 -1
  40. package/es/errorstate/PermissionPlay/PermissionPlay.module.css +2 -2
  41. package/es/errorstate/WillBack/WillBack.module.css +3 -1
  42. package/es/form/fields/CheckBoxField/CheckBoxField.js +16 -28
  43. package/es/form/fields/CheckBoxField/docs/CheckBoxField__default.docs.js +8 -1
  44. package/es/form/fields/CurrencyField/CurrencyField.js +16 -29
  45. package/es/form/fields/CurrencyField/docs/CurrencyField__default.docs.js +36 -0
  46. package/es/form/fields/DateField/DateField.js +16 -28
  47. package/es/form/fields/DateField/docs/DateField__default.docs.js +8 -1
  48. package/es/form/fields/FieldContainer/FieldContainer.js +82 -0
  49. package/es/form/fields/FieldContainer/docs/FieldContainer__default.docs.js +49 -0
  50. package/es/form/fields/Fields.module.css +14 -49
  51. package/es/form/fields/MultiSelectField/MultiSelectField.js +16 -28
  52. package/es/form/fields/MultiSelectField/docs/MultiSelectField__default.docs.js +8 -1
  53. package/es/form/fields/SelectField/SelectField.js +16 -28
  54. package/es/form/fields/SelectField/docs/SelectField__default.docs.js +8 -1
  55. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js +7 -4
  56. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.module.css +7 -19
  57. package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js +32 -28
  58. package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.module.css +1 -4
  59. package/es/form/fields/TextBoxField/TextBoxField.js +18 -43
  60. package/es/form/fields/TextBoxField/docs/TextBoxField__default.docs.js +28 -1
  61. package/es/form/fields/TextEditor/TextEditor.module.css +72 -149
  62. package/es/form/fields/TextEditorField/TextEditorField.js +27 -44
  63. package/es/form/fields/TextEditorField/docs/TextEditorField__default.docs.js +9 -2
  64. package/es/form/fields/TextEditorWrapper/TextEditorWrapper.module.css +2 -13
  65. package/es/form/fields/TextareaField/TextareaField.js +16 -28
  66. package/es/form/fields/TextareaField/docs/TextareaField__default.docs.js +8 -1
  67. package/es/form/fields/ValidationMessage/ValidationMessage.module.css +4 -9
  68. package/es/form/fields/props/FieldCommonDefaultProps.js +10 -0
  69. package/es/form/fields/props/FieldCommonPropTypes.js +22 -0
  70. package/es/layout/SetupDetailLayout/SetupDetailLayout.module.css +16 -52
  71. package/es/layout/SubtabLayout/SubtabLayout.module.css +29 -55
  72. package/es/list/BluePrintStatus/BluePrintStatus.module.css +1 -4
  73. package/es/list/Comment/Comment.module.css +0 -5
  74. package/es/list/DotNew/DotNew.module.css +3 -3
  75. package/es/list/GridStencils/GridStencils.module.css +21 -82
  76. package/es/list/Icons/Icons.module.css +1 -1
  77. package/es/list/ListLayout/ListLayout.module.css +14 -22
  78. package/es/list/ListStencils/ListStencils.module.css +6 -11
  79. package/es/list/SecondaryText/AccountName.js +34 -38
  80. package/es/list/SecondaryText/ContactName.js +18 -13
  81. package/es/list/SecondaryText/SecondaryText.module.css +14 -39
  82. package/es/list/SecondaryText/docs/SecondaryText__default.docs.js +114 -0
  83. package/es/list/SecondryPanel/docs/SecondryPanelDocs.module.css +2 -2
  84. package/es/list/SentimentStatus/SentimentStatus.module.css +1 -4
  85. package/es/list/TagNew/TagNew.module.css +7 -14
  86. package/es/list/Thread/Thread.module.css +1 -13
  87. package/es/list/UserTime/UserTime.module.css +0 -6
  88. package/es/list/listCommon.module.css +1 -9
  89. package/es/list/status/StatusDropdown/StatusDropdown.module.css +6 -19
  90. package/es/list/status/StatusListItem/StatusListItem.module.css +15 -38
  91. package/es/lookup/Lookup/Lookup.module.css +2 -2
  92. package/es/lookup/Section/LookupSection.module.css +2 -2
  93. package/es/lookup/header/Close/LookupClose.module.css +4 -4
  94. package/es/lookup/header/Search/LookupSearch.module.css +12 -21
  95. package/es/lookup/header/TicketHeader/TicketHeader.module.css +2 -5
  96. package/es/lookup/header/ViewDropDown/ViewDropDown.module.css +3 -8
  97. package/es/lookup/header/lookupHeaderCommon.module.css +5 -15
  98. package/es/lookup/header/lookupHeaderCommonResponsive.module.css +3 -12
  99. package/es/setup/header/Button/HeaderButton.module.css +1 -3
  100. package/es/setup/header/Link/HeaderLink.module.css +1 -7
  101. package/es/setup/header/Search/Search.module.css +8 -19
  102. package/es/setup/header/Views/Views.module.css +5 -15
  103. package/es/setup/helptips/Link/HelpTipsLink.module.css +0 -1
  104. package/es/setup/helptips/ListGroup/ListGroup.module.css +1 -6
  105. package/es/setup/table/TableData/SetupTableData.module.css +3 -11
  106. package/es/setup/table/TableHead/SetupTableHead.module.css +0 -4
  107. package/es/setup/table/TableRow/SetupTableRow.module.css +2 -6
  108. package/es/utils/KeyboardApi.js +294 -0
  109. package/es/version2/AlertClose/AlertClose.module.css +1 -1
  110. package/es/version2/GlobalNotification/GlobalNotification.module.css +9 -44
  111. package/es/version2/lookup/AlertHeader/AlertHeaderNew.module.css +2 -25
  112. package/es/version2/lookup/AlertLookup/AlertLookupNew.module.css +3 -7
  113. package/es/version2/lookup/alertLookupCommonNew.module.css +1 -8
  114. package/es/version2/notification/DesktopNotification/DesktopNotification.module.css +10 -26
  115. package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css +10 -47
  116. package/lib/ActionButton/ActionButton.js +3 -7
  117. package/lib/ActionButton/ActionButton.module.css +1 -0
  118. package/lib/FreezeLayer/FreezeLayer.js +4 -29
  119. package/lib/ImportantNotes/ImportantNotes.js +3 -5
  120. package/lib/Provider.js +38 -115
  121. package/lib/deprecated/SelectDropdown/SelectDropdown.js +38 -60
  122. package/lib/deprecated/SelectDropdown/SelectDropdown.module.css +0 -1
  123. package/lib/docs/generalDocs.js +0 -16
  124. package/lib/dropdown/ToggleDropDown/ToggleDropDown.js +161 -182
  125. package/lib/dropdown/ToggleDropDown/ToggleDropDown.module.css +0 -3
  126. package/lib/form/fields/CheckBoxField/CheckBoxField.js +1 -1
  127. package/lib/form/fields/CurrencyField/CurrencyField.js +8 -9
  128. package/lib/form/fields/DateField/DateField.js +1 -1
  129. package/lib/form/fields/MultiSelectField/MultiSelectField.js +1 -1
  130. package/lib/form/fields/PhoneField/PhoneField.js +1 -1
  131. package/lib/form/fields/RadioField/RadioField.js +1 -1
  132. package/lib/form/fields/SelectField/SelectField.js +1 -1
  133. package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js +73 -110
  134. package/lib/form/fields/TextBoxField/TextBoxField.js +1 -1
  135. package/lib/form/fields/TextEditor/TextEditor.js +1 -4
  136. package/lib/form/fields/TextEditor/TextEditor.module.css +2 -13
  137. package/lib/form/fields/TextareaField/TextareaField.js +1 -1
  138. package/lib/list/DepartmentDropDown/DepartmentDropDown.js +1 -1
  139. package/lib/list/GridStencils/GridStencils.module.css +1 -3
  140. package/lib/list/SecondaryText/AccountName.js +34 -38
  141. package/lib/list/SecondaryText/ContactName.js +18 -13
  142. package/lib/list/SecondaryText/SecondaryText.module.css +14 -29
  143. package/lib/list/status/StatusDropdown/StatusDropdown.js +118 -146
  144. package/lib/list/status/StatusDropdown/StatusDropdown.module.css +0 -3
  145. package/lib/lookup/header/ModuleHeader/ModuleHeader.js +3 -8
  146. package/lib/lookup/header/ModuleHeader/docs/ModuleHeader__default.docs.js +3 -13
  147. package/lib/lookup/header/TicketHeader/TicketHeader.js +4 -7
  148. package/lib/lookup/header/ViewDropDown/ViewDropDown.js +52 -75
  149. package/lib/lookup/header/lookupHeaderCommon.module.css +2 -8
  150. package/lib/setup/header/Views/Views.js +2 -2
  151. package/lib/utils/General.js +24 -0
  152. package/lib/{deprecated/utils → utils}/KeyboardApi.js +0 -0
  153. package/package.json +5 -5
  154. package/lib/AttachmentViewer/Attachment.js +0 -28
  155. package/lib/AttachmentViewer/AttachmentImage.js +0 -133
  156. package/lib/AttachmentViewer/AttachmentViewer.js +0 -646
  157. package/lib/AttachmentViewer/AttachmentViewer.module.css +0 -354
  158. package/lib/AttachmentViewer/docs/AttachmentViewer__default.docs.js +0 -123
  159. package/lib/AttachmentViewer/utils.js +0 -134
  160. package/lib/Provider/Config.js +0 -21
  161. package/lib/common/dot_animation.module.css +0 -27
  162. package/lib/common/dot_common.module.css +0 -4
  163. package/lib/deprecated/utils/General.js +0 -29
@@ -1,33 +1,22 @@
1
1
  .container {
2
- transition: all var(--zd_transition4);
3
- position: relative;
4
- max-height: 100%;
5
2
  border-radius: 5px;
6
3
  box-shadow: 0 5px 40px 7px var(--zdt_toastmessage_default_box_shadow);
7
4
  background-color: var(--zdt_toastmessage_default_bg);
5
+ transition: all var(--zd_transition4);
8
6
  margin-bottom: var(--zd_size7);
9
- }[dir=ltr] .container {
7
+ position: relative;
10
8
  transform-origin: right center;
11
- }[dir=rtl] .container {
12
- transform-origin: left center;
9
+ max-height: 100%;
13
10
  }
14
11
 
15
12
  .closeAnimation {
16
13
  max-height: 0;
17
- transition: all var(--zd_transition3) 0.4s;
18
14
  margin-bottom: 0;
15
+ transition: all var(--zd_transition3) 0.4s;
19
16
  }
20
17
 
21
18
  .animation {
22
19
  composes: modeForward from '~@zohodesk/components/lib/common/animation.module.css';
23
- }
24
-
25
- [dir=ltr] .animation {
26
- animation-duration: var(--zd_transition4);
27
- -webkit-animation-duration: var(--zd_transition4);
28
- }
29
-
30
- [dir=rtl] .animation {
31
20
  animation-duration: var(--zd_transition4);
32
21
  -webkit-animation-duration: var(--zd_transition4);
33
22
  }
@@ -38,8 +27,8 @@
38
27
  }
39
28
 
40
29
  .leftnoanimate {
41
- opacity: 1;
42
30
  transform: translateX(0) scale(1);
31
+ opacity: 1;
43
32
  }
44
33
 
45
34
  .rightanimate {
@@ -54,26 +43,12 @@
54
43
 
55
44
  .alertifybanner {
56
45
  overflow: hidden;
57
- }
58
-
59
- [dir=ltr] .alertifybanner {
60
46
  border-radius: 5px 0 0 5px;
61
47
  }
62
48
 
63
- [dir=rtl] .alertifybanner {
64
- border-radius: 0 5px 5px 0;
65
- }
66
-
67
49
  .alertright {
68
- width: var(--zd_size105);
69
- }
70
-
71
- [dir=ltr] .alertright {
72
50
  border-left: 1px solid var(--zdt_toastmessage_alert_border);
73
- }
74
-
75
- [dir=rtl] .alertright {
76
- border-right: 1px solid var(--zdt_toastmessage_alert_border);
51
+ width: var(--zd_size105);
77
52
  }
78
53
 
79
54
  .popbutton {
@@ -121,29 +96,20 @@
121
96
 
122
97
  .primary:hover,
123
98
  .alerttab:hover .coverfill.primary {
124
- color: var(--zdt_toastmessage_primary_hover_text);
125
- }
126
-
127
- .primary:hover, .alerttab:hover .coverfill.primary {
128
99
  background-color: var(--zdt_toastmessage_primary_hover_bg);
100
+ color: var(--zdt_toastmessage_primary_hover_text);
129
101
  }
130
102
 
131
103
  .danger:hover,
132
104
  .alerttab:hover .coverfill.danger {
133
- color: var(--zdt_toastmessage_primary_hover_text);
134
- }
135
-
136
- .danger:hover, .alerttab:hover .coverfill.danger {
137
105
  background-color: var(--zdt_toastmessage_danger_hover_bg);
106
+ color: var(--zdt_toastmessage_primary_hover_text);
138
107
  }
139
108
 
140
109
  .success:hover,
141
110
  .alerttab:hover .coverfill.success {
142
- color: var(--zdt_toastmessage_primary_hover_text);
143
- }
144
-
145
- .success:hover, .alerttab:hover .coverfill.success {
146
111
  background-color: var(--zdt_toastmessage_success_hover_bg);
112
+ color: var(--zdt_toastmessage_primary_hover_text);
147
113
  }
148
114
 
149
115
  .alertleft {
@@ -165,26 +131,22 @@
165
131
  color: var(--zdt_toastmessage_alerttitle_text);
166
132
  }
167
133
 
168
- [dir=ltr] .alertTitleLeft {
134
+ .alertTitleLeft {
169
135
  margin-right: var(--zd_size10);
170
136
  }
171
137
 
172
- [dir=rtl] .alertTitleLeft {
173
- margin-left: var(--zd_size10);
174
- }
175
-
176
138
  .alertMessage {
177
139
  font-size: var(--zd_font_size12);
178
140
  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
141
+ margin-top: var(--zd_size5);
179
142
  line-height: var(--zd_size16);
180
143
  color: var(--zdt_toastmessage_alert_text);
181
- margin-top: var(--zd_size5);
182
144
  }
183
145
 
184
146
  .buttonText {
185
147
  font-size: inherit;
186
- line-height: var(--zd_size14);
187
148
  text-align: center;
149
+ line-height: var(--zd_size14);
188
150
  padding: 0 var(--zd_size7);
189
151
  cursor: pointer;
190
152
  }
@@ -192,24 +154,13 @@
192
154
  .closeIcon,
193
155
  .closeIconPrimary {
194
156
  position: absolute;
157
+ right: 0;
195
158
  top: 0;
196
159
  z-index: 1;
197
- color: var(--zdt_toastmessage_closeicon);
198
- }
199
-
200
- .closeIcon, .closeIconPrimary {
201
160
  padding: var(--zd_size2);
202
- cursor: pointer;
203
- }
204
-
205
- [dir=ltr] .closeIcon, [dir=ltr] .closeIconPrimary {
206
- right: 0;
207
161
  border-bottom-left-radius: 3px;
208
- }
209
-
210
- [dir=rtl] .closeIcon, [dir=rtl] .closeIconPrimary {
211
- left: 0;
212
- border-bottom-right-radius: 3px;
162
+ cursor: pointer;
163
+ color: var(--zdt_toastmessage_closeicon);
213
164
  }
214
165
 
215
166
  .closeIcon:hover {
@@ -226,63 +177,41 @@
226
177
 
227
178
  .dropdown {
228
179
  width: var(--zd_size23);
180
+ background: var(--zdt_toastmessage_dropdown_bg);
229
181
  position: relative;
230
182
  height: 100%;
231
183
  color: var(--zdt_toastmessage_dropdown_text);
232
- background: var(--zdt_toastmessage_dropdown_bg);
233
184
  }
234
185
 
235
186
  .dropdown > i {
236
187
  position: absolute;
237
188
  top: 50%;
238
- }
239
-
240
- [dir=ltr] .dropdown > i {
241
189
  left: 50%;
242
190
  transform: translate(-50%, -50%);
243
191
  }
244
192
 
245
- [dir=rtl] .dropdown > i {
246
- right: 50%;
247
- transform: translate(50%, -50%);
248
- }
249
-
250
193
  .dropdown:hover i {
251
194
  color: var(--zdt_toastmessage_cancel_hover_text);
252
195
  }
253
196
 
254
197
  .message {
198
+ padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
199
+ border-top: 1px solid var(--zdt_toastmessage_message_border);
200
+ cursor: pointer;
255
201
  position: relative;
256
202
  color: var(--zdt_toastmessage_popbutton_text);
257
203
  font-size: var(--zd_font_size11);
258
204
  composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
259
205
  height: var(--zd_size33);
260
206
  transition: padding var(--zd_transition3), height var(--zd_transition3);
261
- border-top: 1px solid var(--zdt_toastmessage_message_border);
262
- cursor: pointer;
263
207
  margin:0;
264
208
  }
265
209
 
266
- [dir=ltr] .message {
267
- padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
268
- }
269
-
270
- [dir=rtl] .message {
271
- padding: var(--zd_size10) var(--zd_size76) var(--zd_size10) var(--zd_size20);
272
- }
273
-
274
210
  .messageOff {
275
- height: 0;
276
- font-size: 0;
277
211
  border-width: 0;
278
- }
279
-
280
- [dir=ltr] .messageOff {
281
212
  padding: 0 var(--zd_size20) 0 var(--zd_size76);
282
- }
283
-
284
- [dir=rtl] .messageOff {
285
- padding: 0 var(--zd_size76) 0 var(--zd_size20);
213
+ height: 0;
214
+ font-size: 0;
286
215
  }
287
216
 
288
217
  .message:hover {
@@ -293,26 +222,26 @@
293
222
  width: var(--zd_size29);
294
223
  height: var(--zd_size29);
295
224
  line-height: var(--zd_size29);
296
- composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
297
225
  text-align: center;
226
+ composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
298
227
  }
299
228
 
300
229
  .successFill {
301
230
  composes: fill;
302
- color: var(--zdt_toastmessage_primary_hover_text);
303
231
  background: var(--zdt_toastmessage_successfill_bg);
232
+ color: var(--zdt_toastmessage_primary_hover_text);
304
233
  }
305
234
 
306
235
  .dangerFill {
307
236
  composes: fill;
308
- color: var(--zdt_toastmessage_primary_hover_text);
309
237
  background: var(--zdt_toastmessage_danger_hover_bg);
238
+ color: var(--zdt_toastmessage_primary_hover_text);
310
239
  }
311
240
 
312
241
  .dangerShadow {
313
- color: var(--zdt_toastmessage_danger_text);
314
242
  text-shadow: 0 4px 22px var(--zdt_toastmessage_danger_text_shadow);
315
243
  margin-top: var(--zd_size5);
244
+ color: var(--zdt_toastmessage_danger_text);
316
245
  }
317
246
 
318
247
  .successPlain {
@@ -1,8 +1,8 @@
1
1
  .container {
2
2
  position: relative;
3
+ cursor: pointer;
3
4
  transition: all var(--zd_transition3);
4
5
  vertical-align: middle;
5
- cursor: pointer;
6
6
  padding: var(--zd_size5);
7
7
  border-radius: var(--zd_size2);
8
8
  }
@@ -16,15 +16,9 @@
16
16
  position: absolute;
17
17
  top: 0;
18
18
  bottom: 0;
19
- background-color: var(--zdt_upload_overlay_bg);
20
- }
21
- [dir=ltr] .overlay {
22
19
  left: 0;
23
20
  right: 0;
24
- }
25
- [dir=rtl] .overlay {
26
- right: 0;
27
- left: 0;
21
+ background-color: var(--zdt_upload_overlay_bg);
28
22
  }
29
23
  .small {
30
24
  width: var(--zd_size50);
@@ -44,13 +38,8 @@
44
38
  height: var(--zd_size2);
45
39
  width: 0%;
46
40
  transition: width var(--zd_transition6) ease;
47
- }
48
- [dir=ltr] .loader {
49
41
  left: 0;
50
42
  }
51
- [dir=rtl] .loader {
52
- right: 0;
53
- }
54
43
  .light .loader {
55
44
  background: var(--zdt_upload_loader_default_bg);
56
45
  }
@@ -61,21 +50,18 @@
61
50
  width: 100%;
62
51
  height: 100%;
63
52
  }
64
- [dir=ltr] .attachInfo {
53
+ .attachInfo {
65
54
  padding: var(--zd_size4) 0 0 var(--zd_size8);
66
55
  }
67
- [dir=rtl] .attachInfo {
68
- padding: var(--zd_size4) var(--zd_size8) 0 0;
69
- }
70
56
  .fileIcon {
71
57
  font-size: var(--zd_font_size14);
72
58
  }
73
59
  .attachsize {
74
60
  font-size: var(--zd_font_size10);
61
+ padding: var(--zd_size4) 0 var(--zd_size2);
75
62
  letter-spacing: 1px;
76
63
  composes: dotted from "~@zohodesk/components/lib/common/common.module.css";
77
64
  text-transform: uppercase;
78
- padding: var(--zd_size4) 0 var(--zd_size2);
79
65
  }
80
66
  .light .attachsize {
81
67
  color: var(--zdt_upload_attachsize_default_text);
@@ -87,27 +73,22 @@
87
73
  height: var(--zd_size12);
88
74
  width: var(--zd_size12);
89
75
  top: 0;
76
+ right: 0;
90
77
  position: absolute;
78
+ text-align: center;
91
79
  line-height: var(--zd_size10);
92
80
  font-size: var(--zd_font_size12);
93
- text-align: center;
94
- }
95
- [dir=ltr] .uploadclose {
96
- right: 0;
97
- }
98
- [dir=rtl] .uploadclose {
99
- left: 0;
100
81
  }
101
82
  .light .uploadclose {
102
- color: var(--zdt_upload_uploadclose_default_text);
103
83
  background-color: var(--zdt_upload_uploadclose_default_bg);
84
+ color: var(--zdt_upload_uploadclose_default_text);
104
85
  }
105
86
  .light .uploadclose:hover {
106
87
  background-color: var(--zdt_upload_uploadclose_default_hover_text);
107
88
  }
108
89
  .night .uploadclose {
109
- color: var(--zdt_upload_uploadclose_night_text);
110
90
  background-color: var(--zdt_upload_uploadclose_night_bg);
91
+ color: var(--zdt_upload_uploadclose_night_text);
111
92
  }
112
93
  .night .uploadclose:hover {
113
94
  background-color: var(--zdt_upload_uploadclose_night_hover_text);
@@ -1,38 +1,20 @@
1
1
  .container {
2
2
  min-height: var(--zd_size54);
3
3
  position: relative;
4
- }[dir=ltr] .container {
5
4
  padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size26);
6
- }[dir=rtl] .container {
7
- padding: var(--zd_size12) var(--zd_size26) var(--zd_size12) var(--zd_size45);
8
5
  }
9
6
 
10
- [dir=ltr] .extraSmall {
7
+ .extraSmall {
11
8
  padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size16);
12
9
  }
13
10
 
14
- [dir=rtl] .extraSmall {
15
- padding: var(--zd_size12) var(--zd_size16) var(--zd_size12) var(--zd_size45);
16
- }
17
-
18
- [dir=ltr] .iconContainer {
11
+ .iconContainer {
19
12
  margin: 0 var(--zd_size10) 0 0;
20
13
  }
21
14
 
22
- [dir=rtl] .iconContainer {
23
- margin: 0 0 0 var(--zd_size10);
24
- }
25
-
26
15
  .title {
27
- font-size: 0;
28
- }
29
-
30
- [dir=ltr] .title {
31
16
  margin: 0 var(--zd_size5) 0 0;
32
- }
33
-
34
- [dir=rtl] .title {
35
- margin: 0 0 0 var(--zd_size5);
17
+ font-size: 0;
36
18
  }
37
19
 
38
20
  .iconStyle {
@@ -3,21 +3,17 @@
3
3
  }
4
4
 
5
5
  .innerSection {
6
+ padding: var(--zd_size30) var(--zd_size20) var(--zd_size20);
6
7
  line-height: var(--zd_size25);
7
8
  color: var(--zdt_alertlookup_innersection_text);
8
9
  font-size: var(--zd_font_size15);
9
10
  word-break: break-word;
10
- padding: var(--zd_size30) var(--zd_size20) var(--zd_size20);
11
11
  }
12
12
 
13
- [dir=ltr] .buttonGap {
13
+ .buttonGap {
14
14
  margin: 0 0 0 var(--zd_size12);
15
15
  }
16
16
 
17
- [dir=rtl] .buttonGap {
18
- margin: 0 var(--zd_size12) 0 0;
19
- }
20
-
21
17
  .text {
22
18
  margin-top: var(--zd_size20);
23
19
  }
@@ -6,25 +6,19 @@
6
6
  .pop {
7
7
  position: absolute;
8
8
  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
9
+ cursor: pointer;
9
10
  opacity: 0;
10
11
  visibility: hidden;
11
12
  top: 0;
13
+ left: 0;
12
14
  height: 100%;
13
15
  width: 100%;
14
16
  transition: opacity var(--zd_transition2);
15
- color: var(--zdt_avatarclose_pop_text);
16
- cursor: pointer;
17
17
  transform: translateZ(0);
18
18
  background-color: var(--zdt_avatarclose_pop_bg);
19
- }
20
- [dir=ltr] .pop {
21
- left: 0;
19
+ color: var(--zdt_avatarclose_pop_text);
22
20
  transform: rotate(45deg);
23
21
  }
24
- [dir=rtl] .pop {
25
- right: 0;
26
- transform: rotate(-45deg);
27
- }
28
22
  .icon {
29
23
  position: absolute;
30
24
  line-height: 0;
@@ -18,22 +18,17 @@
18
18
  .pop {
19
19
  position: absolute;
20
20
  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
21
+ cursor: pointer;
21
22
  opacity: 0;
22
23
  visibility: hidden;
23
24
  top: 0;
25
+ left: 0;
24
26
  height: 100%;
25
27
  width: 100%;
26
28
  transition: opacity var(--zd_transition2);
27
- color: var(--zdt_avatarcollision_pop_text);
28
- cursor: pointer;
29
29
  transform: translateZ(0);
30
30
  background-color: var(--zdt_avatarcollision_pop_bg);
31
- }
32
- [dir=ltr] .pop {
33
- left: 0;
34
- }
35
- [dir=rtl] .pop {
36
- right: 0;
31
+ color: var(--zdt_avatarcollision_pop_text);
37
32
  }
38
33
  .icon {
39
34
  position: absolute;
@@ -53,17 +48,8 @@
53
48
  top: 50%;
54
49
  height: var(--zd_size4);
55
50
  border: 1px solid var(--zdt_avatarcollision_off_after_border);
56
- background-color: var(--zdt_avatarcollision_off_after_bg);
57
- }
58
-
59
- [dir=ltr] .off::after {
60
51
  left: calc(var(--zd_size5) * -1);
61
52
  right: calc(var(--zd_size5) * -1);
62
53
  transform: translateY(-50%) rotate(130deg);
63
- }
64
-
65
- [dir=rtl] .off::after {
66
- right: calc(var(--zd_size5) * -1);
67
- left: calc(var(--zd_size5) * -1);
68
- transform: translateY(-50%) rotate(-130deg);
54
+ background-color: var(--zdt_avatarcollision_off_after_bg);
69
55
  }
@@ -4,14 +4,15 @@
4
4
  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
5
5
  }
6
6
  .container {
7
- vertical-align: middle;
8
- composes: varClass;
9
7
  border-width: 1px;
10
8
  border-style: solid;
11
9
  border-radius: 50%;
10
+ vertical-align: middle;
11
+ composes: varClass;
12
12
  border-color: var(--border_color)
13
13
  }
14
- .borderOnHover:hover, .borderOnActive {
14
+ .borderOnHover:hover,
15
+ .borderOnActive {
15
16
  border-color: var(--border_hoverColor)
16
17
  }
17
18
  .default {
@@ -11,24 +11,28 @@
11
11
  .circle.state {
12
12
  border: 1px solid var(--zdt_avatarstatus_size_border);
13
13
  }
14
- .small.square.state, .xsmall.square.state {
14
+ .small.square.state,
15
+ .xsmall.square.state {
15
16
  border: 1px solid var(--zdt_avatarstatus_size_border);
16
17
  }
17
- .medium.square.state, .xmedium.square.state, .large.square.state, .xlarge.square.state {
18
+ .medium.square.state,
19
+ .xmedium.square.state,
20
+ .large.square.state,
21
+ .xlarge.square.state {
18
22
  border: 2px solid var(--zdt_avatarstatus_size_border);
19
23
  }
20
24
  .online {
21
- composes: state;
22
25
  background-color: var(--zdt_avatarstatus_online_bg);
26
+ composes: state;
23
27
  }
24
28
 
25
29
  .offline {
26
- composes: state;
27
30
  background-color: var(--zdt_avatarstatus_offline_bg);
31
+ composes: state;
28
32
  }
29
33
  .idle {
30
- composes: state;
31
34
  background-color: var(--zdt_avatarstatus_idle_bg);
35
+ composes: state;
32
36
  }
33
37
 
34
38
  .small.state,
@@ -49,98 +53,44 @@
49
53
 
50
54
  .small.circle.state {
51
55
  bottom: var(--zd_size1);
52
- }
53
-
54
- [dir=ltr] .small.circle.state {
55
56
  right: calc(var(--zd_size1) * -1);
56
57
  }
57
-
58
- [dir=rtl] .small.circle.state {
59
- left: calc(var(--zd_size1) * -1);
60
- }
61
58
  .xsmall.circle.state {
62
59
  bottom: var(--zd_size3);
63
- }
64
- [dir=ltr] .xsmall.circle.state {
65
60
  right: 0;
66
61
  }
67
- [dir=rtl] .xsmall.circle.state {
68
- left: 0;
69
- }
70
62
  .medium.circle.state,
71
63
  .xmedium.circle.state {
72
64
  bottom: var(--zd_size3);
73
- }
74
- [dir=ltr] .medium.circle.state, [dir=ltr] .xmedium.circle.state {
75
65
  right: 0;
76
66
  }
77
- [dir=rtl] .medium.circle.state, [dir=rtl] .xmedium.circle.state {
78
- left: 0;
79
- }
80
67
  .large.circle.state {
81
68
  bottom: var(--zd_size7);
82
- }
83
- [dir=ltr] .large.circle.state {
84
69
  right: var(--zd_size1);
85
70
  }
86
- [dir=rtl] .large.circle.state {
87
- left: var(--zd_size1);
88
- }
89
71
  .xlarge.circle.state {
90
72
  bottom: var(--zd_size6);
91
- }
92
- [dir=ltr] .xlarge.circle.state {
93
73
  right: var(--zd_size8);
94
74
  }
95
- [dir=rtl] .xlarge.circle.state {
96
- left: var(--zd_size8);
97
- }
98
75
 
99
76
  .small.square.state {
100
77
  bottom: calc(var(--zd_size1) * -1);
101
- }
102
-
103
- [dir=ltr] .small.square.state {
104
78
  right: calc(var(--zd_size1) * -1);
105
79
  }
106
-
107
- [dir=rtl] .small.square.state {
108
- left: calc(var(--zd_size1) * -1);
109
- }
110
80
  .xsmall.square.state {
111
81
  bottom: calc(var(--zd_size1) * -1);
112
- }
113
- [dir=ltr] .xsmall.square.state {
114
82
  right: calc(var(--zd_size2) * -1);
115
83
  }
116
- [dir=rtl] .xsmall.square.state {
117
- left: calc(var(--zd_size2) * -1);
118
- }
119
84
  .medium.square.state,
120
85
  .xmedium.square.state {
121
86
  bottom: calc(var(--zd_size2) * -1);
122
- }
123
- [dir=ltr] .medium.square.state, [dir=ltr] .xmedium.square.state {
124
87
  right: calc(var(--zd_size4) * -1);
125
88
  }
126
- [dir=rtl] .medium.square.state, [dir=rtl] .xmedium.square.state {
127
- left: calc(var(--zd_size4) * -1);
128
- }
129
89
  .large.square.state {
130
90
  bottom: calc(var(--zd_size2) * -1);
131
- }
132
- [dir=ltr] .large.square.state {
133
91
  right: calc(var(--zd_size5) * -1);
134
92
  }
135
- [dir=rtl] .large.square.state {
136
- left: calc(var(--zd_size5) * -1);
137
- }
138
93
  .xlarge.square.state {
139
94
  bottom: calc(var(--zd_size3) * -1);
140
- }
141
- [dir=ltr] .xlarge.square.state {
142
95
  right: calc(var(--zd_size5) * -1);
143
96
  }
144
- [dir=rtl] .xlarge.square.state {
145
- left: calc(var(--zd_size5) * -1);
146
- }