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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (163) hide show
  1. package/README.md +13 -0
  2. package/es/ActionButton/ActionButton.js +7 -4
  3. package/es/ActionButton/ActionButton.module.css +9 -25
  4. package/es/AlphabeticList/AlphabeticList.module.css +4 -7
  5. package/es/Attachment/Attachment.module.css +9 -20
  6. package/es/AttachmentViewer/AttachmentViewer.module.css +27 -89
  7. package/es/ChannelIcon/ChannelIcon.module.css +21 -30
  8. package/es/Drawer/Drawer.module.css +11 -59
  9. package/es/FlipCard/FlipCard.module.css +5 -14
  10. package/es/FormAction/FormAction.module.css +9 -34
  11. package/es/FreezeLayer/FreezeLayer.module.css +2 -6
  12. package/es/IconButton/IconButton.module.css +1 -1
  13. package/es/ImportantNotes/ImportantNotes.module.css +2 -7
  14. package/es/Loader/Loader.module.css +4 -25
  15. package/es/Message/Message.module.css +9 -42
  16. package/es/MessageBanner/MessageBanner.module.css +4 -12
  17. package/es/NewStar/NewStar.module.css +5 -42
  18. package/es/Provider.js +5 -105
  19. package/es/ToastMessage/ToastMessage.module.css +25 -96
  20. package/es/Upload/Upload.module.css +8 -27
  21. package/es/alert/AlertHeader/AlertHeader.module.css +3 -21
  22. package/es/alert/AlertLookup/AlertLookup.module.css +2 -6
  23. package/es/avatar/AvatarClose/AvatarClose.module.css +3 -9
  24. package/es/avatar/AvatarCollision/AvatarCollision.module.css +4 -18
  25. package/es/avatar/AvatarIcon/AvatarIcon.module.css +4 -3
  26. package/es/avatar/AvatarStatus/AvatarStatus.module.css +9 -59
  27. package/es/avatar/AvatarThread/AvatarThread.module.css +5 -55
  28. package/es/avatar/AvatarUser/AvatarUser.module.css +10 -81
  29. package/es/avatar/AvatarWithTeam/AvatarWithTeam.module.css +3 -10
  30. package/es/common/dot_animation.module.css +3 -16
  31. package/es/deprecated/SelectDropdown/SelectDropdown.module.css +3 -11
  32. package/es/docs/formDocs.js +5 -1
  33. package/es/docs/generalDocs.js +5 -2
  34. package/es/dropdown/ToggleDropDown/ToggleDropDown.module.css +9 -21
  35. package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css +4 -12
  36. package/es/emptystate/EditionPage/EditionPage.css +3 -9
  37. package/es/errorstate/EmptyStates.module.css +10 -13
  38. package/es/errorstate/Inconvenience/Inconvenience.module.css +0 -3
  39. package/es/errorstate/LinkText/LinkText.module.css +1 -1
  40. package/es/errorstate/PermissionPlay/PermissionPlay.module.css +2 -2
  41. package/es/errorstate/WillBack/WillBack.module.css +3 -1
  42. package/es/form/fields/CheckBoxField/CheckBoxField.js +16 -28
  43. package/es/form/fields/CheckBoxField/docs/CheckBoxField__default.docs.js +8 -1
  44. package/es/form/fields/CurrencyField/CurrencyField.js +16 -29
  45. package/es/form/fields/CurrencyField/docs/CurrencyField__default.docs.js +36 -0
  46. package/es/form/fields/DateField/DateField.js +16 -28
  47. package/es/form/fields/DateField/docs/DateField__default.docs.js +8 -1
  48. package/es/form/fields/FieldContainer/FieldContainer.js +82 -0
  49. package/es/form/fields/FieldContainer/docs/FieldContainer__default.docs.js +49 -0
  50. package/es/form/fields/Fields.module.css +14 -49
  51. package/es/form/fields/MultiSelectField/MultiSelectField.js +16 -28
  52. package/es/form/fields/MultiSelectField/docs/MultiSelectField__default.docs.js +8 -1
  53. package/es/form/fields/SelectField/SelectField.js +16 -28
  54. package/es/form/fields/SelectField/docs/SelectField__default.docs.js +8 -1
  55. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js +7 -4
  56. package/es/form/fields/TagsMultiSelect/TagsMultiSelect.module.css +7 -19
  57. package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.js +32 -28
  58. package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.module.css +1 -4
  59. package/es/form/fields/TextBoxField/TextBoxField.js +18 -43
  60. package/es/form/fields/TextBoxField/docs/TextBoxField__default.docs.js +28 -1
  61. package/es/form/fields/TextEditor/TextEditor.module.css +72 -149
  62. package/es/form/fields/TextEditorField/TextEditorField.js +27 -44
  63. package/es/form/fields/TextEditorField/docs/TextEditorField__default.docs.js +9 -2
  64. package/es/form/fields/TextEditorWrapper/TextEditorWrapper.module.css +2 -13
  65. package/es/form/fields/TextareaField/TextareaField.js +16 -28
  66. package/es/form/fields/TextareaField/docs/TextareaField__default.docs.js +8 -1
  67. package/es/form/fields/ValidationMessage/ValidationMessage.module.css +4 -9
  68. package/es/form/fields/props/FieldCommonDefaultProps.js +10 -0
  69. package/es/form/fields/props/FieldCommonPropTypes.js +22 -0
  70. package/es/layout/SetupDetailLayout/SetupDetailLayout.module.css +16 -52
  71. package/es/layout/SubtabLayout/SubtabLayout.module.css +29 -55
  72. package/es/list/BluePrintStatus/BluePrintStatus.module.css +1 -4
  73. package/es/list/Comment/Comment.module.css +0 -5
  74. package/es/list/DotNew/DotNew.module.css +3 -3
  75. package/es/list/GridStencils/GridStencils.module.css +21 -82
  76. package/es/list/Icons/Icons.module.css +1 -1
  77. package/es/list/ListLayout/ListLayout.module.css +14 -22
  78. package/es/list/ListStencils/ListStencils.module.css +6 -11
  79. package/es/list/SecondaryText/AccountName.js +34 -38
  80. package/es/list/SecondaryText/ContactName.js +18 -13
  81. package/es/list/SecondaryText/SecondaryText.module.css +14 -39
  82. package/es/list/SecondaryText/docs/SecondaryText__default.docs.js +114 -0
  83. package/es/list/SecondryPanel/docs/SecondryPanelDocs.module.css +2 -2
  84. package/es/list/SentimentStatus/SentimentStatus.module.css +1 -4
  85. package/es/list/TagNew/TagNew.module.css +7 -14
  86. package/es/list/Thread/Thread.module.css +1 -13
  87. package/es/list/UserTime/UserTime.module.css +0 -6
  88. package/es/list/listCommon.module.css +1 -9
  89. package/es/list/status/StatusDropdown/StatusDropdown.module.css +6 -19
  90. package/es/list/status/StatusListItem/StatusListItem.module.css +15 -38
  91. package/es/lookup/Lookup/Lookup.module.css +2 -2
  92. package/es/lookup/Section/LookupSection.module.css +2 -2
  93. package/es/lookup/header/Close/LookupClose.module.css +4 -4
  94. package/es/lookup/header/Search/LookupSearch.module.css +12 -21
  95. package/es/lookup/header/TicketHeader/TicketHeader.module.css +2 -5
  96. package/es/lookup/header/ViewDropDown/ViewDropDown.module.css +3 -8
  97. package/es/lookup/header/lookupHeaderCommon.module.css +5 -15
  98. package/es/lookup/header/lookupHeaderCommonResponsive.module.css +3 -12
  99. package/es/setup/header/Button/HeaderButton.module.css +1 -3
  100. package/es/setup/header/Link/HeaderLink.module.css +1 -7
  101. package/es/setup/header/Search/Search.module.css +8 -19
  102. package/es/setup/header/Views/Views.module.css +5 -15
  103. package/es/setup/helptips/Link/HelpTipsLink.module.css +0 -1
  104. package/es/setup/helptips/ListGroup/ListGroup.module.css +1 -6
  105. package/es/setup/table/TableData/SetupTableData.module.css +3 -11
  106. package/es/setup/table/TableHead/SetupTableHead.module.css +0 -4
  107. package/es/setup/table/TableRow/SetupTableRow.module.css +2 -6
  108. package/es/utils/KeyboardApi.js +294 -0
  109. package/es/version2/AlertClose/AlertClose.module.css +1 -1
  110. package/es/version2/GlobalNotification/GlobalNotification.module.css +9 -44
  111. package/es/version2/lookup/AlertHeader/AlertHeaderNew.module.css +2 -25
  112. package/es/version2/lookup/AlertLookup/AlertLookupNew.module.css +3 -7
  113. package/es/version2/lookup/alertLookupCommonNew.module.css +1 -8
  114. package/es/version2/notification/DesktopNotification/DesktopNotification.module.css +10 -26
  115. package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css +10 -47
  116. package/lib/ActionButton/ActionButton.js +3 -7
  117. package/lib/ActionButton/ActionButton.module.css +1 -0
  118. package/lib/FreezeLayer/FreezeLayer.js +4 -29
  119. package/lib/ImportantNotes/ImportantNotes.js +3 -5
  120. package/lib/Provider.js +38 -115
  121. package/lib/deprecated/SelectDropdown/SelectDropdown.js +38 -60
  122. package/lib/deprecated/SelectDropdown/SelectDropdown.module.css +0 -1
  123. package/lib/docs/generalDocs.js +0 -16
  124. package/lib/dropdown/ToggleDropDown/ToggleDropDown.js +161 -182
  125. package/lib/dropdown/ToggleDropDown/ToggleDropDown.module.css +0 -3
  126. package/lib/form/fields/CheckBoxField/CheckBoxField.js +1 -1
  127. package/lib/form/fields/CurrencyField/CurrencyField.js +8 -9
  128. package/lib/form/fields/DateField/DateField.js +1 -1
  129. package/lib/form/fields/MultiSelectField/MultiSelectField.js +1 -1
  130. package/lib/form/fields/PhoneField/PhoneField.js +1 -1
  131. package/lib/form/fields/RadioField/RadioField.js +1 -1
  132. package/lib/form/fields/SelectField/SelectField.js +1 -1
  133. package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js +73 -110
  134. package/lib/form/fields/TextBoxField/TextBoxField.js +1 -1
  135. package/lib/form/fields/TextEditor/TextEditor.js +1 -4
  136. package/lib/form/fields/TextEditor/TextEditor.module.css +2 -13
  137. package/lib/form/fields/TextareaField/TextareaField.js +1 -1
  138. package/lib/list/DepartmentDropDown/DepartmentDropDown.js +1 -1
  139. package/lib/list/GridStencils/GridStencils.module.css +1 -3
  140. package/lib/list/SecondaryText/AccountName.js +34 -38
  141. package/lib/list/SecondaryText/ContactName.js +18 -13
  142. package/lib/list/SecondaryText/SecondaryText.module.css +14 -29
  143. package/lib/list/status/StatusDropdown/StatusDropdown.js +118 -146
  144. package/lib/list/status/StatusDropdown/StatusDropdown.module.css +0 -3
  145. package/lib/lookup/header/ModuleHeader/ModuleHeader.js +3 -8
  146. package/lib/lookup/header/ModuleHeader/docs/ModuleHeader__default.docs.js +3 -13
  147. package/lib/lookup/header/TicketHeader/TicketHeader.js +4 -7
  148. package/lib/lookup/header/ViewDropDown/ViewDropDown.js +52 -75
  149. package/lib/lookup/header/lookupHeaderCommon.module.css +2 -8
  150. package/lib/setup/header/Views/Views.js +2 -2
  151. package/lib/utils/General.js +24 -0
  152. package/lib/{deprecated/utils → utils}/KeyboardApi.js +0 -0
  153. package/package.json +5 -5
  154. package/lib/AttachmentViewer/Attachment.js +0 -28
  155. package/lib/AttachmentViewer/AttachmentImage.js +0 -133
  156. package/lib/AttachmentViewer/AttachmentViewer.js +0 -646
  157. package/lib/AttachmentViewer/AttachmentViewer.module.css +0 -354
  158. package/lib/AttachmentViewer/docs/AttachmentViewer__default.docs.js +0 -123
  159. package/lib/AttachmentViewer/utils.js +0 -134
  160. package/lib/Provider/Config.js +0 -21
  161. package/lib/common/dot_animation.module.css +0 -27
  162. package/lib/common/dot_common.module.css +0 -4
  163. package/lib/deprecated/utils/General.js +0 -29
