@zohodesk/dot 1.0.0-temp-68 → 1.0.0-temp-69

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 (105) hide show
  1. package/README.md +1 -0
  2. package/es/ActionButton/ActionButton.module.css +25 -9
  3. package/es/AlphabeticList/AlphabeticList.module.css +7 -4
  4. package/es/Attachment/Attachment.module.css +20 -9
  5. package/es/ChannelIcon/ChannelIcon.module.css +30 -21
  6. package/es/Drawer/Drawer.module.css +59 -11
  7. package/es/FlipCard/FlipCard.module.css +14 -5
  8. package/es/FormAction/FormAction.module.css +34 -9
  9. package/es/FreezeLayer/FreezeLayer.module.css +6 -2
  10. package/es/IconButton/IconButton.module.css +1 -1
  11. package/es/ImportantNotes/ImportantNotes.module.css +7 -2
  12. package/es/Loader/Loader.module.css +25 -4
  13. package/es/Message/Message.module.css +42 -9
  14. package/es/MessageBanner/MessageBanner.module.css +12 -4
  15. package/es/NewStar/NewStar.module.css +42 -5
  16. package/es/ToastMessage/ToastMessage.module.css +96 -25
  17. package/es/Upload/Upload.module.css +27 -8
  18. package/es/alert/AlertHeader/AlertHeader.module.css +21 -3
  19. package/es/alert/AlertLookup/AlertLookup.module.css +6 -2
  20. package/es/avatar/AvatarClose/AvatarClose.module.css +9 -3
  21. package/es/avatar/AvatarCollision/AvatarCollision.module.css +18 -4
  22. package/es/avatar/AvatarIcon/AvatarIcon.module.css +3 -4
  23. package/es/avatar/AvatarStatus/AvatarStatus.module.css +59 -9
  24. package/es/avatar/AvatarThread/AvatarThread.module.css +55 -5
  25. package/es/avatar/AvatarUser/AvatarUser.module.css +81 -10
  26. package/es/avatar/AvatarWithTeam/AvatarWithTeam.module.css +10 -3
  27. package/es/deprecated/SelectDropdown/SelectDropdown.module.css +11 -3
  28. package/es/dropdown/ToggleDropDown/ToggleDropDown.module.css +19 -6
  29. package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css +12 -4
  30. package/es/emptystate/EditionPage/EditionPage.css +9 -3
  31. package/es/errorstate/EmptyStates.module.css +13 -10
  32. package/es/errorstate/Inconvenience/Inconvenience.module.css +3 -0
  33. package/es/errorstate/LinkText/LinkText.module.css +1 -1
  34. package/es/errorstate/PermissionPlay/PermissionPlay.module.css +2 -2
  35. package/es/errorstate/WillBack/WillBack.module.css +1 -3
  36. package/es/form/fields/Fields.module.css +49 -14
  37. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.module.css +19 -7
  38. package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.module.css +4 -1
  39. package/es/form/fields/TextEditor/TextEditor.module.css +150 -73
  40. package/es/form/fields/TextEditorWrapper/TextEditorWrapper.module.css +13 -2
  41. package/es/form/fields/ValidationMessage/ValidationMessage.module.css +9 -4
  42. package/es/layout/SetupDetailLayout/SetupDetailLayout.module.css +52 -16
  43. package/es/layout/SubtabLayout/SubtabLayout.module.css +55 -29
  44. package/es/list/BluePrintStatus/BluePrintStatus.module.css +4 -1
  45. package/es/list/Comment/Comment.module.css +5 -0
  46. package/es/list/DotNew/DotNew.module.css +3 -3
  47. package/es/list/GridStencils/GridStencils.module.css +70 -16
  48. package/es/list/Icons/Icons.module.css +1 -1
  49. package/es/list/ListLayout/ListLayout.module.css +22 -14
  50. package/es/list/ListStencils/ListStencils.module.css +11 -6
  51. package/es/list/SecondaryText/AccountName.js +38 -34
  52. package/es/list/SecondaryText/ContactName.js +13 -18
  53. package/es/list/SecondaryText/SecondaryText.module.css +37 -12
  54. package/es/list/SentimentStatus/SentimentStatus.module.css +4 -1
  55. package/es/list/TagNew/TagNew.module.css +14 -7
  56. package/es/list/Thread/Thread.module.css +13 -1
  57. package/es/list/UserTime/UserTime.module.css +6 -0
  58. package/es/list/listCommon.module.css +9 -1
  59. package/es/list/status/StatusDropdown/StatusDropdown.module.css +19 -6
  60. package/es/list/status/StatusListItem/StatusListItem.module.css +38 -15
  61. package/es/lookup/Lookup/Lookup.module.css +2 -2
  62. package/es/lookup/Section/LookupSection.module.css +2 -2
  63. package/es/lookup/header/Close/LookupClose.module.css +4 -4
  64. package/es/lookup/header/Search/LookupSearch.module.css +21 -12
  65. package/es/lookup/header/TicketHeader/TicketHeader.module.css +5 -2
  66. package/es/lookup/header/ViewDropDown/ViewDropDown.module.css +8 -3
  67. package/es/lookup/header/lookupHeaderCommon.module.css +16 -6
  68. package/es/lookup/header/lookupHeaderCommonResponsive.module.css +12 -3
  69. package/es/setup/header/Button/HeaderButton.module.css +3 -1
  70. package/es/setup/header/Link/HeaderLink.module.css +7 -1
  71. package/es/setup/header/Search/Search.module.css +19 -8
  72. package/es/setup/header/Views/Views.module.css +15 -5
  73. package/es/setup/helptips/Link/HelpTipsLink.module.css +1 -0
  74. package/es/setup/helptips/ListGroup/ListGroup.module.css +6 -1
  75. package/es/setup/table/TableData/SetupTableData.module.css +11 -3
  76. package/es/setup/table/TableHead/SetupTableHead.module.css +4 -0
  77. package/es/setup/table/TableRow/SetupTableRow.module.css +6 -2
  78. package/es/version2/AlertClose/AlertClose.module.css +1 -1
  79. package/es/version2/GlobalNotification/GlobalNotification.module.css +44 -9
  80. package/es/version2/lookup/AlertHeader/AlertHeaderNew.module.css +25 -2
  81. package/es/version2/lookup/AlertLookup/AlertLookupNew.module.css +7 -3
  82. package/es/version2/lookup/alertLookupCommonNew.module.css +8 -1
  83. package/es/version2/notification/DesktopNotification/DesktopNotification.module.css +26 -10
  84. package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css +47 -10
  85. package/lib/ActionButton/ActionButton.module.css +0 -1
  86. package/lib/FreezeLayer/FreezeLayer.js +31 -4
  87. package/lib/Provider/Config.js +21 -0
  88. package/lib/deprecated/utils/General.js +29 -0
  89. package/lib/form/fields/CheckBoxField/CheckBoxField.js +1 -1
  90. package/lib/form/fields/CurrencyField/CurrencyField.js +8 -7
  91. package/lib/form/fields/DateField/DateField.js +1 -1
  92. package/lib/form/fields/MultiSelectField/MultiSelectField.js +1 -1
  93. package/lib/form/fields/PhoneField/PhoneField.js +1 -1
  94. package/lib/form/fields/RadioField/RadioField.js +1 -1
  95. package/lib/form/fields/SelectField/SelectField.js +1 -1
  96. package/lib/form/fields/TextBoxField/TextBoxField.js +1 -1
  97. package/lib/form/fields/TextEditor/TextEditor.module.css +13 -2
  98. package/lib/form/fields/TextareaField/TextareaField.js +1 -1
  99. package/lib/list/SecondaryText/AccountName.js +38 -34
  100. package/lib/list/SecondaryText/ContactName.js +13 -18
  101. package/lib/list/SecondaryText/SecondaryText.module.css +28 -13
  102. package/lib/list/status/StatusDropdown/StatusDropdown.js +44 -37
  103. package/lib/setup/header/Views/Views.js +2 -2
  104. package/lib/utils/General.js +0 -24
  105. package/package.json +2 -2
