@zohodesk/dot 1.0.0-temp-76 → 1.0.0-temp-77

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 (124) hide show
  1. package/README.md +5 -0
  2. package/assets/Appearance/dark/mode/dotDarkMode.module.css +0 -2
  3. package/assets/Appearance/default/mode/dotDefaultMode.module.css +0 -2
  4. package/es/ActionButton/ActionButton.module.css +9 -25
  5. package/es/AlphabeticList/AlphabeticList.module.css +4 -7
  6. package/es/Attachment/Attachment.module.css +9 -20
  7. package/es/AttachmentViewer/AttachmentViewer.module.css +27 -82
  8. package/es/ChannelIcon/ChannelIcon.module.css +21 -30
  9. package/es/Drawer/Drawer.module.css +11 -59
  10. package/es/FlipCard/FlipCard.module.css +5 -14
  11. package/es/FormAction/FormAction.module.css +9 -34
  12. package/es/FreezeLayer/FreezeLayer.module.css +2 -6
  13. package/es/IconButton/IconButton.module.css +1 -1
  14. package/es/ImportantNotes/ImportantNotes.js +3 -5
  15. package/es/ImportantNotes/ImportantNotes.module.css +2 -7
  16. package/es/Loader/Loader.module.css +4 -25
  17. package/es/Message/Message.module.css +9 -42
  18. package/es/MessageBanner/MessageBanner.module.css +4 -12
  19. package/es/NewStar/NewStar.module.css +5 -42
  20. package/es/ToastMessage/ToastMessage.module.css +25 -96
  21. package/es/Upload/Upload.module.css +8 -27
  22. package/es/alert/AlertHeader/AlertHeader.module.css +3 -21
  23. package/es/alert/AlertLookup/AlertLookup.module.css +2 -6
  24. package/es/avatar/AvatarClose/AvatarClose.module.css +3 -9
  25. package/es/avatar/AvatarCollision/AvatarCollision.module.css +4 -18
  26. package/es/avatar/AvatarIcon/AvatarIcon.module.css +4 -3
  27. package/es/avatar/AvatarStatus/AvatarStatus.module.css +9 -59
  28. package/es/avatar/AvatarThread/AvatarThread.module.css +5 -55
  29. package/es/avatar/AvatarUser/AvatarUser.module.css +10 -81
  30. package/es/avatar/AvatarWithTeam/AvatarWithTeam.module.css +3 -10
  31. package/es/common/dot_animation.module.css +3 -16
  32. package/es/deprecated/SelectDropdown/SelectDropdown.module.css +3 -11
  33. package/es/dropdown/ToggleDropDown/ToggleDropDown.js +1 -2
  34. package/es/dropdown/ToggleDropDown/ToggleDropDown.module.css +6 -19
  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/Fields.module.css +14 -49
  43. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js +9 -4
  44. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.module.css +7 -19
  45. package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.module.css +1 -4
  46. package/es/form/fields/TextEditor/TextEditor.module.css +72 -149
  47. package/es/form/fields/TextEditorWrapper/TextEditorWrapper.module.css +2 -13
  48. package/es/form/fields/ValidationMessage/ValidationMessage.module.css +4 -9
  49. package/es/layout/SetupDetailLayout/SetupDetailLayout.module.css +16 -52
  50. package/es/layout/SubtabLayout/SubtabLayout.module.css +29 -55
  51. package/es/list/BluePrintStatus/BluePrintStatus.module.css +1 -4
  52. package/es/list/Comment/Comment.module.css +0 -5
  53. package/es/list/DepartmentDropDown/DepartmentDropDown.js +1 -1
  54. package/es/list/DotNew/DotNew.module.css +3 -3
  55. package/es/list/GridStencils/GridStencils.module.css +19 -71
  56. package/es/list/Icons/Icons.module.css +1 -1
  57. package/es/list/ListLayout/ListLayout.module.css +14 -22
  58. package/es/list/ListStencils/ListStencils.module.css +6 -11
  59. package/es/list/SecondaryText/SecondaryText.module.css +3 -13
  60. package/es/list/SentimentStatus/SentimentStatus.module.css +1 -4
  61. package/es/list/TagNew/TagNew.module.css +7 -14
  62. package/es/list/Thread/Thread.module.css +1 -13
  63. package/es/list/UserTime/UserTime.module.css +0 -6
  64. package/es/list/listCommon.module.css +1 -9
  65. package/es/list/status/StatusDropdown/StatusDropdown.js +1 -2
  66. package/es/list/status/StatusDropdown/StatusDropdown.module.css +6 -19
  67. package/es/list/status/StatusListItem/StatusListItem.module.css +15 -38
  68. package/es/lookup/Lookup/Lookup.module.css +2 -2
  69. package/es/lookup/Section/LookupSection.module.css +2 -2
  70. package/es/lookup/header/Close/LookupClose.module.css +4 -4
  71. package/es/lookup/header/ModuleHeader/ModuleHeader.js +3 -8
  72. package/es/lookup/header/Search/LookupSearch.module.css +12 -21
  73. package/es/lookup/header/TicketHeader/TicketHeader.js +4 -7
  74. package/es/lookup/header/TicketHeader/TicketHeader.module.css +2 -5
  75. package/es/lookup/header/ViewDropDown/ViewDropDown.module.css +3 -8
  76. package/es/lookup/header/lookupHeaderCommon.module.css +5 -21
  77. package/es/lookup/header/lookupHeaderCommonResponsive.module.css +3 -12
  78. package/es/setup/header/Button/HeaderButton.module.css +1 -3
  79. package/es/setup/header/Link/HeaderLink.module.css +1 -7
  80. package/es/setup/header/Search/Search.module.css +8 -19
  81. package/es/setup/header/Views/Views.module.css +5 -15
  82. package/es/setup/helptips/Link/HelpTipsLink.module.css +0 -1
  83. package/es/setup/helptips/ListGroup/ListGroup.module.css +1 -6
  84. package/es/setup/table/TableData/SetupTableData.module.css +3 -11
  85. package/es/setup/table/TableHead/SetupTableHead.module.css +0 -4
  86. package/es/setup/table/TableRow/SetupTableRow.module.css +2 -6
  87. package/es/version2/AlertClose/AlertClose.module.css +1 -1
  88. package/es/version2/GlobalNotification/GlobalNotification.module.css +9 -44
  89. package/es/version2/lookup/AlertHeader/AlertHeaderNew.module.css +2 -25
  90. package/es/version2/lookup/AlertLookup/AlertLookupNew.module.css +3 -7
  91. package/es/version2/lookup/alertLookupCommonNew.module.css +1 -8
  92. package/es/version2/notification/DesktopNotification/DesktopNotification.module.css +10 -26
  93. package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css +10 -47
  94. package/lib/ActionButton/ActionButton.module.css +1 -0
  95. package/lib/FreezeLayer/FreezeLayer.js +4 -31
  96. package/lib/ImportantNotes/ImportantNotes.js +3 -5
  97. package/lib/form/fields/CheckBoxField/CheckBoxField.js +1 -1
  98. package/lib/form/fields/CurrencyField/CurrencyField.js +8 -9
  99. package/lib/form/fields/DateField/DateField.js +1 -1
  100. package/lib/form/fields/MultiSelectField/MultiSelectField.js +1 -1
  101. package/lib/form/fields/PhoneField/PhoneField.js +1 -1
  102. package/lib/form/fields/RadioField/RadioField.js +1 -1
  103. package/lib/form/fields/SelectField/SelectField.js +1 -1
  104. package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js +11 -20
  105. package/lib/form/fields/TextBoxField/TextBoxField.js +1 -1
  106. package/lib/form/fields/TextEditor/TextEditor.js +1 -4
  107. package/lib/form/fields/TextEditor/TextEditor.module.css +2 -13
  108. package/lib/form/fields/TextareaField/TextareaField.js +1 -1
  109. package/lib/list/status/StatusDropdown/StatusDropdown.js +37 -44
  110. package/lib/lookup/header/ModuleHeader/ModuleHeader.js +3 -8
  111. package/lib/lookup/header/TicketHeader/TicketHeader.js +4 -7
  112. package/lib/lookup/header/lookupHeaderCommon.module.css +2 -8
  113. package/lib/setup/header/Views/Views.js +2 -2
  114. package/lib/utils/General.js +24 -0
  115. package/package.json +3 -2
  116. package/lib/AttachmentViewer/Attachment.js +0 -28
  117. package/lib/AttachmentViewer/AttachmentImage.js +0 -129
  118. package/lib/AttachmentViewer/AttachmentViewer.js +0 -645
  119. package/lib/AttachmentViewer/AttachmentViewer.module.css +0 -346
  120. package/lib/AttachmentViewer/utils.js +0 -134
  121. package/lib/Provider/Config.js +0 -21
  122. package/lib/common/dot_animation.module.css +0 -27
  123. package/lib/common/dot_common.module.css +0 -4
  124. package/lib/deprecated/utils/General.js +0 -29