@@ -1,33 +1,26 @@
1
1
  .tagStyle {
2
+ border-radius: var(--zd_size14);
3
+ background-color: var(--zdt_tagnew_default_bg);
4
+ box-shadow: 0 8px 30px 0 var(--zdt_tagnew_default_box_shadow);
2
5
  min-width: var(--zd_size70);
3
6
  height: var(--zd_size28);
4
7
  font-size: var(--zd_font_size13);
5
8
  color: var(--zdt_tagnew_default_text);
9
+ padding: 0 var(--zd_size15);
6
10
  composes: inlineFlex from '../listCommon.module.css';
7
11
  composes: alignHorizontal from '~@zohodesk/components/lib/common/common.module.css';
12
+ transform: scale(0);
8
13
  transition: all var(--zd_transition2) ease 0s;
9
14
  opacity: 0;
10
15
  visibility: hidden;
11
- border-radius: var(--zd_size14);
12
- background-color: var(--zdt_tagnew_default_bg);
13
- box-shadow: 0 8px 30px 0 var(--zdt_tagnew_default_box_shadow);
14
- padding: 0 var(--zd_size15);
15
- transform: scale(0);
16
16
  cursor: pointer;
17
17
  }
18
18
 
19
19
  .bounceIn {
20
- visibility: visible;
21
- opacity: 1;
22
20
  transform: scale(1);
23
- }
24
-
25
- [dir=ltr] .bounceIn {
26
- animation: bounceIn 700ms;
27
- }
28
-
29
- [dir=rtl] .bounceIn {
30
21
  animation: bounceIn 700ms;
22
+ visibility: visible;
23
+ opacity: 1;
31
24
  }