@@ -1,25 +1,35 @@
1
1
  .container {
2
2
  min-height: var(--zd_size51);
3
3
  position: relative;
4
- padding: 0 var(--zd_size52) 0 var(--zd_size10);
5
4
  background-color: var(--zdt_lookupheader_default_bg);
6
5
  border-bottom: solid 1px var(--zdt_lookupheader_default_border);
6
+ }[dir=ltr] .container {
7
+ padding: 0 var(--zd_size52) 0 var(--zd_size10);
8
+ }[dir=rtl] .container {
9
+ padding: 0 var(--zd_size10) 0 var(--zd_size52);
7
10
  }
8
- .searchContainer,
9
- .title {
11
+ .searchContainer, .title {
10
12
  margin: 0 var(--zd_size20);
11
13
  }
12
- .searchContainer {
14
+ [dir=ltr] .searchContainer {
13
15
  text-align: right;
14
16
  }
17
+ [dir=rtl] .searchContainer {
18
+ text-align: left;
19
+ }
15
20
  .closeContainer {
16
21
  position: absolute;
17
- right: var(--zd_size30);
18
22
  top: 50%;
19
23
  composes: middleY from '~@zohodesk/components/lib/common/common.module.css';
20
24
  }
25
+ [dir=ltr] .closeContainer {
26
+ right: var(--zd_size30);
27
+ }
28
+ [dir=rtl] .closeContainer {
29
+ left: var(--zd_size30);
30
+ }
21
31
  .para {
22
- margin: 0 var(--zd_size20);
23
32
  font-size: var(--zd_font_size12);
24
33
  color: var(--zdt_lookupheader_para_text);
34
+ margin: 0 var(--zd_size20);
25
35
  }
@@ -1,15 +1,24 @@
1
1
  /* Responsive */
2
2
  .extraSmall {
3
- padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) 0;
4
3
  justify-content: normal;
5
4
  flex-direction: column;
6
5
  align-items: flex-start;
7
6
  }
7
+ [dir=ltr] .extraSmall {
8
+ padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) 0;
9
+ }
10
+ [dir=rtl] .extraSmall {
11
+ padding: var(--zd_size12) 0 var(--zd_size12) var(--zd_size45);
12
+ }
8
13
 