@@ -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
- }
@@ -27,101 +27,51 @@
27
27
 
28
28
  .thread_xsmall_pos {
29
29
  top: calc(var(--zd_size5) * -1);
30
- }
31
-
32
- [dir=ltr] .thread_xsmall_pos {
33
30
  right: calc(var(--zd_size5) * -1);
34
31
  }
35
32
 
36
- [dir=rtl] .thread_xsmall_pos {
37
- left: calc(var(--zd_size5) * -1);
38
- }
39
-
40
33
  .thread_small_pos {
41
34
  top: calc(var(--zd_size3) * -1);
35
+ right: calc(var(--zd_size6) * -1);
42
36
  height: var(--zd_size12);
43
37
  width: var(--zd_size12);
44
38
  }
45
-
46
- [dir=ltr] .thread_small_pos {
47
- right: calc(var(--zd_size6) * -1);
48
- }
49
-
50
- [dir=rtl] .thread_small_pos {
51
- left: calc(var(--zd_size6) * -1);
52
- }
53
39
  .thread_small_pos i {
54
40
  font-size: var(--zd_font_size8);
55
41
  }
56
42
 
57
43
  .thread_medium_pos {
58
44
  top: calc(var(--zd_size4) * -1);
59
- }
60
-
61
- [dir=ltr] .thread_medium_pos {
62
45
  right: calc(var(--zd_size5) * -1);
63
46
  }
