@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.
- package/README.md +5 -0
- package/assets/Appearance/dark/mode/dotDarkMode.module.css +0 -2
- package/assets/Appearance/default/mode/dotDefaultMode.module.css +0 -2
- package/es/ActionButton/ActionButton.module.css +9 -25
- package/es/AlphabeticList/AlphabeticList.module.css +4 -7
- package/es/Attachment/Attachment.module.css +9 -20
- package/es/AttachmentViewer/AttachmentViewer.module.css +27 -82
- package/es/ChannelIcon/ChannelIcon.module.css +21 -30
- package/es/Drawer/Drawer.module.css +11 -59
- package/es/FlipCard/FlipCard.module.css +5 -14
- package/es/FormAction/FormAction.module.css +9 -34
- package/es/FreezeLayer/FreezeLayer.module.css +2 -6
- package/es/IconButton/IconButton.module.css +1 -1
- package/es/ImportantNotes/ImportantNotes.js +3 -5
- package/es/ImportantNotes/ImportantNotes.module.css +2 -7
- package/es/Loader/Loader.module.css +4 -25
- package/es/Message/Message.module.css +9 -42
- package/es/MessageBanner/MessageBanner.module.css +4 -12
- package/es/NewStar/NewStar.module.css +5 -42
- package/es/ToastMessage/ToastMessage.module.css +25 -96
- package/es/Upload/Upload.module.css +8 -27
- package/es/alert/AlertHeader/AlertHeader.module.css +3 -21
- package/es/alert/AlertLookup/AlertLookup.module.css +2 -6
- package/es/avatar/AvatarClose/AvatarClose.module.css +3 -9
- package/es/avatar/AvatarCollision/AvatarCollision.module.css +4 -18
- package/es/avatar/AvatarIcon/AvatarIcon.module.css +4 -3
- package/es/avatar/AvatarStatus/AvatarStatus.module.css +9 -59
- package/es/avatar/AvatarThread/AvatarThread.module.css +5 -55
- package/es/avatar/AvatarUser/AvatarUser.module.css +10 -81
- package/es/avatar/AvatarWithTeam/AvatarWithTeam.module.css +3 -10
- package/es/common/dot_animation.module.css +3 -16
- package/es/deprecated/SelectDropdown/SelectDropdown.module.css +3 -11
- package/es/dropdown/ToggleDropDown/ToggleDropDown.js +1 -2
- package/es/dropdown/ToggleDropDown/ToggleDropDown.module.css +6 -19
- package/es/emptystate/CommonEmptyState/CommonEmptyState.module.css +4 -12
- package/es/emptystate/EditionPage/EditionPage.css +3 -9
- package/es/errorstate/EmptyStates.module.css +10 -13
- package/es/errorstate/Inconvenience/Inconvenience.module.css +0 -3
- package/es/errorstate/LinkText/LinkText.module.css +1 -1
- package/es/errorstate/PermissionPlay/PermissionPlay.module.css +2 -2
- package/es/errorstate/WillBack/WillBack.module.css +3 -1
- package/es/form/fields/Fields.module.css +14 -49
- package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js +9 -4
- package/es/form/fields/TagsMultiSelect/TagsMultiSelect.module.css +7 -19
- package/es/form/fields/TagsMultiSelectField/TagsMultiSelectField.module.css +1 -4
- package/es/form/fields/TextEditor/TextEditor.module.css +72 -149
- package/es/form/fields/TextEditorWrapper/TextEditorWrapper.module.css +2 -13
- package/es/form/fields/ValidationMessage/ValidationMessage.module.css +4 -9
- package/es/layout/SetupDetailLayout/SetupDetailLayout.module.css +16 -52
- package/es/layout/SubtabLayout/SubtabLayout.module.css +29 -55
- package/es/list/BluePrintStatus/BluePrintStatus.module.css +1 -4
- package/es/list/Comment/Comment.module.css +0 -5
- package/es/list/DepartmentDropDown/DepartmentDropDown.js +1 -1
- package/es/list/DotNew/DotNew.module.css +3 -3
- package/es/list/GridStencils/GridStencils.module.css +19 -71
- package/es/list/Icons/Icons.module.css +1 -1
- package/es/list/ListLayout/ListLayout.module.css +14 -22
- package/es/list/ListStencils/ListStencils.module.css +6 -11
- package/es/list/SecondaryText/SecondaryText.module.css +3 -13
- package/es/list/SentimentStatus/SentimentStatus.module.css +1 -4
- package/es/list/TagNew/TagNew.module.css +7 -14
- package/es/list/Thread/Thread.module.css +1 -13
- package/es/list/UserTime/UserTime.module.css +0 -6
- package/es/list/listCommon.module.css +1 -9
- package/es/list/status/StatusDropdown/StatusDropdown.js +1 -2
- package/es/list/status/StatusDropdown/StatusDropdown.module.css +6 -19
- package/es/list/status/StatusListItem/StatusListItem.module.css +15 -38
- package/es/lookup/Lookup/Lookup.module.css +2 -2
- package/es/lookup/Section/LookupSection.module.css +2 -2
- package/es/lookup/header/Close/LookupClose.module.css +4 -4
- package/es/lookup/header/ModuleHeader/ModuleHeader.js +3 -8
- package/es/lookup/header/Search/LookupSearch.module.css +12 -21
- package/es/lookup/header/TicketHeader/TicketHeader.js +4 -7
- package/es/lookup/header/TicketHeader/TicketHeader.module.css +2 -5
- package/es/lookup/header/ViewDropDown/ViewDropDown.module.css +3 -8
- package/es/lookup/header/lookupHeaderCommon.module.css +5 -21
- package/es/lookup/header/lookupHeaderCommonResponsive.module.css +3 -12
- package/es/setup/header/Button/HeaderButton.module.css +1 -3
- package/es/setup/header/Link/HeaderLink.module.css +1 -7
- package/es/setup/header/Search/Search.module.css +8 -19
- package/es/setup/header/Views/Views.module.css +5 -15
- package/es/setup/helptips/Link/HelpTipsLink.module.css +0 -1
- package/es/setup/helptips/ListGroup/ListGroup.module.css +1 -6
- package/es/setup/table/TableData/SetupTableData.module.css +3 -11
- package/es/setup/table/TableHead/SetupTableHead.module.css +0 -4
- package/es/setup/table/TableRow/SetupTableRow.module.css +2 -6
- package/es/version2/AlertClose/AlertClose.module.css +1 -1
- package/es/version2/GlobalNotification/GlobalNotification.module.css +9 -44
- package/es/version2/lookup/AlertHeader/AlertHeaderNew.module.css +2 -25
- package/es/version2/lookup/AlertLookup/AlertLookupNew.module.css +3 -7
- package/es/version2/lookup/alertLookupCommonNew.module.css +1 -8
- package/es/version2/notification/DesktopNotification/DesktopNotification.module.css +10 -26
- package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css +10 -47
- package/lib/ActionButton/ActionButton.module.css +1 -0
- package/lib/FreezeLayer/FreezeLayer.js +4 -31
- package/lib/ImportantNotes/ImportantNotes.js +3 -5
- package/lib/form/fields/CheckBoxField/CheckBoxField.js +1 -1
- package/lib/form/fields/CurrencyField/CurrencyField.js +8 -9
- package/lib/form/fields/DateField/DateField.js +1 -1
- package/lib/form/fields/MultiSelectField/MultiSelectField.js +1 -1
- package/lib/form/fields/PhoneField/PhoneField.js +1 -1
- package/lib/form/fields/RadioField/RadioField.js +1 -1
- package/lib/form/fields/SelectField/SelectField.js +1 -1
- package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js +11 -20
- package/lib/form/fields/TextBoxField/TextBoxField.js +1 -1
- package/lib/form/fields/TextEditor/TextEditor.js +1 -4
- package/lib/form/fields/TextEditor/TextEditor.module.css +2 -13
- package/lib/form/fields/TextareaField/TextareaField.js +1 -1
- package/lib/list/status/StatusDropdown/StatusDropdown.js +37 -44
- package/lib/lookup/header/ModuleHeader/ModuleHeader.js +3 -8
- package/lib/lookup/header/TicketHeader/TicketHeader.js +4 -7
- package/lib/lookup/header/lookupHeaderCommon.module.css +2 -8
- package/lib/setup/header/Views/Views.js +2 -2
- package/lib/utils/General.js +24 -0
- package/package.json +3 -2
- package/lib/AttachmentViewer/Attachment.js +0 -28
- package/lib/AttachmentViewer/AttachmentImage.js +0 -129
- package/lib/AttachmentViewer/AttachmentViewer.js +0 -645
- package/lib/AttachmentViewer/AttachmentViewer.module.css +0 -346
- package/lib/AttachmentViewer/utils.js +0 -134
- package/lib/Provider/Config.js +0 -21
- package/lib/common/dot_animation.module.css +0 -27
- package/lib/common/dot_common.module.css +0 -4
- 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
|
-
|
|
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
|
-
|
|
29
|
+
.notFlip .container {
|
|
34
30
|
transform: rotateY(180deg);
|
|
35
31
|
}
|
|
36
|
-
|
|
37
|
-
|
|
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
|
-
|
|
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
|
-
|
|
39
|
-
padding-right: var(--zd_size50);
|
|
40
|
-
}
|
|
41
|
-
[dir=ltr] .xmediumPadding {
|
|
34
|
+
.xmediumPadding {
|
|
42
35
|
padding-left: var(--zd_size30);
|
|
43
36
|
}
|
|
44
|
-
|
|
45
|
-
padding-right: var(--zd_size30);
|
|
46
|
-
}
|
|
47
|
-
[dir=ltr] .smallPadding {
|
|
37
|
+
.smallPadding {
|
|
48
38
|
padding-left: var(--zd_size25);
|
|
49
39
|
}
|
|
50
|
-
|
|
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
|
-
|
|
47
|
+
.largeFooter .marginRight,
|
|
48
|
+
.mediumFooter .marginRight {
|
|
64
49
|
margin-right: var(--zd_size15);
|
|
65
50
|
}
|
|
66
|
-
|
|
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
|
-
|
|
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:
|
|
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
|
-
|
|
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:
|
|
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
|
|
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
|
-
|
|
12
|
-
left: 0;
|
|
13
|
-
right: 0;
|
|
9
|
+
pointer-events: none;
|
|
14
10
|
}
|
|
15
11
|
|
|
16
12
|
.container {
|
|
17
|
-
|
|
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
|
-
|
|
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
|
-
|
|
22
|
+
.bottomRight {
|
|
44
23
|
transform: translate(45%, 45%);
|
|
45
24
|
right: 0;
|
|
25
|
+
bottom: 0;
|
|
46
26
|
}
|
|
47
|
-
|
|
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
|
-
|
|
7
|
+
position: relative;
|
|
10
8
|
transform-origin: right center;
|
|
11
|
-
|
|
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
|
-
|
|
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 {
|