9
- .extraSmall .searchContainer {
14
+ [dir=ltr] .extraSmall .searchContainer {
10
15
  text-align: left;
11
16
  }
17
+
18
+ [dir=rtl] .extraSmall .searchContainer {
19
+ text-align: right;
20
+ }
12
21
  .extraSmall .searchContainer input {
13
- border-bottom: 1px solid var(--zdt_lookupheader_input_border);
14
22
  width: var(--zd_size193);
23
+ border-bottom: 1px solid var(--zdt_lookupheader_input_border);
15
24
  }
@@ -1,3 +1,5 @@
1
- .container {
1
+ [dir=ltr] .container {
2
2
  margin-right: var(--zd_size15);
3
+ }[dir=rtl] .container {
4
+ margin-left: var(--zd_size15);
3
5
  }
@@ -2,11 +2,17 @@
2
2
  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
3
3
  color: var(--zdt_headerlink_text);
4
4
  font-size: var(--zd_font_size12);
5
+ }[dir=ltr] .container {
5
6
  margin-right: var(--zd_size15);
7
+ }[dir=rtl] .container {
8
+ margin-left: var(--zd_size15);
6
9
  }
7
- .icon {
10
+ [dir=ltr] .icon {
8
11
  margin-right: var(--zd_size5);
9
12
  }
13
+ [dir=rtl] .icon {
14
+ margin-left: var(--zd_size5);
15
+ }
10
16
  .container:hover .text {
11
17
  border-bottom: 1px solid var(--zdt_headerlink_hover_text);
12
18
  }
@@ -2,43 +2,55 @@
2
2
  position: relative;
3
3
  transition: width var(--zd_transition3);
4
4
  width: var(--zd_size90);
5
+ }[dir=ltr] .container {
5
6
  margin-right: var(--zd_size15);
7
+ }[dir=rtl] .container {
8
+ margin-left: var(--zd_size15);
6
9
  }
7
10
  .active {
8
11
  width: var(--zd_size180);
9
12
  }
10
- .active .input,
11
- .input:hover {
13
+ .active .input, .input:hover {
12
14
  border-bottom-color: var(--zdt_search_input_border);
13
15
  }
14
16
  .icon {
15
17
  position: absolute;
16
18
  top: 0;
17
- right: 0;
18
19
  bottom: 0;
19
20
  color: var(--zdt_search_icon);
20
21
  line-height: var(--zd_size26);
21
22
  cursor: pointer;
22
23
  }
24
+ [dir=ltr] .icon {
25
+ right: 0;
26
+ }
27
+ [dir=rtl] .icon {
28
+ left: 0;
29
+ }
23
30
  .icon:hover {
24
31
  color: var(--zdt_search_hover_icon);
25
32
  }
26
33
  .input {
27
- border: 0;
28
34
  height: var(--zd_size26);
29
35
  font-size: var(--zd_font_size13);
30
36
  width: 100%;
31
37
  letter-spacing: 0.2px;
32
- border-bottom: 1px solid transparent;
33
38
  transition: all var(--zd_transition3) ease;
34
39
  color: var(--zdt_search_input_text);
35
40
  font-family: var(--zd_regular);
36
41
  -webkit-appearance: none;
37
42
  -moz-appearance: none;
38
43
  appearance: none;
39
- padding-right: var(--zd_size20);
44
+ border: 0;
45
+ border-bottom: 1px solid transparent;
40
46
  background: var(--zdt_search_input_bg);
41
47
  }
48
+ [dir=ltr] .input {
49
+ padding-right: var(--zd_size20);
50
+ }
51
+ [dir=rtl] .input {
52
+ padding-left: var(--zd_size20);
53
+ }
42
54
  .input::placeholder {
43
55
  color: var(--zdt_search_placeholder_text);
44
56
  }
@@ -51,7 +63,6 @@
51
63
  .input::-ms-placeholder {
52
64
  color: var(--zdt_search_placeholder_text);
53
65
  }
54
- .input:focus,
55
- .active .input:focus {
66
+ .input:focus, .active .input:focus {
56
67
  border-bottom-color: var(--zdt_search_input_focus_border);
57
68
  }
@@ -1,24 +1,34 @@
1
1
  .container {
2
2
  display: inline-block;
3
+ }[dir=ltr] .container {
3
4
  margin-right: var(--zd_size15);
5
+ }[dir=rtl] .container {
6
+ margin-left: var(--zd_size15);
4
7
  }
5
8
  .icon {
6
9
  display: inline-block;
7
- text-align: center;
8
- cursor: pointer;
9
10
  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);
14
17
  }
15
- .first {
18
+ [dir=ltr] .first {
16
19
  border-radius: 2px 0 0 2px;
17
20
  }
18
- .last {
21
+ [dir=rtl] .first {
22
+ border-radius: 0 2px 2px 0;
23
+ }
24
+ [dir=ltr] .last {
19
25
  border-radius: 0 2px 2px 0;
20
26
  border-left-width: 0;
21
27
  }
28
+ [dir=rtl] .last {
29
+ border-radius: 2px 0 0 2px;
30
+ border-right-width: 0;
31
+ }
22
32
  .icon:hover {
23
33
  color: var(--zdt_views_hover_icon);
24
34
  }
@@ -2,5 +2,6 @@
2
2
  .text {
3
3
  color: var(--zdt_helptipslink_text);
4
4
  font-size: var(--zd_font_size14);
5
+ }.container > a, .text {
5
6
  margin: var(--zd_size10) 0;
6
7
  }
@@ -5,10 +5,15 @@
5
5
  }
6
6
  .unOrderData,
7
7
  .orderData {
8
- margin: var(--zd_size15) 0 var(--zd_size15) var(--zd_size7);
9
8
  font-size: var(--zd_font_size14);
10
9
  color: var(--zdt_listgroup_text);
11
10
  }
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
+ }
12
17
  .orderData {
13
18
  list-style: decimal;
14
19
  }
@@ -1,5 +1,7 @@
1
- .container {
1
+ [dir=ltr] .container {
2
2
  padding-left: var(--zd_size20);
3
+ }[dir=rtl] .container {
4
+ padding-right: var(--zd_size20);
3
5
  }
4
6
  .size70 {
5
7
  flex-basis: var(--zd_size70);
@@ -28,9 +30,15 @@
28
30
  .center {
29
31
  text-align: center;
30
32
  }
31
- .left {
33
+ [dir=ltr] .left {
32
34
  text-align: left;
33
35
  }
34
- .right {
36
+ [dir=rtl] .left {
35
37
  text-align: right;
36
38
  }
39
+ [dir=ltr] .right {
40
+ text-align: right;
41
+ }
42
+ [dir=rtl] .right {
43
+ text-align: left;
44
+ }
@@ -1,7 +1,11 @@
1
1
  .container {
2
2
  border-bottom: 1px solid var(--zdt_setuptablehead_border);
3
+ }[dir=ltr] .container {
3
4
  padding-right: var(--zd_size40);
4
5
  padding-left: var(--zd_size40);
6
+ }[dir=rtl] .container {
7
+ padding-left: var(--zd_size40);
8
+ padding-right: var(--zd_size40);
5
9
  }
6
10
  .subContainer {
7
11
  height: var(--zd_size40);
@@ -1,9 +1,13 @@
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 {
3
6
  margin-right: var(--zd_size40);
4
7
  margin-left: var(--zd_size40);
5
- border-bottom: 1px solid var(--zdt_setuptablerow_border);
6
- height: var(--zd_size52);
8
+ }[dir=rtl] .container {
9
+ margin-left: var(--zd_size40);
10
+ margin-right: var(--zd_size40);
7
11
  }
8
12
  .container:hover {
9
13
  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);
4
5
  border-radius: var(--zd_size4);
5
6
  cursor: pointer;
6
- color: var(--zdt_commonalert_close_icon);
7
7
  }
8
8
 
9
9
  .closeIcon {
@@ -11,25 +11,38 @@
11
11
  top: 0;
12
12
  z-index: 1000;
13
13
  /*Hook for editor alert*/
14
- right: 0;
14
+ pointer-events: none;
15
15
  text-align: center;
16
+ }
17
+ [dir=ltr] .message {
18
+ right: 0;
16
19
  left: 0;
17
- pointer-events: none;
20
+ }
21
+ [dir=rtl] .message {
22
+ left: 0;
23
+ right: 0;
18
24
  }
19
25
 
20
26
  .container {
21
- padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75);
22
27
  position: relative;
23
28
  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';
24
32
  box-shadow: 0 4px 20px var(--globalnotification_box_shadow);
25
33
  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
26
34
  background-color: var(--globalnotification_bg_color);
27
35
  border-style: solid;
28
36
  border-color: var(--commonalert_border_color);
29
37
  border-width: 2px 1px 1px 1px;
30
- color: var(--globalnotification_text_color);
31
- max-width: var(--zd_size490);
32
- composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
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);
33
46
  }
34
47
 
35
48
  .icon {
@@ -38,10 +51,17 @@
38
51
  position: absolute;
39
52
  top: 0;
40
53
  bottom: 0;
41
- left: var(--zd_size18);
42
54
  margin: auto 0;
43
55
  }
44
56
 
57
+ [dir=ltr] .icon {
58
+ left: var(--zd_size18);
59
+ }
60
+
61
+ [dir=rtl] .icon {
62
+ right: var(--zd_size18);
63
+ }
64
+
45
65
  .success {
46
66
  --commonalert_border_color: var(--zdt_commonalert_success_border);
47
67
  --globalnotification_bg_color: var(--zdt_globalnotification_success_bg);
@@ -76,15 +96,30 @@
76
96
  font-size: var(--zd_font_size14);
77
97
  font-family: var(--zd_semibold);
78
98
  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
79
- text-align: left;
80
99
  line-height: var(--zd_size20);
81
100
  }
82
101
 
102
+ [dir=ltr] .text {
103
+ text-align: left;
104
+ }
105
+
106
+ [dir=rtl] .text {
107
+ text-align: right;
108
+ }
109
+
83
110
  .close {
84
111
  position: absolute;
85
112
  top: 0;
86
113
  bottom: 0;
114
+ height: var(--zd_size25);
115
+ }
116
+
117
+ [dir=ltr] .close {
87
118
  right: var(--zd_size12);
88
119
  margin: auto 0 auto var(--zd_size25);
89
- height: var(--zd_size25);
120
+ }
121
+
122
+ [dir=rtl] .close {
123
+ left: var(--zd_size12);
124
+ margin: auto var(--zd_size25) auto 0;
90
125
  }
@@ -11,8 +11,13 @@
11
11
  }
12
12
  .headerLayout {
13
13
  min-height: var(--zd_size54);
14
+ }
15
+ [dir=ltr] .headerLayout {
14
16
  padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20);
15
17
  }
18
+ [dir=rtl] .headerLayout {
19
+ padding: var(--zd_size15) var(--zd_size20) 0 var(--zd_size45);
20
+ }
16
21
 
17
22
  .success {
18
23
  --commonalert_border_color: var(--zdt_commonalert_success_border);
@@ -34,10 +39,14 @@
34
39
  --commonalert_border_color: var(--zdt_commonalert_warning_border);
35
40
  }
36
41
 
37
- .extraSmall {
42
+ [dir=ltr] .extraSmall {
38
43
  padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) var(--zd_size16);
39
44
  }
40
45
 
46
+ [dir=rtl] .extraSmall {
47
+ padding: var(--zd_size12) var(--zd_size16) var(--zd_size12) var(--zd_size45);
48
+ }
49
+
41
50
  .iconContainer {
42
51
  height: var(--zd_size51);
43
52
  width: var(--zd_size51);
@@ -45,7 +54,6 @@
45
54
 
46
55
  .title {
47
56
  color: var(--zdt_alertlookupnew_text);
48
- margin: 0 var(--zd_size5) 0 var(--zd_size10);
49
57
  font-size: var(--zd_font_size18);
50
58
  line-height: var(--zd_size22);
51
59
  font-family: var(--zd_bold);
@@ -53,6 +61,14 @@
53
61
  vertical-align: middle;
54
62
  }
55
63
 
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
+
56
72
  .iconStyle {
57
73
  display: block;
58
74
  }
@@ -60,5 +76,12 @@
60
76
  .close {
61
77
  position: absolute;
62
78
  top: var(--zd_size12);
79
+ }
80
+
81
+ [dir=ltr] .close {
63
82
  right: var(--zd_size12);
83
+ }
84
+
85
+ [dir=rtl] .close {
86
+ left: var(--zd_size12);
64
87
  }
@@ -3,17 +3,21 @@
3
3
  }
4
4
 
5
5
  .innerSection {
6
- padding: var(--zd_size17) var(--zd_size30) var(--zd_size30);
7
6
  color: var(--zdt_alertlookupnew_text);
8
7
  font-size: var(--zd_font_size14);
9
8
  line-height: var(--zd_size18);
10
9
  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
- .buttonGap {
13
+ [dir=ltr] .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
+
17
21
  .confirmMsgText {
18
22
  margin-top: var(--zd_size20);
19
23
  }
@@ -23,8 +27,8 @@
23
27
  }
24
28
 
25
29
  .footer {
26
- border-radius: 0 0 var(--zd_size10) var(--zd_size10);
27
30
  overflow: hidden;
31
+ border-radius: 0 0 var(--zd_size10) var(--zd_size10);
28
32
  }
29
33
  .horizontalScroll, .verticalScroll, .bothScroll {
30
34
  height: 100%;
@@ -2,9 +2,16 @@
2
2
 
3
3
  .noteContainer {
4
4
  padding: var(--zd_size4) var(--zd_size30) 0;
5
+ }
6
+
7
+ [dir=ltr] .noteContainer {
5
8
  border-left: solid 1px var(--zdt_alertlookup_border);
6
9
  }
7
10
 
11
+ [dir=rtl] .noteContainer {
12
+ border-right: solid 1px var(--zdt_alertlookup_border);
13
+ }
14
+
8
15
  .noteTitle {
9
16
  font-size: var(--zd_font_size13);
10
17
  font-family: var(--zd_semibold);
@@ -20,7 +27,7 @@
20
27
  font-size: var(--zd_font_size12);
21
28
  /* line-height: var(--zd_size14); */
22
29
  color: var(--zdt_alertlookuop_text);
23
- margin-bottom: var(--zd_size15);
24
30
  list-style-type: disc;
25
31
  line-height: initial;
32
+ margin-bottom: var(--zd_size15);
26
33
  }
@@ -1,17 +1,22 @@
1
1
  .parentElement {
2
- margin-bottom: var(--zd_size7);
3
2
  position: relative;
3
+ margin-bottom: var(--zd_size7);
4
4
  }
5
5
  .container {
6
- background-color: var(--zdt_desktopnotification_bg);
7
6
  color: var(--zdt_desktopnotification_text);
8
7
  transition: all var(--zd_transition4);
9
8
  position: relative;
10
- transform-origin: right center;
11
9
  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
- pointer-events: auto;
14
+ }
15
+ [dir=ltr] .container {
16
+ transform-origin: right center;
17
+ }
18
+ [dir=rtl] .container {
19
+ transform-origin: left center;
15
20
  }
16
21
  .globalNotify {
17
22
  max-width: var(--zd_size490);
@@ -27,11 +32,17 @@
27
32
  /* Animation Style */
28
33
  .closeAnimation {
29
34
  max-height: 0;
30
- margin-bottom: 0;
31
35
  transition: all var(--zd_transition3) 0.4s;
36
+ margin-bottom: 0;
32
37
  }
33
38
  .animation {
34
39
  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 {
35
46
  animation-duration: var(--zd_transition4);
36
47
  -webkit-animation-duration: var(--zd_transition4);
37
48
  }
@@ -40,8 +51,8 @@
40
51
  composes: animation;
41
52
  }
42
53
  .leftnoanimate {
43
- transform: translateX(0) scale(1);
44
54
  opacity: 1;
55
+ transform: translateX(0) scale(1);
45
56
  }
46
57
  .rightanimate {
47
58
  composes: slideRight from '~@zohodesk/components/lib/common/animation.module.css';
@@ -50,15 +61,20 @@
50
61
  }
51
62
  /* Container Style */
52
63
  .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;
56
64
  position: relative;
57
65
  color: var(--zd_smoke18);
58
66
  font-size: var(--zd_font_size11);
59
67
  composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
60
68
  height: var(--zd_size33);
61
69
  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);
62
78
  }
63
79
  .message:hover {
64
80
  background: var(--zd_alabaster);
@@ -85,6 +101,6 @@
85
101
  margin-top: var(--zd_size20);
86
102
  }
87
103
  .footer {
88
- border-radius: 0 0 var(--zd_size10) var(--zd_size10);
89
104
  overflow: hidden;
105
+ border-radius: 0 0 var(--zd_size10) var(--zd_size10);
90
106
  }