64
47
 
65
- [dir=rtl] .thread_medium_pos {
66
- left: calc(var(--zd_size5) * -1);
67
- }
68
-
69
48
  .thread_xmedium_pos {
70
49
  top: calc(var(--zd_size4) * -1);
71
- }
72
-
73
- [dir=ltr] .thread_xmedium_pos {
74
50
  right: calc(var(--zd_size3) * -1);
75
51
  }
76
52
 
77
- [dir=rtl] .thread_xmedium_pos {
78
- left: calc(var(--zd_size3) * -1);
79
- }
80
-
81
53
  .thread_large_pos {
82
54
  top: 0;
55
+ right: 0;
83
56
  height: var(--zd_size16);
84
57
  width: var(--zd_size16);
85
58
  }
86
59
 
87
- [dir=ltr] .thread_large_pos {
88
- right: 0;
89
- }
90
-
91
- [dir=rtl] .thread_large_pos {
92
- left: 0;
93
- }
94
-
95
60
  .thread_xlarge_pos {
96
61
  top: var(--zd_size2);
62
+ right: var(--zd_size4);
97
63
  height: var(--zd_size18);
98
64
  width: var(--zd_size18);
99
65
  }
100
66
 
101
- [dir=ltr] .thread_xlarge_pos {
102
- right: var(--zd_size4);
103
- }
104
-
105
- [dir=rtl] .thread_xlarge_pos {
106
- left: var(--zd_size4);
107
- }
108
-
109
67
  .icon {
110
68
  position: absolute;
111
69
  line-height: 0;
112
- top: 50%;
113
- }
114
-
115
- [dir=ltr] .icon {
116
70
  left: 50%;
71
+ top: 50%;
117
72
  transform: translate(-50%, -50%);
118
73
  }