32
25
 
33
26
  @keyframes bounceIn {
@@ -16,15 +16,9 @@
16
16
  .align_left .count {
17
17
  position: absolute;
18
18
  line-height: normal;
19
- top: var(--zd_size3);
20
- }
21
- [dir=ltr] .align_left .count {
22
19
  text-align: left;
23
20
  left: var(--zd_size8);
24
- }
25
- [dir=rtl] .align_left .count {
26
- text-align: right;
27
- right: var(--zd_size8);
21
+ top: var(--zd_size3);
28
22
  }
29
23
  .align_right {
30
24
  composes: dInflex alignFend from '~@zohodesk/components/lib/common/common.module.css';
@@ -32,12 +26,6 @@
32
26
  .align_right .count {
33
27
  position: relative;
34
28
  bottom: var(--zd_size2);
35
- }
36
- [dir=ltr] .align_right .count {
37
29
  right: var(--zd_size5);
38
30
  float: right;
39
- }
40
- [dir=rtl] .align_right .count {
41
- left: var(--zd_size5);
42
- float: left;
43
31
  }
@@ -31,15 +31,9 @@
31
31
  }
32
32
  .iconStyle {
33
33
  display: block;
34
- }
35
- [dir=ltr] .iconStyle {
36
34
  margin-right: var(--zd_size3);
37
35
  margin-left: var(--zd_size1);
38
36
  }
39
- [dir=rtl] .iconStyle {
40
- margin-left: var(--zd_size3);
41
- margin-right: var(--zd_size1);
42
- }
43
37
  /* colors */
44
38
  .iconColor {
45
39
  color: var(--icon_color)
@@ -5,12 +5,9 @@
5
5
  .inlineFlex {
6
6
  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
7
7
  }
8
- [dir=ltr] .avatarMargin {
8
+ .avatarMargin {
9
9
  margin-right: var(--zd_size25);
10
10
  }
11
- [dir=rtl] .avatarMargin {
12
- margin-left: var(--zd_size25);
13
- }
14
11
  .subject {
15
12
  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
16
13
  font-size: var(--zd_font_size16);
@@ -21,13 +18,8 @@
21
18
  }
22
19
  .statusColumn {
23
20
  composes: inlineBlockMiddle;
24
- }
25
- [dir=ltr] .statusColumn {
26
21
  text-align: right;
27
22
  }
28
- [dir=rtl] .statusColumn {
29
- text-align: left;
30
- }
31
23
  .classic .floatingIconContainer {
32
24
  display: none;
33
25
  }
@@ -14,23 +14,16 @@
14
14
  .title {
15
15
  padding-top: var(--zd_size6);
16
16
  }
17
- [dir=ltr] .default_arrow, [dir=ltr] .overlay_arrow {
17
+ .default_arrow,
18
+ .overlay_arrow {
18
19
  padding: 0 0 0 var(--zd_size5);
19
20
  }
20
- [dir=rtl] .default_arrow, [dir=rtl] .overlay_arrow {
21
- padding: 0 var(--zd_size5) 0 0;
22
- }
23
21
  .overlay_arrow {
24
22
  position: absolute;
23
+ left: 100%;
25
24
  top: 50%;
26
25
  transform: translateY(-50%) perspective(1px);
27
26
  }
28
- [dir=ltr] .overlay_arrow {
29
- left: 100%;
30
- }
31
- [dir=rtl] .overlay_arrow {
32
- right: 100%;
33
- }
34
27
  .hoverIcon .arrow {
35
28
  opacity: 0;
36
29
  visibility: hidden;
@@ -57,18 +50,12 @@
57
50
  .cursor {
58
51
  cursor: pointer;
59
52
  }
60
- [dir=ltr] .dropBoxContainer {
53
+ .dropBoxContainer {
61
54
  text-align: left;
62
55
  }
63
- [dir=rtl] .dropBoxContainer {
64
- text-align: right;
65
- }
66
- [dir=ltr] .iconBox {
56
+ .iconBox {
67
57
  margin-right: var(--zd_size4);
68
58
  }
69
- [dir=rtl] .iconBox {
70
- margin-left: var(--zd_size4);
71
- }
72
59
  .iconBox > i {
73
60
  display: block;
74
61
  }
@@ -77,8 +64,8 @@
77
64
  margin: 0 auto;
78
65
  }
79
66
  .seperatedLine {
80
- height: var(--zd_size1);
81
67
  border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
68
+ height: var(--zd_size1);
82
69
  margin: var(--zd_size9) 0 var(--zd_size10);
83
70
  }
84
71
  .hiddenInput {
@@ -2,56 +2,46 @@
2
2
  color: var(--zdt_statuslistitem_list_text);
3
3
  font-size: var(--zd_font_size13);
4
4
  position: relative;
5
- list-style: none;
6
5
  cursor: pointer;
6
+ list-style: none;
7
7
  }
8
- [dir=ltr] .withBorder {
8
+ .withBorder {
9
9
  border-left: 1px solid var(--zdt_statuslistitem_default_border);
10
10
  }
11
- [dir=rtl] .withBorder {
12
- border-right: 1px solid var(--zdt_statuslistitem_default_border);
13
- }
14
- [dir=ltr] .small {
11
+ .small {
15
12
  padding: var(--zd_size9) var(--zd_size3) var(--zd_size9) var(--zd_size5);
16
13
  }
17
- [dir=rtl] .small {
18
- padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
19
- }
20
14
  .medium {
21
15
  padding: var(--zd_size9) var(--zd_size20);
22
16
  }
23
17
  .large {
24
- height: var(--zd_size48);
25
- }
26
- [dir=ltr] .large {
27
18
  padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
28
- }
29
- [dir=rtl] .large {
30
- padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
19
+ height: var(--zd_size48);
31
20
  }
32
21
 
33
22
  .value {
34
23
  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
35
24
  }
36
25
 
37
- [dir=ltr] .withBorder.active {
26
+ .withBorder.active {
38
27
  border-left-color: var(--zdt_statuslistitem_default_active_border);
39
28
  }
40
29
 
41
- [dir=rtl] .withBorder.active {
42
- border-right-color: var(--zdt_statuslistitem_default_active_border);
43
- }
44
-
45
- .default.hover, .default.effect:hover {
30
+ .default.hover,
31
+ .default.effect:hover {
46
32
  background-color: var(--zdt_statuslistitem_default_effect_bg);
47
33
  }
48
- .primary.hover, .primary.effect:hover, .selected {
34
+ .primary.hover,
35
+ .primary.effect:hover,
36
+ .selected {
49
37
  background-color: var(--zdt_statuslistitem_primary_efffect_bg);
50
38
  }
51
- .secondary.hover, .secondary.effect:hover {
39
+ .secondary.hover,
40
+ .secondary.effect:hover {
52
41
  background-color: var(--zdt_statuslistitem_secondary_effect_bg);
53
42
  }
54
- .list.active.default, .list.active.primary {
43
+ .list.active.default,
44
+ .list.active.primary {
55
45
  background-color: var(--zdt_statuslistitem_primary_efffect_bg);
56
46
  }
57
47
  .list.active.secondary {
@@ -65,34 +55,21 @@
65
55
  .tickIcon {
66
56
  color: var(--zdt_statuslistitem_tickicon);
67
57
  position: absolute;
68
- }
69
- [dir=ltr] .tickIcon {
70
58
  right: var(--zd_size20);
71
59
  }
72
- [dir=rtl] .tickIcon {
73
- left: var(--zd_size20);
74
- }
75
60
  .tickIcon > i {
76
61
  display: block;
77
62
  }
78
- [dir=ltr] .active.withTick {
63
+ .active.withTick {
79
64
  padding-right: var(--zd_size39);
80
65
  }
81
- [dir=rtl] .active.withTick {
82
- padding-left: var(--zd_size39);
83
- }
84
66
  /* Status Type */
85
67
  .statusType {
86
68
  width: var(--zd_size8);
87
69
  height: var(--zd_size8);
88
70
  border-radius: 50%;
89
- }
90
- [dir=ltr] .statusType {
91
71
  margin-right: var(--zd_size13);
92
72
  }
93
- [dir=rtl] .statusType {
94
- margin-left: var(--zd_size13);
95
- }
96
73
  .black {
97
74
  background-color: var(--zdt_statuslistitem_black_bg);
98
75
  }
@@ -1,12 +1,12 @@
1
1
  .container {
2
- font-size: var(--zd_font_size16);
3
2
  padding-bottom: var(--zd_size10);
3
+ font-size: var(--zd_font_size16);
4
4
  }
5
5
  .box {
6
6
  position: relative;
7
+ margin: auto;
7
8
  height: 100%;
8
9
  width: 100%;
9
- margin: auto;
10
10
  }
11
11
  /* Size */
12
12
  .smallSize {
@@ -1,8 +1,8 @@
1
1
  .section {
2
2
  max-height: 80%;
3
- min-height: var(--zd_size390);
4
- height: auto;
5
3
  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
6
4
  background-color: var(--zdt_lookupsection_bg);
5
+ min-height: var(--zd_size390);
6
+ height: auto;
7
7
  box-shadow: 0px 4px 20px var(--zdt_lookupsection_box_shadow);
8
8
  }
@@ -1,15 +1,15 @@
1
1
  .container {
2
+ text-align: center;
2
3
  width: var(--zd_size25);
3
4
  height: var(--zd_size25);
4
5
  line-height: var(--zd_size25);
6
+ cursor: pointer;
7
+ border-radius: 50%;
5
8
  color: var(--zdt_lookupclose_default_text);
6
9
  transition: var(--zd_transition2) cubic-bezier(0.4, 1, 0.65, 1);
7
10
  font-size: var(--zd_font_size9);
8
- text-align: center;
9
- cursor: pointer;
10
- border-radius: 50%;
11
11
  }
12
12
  .container:hover {
13
- color: var(--zdt_lookupclose_default_hover_text);
14
13
  background-color: var(--zdt_lookupclose_default_hover_bg);
14
+ color: var(--zdt_lookupclose_default_hover_text);
15
15
  }
@@ -3,16 +3,16 @@
3
3
  transition: var(--zd_transition1);
4
4
  width: var(--zd_size96);
5
5
  height: var(--zd_size28);
6
- position: relative;
7
- }.searchStyle, .boxStyle {
8
6
  background: none;
7
+ position: relative;
9
8
  }
10
9
  .boxStyle {
11
10
  width: var(--zd_size160);
12
11
  border-radius: 4px;
13
12
  border: 1px solid var(--zdt_lookupsearch_boxstyle_border);
14
13
  }
15
- .searchStyle:hover, .boxStyle:hover {
14
+ .searchStyle:hover,
15
+ .boxStyle:hover {
16
16
  border-color: var(--zdt_lookupsearch_boxstyle_hover_border);
17
17
  }
18
18
  .focusWidth {
@@ -20,38 +20,29 @@
20
20
  }
21
21
  .drpSearchBox {
22
22
  position: relative;
23
- height: var(--zd_size28);
24
23
  cursor: pointer;
24
+ height: var(--zd_size28);
25
25
  }
26
26
  .drpSearchBox::after {
27
27
  content: '';
28
+ right: calc(var(--zd_size1) * -1);
28
29
  position: absolute;
29
30
  top: var(--zd_size8);
30
31
  bottom: var(--zd_size8);
31
- }
32
- [dir=ltr] .drpSearchBox::after {
33
- right: calc(var(--zd_size1) * -1);
34
32
  border-right: 1px solid var(--zdt_lookupsearch_boxstyle_border);
35
33
  }
36
- [dir=rtl] .drpSearchBox::after {
37
- left: calc(var(--zd_size1) * -1);
38
- border-left: 1px solid var(--zdt_lookupsearch_boxstyle_border);
39
- }
40
- .inputBox, .drpSearchBox {
34
+ .inputBox,
35
+ .drpSearchBox {
41
36
  padding: 0 var(--zd_size9);
42
37
  }
43
- [dir=ltr] .searchIconBox {
38
+ .searchIconBox {
44
39
  padding: var(--zd_size4) 0 var(--zd_size4) var(--zd_size9);
45
40
  }
46
- [dir=rtl] .searchIconBox {
47
- padding: var(--zd_size4) var(--zd_size9) var(--zd_size4) 0;
48
- }
49
- .active, .boxStyle.active, .lineActive.drpSearchBox::after {
41
+ .active,
42
+ .boxStyle.active,
43
+ .lineActive.drpSearchBox::after {
50
44
  border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
51
45
  }
52
- [dir=ltr] .iconArrow {
46
+ .iconArrow {
53
47
  margin-left: var(--zd_size5);
54
48
  }
55
- [dir=rtl] .iconArrow {
56
- margin-right: var(--zd_size5);
57
- }
@@ -2,15 +2,12 @@
2
2
  margin: 0 var(--zd_size20);
3
3
  }
4
4
  /* Responsive */
5
- [dir=ltr] .small .searchContainer {
5
+ .small .searchContainer {
6
6
  text-align: left;
7
7
  }
8
- [dir=rtl] .small .searchContainer {
9
- text-align: right;
10
- }
11
8
  .small .searchContainer input {
12
- width: var(--zd_size193);
13
9
  border-bottom: 1px solid var(--zdt_lookupticketheader_border);
10
+ width: var(--zd_size193);
14
11
  }
15
12
  .small .innerContainer,
16
13
  .extraSmall .innerContainer {
@@ -9,10 +9,10 @@
9
9
  }
10
10
  .emptyState {
11
11
  font-size: var(--zd_font_size14);
12
+ padding: var(--zd_size12) var(--zd_size15);
12
13
  color: var(--zdt_viewdropdown_empty_text);
13
14
  font-family: var(--zd_semibold);
14
15
  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
15
- padding: var(--zd_size12) var(--zd_size15);
16
16
  }
17
17
  .hide {
18
18
  composes: vishidden from '~@zohodesk/components/lib/common/common.module.css';
@@ -27,20 +27,15 @@
27
27
  .labelCnt {
28
28
  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
29
29
  line-height: var(--zd_size20);
30
- color: var(--zdt_viewdropdown_label_text);
31
30
  cursor: pointer;
31
+ color: var(--zdt_viewdropdown_label_text);
32
32
  }
33
33
  .labelText {
34
34
  font-size: var(--zd_font_size12);
35
+ margin-right: var(--zd_size5);
35
36
  max-width: var(--zd_size180);
36
37
  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
37
38
  }
38
- [dir=ltr] .labelText {
39
- margin-right: var(--zd_size5);
40
- }
41
- [dir=rtl] .labelText {
42
- margin-left: var(--zd_size5);
43
- }
44
39
  .labelCnt:hover .arrowIcon {
45
40
  color: var(--zdt_viewdropdown_hover_label_text);
46
41
  }
@@ -1,10 +1,7 @@
1
1
  .container {
2
2
  min-height: var(--zd_size51);
3
3
  position: relative;
4
- }[dir=ltr] .container {
5
4
  padding: 0 var(--zd_size52) 0 var(--zd_size10);
6
- }[dir=rtl] .container {
7
- padding: 0 var(--zd_size10) 0 var(--zd_size52);
8
5
  }
9
6
  .default {
10
7
  background-color: var(--zdt_lookupheader_default_bg);
@@ -14,28 +11,21 @@
14
11
  background-color: var(--zdt_lookupheader_white_bg);
15
12
  border-bottom: solid 1px var(--zdt_lookupheader_white_border);
16
13
  }
17
- .searchContainer, .title {
14
+ .searchContainer,
15
+ .title {
18
16
  margin: 0 var(--zd_size20);
19
17
  }
20
- [dir=ltr] .searchContainer {
18
+ .searchContainer {
21
19
  text-align: right;
22
20
  }
23
- [dir=rtl] .searchContainer {
24
- text-align: left;
25
- }
26
21
  .closeContainer {
27
22
  position: absolute;
23
+ right: var(--zd_size30);
28
24
  top: 50%;
29
25
  composes: middleY from '~@zohodesk/components/lib/common/common.module.css';
30
26
  }
31
- [dir=ltr] .closeContainer {
32
- right: var(--zd_size30);
33
- }
34
- [dir=rtl] .closeContainer {
35
- left: var(--zd_size30);
36
- }
37
27
  .para {
28
+ margin: 0 var(--zd_size20);
38
29
  font-size: var(--zd_font_size12);
39
30
  color: var(--zdt_lookupheader_para_text);
40
- margin: 0 var(--zd_size20);
41
31
  }
@@ -1,24 +1,15 @@
1
1
  /* Responsive */
2
2
  .extraSmall {
3
+ padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) 0;
3
4
  justify-content: normal;
4
5
  flex-direction: column;
5
6
  align-items: flex-start;
6
7
  }
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
- }
13
8
 
14
- [dir=ltr] .extraSmall .searchContainer {
9
+ .extraSmall .searchContainer {
15
10
  text-align: left;
16
11
  }
17
-
18
- [dir=rtl] .extraSmall .searchContainer {
19
- text-align: right;
20
- }
21
12
  .extraSmall .searchContainer input {
22
- width: var(--zd_size193);
23
13
  border-bottom: 1px solid var(--zdt_lookupheader_input_border);
14
+ width: var(--zd_size193);
24
15
  }
@@ -1,5 +1,3 @@
1
- [dir=ltr] .container {
1
+ .container {
2
2
  margin-right: var(--zd_size15);
3
- }[dir=rtl] .container {
4
- margin-left: var(--zd_size15);
5
3
  }
@@ -2,17 +2,11 @@
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 {
6
5
  margin-right: var(--zd_size15);
7
- }[dir=rtl] .container {
8
- margin-left: var(--zd_size15);
9
6
  }
10
- [dir=ltr] .icon {
7
+ .icon {
11
8
  margin-right: var(--zd_size5);
12
9
  }
13
- [dir=rtl] .icon {
14
- margin-left: var(--zd_size5);
15
- }
16
10
  .container:hover .text {
17
11
  border-bottom: 1px solid var(--zdt_headerlink_hover_text);
18
12
  }
@@ -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
  }