@zohodesk/dot 1.0.0-temp-198.3.3 → 1.0.0-temp-199

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 (120) hide show
  1. package/.cli/propValidation_report.html +1 -1
  2. package/README.md +39 -0
  3. package/assets/Appearance/dark/mode/Dot_DarkMode.module.css +1 -0
  4. package/assets/Appearance/light/mode/Dot_LightMode.module.css +1 -0
  5. package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css +1 -0
  6. package/es/ActionButton/ActionButton.module.css +192 -192
  7. package/es/AlphabeticList/AlphabeticList.module.css +57 -57
  8. package/es/AttachmentViewer/AttachmentImage.js +68 -32
  9. package/es/AttachmentViewer/AttachmentViewer.js +120 -41
  10. package/es/AttachmentViewer/AttachmentViewer.module.css +364 -352
  11. package/es/AttachmentViewer/__tests__/AttachmentImage.spec.js +63 -13
  12. package/es/AttachmentViewer/__tests__/__snapshots__/AttachmentImage.spec.js.snap +9 -5
  13. package/es/AttachmentViewer/__tests__/__snapshots__/AttachmentViewer.spec.js.snap +16 -117
  14. package/es/AttachmentViewer/props/defaultProps.js +5 -1
  15. package/es/AttachmentViewer/props/propTypes.js +7 -3
  16. package/es/AttachmentViewer/utils.js +49 -0
  17. package/es/ChannelIcon/ChannelIcon.module.css +225 -225
  18. package/es/FormAction/FormAction.module.css +100 -100
  19. package/es/IconButton/IconButton.module.css +22 -22
  20. package/es/Image/Image.js +6 -2
  21. package/es/Image/props/propTypes.js +3 -1
  22. package/es/TagWithIcon/TagWithIcon.module.css +66 -66
  23. package/es/avatar/AvatarIcon/AvatarIcon.module.css +58 -58
  24. package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css +92 -92
  25. package/es/form/fields/CurrencyField/CurrencyField.js +2 -1
  26. package/es/form/fields/TextEditor/TextEditor.js +64 -64
  27. package/es/form/fields/TextEditor/TextEditor.module.css +73 -61
  28. package/es/form/fields/TextEditor/__tests__/__snapshots__/TextEditor.spec.js.snap +1 -1
  29. package/es/form/fields/TextEditor/props/defaultProps.js +4 -1
  30. package/es/form/fields/TextEditor/props/propTypes.js +10 -3
  31. package/es/form/fields/ValidationMessage/ValidationMessage.module.css +27 -27
  32. package/es/layout/SubtabLayout/SubtabLayout.module.css +164 -164
  33. package/es/list/Comment/Comment.module.css +29 -29
  34. package/es/list/Dot/Dot.module.css +15 -15
  35. package/es/list/ListLayout/ListLayout.module.css +79 -79
  36. package/es/list/Subject/Subject.module.css +34 -34
  37. package/es/list/Thread/Thread.module.css +42 -42
  38. package/es/list/status/StatusDropdown/StatusDropdown.js +8 -2
  39. package/es/list/status/StatusDropdown/__tests__/StatusDropdown.spec.js +16 -0
  40. package/es/list/status/StatusDropdown/__tests__/__snapshots__/StatusDropdown.spec.js.snap +14 -0
  41. package/es/list/status/StatusDropdown/props/propTypes.js +2 -0
  42. package/es/lookup/header/Search/LookupSearch.module.css +26 -26
  43. package/es/lookup/header/Search/Search.js +55 -38
  44. package/es/lookup/header/Search/props/defaultProps.js +2 -1
  45. package/es/lookup/header/Search/props/propTypes.js +5 -1
  46. package/es/utils/editorUtils.js +6 -6
  47. package/es/v1/AttachmentViewer/AttachmentImage.js +44 -23
  48. package/es/v1/AttachmentViewer/AttachmentViewer.js +120 -41
  49. package/es/v1/AttachmentViewer/props/propTypes.js +7 -3
  50. package/es/v1/Image/Image.js +6 -2
  51. package/es/v1/Image/props/propTypes.js +3 -1
  52. package/es/v1/form/fields/CurrencyField/CurrencyField.js +2 -1
  53. package/es/v1/form/fields/TextEditor/TextEditor.js +63 -64
  54. package/es/v1/form/fields/TextEditor/props/defaultProps.js +4 -1
  55. package/es/v1/form/fields/TextEditor/props/propTypes.js +10 -3
  56. package/es/v1/list/status/StatusDropdown/StatusDropdown.js +8 -2
  57. package/es/v1/list/status/StatusDropdown/props/propTypes.js +2 -0
  58. package/es/v1/utils/editorUtils.js +6 -6
  59. package/es/version2/GlobalNotification/GlobalNotification.module.css +177 -177
  60. package/es/version2/lookup/AlertHeader/css/AlertHeaderNew.module.css +87 -87
  61. package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css +132 -132
  62. package/lib/ActionButton/ActionButton.module.css +192 -192
  63. package/lib/AlphabeticList/AlphabeticList.module.css +57 -57
  64. package/lib/AttachmentViewer/AttachmentImage.js +74 -36
  65. package/lib/AttachmentViewer/AttachmentViewer.js +151 -70
  66. package/lib/AttachmentViewer/AttachmentViewer.module.css +364 -352
  67. package/lib/AttachmentViewer/__tests__/AttachmentImage.spec.js +64 -13
  68. package/lib/AttachmentViewer/__tests__/__snapshots__/AttachmentImage.spec.js.snap +9 -5
  69. package/lib/AttachmentViewer/__tests__/__snapshots__/AttachmentViewer.spec.js.snap +16 -117
  70. package/lib/AttachmentViewer/props/defaultProps.js +5 -1
  71. package/lib/AttachmentViewer/props/propTypes.js +7 -3
  72. package/lib/AttachmentViewer/utils.js +60 -1
  73. package/lib/ChannelIcon/ChannelIcon.module.css +225 -225
  74. package/lib/FormAction/FormAction.module.css +100 -100
  75. package/lib/IconButton/IconButton.module.css +22 -22
  76. package/lib/Image/Image.js +6 -2
  77. package/lib/Image/props/propTypes.js +3 -1
  78. package/lib/TagWithIcon/TagWithIcon.module.css +66 -66
  79. package/lib/avatar/AvatarIcon/AvatarIcon.module.css +58 -58
  80. package/lib/emptystate/CommonEmptyState/CommonEmptyState.module.css +92 -92
  81. package/lib/form/fields/CurrencyField/CurrencyField.js +2 -1
  82. package/lib/form/fields/TextEditor/TextEditor.js +74 -74
  83. package/lib/form/fields/TextEditor/TextEditor.module.css +73 -61
  84. package/lib/form/fields/TextEditor/__tests__/__snapshots__/TextEditor.spec.js.snap +1 -1
  85. package/lib/form/fields/TextEditor/props/defaultProps.js +4 -1
  86. package/lib/form/fields/TextEditor/props/propTypes.js +10 -3
  87. package/lib/form/fields/ValidationMessage/ValidationMessage.module.css +27 -27
  88. package/lib/layout/SubtabLayout/SubtabLayout.module.css +164 -164
  89. package/lib/list/Comment/Comment.module.css +29 -29
  90. package/lib/list/Dot/Dot.module.css +15 -15
  91. package/lib/list/ListLayout/ListLayout.module.css +79 -79
  92. package/lib/list/Subject/Subject.module.css +34 -34
  93. package/lib/list/Thread/Thread.module.css +42 -42
  94. package/lib/list/status/StatusDropdown/StatusDropdown.js +8 -2
  95. package/lib/list/status/StatusDropdown/__tests__/StatusDropdown.spec.js +14 -0
  96. package/lib/list/status/StatusDropdown/__tests__/__snapshots__/StatusDropdown.spec.js.snap +14 -0
  97. package/lib/list/status/StatusDropdown/props/propTypes.js +1 -1
  98. package/lib/lookup/header/Search/LookupSearch.module.css +26 -26
  99. package/lib/lookup/header/Search/Search.js +73 -64
  100. package/lib/lookup/header/Search/props/defaultProps.js +2 -1
  101. package/lib/lookup/header/Search/props/propTypes.js +9 -3
  102. package/lib/utils/editorUtils.js +6 -5
  103. package/lib/v1/AttachmentViewer/AttachmentImage.js +52 -24
  104. package/lib/v1/AttachmentViewer/AttachmentViewer.js +151 -70
  105. package/lib/v1/AttachmentViewer/props/propTypes.js +7 -3
  106. package/lib/v1/Image/Image.js +6 -2
  107. package/lib/v1/Image/props/propTypes.js +3 -1
  108. package/lib/v1/form/fields/CurrencyField/CurrencyField.js +2 -1
  109. package/lib/v1/form/fields/TextEditor/TextEditor.js +73 -74
  110. package/lib/v1/form/fields/TextEditor/props/defaultProps.js +4 -1
  111. package/lib/v1/form/fields/TextEditor/props/propTypes.js +10 -3
  112. package/lib/v1/list/status/StatusDropdown/StatusDropdown.js +8 -2
  113. package/lib/v1/list/status/StatusDropdown/props/propTypes.js +1 -1
  114. package/lib/v1/utils/editorUtils.js +6 -5
  115. package/lib/version2/GlobalNotification/GlobalNotification.module.css +177 -177
  116. package/lib/version2/lookup/AlertHeader/css/AlertHeaderNew.module.css +87 -87
  117. package/lib/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css +132 -132
  118. package/package.json +6 -6
  119. package/result.json +1 -1
  120. package/unittest/index.html +6 -2
