@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
@@ -2,54 +2,42 @@
2
2
  position: relative;
3
3
  transition: width var(--zd_transition3);
4
4
  width: var(--zd_size90);
5
- }[dir=ltr] .container {
6
5
  margin-right: var(--zd_size15);
7
- }[dir=rtl] .container {
8
- margin-left: var(--zd_size15);
9
6
  }
10
7
  .active {
11
8
  width: var(--zd_size180);
12
9
  }
13
- .active .input, .input:hover {
10
+ .active .input,
11
+ .input:hover {
14
12
  border-bottom-color: var(--zdt_search_input_border);
15
13
  }
16
14
  .icon {
17
15
  position: absolute;
18
16
  top: 0;
17
+ right: 0;
19
18
  bottom: 0;
20
19
  color: var(--zdt_search_icon);
21
20
  line-height: var(--zd_size26);
22
21
  cursor: pointer;
23
22
  }
24
- [dir=ltr] .icon {
25
- right: 0;
26
- }
27
- [dir=rtl] .icon {
28
- left: 0;
29
- }
30
23
  .icon:hover {
31
24
  color: var(--zdt_search_hover_icon);
32
25
  }
33
26
  .input {
27
+ border: 0;
34
28
  height: var(--zd_size26);
35
29
  font-size: var(--zd_font_size13);
36
30
  width: 100%;
37
31
  letter-spacing: 0.2px;
32
+ border-bottom: 1px solid transparent;
38
33
  transition: all var(--zd_transition3) ease;
39
34
  color: var(--zdt_search_input_text);
40
35
  font-family: var(--zd_regular);
41
36
  -webkit-appearance: none;
42
37
  -moz-appearance: none;
43
38
  appearance: none;
44
- border: 0;
45
- border-bottom: 1px solid transparent;
46
- background: var(--zdt_search_input_bg);
47
- }
48
- [dir=ltr] .input {
49
39
  padding-right: var(--zd_size20);
50
- }
51
- [dir=rtl] .input {
52
- padding-left: var(--zd_size20);
40
+ background: var(--zdt_search_input_bg);
53
41
  }
54
42
  .input::placeholder {
55
43
  color: var(--zdt_search_placeholder_text);
@@ -63,6 +51,7 @@
63
51
  .input::-ms-placeholder {
64
52
  color: var(--zdt_search_placeholder_text);
65
53
  }
66
- .input:focus, .active .input:focus {
54
+ .input:focus,
55
+ .active .input:focus {
67
56
  border-bottom-color: var(--zdt_search_input_focus_border);
68
57
  }
@@ -1,34 +1,24 @@
1
1
  .container {
2
2
  display: inline-block;
3
- }[dir=ltr] .container {
4
3
  margin-right: var(--zd_size15);
5
- }[dir=rtl] .container {
6
- margin-left: var(--zd_size15);
7
4
  }
8
5
  .icon {
9
6
  display: inline-block;
7
+ text-align: center;
8
+ cursor: pointer;
10
9
  color: var(--zdt_views_icon);
10
+ border: 1px solid var(--zdt_views_border);
11
11
  height: var(--zd_size28);
12
12
  width: var(--zd_size28);
13
13
  line-height: var(--zd_size26);
14
- text-align: center;
15
- cursor: pointer;
16
- border: 1px solid var(--zdt_views_border);
17
14
  }
18
- [dir=ltr] .first {
15
+ .first {
19
16
  border-radius: 2px 0 0 2px;
20
17
  }
21
- [dir=rtl] .first {
22
- border-radius: 0 2px 2px 0;
23
- }
24
- [dir=ltr] .last {
18
+ .last {
25
19
  border-radius: 0 2px 2px 0;
26
20
  border-left-width: 0;
27
21
  }
28
- [dir=rtl] .last {
29
- border-radius: 2px 0 0 2px;
30
- border-right-width: 0;
31
- }
32
22
  .icon:hover {
33
23
  color: var(--zdt_views_hover_icon);
34
24
  }
@@ -2,6 +2,5 @@
2
2
  .text {
3
3
  color: var(--zdt_helptipslink_text);
4
4
  font-size: var(--zd_font_size14);
5
- }.container > a, .text {
6
5
  margin: var(--zd_size10) 0;
7
6
  }
@@ -5,15 +5,10 @@
5
5
  }
6
6
  .unOrderData,
7
7
  .orderData {
8
+ margin: var(--zd_size15) 0 var(--zd_size15) var(--zd_size7);
8
9
  font-size: var(--zd_font_size14);
9
10
  color: var(--zdt_listgroup_text);
10
11
  }
11
- [dir=ltr] .unOrderData, [dir=ltr] .orderData {
12
- margin: var(--zd_size15) 0 var(--zd_size15) var(--zd_size7);
13
- }
14
- [dir=rtl] .unOrderData, [dir=rtl] .orderData {
15
- margin: var(--zd_size15) var(--zd_size7) var(--zd_size15) 0;
16
- }
17
12
  .orderData {
18
13
  list-style: decimal;
19
14
  }
@@ -1,7 +1,5 @@
1
- [dir=ltr] .container {
1
+ .container {
2
2
  padding-left: var(--zd_size20);
3
- }[dir=rtl] .container {
4
- padding-right: var(--zd_size20);
5
3
  }
6
4
  .size70 {
7
5
  flex-basis: var(--zd_size70);
@@ -30,15 +28,9 @@
30
28
  .center {
31
29
  text-align: center;
32
30
  }
33
- [dir=ltr] .left {
31
+ .left {
34
32
  text-align: left;
35
33
  }
36
- [dir=rtl] .left {
34
+ .right {
37
35
  text-align: right;
38
36
  }
39
- [dir=ltr] .right {
40
- text-align: right;
41
- }
42
- [dir=rtl] .right {
43
- text-align: left;
44
- }
@@ -1,11 +1,7 @@
1
1
  .container {
2
2
  border-bottom: 1px solid var(--zdt_setuptablehead_border);
3
- }[dir=ltr] .container {
4
3
  padding-right: var(--zd_size40);
5
4
  padding-left: var(--zd_size40);
6
- }[dir=rtl] .container {
7
- padding-left: var(--zd_size40);
8
- padding-right: var(--zd_size40);
9
5
  }
10
6
  .subContainer {
11
7
  height: var(--zd_size40);
@@ -1,13 +1,9 @@
1
1
  .container {
2
2
  position: relative;
3
- height: var(--zd_size52);
4
- border-bottom: 1px solid var(--zdt_setuptablerow_border);
5
- }[dir=ltr] .container {
6
3
  margin-right: var(--zd_size40);
7
4
  margin-left: var(--zd_size40);
8
- }[dir=rtl] .container {
9
- margin-left: var(--zd_size40);
10
- margin-right: var(--zd_size40);
5
+ border-bottom: 1px solid var(--zdt_setuptablerow_border);
6
+ height: var(--zd_size52);
11
7
  }
12
8
  .container:hover {
13
9
  background-color: var( --zdt_setuptablerow_hover_bg);
@@ -1,9 +1,9 @@
1
1
  .close {
2
2
  width: var(--zd_size25);
3
3
  height: var(--zd_size25);
4
- color: var(--zdt_commonalert_close_icon);
5
4
  border-radius: var(--zd_size4);
6
5
  cursor: pointer;
6
+ color: var(--zdt_commonalert_close_icon);
7
7
  }
8
8
 
9
9
  .closeIcon {
@@ -11,38 +11,25 @@
11
11
  top: 0;
12
12
  z-index: 1000;
13
13
  /*Hook for editor alert*/
14
- pointer-events: none;
15
- text-align: center;
16
- }
17
- [dir=ltr] .message {
18
14
  right: 0;
15
+ text-align: center;
19
16
  left: 0;
20
- }
21
- [dir=rtl] .message {
22
- left: 0;
23
- right: 0;
17
+ pointer-events: none;
24
18
  }
25
19
 
26
20
  .container {
21
+ padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
27
22
  position: relative;
28
23
  pointer-events: initial;
29
- color: var(--globalnotification_text_color);
30
- max-width: var(--zd_size490);
31
- composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
32
24
  box-shadow: 0 4px 20px var(--globalnotification_box_shadow);
33
25
  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
34
26
  background-color: var(--globalnotification_bg_color);
35
27
  border-style: solid;
36
28
  border-color: var(--commonalert_border_color);
37
29
  border-width: 2px 1px 1px 1px;
38
- }
39
-
40
- [dir=ltr] .container {
41
- padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
42
- }
43
-
44
- [dir=rtl] .container {
45
- padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70);
30
+ color: var(--globalnotification_text_color);
31
+ max-width: var(--zd_size490);
32
+ composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
46
33
  }
47
34
 
48
35
  .icon {
@@ -51,15 +38,8 @@
51
38
  position: absolute;
52
39
  top: 0;
53
40
  bottom: 0;
54
- margin: auto 0;
55
- }
56
-
57
- [dir=ltr] .icon {
58
41
  left: var(--zd_size18);
59
- }
60
-
61
- [dir=rtl] .icon {
62
- right: var(--zd_size18);
42
+ margin: auto 0;
63
43
  }
64
44
 
65
45
  .success {
@@ -96,30 +76,15 @@
96
76
  font-size: var(--zd_font_size14);
97
77
  font-family: var(--zd_semibold);
98
78
  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
99
- line-height: var(--zd_size20);
100
- }
101
-
102
- [dir=ltr] .text {
103
79
  text-align: left;
104
- }
105
-
106
- [dir=rtl] .text {
107
- text-align: right;
80
+ line-height: var(--zd_size20);
108
81
  }
109
82
 
110
83
  .close {
111
84
  position: absolute;
112
85
  top: 0;
113
86
  bottom: 0;
114
- height: var(--zd_size25);
115
- }
116
-
117
- [dir=ltr] .close {
118
87
  right: var(--zd_size12);
119
88
  margin: auto 0 auto var(--zd_size25);
120
- }
121
-
122
- [dir=rtl] .close {
123
- left: var(--zd_size12);
124
- margin: auto var(--zd_size25) auto 0;
89
+ height: var(--zd_size25);
125
90
  }
@@ -11,13 +11,8 @@
11
11
  }
12
12
  .headerLayout {
13
13
  min-height: var(--zd_size54);
14
- }
15
- [dir=ltr] .headerLayout {
16
14
  padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20);
17
15
  }
18
- [dir=rtl] .headerLayout {
19
- padding: var(--zd_size15) var(--zd_size20) 0 var(--zd_size45);
20
- }
21
16
 
22
17
  .success {
23
18
  --commonalert_border_color: var(--zdt_commonalert_success_border);
@@ -39,14 +34,10 @@
39
34
  --commonalert_border_color: var(--zdt_commonalert_warning_border);
40
35
  }
41
36
 
42
- [dir=ltr] .extraSmall {
37
+ .extraSmall {
43
38
  padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size16);
44
39
  }
45
40
 
46
- [dir=rtl] .extraSmall {
47
- padding: var(--zd_size12) var(--zd_size16) var(--zd_size12) var(--zd_size45);
48
- }
49
-
50
41
  .iconContainer {
51
42
  height: var(--zd_size51);
52
43
  width: var(--zd_size51);
@@ -54,6 +45,7 @@
54
45
 
55
46
  .title {
56
47
  color: var(--zdt_alertlookupnew_text);
48
+ margin: 0 var(--zd_size5) 0 var(--zd_size10);
57
49
  font-size: var(--zd_font_size18);
58
50
  line-height: var(--zd_size22);
59
51
  font-family: var(--zd_bold);
@@ -61,14 +53,6 @@
61
53
  vertical-align: middle;
62
54
  }
63
55
 
64
- [dir=ltr] .title {
65
- margin: 0 var(--zd_size5) 0 var(--zd_size10);
66
- }
67
-
68
- [dir=rtl] .title {
69
- margin: 0 var(--zd_size10) 0 var(--zd_size5);
70
- }
71
-
72
56
  .iconStyle {
73
57
  display: block;
74
58
  }
@@ -76,12 +60,5 @@
76
60
  .close {
77
61
  position: absolute;
78
62
  top: var(--zd_size12);
79
- }
80
-
81
- [dir=ltr] .close {
82
63
  right: var(--zd_size12);
83
- }
84
-
85
- [dir=rtl] .close {
86
- left: var(--zd_size12);
87
64
  }
@@ -3,21 +3,17 @@
3
3
  }
4
4
 
5
5
  .innerSection {
6
+ padding: var(--zd_size17) var(--zd_size30) var(--zd_size30);
6
7
  color: var(--zdt_alertlookupnew_text);
7
8
  font-size: var(--zd_font_size14);
8
9
  line-height: var(--zd_size18);
9
10
  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
10
- padding: var(--zd_size17) var(--zd_size30) var(--zd_size30);
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
  .confirmMsgText {
22
18
  margin-top: var(--zd_size20);
23
19
  }
@@ -27,8 +23,8 @@
27
23
  }
28
24
 
29
25
  .footer {
30
- overflow: hidden;
31
26
  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
27
+ overflow: hidden;
32
28
  }
33
29
  .horizontalScroll, .verticalScroll, .bothScroll {
34
30
  height: 100%;
@@ -2,16 +2,9 @@
2
2
 
3
3
  .noteContainer {
4
4
  padding: var(--zd_size4) var(--zd_size30) 0;
5
- }
6
-
7
- [dir=ltr] .noteContainer {
8
5
  border-left: solid 1px var(--zdt_alertlookup_border);
9
6
  }
10
7
 
11
- [dir=rtl] .noteContainer {
12
- border-right: solid 1px var(--zdt_alertlookup_border);
13
- }
14
-
15
8
  .noteTitle {
16
9
  font-size: var(--zd_font_size13);
17
10
  font-family: var(--zd_semibold);
@@ -27,7 +20,7 @@
27
20
  font-size: var(--zd_font_size12);
28
21
  /* line-height: var(--zd_size14); */
29
22
  color: var(--zdt_alertlookuop_text);
23
+ margin-bottom: var(--zd_size15);
30
24
  list-style-type: disc;
31
25
  line-height: initial;
32
- margin-bottom: var(--zd_size15);
33
26
  }
@@ -1,22 +1,17 @@
1
1
  .parentElement {
2
- position: relative;
3
2
  margin-bottom: var(--zd_size7);
3
+ position: relative;
4
4
  }
5
5
  .container {
6
+ background-color: var(--zdt_desktopnotification_bg);
6
7
  color: var(--zdt_desktopnotification_text);
7
8
  transition: all var(--zd_transition4);
8
9
  position: relative;
10
+ transform-origin: right center;
9
11
  max-height: 100%;
10
- pointer-events: auto;
11
- background-color: var(--zdt_desktopnotification_bg);
12
12
  box-shadow: 0 4px 20px var(--zdt_desktopnotification_box_shadow);
13
13
  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
14
- }
15
- [dir=ltr] .container {
16
- transform-origin: right center;
17
- }
18
- [dir=rtl] .container {
19
- transform-origin: left center;
14
+ pointer-events: auto;
20
15
  }
21
16
  .globalNotify {
22
17
  max-width: var(--zd_size490);
@@ -32,17 +27,11 @@
32
27
  /* Animation Style */
33
28
  .closeAnimation {
34
29
  max-height: 0;
35
- transition: all var(--zd_transition3) 0.4s;
36
30
  margin-bottom: 0;
31
+ transition: all var(--zd_transition3) 0.4s;
37
32
  }
38
33
  .animation {
39
34
  composes: modeForward from '~@zohodesk/components/lib/common/animation.module.css';
40
- }
41
- [dir=ltr] .animation {
42
- animation-duration: var(--zd_transition4);
43
- -webkit-animation-duration: var(--zd_transition4);
44
- }
45
- [dir=rtl] .animation {
46
35
  animation-duration: var(--zd_transition4);
47
36
  -webkit-animation-duration: var(--zd_transition4);
48
37
  }
@@ -51,8 +40,8 @@
51
40
  composes: animation;
52
41
  }
53
42
  .leftnoanimate {
54
- opacity: 1;
55
43
  transform: translateX(0) scale(1);
44
+ opacity: 1;
56
45
  }
57
46
  .rightanimate {
58
47
  composes: slideRight from '~@zohodesk/components/lib/common/animation.module.css';
@@ -61,20 +50,15 @@
61
50
  }
62
51
  /* Container Style */
63
52
  .message {
53
+ padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
54
+ border-top: 1px solid var(--zd_smoke1);
55
+ cursor: pointer;
64
56
  position: relative;
65
57
  color: var(--zd_smoke18);
66
58
  font-size: var(--zd_font_size11);
67
59
  composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
68
60
  height: var(--zd_size33);
69
61
  transition: padding var(--zd_transition3), height var(--zd_transition3);
70
- border-top: 1px solid var(--zd_smoke1);
71
- cursor: pointer;
72
- }
73
- [dir=ltr] .message {
74
- padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
75
- }
76
- [dir=rtl] .message {
77
- padding: var(--zd_size10) var(--zd_size76) var(--zd_size10) var(--zd_size20);
78
62
  }
79
63
  .message:hover {
80
64
  background: var(--zd_alabaster);
@@ -101,6 +85,6 @@
101
85
  margin-top: var(--zd_size20);
102
86
  }
103
87
  .footer {
104
- overflow: hidden;
105
88
  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
89
+ overflow: hidden;
106
90
  }
@@ -5,27 +5,20 @@
5
5
  composes: varClass;
6
6
  min-height: var(--zd_size54);
7
7
  position: relative;
8
- color: var(--zdt_desktopnotification_text);
9
8
  background-color: var(--alert_lookup_bg_color);
10
9
  border-style: solid;
11
10
  border-color: var(--commonalert_border_color);
12
11
  border-width: 2px 0 0 0;
12
+ color: var(--zdt_desktopnotification_text);
13
13
  }
14
14
 
15
15
  .title {
16
+ margin: 0 var(--zd_size5) 0 var(--zd_size10);
16
17
  font-size: var(--zd_font_size18);
17
18
  line-height: var(--zd_size22);
18
19
  font-family: var(--zd_bold);
19
20
  composes: ftsmooth wbreak from '~@zohodesk/components/lib/common/common.module.css';
20
21
  }
21
-
22
- [dir=ltr] .title {
23
- margin: 0 var(--zd_size5) 0 var(--zd_size10);
24
- }
25
-
26
- [dir=rtl] .title {
27
- margin: 0 var(--zd_size10) 0 var(--zd_size5);
28
- }
29
22
 
30
23
  .infoText {
31
24
  font-size: var(--zd_font_size14);
@@ -57,11 +50,8 @@
57
50
 
58
51
 
59
52
  /* Primary Header */
60
- [dir=ltr] .primary {
61
- padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20);
62
- }
63
- [dir=rtl] .primary {
64
- padding: var(--zd_size15) var(--zd_size20) 0 var(--zd_size45);
53
+ .primary {
54
+ padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20);
65
55
  }
66
56
 
67
57
  .primary .iconContainer {
@@ -76,26 +66,14 @@
76
66
  .primary .close {
77
67
  position: absolute;
78
68
  top: var(--zd_size12);
79
- }
80
-
81
- [dir=ltr] .primary .close {
82
- right: var(--zd_size12);
83
- }
84
-
85
- [dir=rtl] .primary .close {
86
- left: var(--zd_size12);
69
+ right: var(--zd_size12);
87
70
  }
88
71
 
89
72
  /* Secondary Header */
90
73
  .secondary {
91
- composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
74
+ padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
92
75
  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
93
- }
94
- [dir=ltr] .secondary {
95
- padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
96
- }
97
- [dir=rtl] .secondary {
98
- padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70);
76
+ composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
99
77
  }
100
78
 
101
79
  .secondary .infoText {
@@ -108,30 +86,15 @@
108
86
  position: absolute;
109
87
  top: 0;
110
88
  bottom: 0;
89
+ left: var(--zd_size18);
111
90
  margin: auto 0;
112
91
  }
113
92
 
114
- [dir=ltr] .secondary .iconContainer {
115
- left: var(--zd_size18);
116
- }
117
-
118
- [dir=rtl] .secondary .iconContainer {
119
- right: var(--zd_size18);
120
- }
121
-
122
93
  .secondary .close {
123
94
  position: absolute;
124
95
  top: 0;
125
96
  bottom: 0;
97
+ right: var(--zd_size12);
98
+ margin: auto 0 auto var(--zd_size25);
126
99
  height: var(--zd_size25);
127
- }
128
-
129
- [dir=ltr] .secondary .close {
130
- right: var(--zd_size12);
131
- margin: auto 0 auto var(--zd_size25);
132
- }
133
-
134
- [dir=rtl] .secondary .close {
135
- left: var(--zd_size12);
136
- margin: auto var(--zd_size25) auto 0;
137
100
  }
@@ -119,6 +119,7 @@
119
119
  .btn {
120
120
  height: 100%;
121
121
  width: 100%;
122
+ color:var(--dot_mirror)
122
123
  }
123
124
  .popupWrapper {
124
125
  padding: var(--zd_size10) 0;