funda-ui 4.7.625 → 4.7.701
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/CascadingSelect/index.js +2 -2
- package/CascadingSelectE2E/index.js +2 -2
- package/Chatbox/index.js +3 -17
- package/Checkbox/index.js +3 -3
- package/ColorPicker/index.js +3 -18
- package/Date/index.js +3 -18
- package/EventCalendarTimeline/index.d.ts +1 -1
- package/EventCalendarTimeline/index.js +11 -1
- package/File/index.d.ts +9 -0
- package/File/index.js +245 -93
- package/Input/index.js +3 -18
- package/LiveSearch/index.js +3 -18
- package/NativeSelect/index.js +3 -3
- package/NumberInput/index.js +3 -18
- package/Popover/index.css +198 -0
- package/Popover/index.d.ts +4 -0
- package/Popover/index.js +1808 -0
- package/README.md +1 -0
- package/Radio/index.js +3 -3
- package/RangeSlider/index.js +3 -18
- package/SearchBar/index.js +3 -18
- package/Select/index.js +3 -2
- package/Switch/index.js +3 -3
- package/TagInput/index.css +31 -31
- package/TagInput/index.js +12 -23
- package/Textarea/index.js +3 -17
- package/Utils/useSSE.d.ts +9 -0
- package/Utils/useSSE.js +211 -0
- package/all.d.ts +1 -0
- package/all.js +1 -0
- package/lib/cjs/CascadingSelect/index.js +2 -2
- package/lib/cjs/CascadingSelectE2E/index.js +2 -2
- package/lib/cjs/Chatbox/index.js +3 -17
- package/lib/cjs/Checkbox/index.js +3 -3
- package/lib/cjs/ColorPicker/index.js +3 -18
- package/lib/cjs/Date/index.js +3 -18
- package/lib/cjs/EventCalendarTimeline/index.d.ts +1 -1
- package/lib/cjs/EventCalendarTimeline/index.js +11 -1
- package/lib/cjs/File/index.d.ts +9 -0
- package/lib/cjs/File/index.js +245 -93
- package/lib/cjs/Input/index.js +3 -18
- package/lib/cjs/LiveSearch/index.js +3 -18
- package/lib/cjs/NativeSelect/index.js +3 -3
- package/lib/cjs/NumberInput/index.js +3 -18
- package/lib/cjs/Popover/index.d.ts +4 -0
- package/lib/cjs/Popover/index.js +1808 -0
- package/lib/cjs/Radio/index.js +3 -3
- package/lib/cjs/RangeSlider/index.js +3 -18
- package/lib/cjs/SearchBar/index.js +3 -18
- package/lib/cjs/Select/index.js +3 -2
- package/lib/cjs/Switch/index.js +3 -3
- package/lib/cjs/TagInput/index.js +12 -23
- package/lib/cjs/Textarea/index.js +3 -17
- package/lib/cjs/Utils/useSSE.d.ts +9 -0
- package/lib/cjs/Utils/useSSE.js +211 -0
- package/lib/cjs/index.d.ts +1 -0
- package/lib/cjs/index.js +1 -0
- package/lib/css/Popover/index.css +198 -0
- package/lib/css/TagInput/index.css +31 -31
- package/lib/esm/CascadingSelect/index.tsx +2 -2
- package/lib/esm/CascadingSelectE2E/index.tsx +2 -2
- package/lib/esm/Checkbox/index.tsx +3 -3
- package/lib/esm/ColorPicker/index.tsx +4 -15
- package/lib/esm/EventCalendarTimeline/index.tsx +11 -2
- package/lib/esm/File/index.tsx +148 -23
- package/lib/esm/Input/index.tsx +6 -17
- package/lib/esm/NativeSelect/index.tsx +3 -3
- package/lib/esm/NumberInput/index.tsx +7 -15
- package/lib/esm/Popover/Popover.tsx +251 -0
- package/lib/esm/Popover/PopoverClose.tsx +51 -0
- package/lib/esm/Popover/PopoverContent.tsx +72 -0
- package/lib/esm/Popover/PopoverTrigger.tsx +62 -0
- package/lib/esm/Popover/index.scss +272 -0
- package/lib/esm/Popover/index.tsx +4 -0
- package/lib/esm/Radio/index.tsx +3 -3
- package/lib/esm/SearchBar/index.tsx +8 -12
- package/lib/esm/Select/index.tsx +2 -2
- package/lib/esm/Switch/index.tsx +3 -3
- package/lib/esm/TagInput/index.scss +24 -24
- package/lib/esm/TagInput/index.tsx +13 -20
- package/lib/esm/Textarea/index.tsx +6 -14
- package/lib/esm/Utils/hooks/useSSE.tsx +109 -0
- package/lib/esm/index.js +1 -0
- package/package.json +1 -1
package/LiveSearch/index.js
CHANGED
|
@@ -936,9 +936,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
|
|
|
936
936
|
onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(event);
|
|
937
937
|
}
|
|
938
938
|
function handleFocus(event) {
|
|
939
|
-
var _rootRef$current;
|
|
940
|
-
(_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus');
|
|
941
|
-
|
|
942
939
|
//
|
|
943
940
|
onFocus === null || onFocus === void 0 ? void 0 : onFocus(event, onComposition);
|
|
944
941
|
}
|
|
@@ -946,13 +943,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
|
|
|
946
943
|
var val = event.target.value;
|
|
947
944
|
setChangedVal(val);
|
|
948
945
|
|
|
949
|
-
//----
|
|
950
|
-
//remove focus style
|
|
951
|
-
if (val === '') {
|
|
952
|
-
var _rootRef$current2;
|
|
953
|
-
(_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.remove('focus');
|
|
954
|
-
}
|
|
955
|
-
|
|
956
946
|
//
|
|
957
947
|
onChange === null || onChange === void 0 ? void 0 : onChange(event, onComposition);
|
|
958
948
|
}
|
|
@@ -960,13 +950,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
|
|
|
960
950
|
var el = event.target;
|
|
961
951
|
var val = event.target.value;
|
|
962
952
|
|
|
963
|
-
//----
|
|
964
|
-
//remove focus style
|
|
965
|
-
if (val === '') {
|
|
966
|
-
var _rootRef$current3;
|
|
967
|
-
(_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus');
|
|
968
|
-
}
|
|
969
|
-
|
|
970
953
|
//
|
|
971
954
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, onComposition);
|
|
972
955
|
}
|
|
@@ -987,7 +970,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
|
|
|
987
970
|
setChangedVal(value || '');
|
|
988
971
|
}, [value]);
|
|
989
972
|
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
990
|
-
className: (0, funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(wrapperClassName, 'mb-3 position-relative'),
|
|
973
|
+
className: (0, funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0, funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(wrapperClassName, 'mb-3 position-relative'), {
|
|
974
|
+
'focus-floating': changedVal !== ''
|
|
975
|
+
}),
|
|
991
976
|
ref: rootRef
|
|
992
977
|
}, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, typeof label === 'string' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
|
|
993
978
|
htmlFor: idRes,
|
package/NativeSelect/index.js
CHANGED
|
@@ -1932,7 +1932,7 @@ var NativeSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_
|
|
|
1932
1932
|
}
|
|
1933
1933
|
function handleFocus(event) {
|
|
1934
1934
|
var _rootRef$current;
|
|
1935
|
-
(_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus');
|
|
1935
|
+
(_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus-floating');
|
|
1936
1936
|
|
|
1937
1937
|
//
|
|
1938
1938
|
onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
|
|
@@ -1953,7 +1953,7 @@ var NativeSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_
|
|
|
1953
1953
|
|
|
1954
1954
|
//----
|
|
1955
1955
|
//remove focus style
|
|
1956
|
-
(_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.remove('focus');
|
|
1956
|
+
(_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.remove('focus-floating');
|
|
1957
1957
|
|
|
1958
1958
|
//
|
|
1959
1959
|
if (typeof onChange === 'function') {
|
|
@@ -1965,7 +1965,7 @@ var NativeSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_
|
|
|
1965
1965
|
var _rootRef$current3;
|
|
1966
1966
|
//----
|
|
1967
1967
|
//remove focus style
|
|
1968
|
-
(_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus');
|
|
1968
|
+
(_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus-floating');
|
|
1969
1969
|
|
|
1970
1970
|
//
|
|
1971
1971
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
package/NumberInput/index.js
CHANGED
|
@@ -996,9 +996,6 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
|
|
|
996
996
|
});
|
|
997
997
|
};
|
|
998
998
|
function handleFocus(event) {
|
|
999
|
-
var _rootRef$current;
|
|
1000
|
-
(_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus');
|
|
1001
|
-
|
|
1002
999
|
//
|
|
1003
1000
|
onFocus === null || onFocus === void 0 ? void 0 : onFocus(event, valRef.current);
|
|
1004
1001
|
}
|
|
@@ -1029,13 +1026,6 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
|
|
|
1029
1026
|
var resToInput = String(newVal) === 'NaN' ? '0' : String(newVal);
|
|
1030
1027
|
setChangedVal(resToInput);
|
|
1031
1028
|
|
|
1032
|
-
//----
|
|
1033
|
-
//remove focus style
|
|
1034
|
-
if (val === '') {
|
|
1035
|
-
var _rootRef$current2;
|
|
1036
|
-
(_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.remove('focus');
|
|
1037
|
-
}
|
|
1038
|
-
|
|
1039
1029
|
//
|
|
1040
1030
|
onChange === null || onChange === void 0 ? void 0 : onChange(event, valRef.current, Number(!(0,funda_utils_dist_cjs_math__WEBPACK_IMPORTED_MODULE_3__.isNumeric)(newVal) ? '0' : resToInput));
|
|
1041
1031
|
}
|
|
@@ -1053,13 +1043,6 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
|
|
|
1053
1043
|
setChangedVal('0');
|
|
1054
1044
|
}
|
|
1055
1045
|
|
|
1056
|
-
//----
|
|
1057
|
-
//remove focus style
|
|
1058
|
-
if (val === '') {
|
|
1059
|
-
var _rootRef$current3;
|
|
1060
|
-
(_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus');
|
|
1061
|
-
}
|
|
1062
|
-
|
|
1063
1046
|
//
|
|
1064
1047
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, valRef.current);
|
|
1065
1048
|
}
|
|
@@ -1079,7 +1062,9 @@ var NumberInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)
|
|
|
1079
1062
|
}
|
|
1080
1063
|
}, []);
|
|
1081
1064
|
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
|
1082
|
-
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(wrapperClassName, 'mb-3 position-relative'),
|
|
1065
|
+
className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(wrapperClassName, 'mb-3 position-relative'), {
|
|
1066
|
+
'focus-floating': changedVal !== ''
|
|
1067
|
+
}),
|
|
1083
1068
|
ref: rootRef
|
|
1084
1069
|
}, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, typeof label === 'string' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
|
|
1085
1070
|
htmlFor: idRes,
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
/* ======================================================
|
|
2
|
+
<!-- Popover -->
|
|
3
|
+
/* ====================================================== */
|
|
4
|
+
/*
|
|
5
|
+
* 1. Base Styles
|
|
6
|
+
* 2. Position Modifiers - Top
|
|
7
|
+
* 3. Position Modifiers - Top Left
|
|
8
|
+
* 4. Position Modifiers - Top Right
|
|
9
|
+
* 5. Position Modifiers - Bottom
|
|
10
|
+
* 6. Position Modifiers - Bottom Left
|
|
11
|
+
* 7. Position Modifiers - Bottom Right
|
|
12
|
+
* 8. Position Modifiers - Left
|
|
13
|
+
* 9. Position Modifiers - Right
|
|
14
|
+
* 10. Size
|
|
15
|
+
*/
|
|
16
|
+
.cus-popover__wrapper {
|
|
17
|
+
--cus-popover-box-shadow: 0 5px 15px 0 rgba(0,0,0,.07), 0 15px 35px 0 rgba(50,50,93,.1);
|
|
18
|
+
--cus-popover-content-bg: rgba(17, 17, 17, 0.9);
|
|
19
|
+
--cus-popover-content-color: #fff;
|
|
20
|
+
--cus-popover-content-font-size: 0.75em;
|
|
21
|
+
--cus-popover-content-padding-x: 1em;
|
|
22
|
+
--cus-popover-content-padding-y: .5em;
|
|
23
|
+
--cus-popover-content-line-height: 1.5;
|
|
24
|
+
--cus-popover-arrow-bg-top: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
|
|
25
|
+
--cus-popover-arrow-bg-bottom: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
|
|
26
|
+
--cus-popover-arrow-bg-left: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
|
|
27
|
+
--cus-popover-arrow-bg-right: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
|
|
28
|
+
--cus-popover-arrow-width: 18px;
|
|
29
|
+
--cus-popover-arrow-height: 6px;
|
|
30
|
+
position: absolute;
|
|
31
|
+
z-index: 1055; /* --bs-modal-zindex */
|
|
32
|
+
pointer-events: none;
|
|
33
|
+
display: none;
|
|
34
|
+
margin-top: -0.2rem;
|
|
35
|
+
/*
|
|
36
|
+
---------------------------
|
|
37
|
+
1. Base Styles
|
|
38
|
+
---------------------------
|
|
39
|
+
*/
|
|
40
|
+
/*
|
|
41
|
+
---------------------------
|
|
42
|
+
2. Position Modifiers - Top
|
|
43
|
+
---------------------------
|
|
44
|
+
*/
|
|
45
|
+
/*
|
|
46
|
+
---------------------------
|
|
47
|
+
3. Position Modifiers - Top Left
|
|
48
|
+
---------------------------
|
|
49
|
+
*/
|
|
50
|
+
/*
|
|
51
|
+
---------------------------
|
|
52
|
+
4. Position Modifiers - Top Right
|
|
53
|
+
---------------------------
|
|
54
|
+
*/
|
|
55
|
+
/*
|
|
56
|
+
---------------------------
|
|
57
|
+
5. Position Modifiers - Bottom
|
|
58
|
+
---------------------------
|
|
59
|
+
*/
|
|
60
|
+
/*
|
|
61
|
+
---------------------------
|
|
62
|
+
6. Position Modifiers - Bottom Left
|
|
63
|
+
---------------------------
|
|
64
|
+
*/
|
|
65
|
+
/*
|
|
66
|
+
---------------------------
|
|
67
|
+
7. Position Modifiers - Bottom Right
|
|
68
|
+
---------------------------
|
|
69
|
+
*/
|
|
70
|
+
/*
|
|
71
|
+
---------------------------
|
|
72
|
+
10. Size
|
|
73
|
+
---------------------------
|
|
74
|
+
*/
|
|
75
|
+
}
|
|
76
|
+
.cus-popover__wrapper::before {
|
|
77
|
+
background-size: 100% auto !important;
|
|
78
|
+
content: "";
|
|
79
|
+
position: absolute;
|
|
80
|
+
}
|
|
81
|
+
.cus-popover__wrapper.active {
|
|
82
|
+
display: block !important;
|
|
83
|
+
}
|
|
84
|
+
.cus-popover__wrapper.active::before,
|
|
85
|
+
.cus-popover__wrapper.active > .cus-popover__content {
|
|
86
|
+
opacity: 1;
|
|
87
|
+
}
|
|
88
|
+
.cus-popover__wrapper:focus::before,
|
|
89
|
+
.cus-popover__wrapper:focus > .cus-popover__content {
|
|
90
|
+
opacity: 1;
|
|
91
|
+
}
|
|
92
|
+
.cus-popover__wrapper::before,
|
|
93
|
+
.cus-popover__wrapper > .cus-popover__content {
|
|
94
|
+
backface-visibility: hidden;
|
|
95
|
+
will-change: transform;
|
|
96
|
+
opacity: 0;
|
|
97
|
+
box-sizing: border-box;
|
|
98
|
+
z-index: 10;
|
|
99
|
+
transform-origin: top;
|
|
100
|
+
box-shadow: var(--cus-popover-box-shadow);
|
|
101
|
+
transition: none !important; /* Don't use transition if position is outside window */
|
|
102
|
+
}
|
|
103
|
+
.cus-popover__wrapper > .cus-popover__content {
|
|
104
|
+
pointer-events: auto;
|
|
105
|
+
background: var(--cus-popover-content-bg);
|
|
106
|
+
border-radius: 4px;
|
|
107
|
+
color: var(--cus-popover-content-color);
|
|
108
|
+
content: attr(aria-label);
|
|
109
|
+
font-size: var(--cus-popover-content-font-size);
|
|
110
|
+
font-weight: normal;
|
|
111
|
+
text-transform: none;
|
|
112
|
+
padding: var(--cus-popover-content-padding-y) var(--cus-popover-content-padding-x);
|
|
113
|
+
white-space: nowrap;
|
|
114
|
+
box-sizing: content-box;
|
|
115
|
+
line-height: var(--cus-popover-content-line-height);
|
|
116
|
+
}
|
|
117
|
+
.cus-popover__wrapper > .cus-popover__content img {
|
|
118
|
+
height: auto !important;
|
|
119
|
+
margin: 0.5rem 0;
|
|
120
|
+
}
|
|
121
|
+
.cus-popover__wrapper[data-microtip-position|=top]::before {
|
|
122
|
+
background: var(--cus-popover-arrow-bg-top);
|
|
123
|
+
height: var(--cus-popover-arrow-height);
|
|
124
|
+
width: var(--cus-popover-arrow-width);
|
|
125
|
+
}
|
|
126
|
+
.cus-popover__wrapper[data-microtip-position|=top] > .cus-popover__content {
|
|
127
|
+
margin-bottom: var(--cus-popover-arrow-height);
|
|
128
|
+
}
|
|
129
|
+
.cus-popover__wrapper[data-microtip-position|=top]::before {
|
|
130
|
+
top: calc(100% - var(--cus-popover-arrow-height));
|
|
131
|
+
left: calc(var(--cus-popover-arrow-width) / 2 * -1);
|
|
132
|
+
}
|
|
133
|
+
.cus-popover__wrapper[data-microtip-position|=top] > .cus-popover__content {
|
|
134
|
+
bottom: calc(100% + var(--cus-popover-arrow-height));
|
|
135
|
+
left: 50%;
|
|
136
|
+
transform: translateX(-50%);
|
|
137
|
+
}
|
|
138
|
+
.cus-popover__wrapper[data-microtip-position=top-left] > .cus-popover__content {
|
|
139
|
+
bottom: calc(100% + var(--cus-popover-arrow-height));
|
|
140
|
+
left: 50%;
|
|
141
|
+
transform: translateX(calc(-100% + var(--cus-popover-arrow-width)));
|
|
142
|
+
}
|
|
143
|
+
.cus-popover__wrapper[data-microtip-position=top-right] > .cus-popover__content {
|
|
144
|
+
bottom: calc(100% + var(--cus-popover-arrow-height));
|
|
145
|
+
left: 50%;
|
|
146
|
+
transform: translateX(calc(0% - var(--cus-popover-arrow-width)));
|
|
147
|
+
}
|
|
148
|
+
.cus-popover__wrapper[data-microtip-position|=bottom]::before {
|
|
149
|
+
background: var(--cus-popover-arrow-bg-bottom);
|
|
150
|
+
height: var(--cus-popover-arrow-height);
|
|
151
|
+
width: var(--cus-popover-arrow-width);
|
|
152
|
+
margin-top: 5px;
|
|
153
|
+
margin-bottom: 0;
|
|
154
|
+
}
|
|
155
|
+
.cus-popover__wrapper[data-microtip-position|=bottom] > .cus-popover__content {
|
|
156
|
+
margin-top: var(--cus-popover-arrow-height);
|
|
157
|
+
}
|
|
158
|
+
.cus-popover__wrapper[data-microtip-position|=bottom]::before {
|
|
159
|
+
bottom: calc(100% - var(--cus-popover-arrow-height));
|
|
160
|
+
left: calc(var(--cus-popover-arrow-width) / 2 * -1);
|
|
161
|
+
}
|
|
162
|
+
.cus-popover__wrapper[data-microtip-position|=bottom] > .cus-popover__content {
|
|
163
|
+
bottom: auto;
|
|
164
|
+
top: calc(100% + var(--cus-popover-arrow-height));
|
|
165
|
+
left: 50%;
|
|
166
|
+
transform: translateX(-50%);
|
|
167
|
+
}
|
|
168
|
+
.cus-popover__wrapper[data-microtip-position=bottom-left] > .cus-popover__content {
|
|
169
|
+
bottom: auto;
|
|
170
|
+
top: calc(100% + var(--cus-popover-arrow-height));
|
|
171
|
+
left: 50%;
|
|
172
|
+
transform: translateX(calc(-100% + var(--cus-popover-arrow-width)));
|
|
173
|
+
}
|
|
174
|
+
.cus-popover__wrapper[data-microtip-position=bottom-right] > .cus-popover__content {
|
|
175
|
+
bottom: auto;
|
|
176
|
+
top: calc(100% + var(--cus-popover-arrow-height));
|
|
177
|
+
left: 50%;
|
|
178
|
+
transform: translateX(calc(0% - var(--cus-popover-arrow-width)));
|
|
179
|
+
}
|
|
180
|
+
.cus-popover__wrapper[data-microtip-size=auto].cus-popover__content {
|
|
181
|
+
white-space: nowrap;
|
|
182
|
+
width: auto;
|
|
183
|
+
max-width: 530px;
|
|
184
|
+
overflow: hidden;
|
|
185
|
+
text-overflow: ellipsis;
|
|
186
|
+
}
|
|
187
|
+
.cus-popover__wrapper[data-microtip-size=small].cus-popover__content {
|
|
188
|
+
white-space: initial;
|
|
189
|
+
width: 80px;
|
|
190
|
+
}
|
|
191
|
+
.cus-popover__wrapper[data-microtip-size=medium].cus-popover__content {
|
|
192
|
+
white-space: initial;
|
|
193
|
+
width: 150px;
|
|
194
|
+
}
|
|
195
|
+
.cus-popover__wrapper[data-microtip-size=large].cus-popover__content {
|
|
196
|
+
white-space: initial;
|
|
197
|
+
width: 260px;
|
|
198
|
+
}
|