@@ -1,353 +1,365 @@
1
- .header {
2
- height: var(--zd_size40) ;
3
- position: relative;
4
- z-index: 1;
5
- composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
6
- background-color: var(--zdt_attachmentviewer_header_bg);
7
- padding: 0 var(--zd_size15) ;
8
- border-bottom: 1px solid var(--zdt_attachmentviewer_header_border);
9
- }
10
-
11
- .title {
12
- max-width: 50% ;
13
- composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
14
- }
15
-
16
- [dir=ltr] .title {
17
- padding-right: var(--zd_size15) ;
18
- }
19
-
20
- [dir=rtl] .title {
21
- padding-left: var(--zd_size15) ;
22
- }
23
-
24
- .count {
25
- position: absolute;
26
- composes: xMiddle from '~@zohodesk/components/lib/common/common.module.css';
27
- padding: 0 var(--zd_size10) ;
28
- }
29
-
30
- .title,
31
- .count {
32
- color: var(--zdt_attachmentviewer_title_text);
33
- font-size: var(--zd_font_size15) ;
34
- }
35
-
36
- [dir=ltr] .menuBar {
37
- padding-left: var(--zd_size5) ;
38
- }
39
-
40
- [dir=rtl] .menuBar {
41
- padding-right: var(--zd_size5) ;
42
- }
43
-
44
- .mbleMenuBar {
45
- align-self: baseline;
46
- margin-top: var(--zd_size8) ;
47
- }
48
-
49
- [dir=ltr] .menu+.menu {
50
- margin-left: var(--zd_size22) ;
51
- }
52
-
53
- [dir=rtl] .menu+.menu {
54
- margin-right: var(--zd_size22) ;
55
- }
56
-
57
- .mobileMenu+.mobileMenu {
58
- margin-bottom: var(--zd_size22) ;
59
- }
60
-
61
- .menuIcon {
62
- --iconColor: var(--zdt_attachmentviewer_title_text);
63
- }
64
-
65
- .nrmlArrowBox {
66
- width: var(--zd_size80) ;
67
- }
68
-
69
- .mbleArrowBox {
70
- width: var(--zd_size50) ;
71
- }
72
-
73
- .arrowBox:hover {
74
- background-color: var(--zdt_attachmentviewer_arrow_bg_hover);
75
- }
76
-
77
- .arrow {
78
- color: var(--zdt_attachmentviewer_title_text);
79
- font-size: var(--zd_font_size22) ;
80
- height: var(--zd_size38) ;
81
- width: var(--zd_size38) ;
82
- line-height: 1.6364;
83
- border-radius: 50%;
84
- cursor: pointer;
85
- }
86
-
87
- .preview {
88
- composes: posrel from '~@zohodesk/components/lib/common/common.module.css';
89
- text-align: center;
90
- margin: var(--zd_size20) 0 ;
91
- }
92
-
93
- .zoomIn {
94
- max-height: 100% ;
95
- max-width: 90% ;
96
- position: absolute;
97
- composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
98
- }
99
-
100
- .zoomOut {
101
- cursor: zoom-out;
102
- }
103
-
104
- .button {
105
- position: absolute;
106
- bottom: var(--zd_size23) ;
107
- z-index: 3;
108
- border: 1px solid var(--zdt_attachmentviewer_button_border);
109
- }
110
-
111
- [dir=ltr] .button {
112
- right: var(--zd_size20) ;
113
- }
114
-
115
- [dir=rtl] .button {
116
- left: var(--zd_size20) ;
117
- }
118
-
119
- .visible {
120
- visibility: visible;
121
- }
122
-
123
- .hidden {
124
- visibility: hidden;
125
- }
126
-
127
- .footer {
128
- width: 100% ;
129
- overflow: hidden;
130
- transition: height var(--zd_transition3);
131
- background-color: var(--zdt_attachmentviewer_footer_bg)
132
- }
133
-
134
- [dir=ltr] .footer {
135
- padding-right: var(--zd_size68)
136
- }
137
-
138
- [dir=rtl] .footer {
139
- padding-left: var(--zd_size68)
140
- }
141
-
142
- .footerHeight {
143
- height: var(--zd_size75) ;
144
- }
145
-
146
- .footerHide {
147
- height: 0 ;
148
- }
149
-
150
- .listContainer {
151
- padding: 0 var(--zd_size18) ;
152
- }
153
-
154
- .imgItem {
155
- height: var(--zd_size60) ;
156
- min-width: var(--zd_size40) ;
157
- position: relative;
158
- transition: border var(--zd_transition3);
159
- border-width: 2px;
160
- border-style: solid;
161
- border-color: var(--dot_mirror);
162
- border-radius: 3px;
163
- padding: var(--zd_size2) ;
164
- }
165
-
166
- .imgItem:hover {
167
- border-color: var(--zdt_attachmentviewer_hover_border);
168
- }
169
-
170
- [dir=ltr] .imgItem+.imgItem {
171
- margin-left: var(--zd_size12) ;
172
- }
173
-
174
- [dir=rtl] .imgItem+.imgItem {
175
- margin-right: var(--zd_size12) ;
176
- }
177
-
178
- .image {
179
- cursor: pointer;
180
- }
181
-
182
- .selected, .selected:hover {
183
- border-color: var(--zdt_attachmentviewer_selected_border);
184
- }
185
-
186
- .selected::after {
187
- content: '';
188
- position: absolute;
189
- top: 0 ;
190
- width: 100% ;
191
- height: 100% ;
192
- opacity: 0.3;
193
- background-color: var(--zdt_attachmentviewer_selected_after_bg);
194
- box-shadow: var(--zd_bs_attachmentviewer_selected);
195
- }
196
-
197
- [dir=ltr] .selected::after {
198
- left: 0 ;
199
- }
200
-
201
- [dir=rtl] .selected::after {
202
- right: 0 ;
203
- }
204
-
205
- .zoomIcon {
206
- font-size: var(--zd_font_size15) ;
207
- }
208
-
209
- .newTabIcon {
210
- font-size: var(--zd_font_size12) ;
211
- }
212
-
213
- .appIcon {
214
- font-size: var(--zd_font_size9) ;
215
- }
216
-
217
- .thumpIcon {
218
- color: var(--zdt_attachmentviewer_title_text);
219
- transition: transform var(--zd_transition3);
220
- transform: rotateX(180deg);
221
- }
222
-
223
- .thumpIconActive {
224
- transform: rotateX(0deg);
225
- }
226
-
227
- .isAudio {
228
- composes: audioImage from '../common/dot_common.module.css';
229
- width: var(--zd_size100) ;
230
- background-size: 100% 100%;
231
- }
232
-
233
- .isAudio .image {
234
- opacity: 0;
235
- }
236
-
237
- .video {
238
- position: absolute;
239
- top: 0 ;
240
- bottom: 0 ;
241
- margin: auto ;
242
- }
243
-
244
- [dir=ltr] .video {
245
- left: 0 ;
246
- right: 0 ;
247
- }
248
-
249
- [dir=rtl] .video {
250
- right: 0 ;
251
- left: 0 ;
252
- }
253
-
254
- .imgBox {
255
- position: absolute;
256
- transition: var(--zd_transition3) ease-in-out;
257
- opacity: 0;
258
- overflow: auto;
259
- }
260
-
261
- .imgBox>img {
262
- object-fit: contain;
263
- }
264
-
265
- .imgRef {
266
- width: 100% ;
267
- height: 100% ;
268
- max-width: 100% ;
269
- max-height: 100% ;
270
- composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
271
- }
272
-
273
- .img {
274
- transition: var(--zd_transition3) ease-in-out;
275
- margin: auto ;
276
- cursor: zoom-in;
277
- }
278
-
279
- .imgRef .normalImg {
280
- max-width: inherit ;
281
- max-height: inherit ;
282
- cursor: zoom-in;
283
- }
284
-
285
- .imgRef .zoomedImg {
286
- max-width: initial ;
287
- max-height: initial ;
288
- cursor: zoom-out;
289
- }
290
-
291
- .previewBox {
292
- position: relative;
293
- overflow: hidden;
294
- }
295
-
296
- .spinLoad {
297
- position: absolute;
298
- composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
299
- height: var(--zd_size18) ;
300
- width: var(--zd_size18) ;
301
- }
302
-
303
- .loader {
304
- height: 100% ;
305
- width: 100% ;
306
- composes: rotate from '../common/dot_animation.module.css';
307
- composes: infinite from '~@zohodesk/components/lib/common/animation.module.css';
308
- border: 2px solid var(--zdt_attachmentviewer_loader_border);
309
- border-top-color: var(--zdt_attachmentviewer_loader_border_top);
310
- border-radius: 50%;
311
- }
312
-
313
- [dir=ltr] .loader {
314
- animation-duration: var(--zd_transition8);
315
- animation-timing-function: linear;
316
- }
317
-
318
- [dir=rtl] .loader {
319
- animation-duration: var(--zd_transition8);
320
- animation-timing-function: linear;
321
- }
322
-
323
- .hide {
324
- opacity: 0;
325
- visibility: hidden;
326
- }
327
-
328
- .author {
329
- max-width: var(--zd_size200) ;
330
- }
331
-
332
- [dir=ltr] .author {
333
- padding-left: var(--zd_size15) ;
334
- }
335
-
336
- [dir=rtl] .author {
337
- padding-right: var(--zd_size15) ;
338
- }
339
-
340
- .authorName {
341
- font-size: var(--zd_font_size15) ;
342
- color: var(--zdt_attachmentviewer_title_text);
343
- composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
344
- margin: 0 var(--zd_size10) ;
345
- }
346
-
347
- .btn {
348
- height: 100% ;
349
- width: 100% ;
350
- background-color: var(--dot_mirror);
351
- border: 0;
352
- cursor: pointer;
1
+ .header {
2
+ height: var(--zd_size40) ;
3
+ position: relative;
4
+ z-index: 1;
5
+ composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
6
+ background-color: var(--zdt_attachmentviewer_header_bg);
7
+ padding: 0 var(--zd_size15) ;
8
+ border-bottom: 1px solid var(--zdt_attachmentviewer_header_border);
9
+ }
10
+
11
+ .title {
12
+ max-width: 50% ;
13
+ composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
14
+ }
15
+
16
+ [dir=ltr] .title {
17
+ padding-right: var(--zd_size15) ;
18
+ }
19
+
20
+ [dir=rtl] .title {
21
+ padding-left: var(--zd_size15) ;
22
+ }
23
+
24
+ .count {
25
+ position: absolute;
26
+ composes: xMiddle from '~@zohodesk/components/lib/common/common.module.css';
27
+ padding: 0 var(--zd_size10) ;
28
+ }
29
+
30
+ .title,
31
+ .count {
32
+ color: var(--zdt_attachmentviewer_title_text);
33
+ font-size: var(--zd_font_size15) ;
34
+ }
35
+
36
+ [dir=ltr] .menuBar {
37
+ padding-left: var(--zd_size5) ;
38
+ }
39
+
40
+ [dir=rtl] .menuBar {
41
+ padding-right: var(--zd_size5) ;
42
+ }
43
+
44
+ .mbleMenuBar {
45
+ align-self: baseline;
46
+ margin-top: var(--zd_size8) ;
47
+ }
48
+
49
+ [dir=ltr] .menu+.menu {
50
+ margin-left: var(--zd_size22) ;
51
+ }
52
+
53
+ [dir=rtl] .menu+.menu {
54
+ margin-right: var(--zd_size22) ;
55
+ }
56
+
57
+ .mobileMenu+.mobileMenu {
58
+ margin-bottom: var(--zd_size22) ;
59
+ }
60
+
61
+ .menuIcon {
62
+ --iconColor: var(--zdt_attachmentviewer_title_text);
63
+ }
64
+
65
+ .nrmlArrowBox {
66
+ width: var(--zd_size80) ;
67
+ }
68
+
69
+ .mbleArrowBox {
70
+ width: var(--zd_size50) ;
71
+ }
72
+
73
+ .arrowBox:hover {
74
+ background-color: var(--zdt_attachmentviewer_arrow_bg_hover);
75
+ }
76
+
77
+ .arrow {
78
+ color: var(--zdt_attachmentviewer_title_text);
79
+ font-size: var(--zd_font_size22) ;
80
+ height: var(--zd_size38) ;
81
+ width: var(--zd_size38) ;
82
+ line-height: 1.6364;
83
+ border-radius: 50%;
84
+ cursor: pointer;
85
+ }
86
+
87
+ .preview {
88
+ composes: posrel from '~@zohodesk/components/lib/common/common.module.css';
89
+ text-align: center;
90
+ margin: var(--zd_size20) 0 ;
91
+ }
92
+
93
+ .zoomIn {
94
+ max-height: 100% ;
95
+ max-width: 90% ;
96
+ position: absolute;
97
+ composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
98
+ }
99
+
100
+ .zoomOut {
101
+ cursor: zoom-out;
102
+ }
103
+
104
+ .button {
105
+ position: absolute;
106
+ bottom: var(--zd_size23) ;
107
+ z-index: 3;
108
+ border: 1px solid var(--zdt_attachmentviewer_button_border);
109
+ }
110
+
111
+ [dir=ltr] .button {
112
+ right: var(--zd_size20) ;
113
+ }
114
+
115
+ [dir=rtl] .button {
116
+ left: var(--zd_size20) ;
117
+ }
118
+
119
+ .visible {
120
+ visibility: visible;
121
+ }
122
+
123
+ .hidden {
124
+ visibility: hidden;
125
+ }
126
+
127
+ .footer {
128
+ width: 100% ;
129
+ overflow: hidden;
130
+ transition: height var(--zd_transition3);
131
+ background-color: var(--zdt_attachmentviewer_footer_bg)
132
+ }
133
+
134
+ [dir=ltr] .footer {
135
+ padding-right: var(--zd_size68)
136
+ }
137
+
138
+ [dir=rtl] .footer {
139
+ padding-left: var(--zd_size68)
140
+ }
141
+
142
+ .footerHeight {
143
+ height: var(--zd_size75) ;
144
+ }
145
+
146
+ .footerHide {
147
+ height: 0 ;
148
+ }
149
+
150
+ .listContainer {
151
+ padding: 0 var(--zd_size18) ;
152
+ }
153
+
154
+ .imgItem {
155
+ height: var(--zd_size60) ;
156
+ min-width: var(--zd_size40) ;
157
+ position: relative;
158
+ transition: border var(--zd_transition3);
159
+ border-width: 2px;
160
+ border-style: solid;
161
+ border-color: var(--dot_mirror);
162
+ border-radius: 3px;
163
+ padding: var(--zd_size2) ;
164
+ cursor: pointer;
165
+ }
166
+
167
+ .imgItem:hover {
168
+ border-color: var(--zdt_attachmentviewer_hover_border);
169
+ }
170
+
171
+ [dir=ltr] .imgItem+.imgItem {
172
+ margin-left: var(--zd_size12) ;
173
+ }
174
+
175
+ [dir=rtl] .imgItem+.imgItem {
176
+ margin-right: var(--zd_size12) ;
177
+ }
178
+
179
+ .image, .crsrPointer {
180
+ cursor: pointer;
181
+ }
182
+
183
+ .altText {
184
+ color: var(--zdt_attachmentviewer_title_text);
185
+ font-size: var(--zd_font_size13) ;
186
+ }
187
+
188
+ .selected, .selected:hover {
189
+ border-color: var(--zdt_attachmentviewer_selected_border);
190
+ }
191
+
192
+ .selected::after {
193
+ content: '';
194
+ position: absolute;
195
+ top: 0 ;
196
+ width: 100% ;
197
+ height: 100% ;
198
+ opacity: 0.3;
199
+ background-color: var(--zdt_attachmentviewer_selected_after_bg);
200
+ box-shadow: var(--zd_bs_attachmentviewer_selected);
201
+ }
202
+
203
+ [dir=ltr] .selected::after {
204
+ left: 0 ;
205
+ }
206
+
207
+ [dir=rtl] .selected::after {
208
+ right: 0 ;
209
+ }
210
+
211
+ .zoomIcon {
212
+ font-size: var(--zd_font_size15) ;
213
+ }
214
+
215
+ .newTabIcon {
216
+ font-size: var(--zd_font_size12) ;
217
+ }
218
+
219
+ .appIcon {
220
+ font-size: var(--zd_font_size9) ;
221
+ }
222
+
223
+ .thumpIcon {
224
+ color: var(--zdt_attachmentviewer_title_text);
225
+ transition: transform var(--zd_transition3);
226
+ transform: rotateX(180deg);
227
+ }
228
+
229
+ .thumpIconActive {
230
+ transform: rotateX(0deg);
231
+ }
232
+
233
+ .isAudio {
234
+ composes: audioImage from '../common/dot_common.module.css';
235
+ width: var(--zd_size100) ;
236
+ background-size: 100% 100%;
237
+ }
238
+
239
+ .isAudio .image {
240
+ opacity: 0;
241
+ }
242
+
243
+ .video {
244
+ position: absolute;
245
+ top: 0 ;
246
+ bottom: 0 ;
247
+ margin: auto ;
248
+ }
249
+
250
+ [dir=ltr] .video {
251
+ left: 0 ;
252
+ right: 0 ;
253
+ }
254
+
255
+ [dir=rtl] .video {
256
+ right: 0 ;
257
+ left: 0 ;
258
+ }
259
+
260
+ .imgBox {
261
+ position: absolute;
262
+ transition: var(--zd_transition3) ease-in-out;
263
+ opacity: 0;
264
+ overflow: auto;
265
+ }
266
+
267
+ .imgBox>img {
268
+ object-fit: contain;
269
+ }
270
+
271
+ .imgRef {
272
+ width: 100% ;
273
+ height: 100% ;
274
+ max-width: 100% ;
275
+ max-height: 100% ;
276
+ composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
277
+ }
278
+
279
+ .img {
280
+ transition: var(--zd_transition3) ease-in-out;
281
+ margin: auto ;
282
+ }
283
+
284
+ .zoomInCursor {
285
+ cursor: zoom-in;
286
+ }
287
+
288
+ .zoomOutCursor {
289
+ cursor: zoom-out;
290
+ }
291
+
292
+ .imgRef .normalImg {
293
+ max-width: inherit ;
294
+ max-height: inherit ;
295
+ }
296
+
297
+ .imgRef .zoomedImg {
298
+ max-width: initial ;
299
+ max-height: initial ;
300
+ }
301
+
302
+ .previewBox {
303
+ position: relative;
304
+ overflow: hidden;
305
+ }
306
+
307
+ .spinLoad {
308
+ position: absolute;
309
+ composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
310
+ height: var(--zd_size18) ;
311
+ width: var(--zd_size18) ;
312
+ cursor: progress
313
+ }
314
+
315
+ .loader {
316
+ height: 100% ;
317
+ width: 100% ;
318
+ composes: rotate from '../common/dot_animation.module.css';
319
+ composes: infinite from '~@zohodesk/components/lib/common/animation.module.css';
320
+ border: 2px solid var(--zdt_attachmentviewer_loader_border);
321
+ border-top-color: var(--zdt_attachmentviewer_loader_border_top);
322
+ border-radius: 50%;
323
+ }
324
+
325
+ [dir=ltr] .loader {
326
+ animation-duration: var(--zd_transition8);
327
+ animation-timing-function: linear;
328
+ }
329
+
330
+ [dir=rtl] .loader {
331
+ animation-duration: var(--zd_transition8);
332
+ animation-timing-function: linear;
333
+ }
334
+
335
+ .hide {
336
+ opacity: 0;
337
+ visibility: hidden;
338
+ }
339
+
340
+ .author {
341
+ max-width: var(--zd_size200) ;
342
+ }
343
+
344
+ [dir=ltr] .author {
345
+ padding-left: var(--zd_size15) ;
346
+ }
347
+
348
+ [dir=rtl] .author {
349
+ padding-right: var(--zd_size15) ;
350
+ }
351
+
352
+ .authorName {
353
+ font-size: var(--zd_font_size15) ;
354
+ color: var(--zdt_attachmentviewer_title_text);
355
+ composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
356
+ margin: 0 var(--zd_size10) ;
357
+ }
358
+
359
+ .btn {
360
+ height: 100% ;
361
+ width: 100% ;
362
+ background-color: var(--dot_mirror);
363
+ border: 0;
364
+ cursor: pointer;
353
365
  }