@zohodesk/dot 1.0.0-beta.252 → 1.0.0-beta.254
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 +10 -0
- package/assets/Appearance/dark/mode/dotDarkMode.module.css +293 -303
- package/assets/Appearance/dark/themes/blue/blueDarkDotTheme.module.css +9 -9
- package/assets/Appearance/dark/themes/green/greenDarkDotTheme.module.css +9 -9
- package/assets/Appearance/dark/themes/orange/orangeDarkDotTheme.module.css +9 -9
- package/assets/Appearance/dark/themes/red/redDarkDotTheme.module.css +9 -9
- package/assets/Appearance/dark/themes/yellow/yellowDarkDotTheme.module.css +9 -9
- package/assets/Appearance/default/mode/dotDefaultMode.module.css +288 -298
- package/assets/Appearance/default/themes/blue/blueDefaultDotTheme.module.css +9 -9
- package/assets/Appearance/default/themes/green/greenDefaultDotTheme.module.css +9 -9
- package/assets/Appearance/default/themes/orange/orangeDefaultDotTheme.module.css +9 -9
- package/assets/Appearance/default/themes/red/redDefaultDotTheme.module.css +9 -9
- package/assets/Appearance/default/themes/yellow/yellowDefaultDotTheme.module.css +9 -9
- package/assets/Appearance/pureDark/mode/dotPureDarkMode.module.css +296 -306
- package/assets/Appearance/pureDark/themes/blue/bluePureDarkDotTheme.module.css +9 -9
- package/assets/Appearance/pureDark/themes/green/greenPureDarkDotTheme.module.css +9 -9
- package/assets/Appearance/pureDark/themes/orange/orangePureDarkDotTheme.module.css +9 -9
- package/assets/Appearance/pureDark/themes/red/redPureDarkDotTheme.module.css +9 -9
- package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkDotTheme.module.css +9 -9
- package/css_error.log +1 -0
- package/es/AttachmentViewer/AttachmentViewer.module.css +4 -5
- package/es/Drawer/Drawer.js +3 -2
- package/es/Drawer/Drawer.module.css +42 -3
- package/es/FreezeLayer/props/propTypes.js +2 -1
- package/es/FreezeLayer/useFreezeLayer.js +5 -3
- package/es/Link/Link.js +3 -2
- package/es/Message/Message.module.css +1 -1
- package/es/PlusIcon/PlusIcon.module.css +5 -2
- package/es/ToastMessage/ToastMessage.js +2 -5
- package/es/ToastMessage/ToastMessage.module.css +7 -6
- package/es/actions/AutoClose.js +2 -5
- package/es/common/dot_boxShadow.module.css +38 -0
- package/es/common/dot_docStyle.module.css +35 -0
- package/es/form/fields/TextEditor/TextEditor.module.css +161 -63
- package/es/layout/SubtabLayout/SubtabLayout.module.css +21 -2
- package/es/list/DotNew/DotNew.module.css +8 -5
- package/es/list/TagNew/TagNew.module.css +4 -2
- package/es/lookup/Section/LookupSection.module.css +2 -2
- package/es/lookup/header/Search/Search.js +5 -8
- package/es/version2/GlobalNotification/GlobalNotification.module.css +4 -1
- package/es/version2/notification/DesktopNotification/DesktopNotification.module.css +23 -2
- package/lib/AttachmentViewer/AttachmentViewer.module.css +4 -5
- package/lib/Drawer/Drawer.js +3 -2
- package/lib/Drawer/Drawer.module.css +42 -3
- package/lib/FreezeLayer/props/propTypes.js +4 -2
- package/lib/FreezeLayer/useFreezeLayer.js +4 -2
- package/lib/Link/Link.js +3 -2
- package/lib/Message/Message.module.css +1 -1
- package/lib/PlusIcon/PlusIcon.module.css +5 -2
- package/lib/ToastMessage/ToastMessage.js +2 -5
- package/lib/ToastMessage/ToastMessage.module.css +7 -6
- package/lib/actions/AutoClose.js +2 -5
- package/lib/common/dot_boxShadow.module.css +38 -0
- package/lib/common/dot_docStyle.module.css +35 -0
- package/lib/form/fields/TextEditor/TextEditor.module.css +161 -63
- package/lib/layout/SubtabLayout/SubtabLayout.module.css +21 -2
- package/lib/list/DotNew/DotNew.module.css +8 -5
- package/lib/list/TagNew/TagNew.module.css +4 -2
- package/lib/lookup/Section/LookupSection.module.css +2 -2
- package/lib/lookup/header/Search/Search.js +5 -10
- package/lib/version2/GlobalNotification/GlobalNotification.module.css +4 -1
- package/lib/version2/notification/DesktopNotification/DesktopNotification.module.css +23 -2
- package/package.json +10 -18
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
.container {
|
|
2
2
|
composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
|
|
3
3
|
border-radius: 50%;
|
|
4
|
-
box-shadow:
|
|
4
|
+
box-shadow: var(--zd_bs_plusicon_container);
|
|
5
5
|
cursor: pointer;
|
|
6
6
|
background-color: var(--zdt_plusicon_bg);
|
|
7
7
|
}
|
|
8
|
+
|
|
8
9
|
.plusIcon {
|
|
9
10
|
border: 1px solid var(--zdt_plusicon_border);
|
|
10
11
|
}
|
|
12
|
+
|
|
11
13
|
.icon {
|
|
12
14
|
color: var(--zdt_plusicon_text);
|
|
13
15
|
}
|
|
16
|
+
|
|
14
17
|
.plusIcon:hover {
|
|
15
18
|
border-color: var(--zdt_plusicon_hover_border);
|
|
16
|
-
}
|
|
19
|
+
}
|
|
@@ -8,6 +8,7 @@ exports["default"] = ToastMessage;
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _defaultProps = require("./props/defaultProps");
|
|
10
10
|
var _propTypes = require("./props/propTypes");
|
|
11
|
+
var _Common = require("@zohodesk/components/es/utils/Common");
|
|
11
12
|
var _icons = require("@zohodesk/icons");
|
|
12
13
|
var _Layout = require("@zohodesk/components/lib/Layout");
|
|
13
14
|
var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider");
|
|
@@ -25,10 +26,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
25
26
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
26
27
|
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
27
28
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
28
|
-
function removeClose(e) {
|
|
29
|
-
e && e.stopPropagation && e.stopPropagation();
|
|
30
|
-
e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
|
|
31
|
-
}
|
|
32
29
|
function ToastMessageUI(props) {
|
|
33
30
|
var _useState = (0, _react.useState)(props.messageState),
|
|
34
31
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -69,7 +66,7 @@ function ToastMessageUI(props) {
|
|
|
69
66
|
onClose && onClose();
|
|
70
67
|
}
|
|
71
68
|
function changeMessageState(e) {
|
|
72
|
-
|
|
69
|
+
(0, _Common.cancelBubblingEffect)(e);
|
|
73
70
|
setMessageState(!messageState);
|
|
74
71
|
}
|
|
75
72
|
var animateClass = isClose ? _ToastMessageModule["default"].rightanimate : _ToastMessageModule["default"].leftanimate;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
position: relative;
|
|
4
4
|
max-height: 100%;
|
|
5
5
|
border-radius: 5px;
|
|
6
|
-
box-shadow:
|
|
6
|
+
box-shadow: var(--zd_bs_toastmessage_container);
|
|
7
7
|
background-color: var(--zdt_toastmessage_default_bg);
|
|
8
8
|
margin-bottom: var(--zd_size7);
|
|
9
9
|
}[dir=ltr] .container {
|
|
@@ -149,6 +149,7 @@
|
|
|
149
149
|
.alertleft {
|
|
150
150
|
padding: var(--zd_size15) var(--zd_size25);
|
|
151
151
|
}
|
|
152
|
+
|
|
152
153
|
.alertico {
|
|
153
154
|
min-width: var(--zd_size50);
|
|
154
155
|
}
|
|
@@ -232,17 +233,17 @@
|
|
|
232
233
|
background: var(--zdt_toastmessage_dropdown_bg);
|
|
233
234
|
}
|
|
234
235
|
|
|
235
|
-
.dropdown
|
|
236
|
+
.dropdown>i {
|
|
236
237
|
position: absolute;
|
|
237
238
|
top: 50%;
|
|
238
239
|
}
|
|
239
240
|
|
|
240
|
-
[dir=ltr] .dropdown
|
|
241
|
+
[dir=ltr] .dropdown>i {
|
|
241
242
|
left: 50%;
|
|
242
243
|
transform: translate(-50%, -50%);
|
|
243
244
|
}
|
|
244
245
|
|
|
245
|
-
[dir=rtl] .dropdown
|
|
246
|
+
[dir=rtl] .dropdown>i {
|
|
246
247
|
right: 50%;
|
|
247
248
|
transform: translate(50%, -50%);
|
|
248
249
|
}
|
|
@@ -260,7 +261,7 @@
|
|
|
260
261
|
transition: padding var(--zd_transition3), height var(--zd_transition3);
|
|
261
262
|
border-top: 1px solid var(--zdt_toastmessage_message_border);
|
|
262
263
|
cursor: pointer;
|
|
263
|
-
margin:0;
|
|
264
|
+
margin: 0;
|
|
264
265
|
}
|
|
265
266
|
|
|
266
267
|
[dir=ltr] .message {
|
|
@@ -325,4 +326,4 @@
|
|
|
325
326
|
|
|
326
327
|
.primaryPlain {
|
|
327
328
|
color: var(--zdt_toastmessage_primary_text);
|
|
328
|
-
}
|
|
329
|
+
}
|
package/lib/actions/AutoClose.js
CHANGED
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports["default"] = AutoClose;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _Common = require("@zohodesk/components/es/utils/Common");
|
|
9
10
|
var _defaultProps = require("./props/defaultProps");
|
|
10
11
|
var _propTypes = require("./props/propTypes");
|
|
11
12
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -16,10 +17,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
16
17
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
17
18
|
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
18
19
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
19
|
-
function removeClose(e) {
|
|
20
|
-
e && e.stopPropagation && e.stopPropagation();
|
|
21
|
-
e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
|
|
22
|
-
}
|
|
23
20
|
function AutoClose(props) {
|
|
24
21
|
var Element = props.Element,
|
|
25
22
|
givenClose = props.isClose,
|
|
@@ -31,7 +28,7 @@ function AutoClose(props) {
|
|
|
31
28
|
isClose = _useState2[0],
|
|
32
29
|
setClose = _useState2[1];
|
|
33
30
|
function onClose(e) {
|
|
34
|
-
|
|
31
|
+
(0, _Common.cancelBubblingEffect)(e);
|
|
35
32
|
onPortalClose && onPortalClose();
|
|
36
33
|
}
|
|
37
34
|
(0, _react.useEffect)(function () {
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* attachment viewer */
|
|
3
|
+
--zd_bs_attachmentviewer_selected: var(--zd_bs_contrast_outline, 0 0 4px 2px var(--zdt_attachmentviewer_selected_box_shadow) inset);
|
|
4
|
+
|
|
5
|
+
/* texteditor */
|
|
6
|
+
--zd_bs_texteditor_menu: var(--zd_bs_contrast_outline, -1px 1px 2px 0 var(--zdt_texteditor_menu_after_box_shadow));
|
|
7
|
+
--zd_bs_texteditor_ul: var(--zd_bs_contrast_outline, 0 1px 32px 0 var(--zdt_texteditor_dropdown_box_shadow));
|
|
8
|
+
|
|
9
|
+
/* subtab layout */
|
|
10
|
+
--zd_bs_subtablayout_shadow: var(--zd_bs_contrast_outline, 0 0 6px var(--zdt_subtablayout_shadowstyle_box_shadow));
|
|
11
|
+
|
|
12
|
+
/* drawer */
|
|
13
|
+
--zd_bs_drawer_shadow: var(--zd_bs_contrast_outline, 0 6px 12px var(--zdt_drawer_default_box_shadow));
|
|
14
|
+
|
|
15
|
+
/* dot new */
|
|
16
|
+
--zd_bs_dotnew_shadow: var(--zd_bs_contrast_outline, 0 0 15px 1px var(--zdt_dotnew_default_box_shadow));
|
|
17
|
+
|
|
18
|
+
/* tag new */
|
|
19
|
+
--zd_bs_tagnew_shadow: var(--zd_bs_contrast_outline, 0 8px 30px 0 var(--zdt_tagnew_default_box_shadow));
|
|
20
|
+
|
|
21
|
+
/* lookup section */
|
|
22
|
+
--zd_bs_lookupsection_shadow: var(--zd_bs_contrast_outline, 0px 4px 20px var(--zdt_lookupsection_box_shadow));
|
|
23
|
+
|
|
24
|
+
/* message */
|
|
25
|
+
--zd_bs_message_container: var(--zd_bs_contrast_outline, 0 0 19px 1px var(--zdt_message_default_box_shadow));
|
|
26
|
+
|
|
27
|
+
/* plus icon */
|
|
28
|
+
--zd_bs_plusicon_container: var(--zd_bs_contrast_outline, 0 2px 3px 0 var(--zdt_plusicon_box_shadow));
|
|
29
|
+
|
|
30
|
+
/* toast message */
|
|
31
|
+
--zd_bs_toastmessage_container: var(--zd_bs_contrast_outline, 0 5px 40px 7px var(--zdt_toastmessage_default_box_shadow));
|
|
32
|
+
|
|
33
|
+
/* global notification */
|
|
34
|
+
--zd_bs_globalnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--globalnotification_box_shadow));
|
|
35
|
+
|
|
36
|
+
/* desktop notification */
|
|
37
|
+
--zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
|
|
38
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
[data-mode='default']:global(.zd-contrast) {
|
|
2
|
+
color: #000;
|
|
3
|
+
background: #fff;
|
|
4
|
+
border-color: #000;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
[data-mode='dark']:global(.zd-contrast) {
|
|
8
|
+
color: #fff;
|
|
9
|
+
background-color: #101319;
|
|
10
|
+
border-color: #fff;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
[data-mode='pureDark']:global(.zd-contrast) {
|
|
14
|
+
color: #fff;
|
|
15
|
+
background-color: #080808;
|
|
16
|
+
border-color: #fff;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
:global(.zd-contrast) {
|
|
20
|
+
--zd_bs_contrast_outline: 0 0 2px var(--zdt_contrast_shadow);
|
|
21
|
+
--zd_bs_contrast_none: 0 0 0 transparent;
|
|
22
|
+
--zd_lightmode_grey_bg: -0%;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
:global(.zd-contrast-level1) {
|
|
26
|
+
--zd_contrastLevel: 10;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
:global(.zd-contrast-level2) {
|
|
30
|
+
--zd_contrastLevel: 20;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:global(.zd-contrast-level3) {
|
|
34
|
+
--zd_contrastLevel: 40;
|
|
35
|
+
}
|