@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,7 @@
1
1
  .flip,
2
2
  .flipNone {
3
- color: var(--zdt_flipcard_default_text);
4
- }.flip, .flipNone {
5
3
  background-color: var(--zdt_flipcard_default_bg);
4
+ color: var(--zdt_flipcard_default_text);
6
5
  }
7
6
  .container {
8
7
  position: relative;
@@ -21,24 +20,16 @@
21
20
  backface-visibility: hidden;
22
21
  -webkit-backface-visibility: hidden;
23
22
  }
24
- [dir=ltr] .front {
23
+ .front {
25
24
  transform: rotateY(180deg) perspective(1px);
26
25
  }
27
- [dir=rtl] .front {
28
- transform: rotateY(-180deg) perspective(1px);
29
- }
30
26
  .back {
31
27
  transform: rotateY(0deg) perspective(1px);
32
28
  }
33
- [dir=ltr] .notFlip .container {
29
+ .notFlip .container {
34
30
  transform: rotateY(180deg);
35
31
  }
36
- [dir=rtl] .notFlip .container {
37
- transform: rotateY(-180deg);
38
- }
39
- [dir=ltr] .flip:hover .container, [dir=ltr] .hoverContainer:hover .container {
32
+ .flip:hover .container,
33
+ .hoverContainer:hover .container {
40
34
  transform: rotateY(180deg);
41
35
  }
42
- [dir=rtl] .flip:hover .container, [dir=rtl] .hoverContainer:hover .container {
43
- transform: rotateY(-180deg);
44
- }
@@ -25,58 +25,33 @@
25
25
  padding-bottom: var(--zd_size10);
26
26
  }
27
27
 
28
- [dir=ltr] .largePadding {
28
+ .largePadding {
29
29
  padding-left: var(--zd_size60);
30
30
  }
31
-
32
- [dir=rtl] .largePadding {
33
- padding-right: var(--zd_size60);
34
- }
35
- [dir=ltr] .mediumPadding {
31
+ .mediumPadding {
36
32
  padding-left: var(--zd_size50);
37
33
  }
38
- [dir=rtl] .mediumPadding {
39
- padding-right: var(--zd_size50);
40
- }
41
- [dir=ltr] .xmediumPadding {
34
+ .xmediumPadding {
42
35
  padding-left: var(--zd_size30);
43
36
  }
44
- [dir=rtl] .xmediumPadding {
45
- padding-right: var(--zd_size30);
46
- }
47
- [dir=ltr] .smallPadding {
37
+ .smallPadding {
48
38
  padding-left: var(--zd_size25);
49
39
  }
50
- [dir=rtl] .smallPadding {
51
- padding-right: var(--zd_size25);
52
- }
53
- [dir=ltr] .xsmallPadding {
40
+ .xsmallPadding {
54
41
  padding-left: var(--zd_size20);
55
42
  }
56
- [dir=rtl] .xsmallPadding {
57
- padding-right: var(--zd_size20);
58
- }
59
43
 
60
44
  .marginRight {
61
45
  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
62
46
  }
63
- [dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
47
+ .largeFooter .marginRight,
48
+ .mediumFooter .marginRight {
64
49
  margin-right: var(--zd_size15);
65
50
  }
66
- [dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
67
- margin-left: var(--zd_size15);
68
- }
69
- [dir=ltr] .smallFooter .marginRight {
51
+ .smallFooter .marginRight {
70
52
  margin-right: var(--zd_size12);
71
53
  }
72
- [dir=rtl] .smallFooter .marginRight {
73
- margin-left: var(--zd_size12);
74
- }
75
54
 
76
- [dir=ltr] .marginRight:last-child {
55
+ .marginRight:last-child {
77
56
  margin-right: 0;
78
57
  }
79
-
80
- [dir=rtl] .marginRight:last-child {
81
- margin-left: 0;
82
- }
@@ -1,14 +1,10 @@
1
1
  .container {
2
2
  top: 0;
3
+ left: 0;
3
4
  bottom: 0;
5
+ right: 0;
4
6
  position: absolute;
5
7
  overflow: hidden;
6
- }[dir=ltr] .container {
7
- left: 0;
8
- right: 0;
9
- }[dir=rtl] .container {
10
- right: 0;
11
- left: 0;
12
8
  }
13
9
  .default {
14
10
  background-color: var(--zdt_freezelayer_default_bg);
@@ -3,11 +3,11 @@
3
3
  }
4
4
  .wrapper {
5
5
  height: var(--zd_size28);
6
+ cursor: pointer;
6
7
  width: var(--zd_size28);
7
8
  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
8
9
  composes: varClass;
9
10
  color: var(--iconColor);
10
- cursor: pointer;
11
11
  }
12
12
  .primary {
13
13
  --iconColor: var(--zdt_iconButton_icon_primary);
@@ -15,15 +15,14 @@ export default class ImportantNotes extends React.Component {
15
15
  iconSize,
16
16
  children,
17
17
  iconClass,
18
- isCover,
19
- className
18
+ isCover
20
19
  } = this.props;
21
20
  return /*#__PURE__*/React.createElement(Container, {
22
21
  isInline: !isCover,
23
22
  isCover: false,
24
23
  alignBox: "row",
25
24
  align: "top",
26
- className: `${style.section} ${className || ''}`
25
+ className: style.section
27
26
  }, iconName ? /*#__PURE__*/React.createElement(Box, {
28
27
  className: style.icon,
29
28
  align: "start"
@@ -44,8 +43,7 @@ ImportantNotes.propTypes = {
44
43
  iconName: PropTypes.string,
45
44
  iconSize: PropTypes.string,
46
45
  isCover: PropTypes.bool,
47
- text: PropTypes.string,
48
- className: PropTypes.string
46
+ text: PropTypes.string
49
47
  };
50
48
  ImportantNotes.defaultProps = {
51
49
  iconName: 'ZD-helpCentre',
@@ -8,13 +8,8 @@
8
8
  color: var(--zdt_importantnotes_title_text);
9
9
  }
10
10
  .icon {
11
- color: var(--zdt_importantnotes_icon);
12
- font-size: 0;
13
11
  margin-top: var(--zd_size1);
14
- }
15
- [dir=ltr] .icon {
16
12
  margin-right: var(--zd_size5);
17
- }
18
- [dir=rtl] .icon {
19
- margin-left: var(--zd_size5);
13
+ color: var(--zdt_importantnotes_icon);
14
+ font-size: 0;
20
15
  }
@@ -1,33 +1,21 @@
1
1
  .ajaxLoader {
2
2
  position: absolute;
3
3
  top: 0;
4
- }[dir=ltr] .ajaxLoader {
5
4
  left: 0;
6
5
  right: 0;
7
- }[dir=rtl] .ajaxLoader {
8
- right: 0;
9
- left: 0;
10
6
  }
11
7
  .loader {
12
- width: 100%;
13
- height: 3px;
14
8
  background-image: var(--zdt_loader_gradient_bg);
9
+ width: 100%;
15
10
  background-size: 200% auto;
16
- }
17
- [dir=ltr] .loader {
18
11
  background-position: 0 100%;
19
- animation: loading-ltr 3s infinite;
20
- animation-fill-mode: forwards;
21
- animation-timing-function: linear;
22
- }
23
- [dir=rtl] .loader {
24
- background-position: 100% 100%;
25
- animation: loading-rtl 3s infinite;
12
+ animation: loading 3s infinite;
26
13
  animation-fill-mode: forwards;
27
14
  animation-timing-function: linear;
15
+ height: 3px;
28
16
  }
29
17
 
30
- @keyframes loading-ltr {
18
+ @keyframes loading {
31
19
  0% {
32
20
  background-position: 0 0;
33
21
  }
@@ -35,12 +23,3 @@
35
23
  background-position: -200% 0;
36
24
  }
37
25
  }
38
-
39
- @keyframes loading-rtl {
40
- 0% {
41
- background-position: 100% 0;
42
- }
43
- 100% {
44
- background-position: 300% 0;
45
- }
46
- }
@@ -3,31 +3,20 @@
3
3
  top: 0;
4
4
  z-index: 1000;
5
5
  /*Hook for editor alert*/
6
- pointer-events: none;
7
- text-align: center;
8
- }[dir=ltr] .message {
9
6
  right: 0;
7
+ text-align: center;
10
8
  left: 0;
11
- }[dir=rtl] .message {
12
- left: 0;
13
- right: 0;
9
+ pointer-events: none;
14
10
  }
15
11
 
16
12
  .container {
17
- position: relative;
18
- display: inline-block;
19
- pointer-events: initial;
13
+ padding: var(--zd_size13) var(--zd_size10) var(--zd_size13) var(--zd_size50);
20
14
  box-shadow: 0 0 19px 1px var(--zdt_message_default_box_shadow);
21
15
  border-radius: 0 0 5px 5px;
16
+ position: relative;
22
17
  background: var(--zdt_message_default_bg);
23
- }
24
-
25
- [dir=ltr] .container {
26
- padding: var(--zd_size13) var(--zd_size10) var(--zd_size13) var(--zd_size50);
27
- }
28
-
29
- [dir=rtl] .container {
30
- padding: var(--zd_size13) var(--zd_size50) var(--zd_size13) var(--zd_size10);
18
+ display: inline-block;
19
+ pointer-events: initial;
31
20
  }
32
21
 
33
22
  .text {
@@ -36,32 +25,17 @@
36
25
  word-break: break-word;
37
26
  font-size: var(--zd_font_size14);
38
27
  vertical-align: middle;
39
- }
40
-
41
- [dir=ltr] .text {
42
28
  text-align: left;
43
29
  }
44
30
 
45
- [dir=rtl] .text {
46
- text-align: right;
47
- }
48
-
49
31
  .icon {
50
32
  position: absolute;
33
+ left: 0;
51
34
  top: 0;
52
35
  width: var(--zd_size40);
53
36
  display: inline-block;
54
- height: 100%;
55
- }
56
-
57
- [dir=ltr] .icon {
58
- left: 0;
59
37
  border-bottom-left-radius: 5px;
60
- }
61
-
62
- [dir=rtl] .icon {
63
- right: 0;
64
- border-bottom-right-radius: 5px;
38
+ height: 100%;
65
39
  }
66
40
 
67
41
  .success {
@@ -89,15 +63,8 @@
89
63
  .close {
90
64
  color: var(--zdt_message_close_text);
91
65
  font-size: var(--zd_font_size16);
66
+ cursor: pointer;
92
67
  display: inline-block;
93
68
  vertical-align: middle;
94
- cursor: pointer;
95
- }
96
-
97
- [dir=ltr] .close {
98
69
  margin-left: var(--zd_size10);
99
- }
100
-
101
- [dir=rtl] .close {
102
- margin-right: var(--zd_size10);
103
70
  }
@@ -1,28 +1,20 @@
1
+ .type_primary {
2
+ }
1
3
  .type_secondary {
2
4
  max-width: var(--zd_size468);
3
5
  border-radius: 3px;
4
6
  margin: 0 auto;
5
7
  }
6
8
  .message {
7
- color: var(--zdt_messagebanner_text);
8
- composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
9
9
  padding: var(--zd_size10) 0;
10
- }
11
- [dir=ltr] .message {
10
+ color: var(--zdt_messagebanner_text);
12
11
  margin-left: var(--zd_size10);
13
- }
14
- [dir=rtl] .message {
15
- margin-right: var(--zd_size10);
12
+ composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
16
13
  }
17
14
  .link {
18
15
  color: var(--zdt_messagebanner_link_text);
19
- }
20
- [dir=ltr] .link {
21
16
  margin-left: var(--zd_size5);
22
17
  }
23
- [dir=rtl] .link {
24
- margin-right: var(--zd_size5);
25
- }
26
18
  .message,.link{font-size: var(--zd_font_size14);}
27
19
  .close {
28
20
  color: var(--zdt_messagebanner_close_text);
@@ -5,53 +5,26 @@
5
5
  width: var(--zd_size21);
6
6
  }
7
7
  .topLeft {
8
- top: 0;
9
- }
10
- [dir=ltr] .topLeft {
11
8
  transform: translate(-45%, -45%);
12
9
  left: 0;
13
- }
14
- [dir=rtl] .topLeft {
15
- transform: translate(45%, -45%);
16
- right: 0;
17
- }
18
- .topRight {
19
10
  top: 0;
20
11
  }
21
- [dir=ltr] .topRight {
12
+ .topRight {
22
13
  transform: translate(45%, -45%);
23
14
  right: 0;
24
- }
25
- [dir=rtl] .topRight {
26
- transform: translate(-45%, -45%);
27
- left: 0;
15
+ top: 0;
28
16
  }
29
17
  .bottomLeft {
30
- bottom: 0;
31
- }
32
- [dir=ltr] .bottomLeft {
33
18
  transform: translate(-45%, 45%);
34
19
  left: 0;
35
- }
36
- [dir=rtl] .bottomLeft {
37
- transform: translate(45%, 45%);
38
- right: 0;
39
- }
40
- .bottomRight {
41
20
  bottom: 0;
42
21
  }
43
- [dir=ltr] .bottomRight {
22
+ .bottomRight {
44
23
  transform: translate(45%, 45%);
45
24
  right: 0;
25
+ bottom: 0;
46
26
  }
47
- [dir=rtl] .bottomRight {
48
- transform: translate(-45%, 45%);
49
- left: 0;
50
- }
51
- [dir=ltr] .stars {
52
- animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
53
- }
54
- [dir=rtl] .stars {
27
+ .stars {
55
28
  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
56
29
  }
57
30
  .green::before {
@@ -68,20 +41,10 @@
68
41
  }
69
42
  .starTwo {
70
43
  composes: stars;
71
- }
72
- [dir=ltr] .starTwo {
73
- animation-delay: 0.5s;
74
- }
75
- [dir=rtl] .starTwo {
76
44
  animation-delay: 0.5s;
77
45
  }
78
46
  .starThree {
79
47
  composes: stars;
80
- }
81
- [dir=ltr] .starThree {
82
- animation-delay: 1s;
83
- }
84
- [dir=rtl] .starThree {
85
48
  animation-delay: 1s;
86
49
  }
87
50
 
@@ -1,33 +1,22 @@
1
1
  .container {
2
- transition: all var(--zd_transition4);
3
- position: relative;
4
- max-height: 100%;
5
2
  border-radius: 5px;
6
3
  box-shadow: 0 5px 40px 7px var(--zdt_toastmessage_default_box_shadow);
7
4
  background-color: var(--zdt_toastmessage_default_bg);
5
+ transition: all var(--zd_transition4);
8
6
  margin-bottom: var(--zd_size7);
9
- }[dir=ltr] .container {
7
+ position: relative;
10
8
  transform-origin: right center;
11
- }[dir=rtl] .container {
12
- transform-origin: left center;
9
+ max-height: 100%;
13
10
  }
14
11
 
15
12
  .closeAnimation {
16
13
  max-height: 0;
17
- transition: all var(--zd_transition3) 0.4s;
18
14
  margin-bottom: 0;
15
+ transition: all var(--zd_transition3) 0.4s;
19
16
  }
20
17
 
21
18
  .animation {
22
19
  composes: modeForward from '~@zohodesk/components/lib/common/animation.module.css';
23
- }
24
-
25
- [dir=ltr] .animation {
26
- animation-duration: var(--zd_transition4);
27
- -webkit-animation-duration: var(--zd_transition4);
28
- }
29
-
30
- [dir=rtl] .animation {
31
20
  animation-duration: var(--zd_transition4);
32
21
  -webkit-animation-duration: var(--zd_transition4);
33
22
  }
@@ -38,8 +27,8 @@
38
27
  }
39
28
 
40
29
  .leftnoanimate {
41
- opacity: 1;
42
30
  transform: translateX(0) scale(1);
31
+ opacity: 1;
43
32
  }
44
33
 
45
34
  .rightanimate {
@@ -54,26 +43,12 @@
54
43
 
55
44
  .alertifybanner {
56
45
  overflow: hidden;
57
- }
58
-
59
- [dir=ltr] .alertifybanner {
60
46
  border-radius: 5px 0 0 5px;
61
47
  }
62
48
 
63
- [dir=rtl] .alertifybanner {
64
- border-radius: 0 5px 5px 0;
65
- }
66
-
67
49
  .alertright {
68
- width: var(--zd_size105);
69
- }
70
-
71
- [dir=ltr] .alertright {
72
50
  border-left: 1px solid var(--zdt_toastmessage_alert_border);
73
- }
74
-
75
- [dir=rtl] .alertright {
76
- border-right: 1px solid var(--zdt_toastmessage_alert_border);
51
+ width: var(--zd_size105);
77
52
  }
78
53
 
79
54
  .popbutton {
@@ -121,29 +96,20 @@
121
96
 
122
97
  .primary:hover,
123
98
  .alerttab:hover .coverfill.primary {
124
- color: var(--zdt_toastmessage_primary_hover_text);
125
- }
126
-
127
- .primary:hover, .alerttab:hover .coverfill.primary {
128
99
  background-color: var(--zdt_toastmessage_primary_hover_bg);
100
+ color: var(--zdt_toastmessage_primary_hover_text);
129
101
  }
130
102
 
131
103
  .danger:hover,
132
104
  .alerttab:hover .coverfill.danger {
133
- color: var(--zdt_toastmessage_primary_hover_text);
134
- }
135
-
136
- .danger:hover, .alerttab:hover .coverfill.danger {
137
105
  background-color: var(--zdt_toastmessage_danger_hover_bg);
106
+ color: var(--zdt_toastmessage_primary_hover_text);
138
107
  }
139
108
 
140
109
  .success:hover,
141
110
  .alerttab:hover .coverfill.success {
142
- color: var(--zdt_toastmessage_primary_hover_text);
143
- }
144
-
145
- .success:hover, .alerttab:hover .coverfill.success {
146
111
  background-color: var(--zdt_toastmessage_success_hover_bg);
112
+ color: var(--zdt_toastmessage_primary_hover_text);
147
113
  }
148
114
 
149
115
  .alertleft {
@@ -165,26 +131,22 @@
165
131
  color: var(--zdt_toastmessage_alerttitle_text);
166
132
  }
167
133
 
168
- [dir=ltr] .alertTitleLeft {
134
+ .alertTitleLeft {
169
135
  margin-right: var(--zd_size10);
170
136
  }
171
137
 
172
- [dir=rtl] .alertTitleLeft {
173
- margin-left: var(--zd_size10);
174
- }
175
-
176
138
  .alertMessage {
177
139
  font-size: var(--zd_font_size12);
178
140
  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
141
+ margin-top: var(--zd_size5);
179
142
  line-height: var(--zd_size16);
180
143
  color: var(--zdt_toastmessage_alert_text);
181
- margin-top: var(--zd_size5);
182
144
  }
183
145
 
184
146
  .buttonText {
185
147
  font-size: inherit;
186
- line-height: var(--zd_size14);
187
148
  text-align: center;
149
+ line-height: var(--zd_size14);
188
150
  padding: 0 var(--zd_size7);
189
151
  cursor: pointer;
190
152
  }
@@ -192,24 +154,13 @@
192
154
  .closeIcon,
193
155
  .closeIconPrimary {
194
156
  position: absolute;
157
+ right: 0;
195
158
  top: 0;
196
159
  z-index: 1;
197
- color: var(--zdt_toastmessage_closeicon);
198
- }
199
-
200
- .closeIcon, .closeIconPrimary {
201
160
  padding: var(--zd_size2);
202
- cursor: pointer;
203
- }
204
-
205
- [dir=ltr] .closeIcon, [dir=ltr] .closeIconPrimary {
206
- right: 0;
207
161
  border-bottom-left-radius: 3px;
208
- }
209
-
210
- [dir=rtl] .closeIcon, [dir=rtl] .closeIconPrimary {
211
- left: 0;
212
- border-bottom-right-radius: 3px;
162
+ cursor: pointer;
163
+ color: var(--zdt_toastmessage_closeicon);
213
164
  }
214
165
 
215
166
  .closeIcon:hover {
@@ -226,63 +177,41 @@
226
177
 
227
178
  .dropdown {
228
179
  width: var(--zd_size23);
180
+ background: var(--zdt_toastmessage_dropdown_bg);
229
181
  position: relative;
230
182
  height: 100%;
231
183
  color: var(--zdt_toastmessage_dropdown_text);
232
- background: var(--zdt_toastmessage_dropdown_bg);
233
184
  }
234
185
 
235
186
  .dropdown > i {
236
187
  position: absolute;
237
188
  top: 50%;
238
- }
239
-
240
- [dir=ltr] .dropdown > i {
241
189
  left: 50%;
242
190
  transform: translate(-50%, -50%);
243
191
  }
244
192
 
245
- [dir=rtl] .dropdown > i {
246
- right: 50%;
247
- transform: translate(50%, -50%);
248
- }
249
-
250
193
  .dropdown:hover i {
251
194
  color: var(--zdt_toastmessage_cancel_hover_text);
252
195
  }
253
196
 
254
197
  .message {
198
+ padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
199
+ border-top: 1px solid var(--zdt_toastmessage_message_border);
200
+ cursor: pointer;
255
201
  position: relative;
256
202
  color: var(--zdt_toastmessage_popbutton_text);
257
203
  font-size: var(--zd_font_size11);
258
204
  composes: dotted textCap from '~@zohodesk/components/lib/common/common.module.css';
259
205
  height: var(--zd_size33);
260
206
  transition: padding var(--zd_transition3), height var(--zd_transition3);
261
- border-top: 1px solid var(--zdt_toastmessage_message_border);
262
- cursor: pointer;
263
207
  margin:0;
264
208
  }
265
209
 
266
- [dir=ltr] .message {
267
- padding: var(--zd_size10) var(--zd_size20) var(--zd_size10) var(--zd_size76);
268
- }
269
-
270
- [dir=rtl] .message {
271
- padding: var(--zd_size10) var(--zd_size76) var(--zd_size10) var(--zd_size20);
272
- }
273
-
274
210
  .messageOff {
275
- height: 0;
276
- font-size: 0;
277
211
  border-width: 0;
278
- }
279
-
280
- [dir=ltr] .messageOff {
281
212
  padding: 0 var(--zd_size20) 0 var(--zd_size76);
282
- }
283
-
284
- [dir=rtl] .messageOff {
285
- padding: 0 var(--zd_size76) 0 var(--zd_size20);
213
+ height: 0;
214
+ font-size: 0;
286
215
  }
287
216
 
288
217
  .message:hover {
@@ -293,26 +222,26 @@
293
222
  width: var(--zd_size29);
294
223
  height: var(--zd_size29);
295
224
  line-height: var(--zd_size29);
296
- composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
297
225
  text-align: center;
226
+ composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
298
227
  }
299
228
 
300
229
  .successFill {
301
230
  composes: fill;
302
- color: var(--zdt_toastmessage_primary_hover_text);
303
231
  background: var(--zdt_toastmessage_successfill_bg);
232
+ color: var(--zdt_toastmessage_primary_hover_text);
304
233
  }
305
234
 
306
235
  .dangerFill {
307
236
  composes: fill;
308
- color: var(--zdt_toastmessage_primary_hover_text);
309
237
  background: var(--zdt_toastmessage_danger_hover_bg);
238
+ color: var(--zdt_toastmessage_primary_hover_text);
310
239
  }
311
240
 
312
241
  .dangerShadow {
313
- color: var(--zdt_toastmessage_danger_text);
314
242
  text-shadow: 0 4px 22px var(--zdt_toastmessage_danger_text_shadow);
315
243
  margin-top: var(--zd_size5);
244
+ color: var(--zdt_toastmessage_danger_text);
316
245
  }
317
246
 
318
247
  .successPlain {