@cashub/ui 0.13.7 → 0.13.9
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/datetimePicker/DatetimePicker.js +1 -1
- package/map/CustomLeafletMapContainer.js +1 -1
- package/package.json +1 -1
- package/paginate/Paginate.js +5 -5
- package/styles/theme/light.theme.js +6 -6
- package/styles/theme/white.theme.js +94 -0
- package/table/PermissionTable.js +2 -2
- package/table/Table.js +1 -1
- package/toast/CustomToastContainer.js +1 -1
- package/wizard/Wizard.js +1 -1
|
@@ -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
|
});
|
|
@@ -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/paginate/Paginate.js
CHANGED
|
@@ -15,7 +15,7 @@ var _hooks = require("@cashub/hooks");
|
|
|
15
15
|
|
|
16
16
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
17
|
|
|
18
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4
|
|
18
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
19
19
|
|
|
20
20
|
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); }
|
|
21
21
|
|
|
@@ -91,19 +91,19 @@ var Container = _styledComponents.default.ul(_templateObject || (_templateObject
|
|
|
91
91
|
return alignRight && 'justify-content: flex-end';
|
|
92
92
|
});
|
|
93
93
|
|
|
94
|
-
var Link = _styledComponents.default.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 36px;\n line-height: 37px;\n font-size: var(--font-body1);\n color: var(--font-on-
|
|
94
|
+
var Link = _styledComponents.default.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 36px;\n line-height: 37px;\n font-size: var(--font-body1);\n color: var(--font-on-background);\n border-radius: var(--border-radius-round);\n cursor: pointer;\n transition: 0.3s;\n\n &:not(:last-child) {\n margin-right: var(--spacing-xs);\n }\n\n ", ";\n\n ", "\n\n &:hover {\n ", "\n }\n\n &.paginationDots {\n cursor: default;\n }\n"])), function (_ref2) {
|
|
95
95
|
var disabled = _ref2.disabled;
|
|
96
96
|
return disabled && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: no-drop;\n "])));
|
|
97
97
|
}, function (_ref3) {
|
|
98
98
|
var active = _ref3.active;
|
|
99
|
-
return active &&
|
|
99
|
+
return active && "\n background-color: var(--color-primary);\n color: var(--font-on-primary);\n ";
|
|
100
100
|
}, function (_ref4) {
|
|
101
101
|
var disabled = _ref4.disabled,
|
|
102
102
|
className = _ref4.className;
|
|
103
|
-
return !disabled && !className &&
|
|
103
|
+
return !disabled && !className && "\n background-color: var(--color-primary);\n color: var(--font-on-primary);\n ";
|
|
104
104
|
});
|
|
105
105
|
|
|
106
|
-
var Icon = _styledComponents.default.span(
|
|
106
|
+
var Icon = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: var(--font-body1);\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n"])));
|
|
107
107
|
|
|
108
108
|
var _default = Paginate;
|
|
109
109
|
exports.default = _default;
|
|
@@ -17,13 +17,13 @@ var colorStyle = {
|
|
|
17
17
|
colorWhite: '#ffffff',
|
|
18
18
|
colorDark: '#353351',
|
|
19
19
|
colorGrey: '#5b5f6f',
|
|
20
|
-
colorPrimary: '#
|
|
20
|
+
colorPrimary: '#3661ec',
|
|
21
21
|
colorSuccess: '#93E7E2',
|
|
22
22
|
colorWarning: '#FFDFAF',
|
|
23
23
|
colorDanger: '#F495A1',
|
|
24
|
-
colorHover: 'rgba(
|
|
25
|
-
colorActive: 'rgba(
|
|
26
|
-
scrollBarColor: 'rgba(
|
|
24
|
+
colorHover: 'rgba(54, 97, 236, 0.2)',
|
|
25
|
+
colorActive: 'rgba(54, 97, 236, 0.2)',
|
|
26
|
+
scrollBarColor: 'rgba(54, 97, 236, 0.3)',
|
|
27
27
|
bgColor1: '#F0ECFF',
|
|
28
28
|
bgColor2: '#F8F4FF',
|
|
29
29
|
bgColor3: '#E6E1FF',
|
|
@@ -41,12 +41,12 @@ var fontStyle = {
|
|
|
41
41
|
fontFamily: 'Helvetica',
|
|
42
42
|
fontWeightNormal: '400',
|
|
43
43
|
fontWeightBold: 'bold',
|
|
44
|
-
fontOnPrimary: colorStyle.
|
|
44
|
+
fontOnPrimary: colorStyle.bgColor2,
|
|
45
45
|
fontOnSuccess: colorStyle.colorDark,
|
|
46
46
|
fontOnWarning: colorStyle.colorDark,
|
|
47
47
|
fontOnDanger: colorStyle.colorDark,
|
|
48
48
|
fontOnBg: colorStyle.colorDark,
|
|
49
|
-
fontMutedColor: 'rgba(53, 51, 81, 0.
|
|
49
|
+
fontMutedColor: 'rgba(53, 51, 81, 0.6)'
|
|
50
50
|
}; // Theme stylesheet
|
|
51
51
|
|
|
52
52
|
var lightTheme = {
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
9
|
+
|
|
10
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
11
|
+
|
|
12
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
13
|
+
|
|
14
|
+
// Currently, some style is all same for all viewport size
|
|
15
|
+
// Common color style
|
|
16
|
+
var colorStyle = {
|
|
17
|
+
colorWhite: '#ffffff',
|
|
18
|
+
colorDark: '#353351',
|
|
19
|
+
colorGrey: '#5b5f6f',
|
|
20
|
+
colorPrimary: '#345FEB',
|
|
21
|
+
colorSuccess: '#11D8CD',
|
|
22
|
+
colorWarning: '#FFCA7A',
|
|
23
|
+
colorDanger: '#F495A1',
|
|
24
|
+
colorHover: 'rgba(52, 95, 235, 0.2)',
|
|
25
|
+
colorActive: 'rgba(52, 95, 235, 0.2)',
|
|
26
|
+
scrollBarColor: 'rgba(52, 95, 235, 0.3)',
|
|
27
|
+
bgColor1: '#EEEEEE',
|
|
28
|
+
bgColor2: '#F7F7F7',
|
|
29
|
+
bgColor3: '#FFFFFF',
|
|
30
|
+
backdropBg: 'rgba(0, 0, 0, 0.5)'
|
|
31
|
+
}; // Common font style
|
|
32
|
+
|
|
33
|
+
var fontStyle = {
|
|
34
|
+
fontH1: '2.25rem',
|
|
35
|
+
fontH2: '1.5rem',
|
|
36
|
+
fontH3: '1.25rem',
|
|
37
|
+
fontBody1: '1rem',
|
|
38
|
+
fontBody2: '0.875rem',
|
|
39
|
+
fontButton: '0.875rem',
|
|
40
|
+
fontCaption: '0.75rem',
|
|
41
|
+
fontFamily: 'Helvetica',
|
|
42
|
+
fontWeightNormal: '400',
|
|
43
|
+
fontWeightBold: 'bold',
|
|
44
|
+
fontOnPrimary: colorStyle.bgColor2,
|
|
45
|
+
fontOnSuccess: colorStyle.colorDark,
|
|
46
|
+
fontOnWarning: colorStyle.colorDark,
|
|
47
|
+
fontOnDanger: colorStyle.colorDark,
|
|
48
|
+
fontOnBg: colorStyle.colorDark,
|
|
49
|
+
fontMutedColor: 'rgba(53, 51, 81, 0.6)'
|
|
50
|
+
}; // Theme stylesheet
|
|
51
|
+
|
|
52
|
+
var whiteTheme = {
|
|
53
|
+
desktop: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
|
|
54
|
+
boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
|
|
55
|
+
borderColor: colorStyle.colorGrey,
|
|
56
|
+
borderWidth: '1px',
|
|
57
|
+
borderRadiusS: '0.5rem',
|
|
58
|
+
borderRadius: '1rem',
|
|
59
|
+
borderRadiusL: '2rem',
|
|
60
|
+
borderRadiusRound: '50%',
|
|
61
|
+
spacerXS: '0.5rem',
|
|
62
|
+
spacerS: '1rem',
|
|
63
|
+
spacer: '1.5rem',
|
|
64
|
+
spacerL: '2rem'
|
|
65
|
+
}),
|
|
66
|
+
tablet: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
|
|
67
|
+
boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
|
|
68
|
+
borderColor: colorStyle.colorGrey,
|
|
69
|
+
borderWidth: '1px',
|
|
70
|
+
borderRadiusS: '0.5rem',
|
|
71
|
+
borderRadius: '1rem',
|
|
72
|
+
borderRadiusL: '2rem',
|
|
73
|
+
borderRadiusRound: '50%',
|
|
74
|
+
spacerXS: '0.5rem',
|
|
75
|
+
spacerS: '0.75rem',
|
|
76
|
+
spacer: '1rem',
|
|
77
|
+
spacerL: '1.25rem'
|
|
78
|
+
}),
|
|
79
|
+
mobile: _objectSpread(_objectSpread(_objectSpread({}, fontStyle), colorStyle), {}, {
|
|
80
|
+
boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
|
|
81
|
+
borderColor: colorStyle.colorGrey,
|
|
82
|
+
borderWidth: '1px',
|
|
83
|
+
borderRadiusS: '0.5rem',
|
|
84
|
+
borderRadius: '1rem',
|
|
85
|
+
borderRadiusL: '2rem',
|
|
86
|
+
borderRadiusRound: '50%',
|
|
87
|
+
spacerXS: '0.5rem',
|
|
88
|
+
spacerS: '0.75rem',
|
|
89
|
+
spacer: '1rem',
|
|
90
|
+
spacerL: '1.25rem'
|
|
91
|
+
})
|
|
92
|
+
};
|
|
93
|
+
var _default = whiteTheme;
|
|
94
|
+
exports.default = _default;
|
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) {
|
package/table/Table.js
CHANGED
|
@@ -302,7 +302,7 @@ var BodyTR = _styledComponents.default.tr(_templateObject4 || (_templateObject4
|
|
|
302
302
|
return noData && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n height: 168px;\n\n > td {\n &:first-child:before {\n display: none;\n }\n }\n "])));
|
|
303
303
|
}));
|
|
304
304
|
|
|
305
|
-
var TableDataCell = _styledComponents.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n height: 48px;\n background: ", ";\n padding: 0 var(--spacing-xs);\n max-width: 0px;\n text-align: ", ";\n vertical-align: middle;\n border-top: var(--border-width) solid transparent;\n border-bottom: var(--border-width) solid transparent;\n transition: 0.3s;\n\n &:first-child {\n border-left: var(--border-width) solid transparent;\n border-top-left-radius: var(--border-radius-l);\n border-bottom-left-radius: var(--border-radius-l);\n padding-left: var(--spacing);\n }\n\n &:last-child {\n border-right: var(--border-width) solid transparent;\n border-top-right-radius: var(--border-radius-l);\n border-bottom-right-radius: var(--border-radius-l);\n padding-right: var(--spacing);\n }\n\n > span {\n display: inline-block;\n width: 100%;\n padding: 0 2px;\n overflow: hidden;\n white-space: pre;\n text-overflow: ellipsis;\n }\n\n ", "\n\n ", "\n"])), function (_ref8) {
|
|
305
|
+
var TableDataCell = _styledComponents.default.td(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n height: 48px;\n background: ", ";\n padding: 0 var(--spacing-xs);\n max-width: 0px;\n text-align: ", ";\n vertical-align: middle;\n border-top: var(--border-width) solid transparent;\n border-bottom: var(--border-width) solid transparent;\n transition: border-color 0.3s;\n\n &:first-child {\n border-left: var(--border-width) solid transparent;\n border-top-left-radius: var(--border-radius-l);\n border-bottom-left-radius: var(--border-radius-l);\n padding-left: var(--spacing);\n }\n\n &:last-child {\n border-right: var(--border-width) solid transparent;\n border-top-right-radius: var(--border-radius-l);\n border-bottom-right-radius: var(--border-radius-l);\n padding-right: var(--spacing);\n }\n\n > span {\n display: inline-block;\n width: 100%;\n padding: 0 2px;\n overflow: hidden;\n white-space: pre;\n text-overflow: ellipsis;\n }\n\n ", "\n\n ", "\n"])), function (_ref8) {
|
|
306
306
|
var backgroundReverse = _ref8.backgroundReverse;
|
|
307
307
|
return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
|
|
308
308
|
}, function (_ref9) {
|
|
@@ -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;
|
package/wizard/Wizard.js
CHANGED
|
@@ -201,7 +201,7 @@ var Wizard = function Wizard(props) {
|
|
|
201
201
|
|
|
202
202
|
var Nav = _styledComponents.default.ul(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n background: var(--color-background2);\n border-radius: var(--border-radius-l);\n margin-bottom: var(--spacing);\n\n ", "\n"])), _media.default.mobile(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: block;\n "]))));
|
|
203
203
|
|
|
204
|
-
var NavItem = _styledComponents.default.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: var(--font-on-mute);\n font-size: var(--font-body1);\n font-weight: var(--font-bold);\n padding: 0 var(--spacing-xs);\n width: 100%;\n height: 36px;\n line-height: 36px;\n transition: 0.3s;\n overflow: hidden;\n flex: 1;\n cursor: pointer;\n\n &.current,\n &.done {\n background: var(--color-primary);\n color: var(--font-on-primary);\n\n > div > span:first-of-type {\n color: var(--color-primary);\n background: var(--font-on-primary);\n }\n }\n\n &.current {\n background: var(--color-primary);\n color: var(--font-on-primary);\n border-radius: 0 var(--border-radius-l) var(--border-radius-l) 0;\n\n &:first-child {\n border-radius: var(--border-radius-l);\n }\n\n ", "\n }\n\n &.done {\n background: var(--color-primary);\n color: var(--font-on-primary);\n\n &:first-child {\n border-radius: var(--border-radius-l) 0 0 var(--border-radius-l);\n\n ", "\n }\n }\n
|
|
204
|
+
var NavItem = _styledComponents.default.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n color: var(--font-on-mute);\n font-size: var(--font-body1);\n font-weight: var(--font-bold);\n padding: 0 var(--spacing-xs);\n width: 100%;\n height: 36px;\n line-height: 36px;\n transition: 0.3s;\n overflow: hidden;\n flex: 1;\n cursor: pointer;\n\n &:hover {\n color: var(--font-on-background);\n\n > div > span:first-of-type {\n color: var(--font-on-primary);\n background: var(--font-on-background);\n }\n }\n\n &.current,\n &.done {\n background: var(--color-primary);\n color: var(--font-on-primary);\n\n > div > span:first-of-type {\n color: var(--color-primary);\n background: var(--font-on-primary);\n }\n }\n\n &.current {\n background: var(--color-primary);\n color: var(--font-on-primary);\n border-radius: 0 var(--border-radius-l) var(--border-radius-l) 0;\n\n &:first-child {\n border-radius: var(--border-radius-l);\n }\n\n ", "\n }\n\n &.done {\n background: var(--color-primary);\n color: var(--font-on-primary);\n\n &:first-child {\n border-radius: var(--border-radius-l) 0 0 var(--border-radius-l);\n\n ", "\n }\n }\n"])), _media.default.mobile(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border-radius: 0 0 var(--border-radius) var(--border-radius);\n "]))), _media.default.mobile(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border-radius: var(--border-radius) var(--border-radius) 0 0;\n "]))));
|
|
205
205
|
|
|
206
206
|
var NavTitle = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n\n > span:first-of-type {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: var(--spacing-xs);\n color: var(--font-on-mute);\n flex: 0 0;\n flex-basis: 24px;\n width: 24px;\n height: 24px;\n border-radius: var(--border-radius-l);\n background: var(--font-on-mute);\n }\n\n > p {\n margin-right: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n > span:last-of-type {\n display: none;\n\n &.arrow {\n display: flex;\n align-self: center;\n }\n\n ", "\n }\n"])), _media.default.mobile(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n transform: rotate(90deg);\n "]))));
|
|
207
207
|
|