119
74
 
120
- [dir=rtl] .icon {
121
- right: 50%;
122
- transform: translate(50%, -50%);
123
- }
124
-
125
75
  .border_primary {
126
76
  border: 1px solid var(--zdt_avatarthread_primary_border);
127
77
  }
@@ -141,8 +91,8 @@
141
91
  }
142
92
 
143
93
  .hover .thread {
144
- z-index: 1;
145
94
  cursor: pointer;
95
+ z-index: 1;
146
96
  }
147
97
 
148
98
  .hover:hover .thread {
@@ -17,155 +17,84 @@
17
17
  }
18
18
  .paid {
19
19
  composes: middle from '~@zohodesk/components/lib/common/common.module.css';
20
- }
21
- [dir=ltr] .paid {
22
20
  left: 50%;
23
21
  }
24
- [dir=rtl] .paid {
25
- right: 50%;
26
- }
27
22
  .paid {
28
23
  top: calc(var(--zd_size2) * -1);
29
24
  }
30
- .portal, .lock {
25
+ .portal,
26
+ .lock {
31
27
  background-color: var(--zdt_avataruser_default_bg);
32
28
  border-radius: 50%;
33
29
  }
34
30
  .delete {
35
31
  top: 0;
32
+ left: 0;
36
33
  width: 100%;
37
34
  height: 100%;
38
35
  opacity: 0;
39
36
  transition: all var(--zd_transition3);
40
37
  composes: dflex alignHorizontal alignVertical from '~@zohodesk/components/lib/common/common.module.css';
41
- color: var(--zdt_avataruser_delete_text);
42
38
  cursor: pointer;
43
39
  border-radius: 50%;
44
40
  background-color: var(--zdt_avataruser_delete_bg);
45
- }
46
- [dir=ltr] .delete {
47
- left: 0;
48
- }
49
- [dir=rtl] .delete {
50
- right: 0;
41
+ color: var(--zdt_avataruser_delete_text);
51
42
  }
52
43
  .container:hover .delete {
53
44
  opacity: 1;
54
45
  }
55
46
  .small .portal {
56
47
  top: 0;
57
- }
58
- [dir=ltr] .small .portal {
59
48
  right: calc(var(--zd_size4) * -1);
60
49
  }
61
- [dir=rtl] .small .portal {
62
- left: calc(var(--zd_size4) * -1);
63
- }
64
50
  .xsmall .portal {
65
51
  top: var(--zd_size1);
66
- }
67
- [dir=ltr] .xsmall .portal {
68
52
  right: calc(var(--zd_size2) * -1);
69
53
  }
70
- [dir=rtl] .xsmall .portal {
71
- left: calc(var(--zd_size2) * -1);
72
- }
73
54
  .medium .portal {
74
55
  top: var(--zd_size1);
75
- }
76
- [dir=ltr] .medium .portal {
77
56
  right: calc(var(--zd_size1) * -1);
78
57
  }
79
- [dir=rtl] .medium .portal {
80
- left: calc(var(--zd_size1) * -1);
81
- }
82
58
  .xmedium .portal {
83
59
  top: var(--zd_size3);
84
- }
85
- [dir=ltr] .xmedium .portal {
86
60
  right: 0;
87
61
  }
88
- [dir=rtl] .xmedium .portal {
89
- left: 0;
90
- }
91
62
  .large .portal {
92
63
  top: var(--zd_size8);
93
- }
94
- [dir=ltr] .large .portal {
95
64
  right: var(--zd_size1);
96
65
  }
97
- [dir=rtl] .large .portal {
98
- left: var(--zd_size1);
99
- }
100
66
  .xlarge .portal {
101
67
  top: var(--zd_size15);
102
- }
103
- [dir=ltr] .xlarge .portal {
104
68
  right: var(--zd_size2);
105
69
  }
106
- [dir=rtl] .xlarge .portal {
107
- left: var(--zd_size2);
108
- }
109
70
 
110
71
  .small .lock {
111
72
  top: 0;
112
- font-size: var(--zd_font_size11);
113
- }
114
-
115
- [dir=ltr] .small .lock {
116
73
  right: calc(var(--zd_size5) * -1);
117
- }
118
-
119
- [dir=rtl] .small .lock {
120
- left: calc(var(--zd_size5) * -1);
74
+ font-size: var(--zd_font_size11);
121
75
  }
122
76
  .xsmall .lock {
123
77
  top: var(--zd_size1);
124
- font-size: var(--zd_font_size12);
125
- }
126
- [dir=ltr] .xsmall .lock {
127
78
  right: calc(var(--zd_size4) * -1);
128
- }
129
- [dir=rtl] .xsmall .lock {
130
- left: calc(var(--zd_size4) * -1);
79
+ font-size: var(--zd_font_size12);
131
80
  }
132
81
  .medium .lock {
133
82
  top: var(--zd_size2);
134
- font-size: var(--zd_font_size13);
135
- }
136
- [dir=ltr] .medium .lock {
137
83
  right: calc(var(--zd_size5) * -1);
138
- }
139
- [dir=rtl] .medium .lock {
140
- left: calc(var(--zd_size5) * -1);
84
+ font-size: var(--zd_font_size13);
141
85
  }
142
86
  .xmedium .lock {
143
87
  top: var(--zd_size4);
144
- font-size: var(--zd_font_size14);
145
- }
146
- [dir=ltr] .xmedium .lock {
147
88
  right: calc(var(--zd_size6) * -1);
148
- }
149
- [dir=rtl] .xmedium .lock {
150
- left: calc(var(--zd_size6) * -1);
89
+ font-size: var(--zd_font_size14);
151
90
  }
152
91
  .large .lock {
153
92
  top: var(--zd_size6);
154
- font-size: var(--zd_font_size18);
155
- }
156
- [dir=ltr] .large .lock {
157
93
  right: calc(var(--zd_size6) * -1);
158
- }
159
- [dir=rtl] .large .lock {
160
- left: calc(var(--zd_size6) * -1);
94
+ font-size: var(--zd_font_size18);
161
95
  }
162
96
  .xlarge .lock {
163
97
  top: var(--zd_size12);
164
- font-size: var(--zd_font_size22);
165
- }
166
- [dir=ltr] .xlarge .lock {
167
98
  right: calc(var(--zd_size8) * -1);
168
- }
169
- [dir=rtl] .xlarge .lock {
170
- left: calc(var(--zd_size8) * -1);
99
+ font-size: var(--zd_font_size22);
171
100
  }
@@ -6,18 +6,11 @@
6
6
 
7
7
  .teamAvatar {
8
8
  position: absolute;
9
- bottom: calc(var(--zd_size6) * -1);
10
- font-size: 0;
11
9
  padding: var(--zd_size2);
12
10
  border-radius: 50%;
11
+ bottom: calc(var(--zd_size6) * -1);
12
+ right: calc(var(--zd_size10) * -1);
13
13
  transform: scale(0.8);
14
14
  background-color: var(--zdt_avatarteam_default_bg);
15
- }
16
-
17
- [dir=ltr] .teamAvatar {
18
- right: calc(var(--zd_size10) * -1);
19
- }
20
-
21
- [dir=rtl] .teamAvatar {
22
- left: calc(var(--zd_size10) * -1);
15
+ font-size: 0;
23
16
  }