@cashub/ui 0.13.8 → 0.13.10
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/cropper/Cropper.js +22 -2
- package/cropper/CropperModalHandler.js +10 -2
- package/cropper/subComponent/CropImageModal.js +10 -2
- package/datetimePicker/DatetimePicker.js +1 -1
- package/dropzone/ImageDropzone.js +9 -1
- package/map/CustomLeafletMapContainer.js +1 -1
- package/package.json +1 -1
- package/styles/theme/index.js +6 -3
- package/styles/theme/light.theme.js +3 -3
- package/styles/theme/white.theme.js +2 -2
- package/table/PermissionTable.js +2 -2
- package/toast/CustomToastContainer.js +1 -1
package/cropper/Cropper.js
CHANGED
|
@@ -25,7 +25,11 @@ var CropperWrapper = function CropperWrapper(_ref) {
|
|
|
25
25
|
cropBoxResizable = _ref$cropBoxResizable === void 0 ? false : _ref$cropBoxResizable,
|
|
26
26
|
onInitialized = _ref.onInitialized,
|
|
27
27
|
_ref$dragMode = _ref.dragMode,
|
|
28
|
-
dragMode = _ref$dragMode === void 0 ? 'move' : _ref$dragMode
|
|
28
|
+
dragMode = _ref$dragMode === void 0 ? 'move' : _ref$dragMode,
|
|
29
|
+
minCroppedWidth = _ref.minCroppedWidth,
|
|
30
|
+
minCroppedHeight = _ref.minCroppedHeight,
|
|
31
|
+
maxCroppedWidth = _ref.maxCroppedWidth,
|
|
32
|
+
maxCroppedHeight = _ref.maxCroppedHeight;
|
|
29
33
|
var imageRef = (0, _react.useRef)(null);
|
|
30
34
|
(0, _react.useEffect)(function () {
|
|
31
35
|
var node = imageRef.current;
|
|
@@ -37,9 +41,25 @@ var CropperWrapper = function CropperWrapper(_ref) {
|
|
|
37
41
|
initialAspectRatio: 9 / 16,
|
|
38
42
|
background: true,
|
|
39
43
|
cropBoxResizable: cropBoxResizable,
|
|
44
|
+
minCroppedWidth: minCroppedWidth,
|
|
45
|
+
minCroppedHeight: minCroppedHeight,
|
|
46
|
+
maxCroppedWidth: maxCroppedWidth,
|
|
47
|
+
maxCroppedHeight: maxCroppedHeight,
|
|
40
48
|
data: {
|
|
41
49
|
width: width,
|
|
42
50
|
height: height
|
|
51
|
+
},
|
|
52
|
+
crop: function crop(event) {
|
|
53
|
+
var width = Math.round(event.detail.width);
|
|
54
|
+
var height = Math.round(event.detail.height);
|
|
55
|
+
|
|
56
|
+
if (width < minCroppedWidth || height < minCroppedHeight || width > maxCroppedWidth || height > maxCroppedHeight) {
|
|
57
|
+
cropper.setData({
|
|
58
|
+
width: Math.max(minCroppedWidth, Math.min(maxCroppedWidth, width)),
|
|
59
|
+
height: Math.max(minCroppedHeight, Math.min(maxCroppedHeight, height))
|
|
60
|
+
});
|
|
61
|
+
node.textContent = JSON.stringify(cropper.getData(true));
|
|
62
|
+
}
|
|
43
63
|
}
|
|
44
64
|
});
|
|
45
65
|
|
|
@@ -53,7 +73,7 @@ var CropperWrapper = function CropperWrapper(_ref) {
|
|
|
53
73
|
|
|
54
74
|
node === null || node === void 0 ? void 0 : (_node$cropper = node.cropper) === null || _node$cropper === void 0 ? void 0 : _node$cropper.destroy();
|
|
55
75
|
};
|
|
56
|
-
}, [onInitialized, dragMode, width, height]);
|
|
76
|
+
}, [onInitialized, dragMode, width, height, cropBoxResizable, minCroppedWidth, minCroppedHeight, maxCroppedWidth, maxCroppedHeight]);
|
|
57
77
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
58
78
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
|
|
59
79
|
src: src,
|
|
@@ -21,7 +21,11 @@ var CropperModalHandler = function CropperModalHandler(_ref) {
|
|
|
21
21
|
_ref$cropBoxResizable = _ref.cropBoxResizable,
|
|
22
22
|
cropBoxResizable = _ref$cropBoxResizable === void 0 ? false : _ref$cropBoxResizable,
|
|
23
23
|
onCrop = _ref.onCrop,
|
|
24
|
-
_onClose = _ref.onClose
|
|
24
|
+
_onClose = _ref.onClose,
|
|
25
|
+
minCroppedWidth = _ref.minCroppedWidth,
|
|
26
|
+
minCroppedHeight = _ref.minCroppedHeight,
|
|
27
|
+
maxCroppedWidth = _ref.maxCroppedWidth,
|
|
28
|
+
maxCroppedHeight = _ref.maxCroppedHeight;
|
|
25
29
|
(0, _TitleModal.default)({
|
|
26
30
|
size: 'normal',
|
|
27
31
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CropImageModal.default, {
|
|
@@ -33,7 +37,11 @@ var CropperModalHandler = function CropperModalHandler(_ref) {
|
|
|
33
37
|
height: height,
|
|
34
38
|
cropBoxResizable: cropBoxResizable,
|
|
35
39
|
onCrop: onCrop,
|
|
36
|
-
onClose: _onClose
|
|
40
|
+
onClose: _onClose,
|
|
41
|
+
minCroppedWidth: minCroppedWidth,
|
|
42
|
+
minCroppedHeight: minCroppedHeight,
|
|
43
|
+
maxCroppedWidth: maxCroppedWidth,
|
|
44
|
+
maxCroppedHeight: maxCroppedHeight
|
|
37
45
|
}),
|
|
38
46
|
onClose: function onClose(dismiss) {
|
|
39
47
|
if (dismiss === true && _onClose) {
|
|
@@ -45,7 +45,11 @@ var CropImageModal = function CropImageModal(_ref) {
|
|
|
45
45
|
cropBoxResizable = _ref$cropBoxResizable === void 0 ? false : _ref$cropBoxResizable,
|
|
46
46
|
onCrop = _ref.onCrop,
|
|
47
47
|
onClose = _ref.onClose,
|
|
48
|
-
close = _ref.close
|
|
48
|
+
close = _ref.close,
|
|
49
|
+
minCroppedWidth = _ref.minCroppedWidth,
|
|
50
|
+
minCroppedHeight = _ref.minCroppedHeight,
|
|
51
|
+
maxCroppedWidth = _ref.maxCroppedWidth,
|
|
52
|
+
maxCroppedHeight = _ref.maxCroppedHeight;
|
|
49
53
|
|
|
50
54
|
var _useTranslation = (0, _reactI18next.useTranslation)(),
|
|
51
55
|
t = _useTranslation.t;
|
|
@@ -92,7 +96,11 @@ var CropImageModal = function CropImageModal(_ref) {
|
|
|
92
96
|
width: width,
|
|
93
97
|
height: height,
|
|
94
98
|
cropBoxResizable: cropBoxResizable,
|
|
95
|
-
onInitialized: handleInitialized
|
|
99
|
+
onInitialized: handleInitialized,
|
|
100
|
+
minCroppedWidth: minCroppedWidth,
|
|
101
|
+
minCroppedHeight: minCroppedHeight,
|
|
102
|
+
maxCroppedWidth: maxCroppedWidth,
|
|
103
|
+
maxCroppedHeight: maxCroppedHeight
|
|
96
104
|
})
|
|
97
105
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TitleModal.default.Footer, {
|
|
98
106
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ButtonGroup.default, {
|
|
@@ -81,7 +81,7 @@ var DatetimePicker = function DatetimePicker(_ref) {
|
|
|
81
81
|
});
|
|
82
82
|
};
|
|
83
83
|
|
|
84
|
-
var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .react-datepicker-wrapper,\n .react-datepicker__input-container {\n > input {\n width: 100%;\n height: 36px;\n color: var(--font-on-background);\n background: transparent;\n border-radius: var(--border-radius-l);\n border: var(--border-width) solid var(--border-color);\n padding: 0 var(--spacing-s);\n outline: none;\n\n ", "\n }\n }\n\n .react-datepicker-popper {\n z-index: 2;\n }\n\n .react-datepicker-popper[data-placement^='top'] {\n padding-bottom: var(--spacing-xs);\n }\n\n .react-datepicker-popper[data-placement^='bottom'] {\n padding-top: var(--spacing-xs);\n }\n\n .react-datepicker {\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--border-color);\n padding: var(--spacing-s);\n font-size: var(--font-body1);\n color: var(--font-on-background);\n background: var(--color-background1);\n\n .react-datepicker__triangle {\n &::before,\n &::after {\n display: none;\n }\n }\n\n .react-datepicker__header {\n border: none;\n padding: 0;\n background: var(--color-background1);\n }\n\n .react-datepicker__current-month {\n line-height: 36px;\n color: var(--font-on-background);\n font-size: var(--font-body1);\n font-weight: var(--font-normal);\n }\n\n .react-datepicker__day-names {\n margin: 0;\n }\n\n .react-datepicker__day-name,\n .react-datepicker__day {\n width: 36px;\n height: 36px;\n line-height: 36px;\n color: var(--font-on-background);\n font-weight: var(--font-normal);\n margin: 0;\n border-radius: 4px;\n }\n\n .react-datepicker__day:hover {\n background: var(--color-hover);\n }\n\n .react-datepicker__day--disabled {\n color: var(--font-on-mute);\n background: none !important;\n }\n }\n\n .react-datepicker__month {\n margin: 0;\n }\n\n .react-datepicker__navigation {\n top: 0;\n width: 36px;\n height: 36px;\n margin: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);\n border-radius: 4px;\n\n &.react-datepicker__navigation--previous {\n left: 0;\n }\n\n &.react-datepicker__navigation--next {\n right: 0;\n }\n\n &:hover {\n background: var(--color-hover);\n }\n\n .react-datepicker__navigation-icon::before {\n border-color: var(--font-on-background)
|
|
84
|
+
var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .react-datepicker-wrapper,\n .react-datepicker__input-container {\n > input {\n width: 100%;\n height: 36px;\n color: var(--font-on-background);\n background: transparent;\n border-radius: var(--border-radius-l);\n border: var(--border-width) solid var(--border-color);\n padding: 0 var(--spacing-s);\n outline: none;\n\n ", "\n }\n }\n\n .react-datepicker-popper {\n z-index: 2;\n }\n\n .react-datepicker-popper[data-placement^='top'] {\n padding-bottom: var(--spacing-xs);\n }\n\n .react-datepicker-popper[data-placement^='bottom'] {\n padding-top: var(--spacing-xs);\n }\n\n .react-datepicker {\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--border-color);\n padding: var(--spacing-s);\n font-size: var(--font-body1);\n color: var(--font-on-background);\n background: var(--color-background1);\n\n .react-datepicker__triangle {\n &::before,\n &::after {\n display: none;\n }\n }\n\n .react-datepicker__header {\n border: none;\n padding: 0;\n background: var(--color-background1);\n }\n\n .react-datepicker__current-month {\n line-height: 36px;\n color: var(--font-on-background);\n font-size: var(--font-body1);\n font-weight: var(--font-normal);\n }\n\n .react-datepicker__day-names {\n margin: 0;\n }\n\n .react-datepicker__day-name,\n .react-datepicker__day {\n width: 36px;\n height: 36px;\n line-height: 36px;\n color: var(--font-on-background);\n font-weight: var(--font-normal);\n margin: 0;\n border-radius: 4px;\n }\n\n .react-datepicker__day:hover {\n background: var(--color-hover);\n }\n\n .react-datepicker__day--disabled {\n color: var(--font-on-mute);\n background: none !important;\n }\n }\n\n .react-datepicker__month {\n margin: 0;\n }\n\n .react-datepicker__navigation {\n top: 0;\n width: 36px;\n height: 36px;\n margin: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);\n border-radius: 4px;\n\n &.react-datepicker__navigation--previous {\n left: 0;\n }\n\n &.react-datepicker__navigation--next {\n right: 0;\n }\n\n &:hover {\n background: var(--color-hover);\n }\n\n .react-datepicker__navigation-icon::before {\n border-color: var(--font-on-background);\n }\n\n .react-datepicker__navigation-icon--previous::before {\n right: -4px;\n }\n\n .react-datepicker__navigation-icon--next::before {\n left: -4px;\n }\n }\n\n .react-datepicker__day--selected,\n .react-datepicker__day--in-selecting-range,\n .react-datepicker__day--in-range,\n .react-datepicker__month-text--selected,\n .react-datepicker__month-text--in-selecting-range,\n .react-datepicker__month-text--in-range,\n .react-datepicker__quarter-text--selected,\n .react-datepicker__quarter-text--in-selecting-range,\n .react-datepicker__quarter-text--in-range,\n .react-datepicker__year-text--selected,\n .react-datepicker__year-text--in-selecting-range,\n .react-datepicker__year-text--in-range {\n background: var(--color-primary) !important;\n }\n\n .react-datepicker__day--keyboard-selected,\n .react-datepicker__month-text--keyboard-selected,\n .react-datepicker__quarter-text--keyboard-selected,\n .react-datepicker__year-text--keyboard-selected {\n background: none;\n }\n\n .react-datepicker__input-time-container {\n margin: 0;\n margin-top: var(--spacing-s);\n margin-left: var(--spacing-xs);\n\n .react-datepicker-time__input input {\n height: 36px;\n padding: 0 var(--spacing-xs);\n border-radius: var(--border-radius);\n border: var(--border-width) solid var(--border-color);\n background: transparent;\n color: var(--font-on-background);\n outline: none;\n }\n }\n"])), function (_ref2) {
|
|
85
85
|
var disabled = _ref2.disabled;
|
|
86
86
|
return disabled ? 'cursor: not-allowed; opacity: 0.5;' : '';
|
|
87
87
|
});
|
|
@@ -54,6 +54,10 @@ var ImageDropzone = function ImageDropzone(_ref) {
|
|
|
54
54
|
width = _ref$width === void 0 ? 180 : _ref$width,
|
|
55
55
|
_ref$height = _ref.height,
|
|
56
56
|
height = _ref$height === void 0 ? 320 : _ref$height,
|
|
57
|
+
minCroppedWidth = _ref.minCroppedWidth,
|
|
58
|
+
minCroppedHeight = _ref.minCroppedHeight,
|
|
59
|
+
maxCroppedWidth = _ref.maxCroppedWidth,
|
|
60
|
+
maxCroppedHeight = _ref.maxCroppedHeight,
|
|
57
61
|
_ref$fixedSize = _ref.fixedSize,
|
|
58
62
|
fixedSize = _ref$fixedSize === void 0 ? true : _ref$fixedSize,
|
|
59
63
|
maxFiles = _ref.maxFiles,
|
|
@@ -182,6 +186,10 @@ var ImageDropzone = function ImageDropzone(_ref) {
|
|
|
182
186
|
src: file.url,
|
|
183
187
|
width: width,
|
|
184
188
|
height: height,
|
|
189
|
+
minCroppedWidth: minCroppedWidth,
|
|
190
|
+
minCroppedHeight: minCroppedHeight,
|
|
191
|
+
maxCroppedWidth: maxCroppedWidth,
|
|
192
|
+
maxCroppedHeight: maxCroppedHeight,
|
|
185
193
|
cropBoxResizable: cropper.cropBoxResizable ? cropper.cropBoxResizable : false,
|
|
186
194
|
onCrop: function onCrop(croppedSrc) {
|
|
187
195
|
var croppedImageFile = (0, _utils.dataURLtoFile)(croppedSrc, file.name);
|
|
@@ -195,7 +203,7 @@ var ImageDropzone = function ImageDropzone(_ref) {
|
|
|
195
203
|
});
|
|
196
204
|
}
|
|
197
205
|
});
|
|
198
|
-
}, [width, height, cropper]);
|
|
206
|
+
}, [width, height, cropper, minCroppedWidth, minCroppedHeight, maxCroppedWidth, maxCroppedHeight]);
|
|
199
207
|
|
|
200
208
|
var previewItem = function previewItem() {
|
|
201
209
|
return files.map(function (file, index) {
|
|
@@ -15,7 +15,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
15
15
|
|
|
16
16
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
17
17
|
|
|
18
|
-
var CustomLeafletMapContainer = (0, _styledComponents.default)(_reactLeaflet.MapContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n height: ", "px;\n border-radius: var(--border-radius);\n z-index: 1;\n\n &:focus {\n border:
|
|
18
|
+
var CustomLeafletMapContainer = (0, _styledComponents.default)(_reactLeaflet.MapContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n height: ", "px;\n border: 1px solid transparent;\n border-radius: var(--border-radius);\n z-index: 1;\n\n &:focus {\n border-color: var(--border-color);\n box-shadow: var(--box-shadow);\n }\n\n .leaflet-control-container {\n .leaflet-control-zoom {\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n\n a {\n background: transparent;\n border-bottom: 1px solid var(--border-color);\n color: var(--font-on-background);\n\n &:last-child {\n border-bottom: none;\n }\n\n &.leaflet-disabled {\n opacity: 0.5;\n }\n }\n }\n\n .leaflet-draw {\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius);\n\n a {\n background-color: var(--color-background1);\n }\n\n .leaflet-draw-draw-polyline {\n background-position: -3px -3px;\n }\n\n .leaflet-draw-draw-polygon {\n background-position: -32px -3px;\n }\n\n .leaflet-draw-draw-rectangle {\n background-position: -63px -3px;\n }\n\n .leaflet-draw-draw-circle {\n background-position: -93px -3px;\n }\n\n .leaflet-draw-draw-marker {\n background-position: -123px -3px;\n }\n\n .leaflet-draw-draw-circlemarker {\n background-position: -273px -3px;\n }\n\n .leaflet-draw-edit-edit {\n background-position: -213px -3px;\n }\n\n .leaflet-draw-edit-remove {\n background-position: -243px -3px;\n }\n }\n\n .leaflet-left .leaflet-control {\n margin-left: var(--spacing-s);\n }\n\n .leaflet-right .leaflet-control {\n margin-right: var(--spacing-s);\n }\n\n .leaflet-top .leaflet-control {\n margin-top: var(--spacing-s);\n }\n\n .leaflet-control {\n font-weight: bold;\n background: var(--color-background1);\n\n &.leaflet-control-attribution {\n background: var(--color-white);\n color: var(--color-dark);\n margin: 0;\n }\n }\n }\n\n .leaflet-edit-move {\n border-radius: 50px;\n border-color: var(--border-color);\n }\n\n .leaflet-edit-resize {\n border-radius: 50px;\n border-color: var(--border-color);\n }\n\n &.leaflet-touch {\n .leaflet-bar {\n border: none;\n\n a {\n width: 24px;\n height: 24px;\n line-height: 24px;\n }\n }\n\n .leaflet-left .leaflet-control {\n margin-left: var(--spacing-s);\n }\n\n .leaflet-right .leaflet-control {\n margin-right: var(--spacing-s);\n }\n\n .leaflet-top .leaflet-control {\n margin-top: var(--spacing-s);\n }\n }\n\n .marker-cluster {\n background: var(--color-primary) a1;\n\n div {\n background: var(--color-primary);\n color: var(--font-on-primary);\n }\n }\n\n .leaflet-popup-content-wrapper {\n background: transparent;\n box-shadow: unset;\n }\n\n .leaflet-popup-tip {\n display: none;\n }\n\n .sr-only {\n display: none;\n }\n"])), function (_ref) {
|
|
19
19
|
var height = _ref.height;
|
|
20
20
|
return height;
|
|
21
21
|
});
|
package/package.json
CHANGED
package/styles/theme/index.js
CHANGED
|
@@ -5,15 +5,18 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
|
|
8
|
-
var
|
|
8
|
+
var _white = _interopRequireDefault(require("./white.theme"));
|
|
9
9
|
|
|
10
10
|
var _light = _interopRequireDefault(require("./light.theme"));
|
|
11
11
|
|
|
12
|
+
var _dark = _interopRequireDefault(require("./dark.theme"));
|
|
13
|
+
|
|
12
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
15
|
|
|
14
16
|
var themes = {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
+
White: _white.default,
|
|
18
|
+
Light: _light.default,
|
|
19
|
+
Dark: _dark.default
|
|
17
20
|
};
|
|
18
21
|
var _default = themes;
|
|
19
22
|
exports.default = _default;
|
|
@@ -16,10 +16,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
16
16
|
var colorStyle = {
|
|
17
17
|
colorWhite: '#ffffff',
|
|
18
18
|
colorDark: '#353351',
|
|
19
|
-
colorGrey: '#
|
|
19
|
+
colorGrey: '#989cad',
|
|
20
20
|
colorPrimary: '#3661ec',
|
|
21
|
-
colorSuccess: '#
|
|
22
|
-
colorWarning: '#
|
|
21
|
+
colorSuccess: '#48d5cc',
|
|
22
|
+
colorWarning: '#feb444',
|
|
23
23
|
colorDanger: '#F495A1',
|
|
24
24
|
colorHover: 'rgba(54, 97, 236, 0.2)',
|
|
25
25
|
colorActive: 'rgba(54, 97, 236, 0.2)',
|
|
@@ -16,10 +16,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
|
|
|
16
16
|
var colorStyle = {
|
|
17
17
|
colorWhite: '#ffffff',
|
|
18
18
|
colorDark: '#353351',
|
|
19
|
-
colorGrey: '#
|
|
19
|
+
colorGrey: '#b7bbcd',
|
|
20
20
|
colorPrimary: '#345FEB',
|
|
21
21
|
colorSuccess: '#11D8CD',
|
|
22
|
-
colorWarning: '#
|
|
22
|
+
colorWarning: '#feb444',
|
|
23
23
|
colorDanger: '#F495A1',
|
|
24
24
|
colorHover: 'rgba(52, 95, 235, 0.2)',
|
|
25
25
|
colorActive: 'rgba(52, 95, 235, 0.2)',
|
package/table/PermissionTable.js
CHANGED
|
@@ -15,7 +15,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
15
15
|
|
|
16
16
|
var PermissionTable = _styledComponents.default.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n vertical-align: middle;\n table-layout: fixed;\n border: 0;\n color: var(--font-on-background);\n"])));
|
|
17
17
|
|
|
18
|
-
var TH = _styledComponents.default.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: var(--spacing) 0;\n border-bottom: 1px solid
|
|
18
|
+
var TH = _styledComponents.default.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: var(--spacing) 0;\n border-bottom: 1px solid var(--border-color);\n font-weight: var(--font-bold);\n\n ", "\n ", "\n"])), function (_ref) {
|
|
19
19
|
var clickable = _ref.clickable;
|
|
20
20
|
return clickable && 'cursor: pointer;';
|
|
21
21
|
}, function (_ref2) {
|
|
@@ -23,7 +23,7 @@ var TH = _styledComponents.default.th(_templateObject2 || (_templateObject2 = _t
|
|
|
23
23
|
return alignCenter && 'text-align: center;';
|
|
24
24
|
});
|
|
25
25
|
|
|
26
|
-
var TD = _styledComponents.default.td(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: var(--spacing) 0;\n border-bottom: 1px solid
|
|
26
|
+
var TD = _styledComponents.default.td(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: var(--spacing) 0;\n border-bottom: 1px solid var(--border-color);\n\n &:nth-child(even) {\n background: var(--color-background1);\n }\n\n ", "\n ", "\n ", "\n"])), function (_ref3) {
|
|
27
27
|
var clickable = _ref3.clickable;
|
|
28
28
|
return clickable && 'cursor: pointer;';
|
|
29
29
|
}, function (_ref4) {
|
|
@@ -15,6 +15,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
15
15
|
|
|
16
16
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
17
17
|
|
|
18
|
-
var CustomToastContainer = (0, _styledComponents.default)(_reactToastify.ToastContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 360px;\n\n .Toastify__toast {\n padding: 15px 15px 15px 50px;\n box-shadow: 0 0 8px #999999;\n background-repeat: no-repeat;\n background-position: 15px center;\n }\n\n .Toastify__toast--error {\n
|
|
18
|
+
var CustomToastContainer = (0, _styledComponents.default)(_reactToastify.ToastContainer)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 360px;\n\n .Toastify__toast {\n padding: 15px 15px 15px 50px;\n box-shadow: 0 0 8px #999999;\n background-repeat: no-repeat;\n background-position: 15px center;\n }\n\n .Toastify__toast--error {\n background-color: var(--color-danger);\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=');\n }\n\n .Toastify__toast--success {\n background-color: var(--color-success);\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==');\n }\n\n .Toastify__toast--warning {\n background-color: var(--color-warning);\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==');\n }\n"])));
|
|
19
19
|
var _default = CustomToastContainer;
|
|
20
20
|
exports.default = _default;
|