oa-componentbook 0.18.187 → 0.18.188

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.
Files changed (5) hide show
  1. package/build/components/oa-component-upload/CustomUpload.js +10 -4
  2. package/build/components/oa-component-viewer/CustomViewer.js +40 -17
  3. package/build/components/oa-component-viewer/styles.js +13 -0
  4. package/build/global-css/GridLayout.js +1 -1
  5. package/package.json +1 -1
package/build/components/oa-component-upload/CustomUpload.js CHANGED
@@ -22,6 +22,7 @@ var _upload = _interopRequireDefault(require("../../images/upload.svg"));
22
22
  var _CustomIcon = _interopRequireDefault(require("../oa-component-icons/CustomIcon"));
23
23
  var _CustomViewer = _interopRequireDefault(require("../oa-component-viewer/CustomViewer"));
24
24
  var _CustomModal = _interopRequireDefault(require("../oa-component-modal/CustomModal"));
25
+ var _modalImg = _interopRequireDefault(require("../../../stories/assets/modal-img.svg"));
25
26
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
26
27
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
27
28
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -134,8 +135,9 @@ function DocumentUpload(props) {
134
135
  alt: "phone img",
135
136
  src: _upload.default
136
137
  }), /*#__PURE__*/_react.default.createElement("div", null, "Upload"));
137
- const DeleteFile = () => {
138
- deleteHandler(selectedFile);
138
+ const DeleteFile = async () => {
139
+ await deleteHandler(selectedFile);
140
+ setDeleteConfirmation(false);
139
141
  };
140
142
  console.log(previewImage, 'previewImage');
141
143
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.MainStyleSec, null, /*#__PURE__*/_react.default.createElement(_styles.StyledSection, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -152,7 +154,11 @@ function DocumentUpload(props) {
152
154
  }
153
155
  }
154
156
  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
155
- name: formName
157
+ name: formName,
158
+ rules: [{
159
+ required: isMandatory,
160
+ message: 'Required'
161
+ }]
156
162
  }, /*#__PURE__*/_react.default.createElement(_antd.Upload, {
157
163
  customRequest: () => {},
158
164
  listType: "picture-card",
@@ -176,7 +182,7 @@ function DocumentUpload(props) {
176
182
  label: 'Yes, Delete',
177
183
  type: 'danger-primary'
178
184
  }],
179
- imgSrc: "static/media/modal-img.svg",
185
+ imgSrc: _modalImg.default,
180
186
  open: deleteConfirmation,
181
187
  onCancel: () => setDeleteConfirmation(false),
182
188
  title: "Delete Image?"
package/build/components/oa-component-viewer/CustomViewer.js CHANGED
@@ -10,9 +10,15 @@ require("core-js/modules/web.dom-collections.iterator.js");
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _propTypes = _interopRequireDefault(require("prop-types"));
12
12
  var _reactZoomPanPinch = require("react-zoom-pan-pinch");
13
+ var _Rotate90DegreesCcw = _interopRequireDefault(require("@material-ui/icons/Rotate90DegreesCcw"));
14
+ var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
15
+ var _Remove = _interopRequireDefault(require("@material-ui/icons/Remove"));
13
16
  var _CustomLoader = _interopRequireDefault(require("../oa-component-loader/CustomLoader"));
14
17
  var _CustomModal = _interopRequireDefault(require("../oa-component-modal/CustomModal"));
15
18
  var _common = _interopRequireDefault(require("../../utils/common"));
19
+ var _styles = require("./styles");
20
+ var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
21
+ var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
16
22
  const _excluded = ["fileName", "previewImage"],
17
23
  _excluded2 = ["zoomIn", "zoomOut"];
18
24
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,32 +35,37 @@ function CustomViewer(_ref) {
29
35
  antDesignProps = _objectWithoutProperties(_ref, _excluded);
30
36
  const [rotationDegree, setRotationDegree] = (0, _react.useState)(0);
31
37
  return /*#__PURE__*/_react.default.createElement(_CustomModal.default, _extends({
38
+ width: 860,
32
39
  buttonConfig: [{
33
40
  callback: () => {
34
41
  (0, _common.default)(previewImage, fileName);
35
42
  },
36
43
  label: 'Download'
37
44
  }]
38
- }, antDesignProps), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformWrapper, null, _ref2 => {
45
+ }, antDesignProps), /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformWrapper, null, _ref2 => {
39
46
  let {
40
47
  zoomIn,
41
48
  zoomOut
42
49
  } = _ref2,
43
50
  rest = _objectWithoutProperties(_ref2, _excluded2);
44
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Controls, {
51
+ return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Controls, {
45
52
  setRotationDegree: setRotationDegree
46
53
  }), /*#__PURE__*/_react.default.createElement(_reactZoomPanPinch.TransformComponent, null, /*#__PURE__*/_react.default.createElement("div", {
47
54
  style: {
48
55
  transform: "rotate(".concat(rotationDegree, "deg)")
49
56
  }
50
- }, previewImage ? /*#__PURE__*/_react.default.createElement("img", {
57
+ }, previewImage ? /*#__PURE__*/_react.default.createElement("div", {
58
+ className: "fadeImg"
59
+ }, /*#__PURE__*/_react.default.createElement("div", {
60
+ className: "overLayImg"
61
+ }, /*#__PURE__*/_react.default.createElement("img", {
51
62
  alt: "example",
52
63
  style: {
53
64
  width: '100%'
54
65
  },
55
66
  src: previewImage
56
- }) : /*#__PURE__*/_react.default.createElement(_CustomLoader.default, null))));
57
- })));
67
+ }))) : /*#__PURE__*/_react.default.createElement(_CustomLoader.default, null))));
68
+ }));
58
69
  }
59
70
  CustomViewer.propTypes = {
60
71
  fileName: _propTypes.default.string,
@@ -76,18 +87,30 @@ function Controls(_ref3) {
76
87
  const rotate = () => {
77
88
  setRotationDegree(preRotationDegree => preRotationDegree + 90);
78
89
  };
79
- return /*#__PURE__*/_react.default.createElement("div", {
80
- className: "tools"
81
- }, /*#__PURE__*/_react.default.createElement("button", {
82
- type: "button",
83
- onClick: () => zoomIn()
84
- }, "+"), /*#__PURE__*/_react.default.createElement("button", {
85
- type: "button",
86
- onClick: () => zoomOut()
87
- }, "-"), /*#__PURE__*/_react.default.createElement("button", {
88
- type: "button",
89
- onClick: () => rotate()
90
- }, "Rotate"));
90
+ return /*#__PURE__*/_react.default.createElement(_styles.StyledZoom, null, /*#__PURE__*/_react.default.createElement("div", {
91
+ className: "flextBodyContain"
92
+ }, /*#__PURE__*/_react.default.createElement("div", {
93
+ className: "iconWidthPad"
94
+ }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
95
+ onClick: () => zoomIn(),
96
+ size: 18,
97
+ icon: _Add.default,
98
+ color: "primary"
99
+ })), /*#__PURE__*/_react.default.createElement("div", {
100
+ className: "iconWidthPad"
101
+ }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
102
+ onClick: () => zoomOut(),
103
+ size: 18,
104
+ icon: _Remove.default,
105
+ color: "primary"
106
+ }))), /*#__PURE__*/_react.default.createElement("div", {
107
+ className: "iconWidthPad posroated"
108
+ }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
109
+ onClick: () => rotate(),
110
+ size: 18,
111
+ icon: _Rotate90DegreesCcw.default,
112
+ color: "primary"
113
+ })));
91
114
  }
92
115
  Controls.propTypes = {
93
116
  setRotationDegree: _propTypes.default.func.isRequired
package/build/components/oa-component-viewer/styles.js ADDED
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.mainStyle = exports.StyledZoom = void 0;
7
+ var _antd = require("antd");
8
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
9
+ var _templateObject, _templateObject2;
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
12
+ const mainStyle = exports.mainStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\nposition: relative;\nbackground: red;\n"])));
13
+ const StyledZoom = exports.StyledZoom = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.flextBodyContain{\n position: absolute;\n right: 36px;\n bottom: 116px;\n flex-direction: column;\n z-index: 9999;\n display: flex;\n border-radius: 4px;\n overflow: hidden;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n}\n.posroated{\n position: absolute;\n right: 36px;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n top: 92px;\n z-index: 999;\n border-radius: 4px;\n}\n.iconWidthPad{\n \n background: var(--color-primary-background); \n padding: 6px;\n height: 32px;\n width: 32px;\n border-bottom: 1px solid var(--color-divider);\n}\n.iconWidthPad:last-child{\n border: none;\n}\n\n"])));
package/build/global-css/GridLayout.js CHANGED
@@ -21,5 +21,5 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
21
21
  // TODO: Figure out a way to make this work with storybook.
22
22
  // Can be used to wrap the entire application, to make these styles available to every component
23
23
 
24
- const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n max-width: 1154px;\n margin: 0 auto;\n padding: 0 16px;\n}\n\n.container-fluid {\n width: 100%;\n padding: 0 16px;\n}\n\n.row {\n display: flex;\n flex-direction: column;\n}\n\n.gutter {\n padding: 0 24px 0 0;\n}\n\n.row::after {\n content: \"\";\n clear: both;\n display: table;\n}\n\n.col-xs-1 {\n width: 8.33333%;\n}\n\n.col-xs-2 {\n width: 16.66667%;\n}\n\n.col-xs-3 {\n width: 25%;\n}\n\n.col-xs-4 {\n width: 33.33333%;\n}\n\n.col-xs-5 {\n width: 41.66667%;\n}\n\n.col-xs-6 {\n width: 50%;\n}\n\n.col-xs-7 {\n width: 58.33333%;\n}\n\n.col-xs-8 {\n width: 66.66667%;\n}\n\n.col-xs-9 {\n width: 75%;\n}\n\n.col-xs-10 {\n width: 83.33333%;\n}\n\n.col-xs-11 {\n width: 91.66667%;\n}\n\n.col-xs-12 {\n width: 100%;\n}\n\n@media (min-width: 768px) {\n .row {\n flex-direction: row;\n }\n\n .col-sm-1 {\n width: 8.33333%;\n }\n\n .col-sm-2 {\n width: 16.66667%;\n }\n\n .col-sm-3 {\n width: 25%;\n }\n\n .col-sm-4 {\n width: 33.33333%;\n }\n\n .col-sm-5 {\n width: 41.66667%;\n }\n\n .col-sm-6 {\n width: 50%;\n }\n\n .col-sm-7 {\n width: 58.33333%;\n }\n\n .col-sm-8 {\n width: 66.66667%;\n }\n\n .col-sm-9 {\n width: 75%;\n }\n\n .col-sm-10 {\n width: 83.33333%;\n }\n\n .col-sm-11 {\n width: 91.66667%;\n }\n\n .col-sm-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-1 {\n width: 8.33333%;\n }\n\n .col-md-2 {\n width: 16.66667%;\n }\n\n .col-md-3 {\n width: 25%;\n }\n\n .col-md-4 {\n width: 33.33333%;\n float: left;\n }\n\n .col-md-5 {\n width: 41.66667%;\n }\n\n .col-md-6 {\n width: 50%;\n }\n\n .col-md-7 {\n width: 58.33333%;\n }\n\n .col-md-8 {\n width: 66.66667%;\n }\n\n .col-md-9 {\n width: 75%;\n }\n\n .col-md-10 {\n width: 83.33333%;\n }\n\n .col-md-11 {\n width: 91.66667%;\n }\n\n .col-md-12 {\n width: 100%;\n }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n .gutter {\n padding: 0 24px 0 0;\n }\n\n .col-lg-1 {\n width: 8.33333%;\n }\n\n .col-lg-2 {\n width: 16.66667%;\n }\n\n .col-lg-3 {\n width: 25%;\n }\n\n .col-lg-4 {\n width: 33.33333%;\n }\n\n .col-lg-5 {\n width: 41.66667%;\n }\n\n .col-lg-6 {\n width: 50%;\n }\n\n .col-lg-7 {\n width: 58.33333%;\n }\n\n .col-lg-8 {\n width: 66.66667%;\n }\n\n .col-lg-9 {\n width: 75%;\n }\n\n .col-lg-10 {\n width: 83.33333%;\n }\n\n .col-lg-11 {\n width: 91.66667%;\n }\n\n .col-lg-12 {\n width: 100%;\n }\n}\n.ant-modal .ant-modal-content {\n padding: 24px 24px 32px;\n border-radius: 12px;\n }\n .ant-select-dropdown .ant-select-item{\n min-height: auto !important;\n }\n @media (max-width: 372px) {\n .ant-picker-date-panel .ant-picker-body{\n padding: 8px !important;\n }\n }\n@media (max-width: 600px) {\n .ant-drawer .ant-drawer-header,.ant-drawer .ant-drawer-body{\n padding: 16px !important;\n }\n .ant-drawer .ant-drawer-footer {\n padding: 12px 16px;\n }\n .ant-picker-dropdown .ant-picker-date-panel{\n width: 100%;\n }\n .ant-picker-dropdown .ant-picker-time-panel-column {\n overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n width: 2px;\n }\n\n .ant-modal-root .ant-modal-wrap {\n position: fixed;\n overflow: inherit;\n }\n .ant-modal-root .ant-modal-centered .ant-modal{\n vertical-align: middle;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100% !important;\n max-width: 100%!important;\n // transform-origin: bottom !important;\n //animation-duration: 0s !important;\n animation-name: slideUp;\n animation-duration: 0.2s;\n transition: .3s ease-in-out;\n animation-timing-function: ease-in;\n }\n @keyframes slideUp {\n 0%,\n 50% {\n transform: translateY(100%);\n opacity: 0;\n }\n \n 60%,\n 100% {\n transform: translateY(0);\n opacity: 1;\n \n }\n }\n .ant-modal .ant-modal-content {\n bottom: -8px;\n left: 0;\n position: absolute;\n right: 0;\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n max-height: calc(90vh - 126px);\n overflow: auto;\n padding-right: 16px;\n }\n .ant-modal-footer{\n padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n padding: 24px 16px 32px;\n padding-right: 0;\n }\n}\n@media (min-width: 1200px) {\n .gutter {\n padding: 0 32px 0 0;\n }\n\n .col-xl-1 {\n width: 8.33333%;\n }\n \n .col-xl-2 {\n width: 16.66667%;\n }\n\n .col-xl-3 {\n width: 25%;\n }\n\n .col-xl-4 {\n width: 33.33333%;\n }\n\n .col-xl-5 {\n width: 41.66667%;\n }\n\n .col-xl-6 {\n width: 50%;\n }\n\n .col-xl-7 {\n width: 58.33333%;\n }\n\n .col-xl-8 {\n width: 66.66667%;\n }\n\n .col-xl-9 {\n width: 75%;\n }\n\n .col-xl-10 {\n width: 83.33333%;\n }\n\n .col-xl-11 {\n width: 91.66667%;\n }\n\n .col-xl-12 {\n width: 100%;\n }\n \n}\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n padding: 12px 24px;\n}\n.ant-dropdown-menu{\n min-width: 256px;\n top: 4px;\n}\n.ant-space-item span{\n line-height: 0 !important;\n display: flex;\n}\n\n\n.ant-select-dropdown{border-radius: 4px; padding:8px 0 !important;\n background: var(--color-primary-background) ;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n\n\n\n .ant-select-dropdown .ant-select-item { \n min-height: auto;\n padding: 12px 16px;\n color: var(--color-primary-content) ;\n line-height: 20px;\n border-radius: 0px;\n}\n\n.label-date-dropdown {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n}\n.label-date-dropdown span + span {height:20px !important;}\n.ant-select-dropdown .ant-select-item:last-child {border-top: 1px solid #E0E0E0;}\n.ant-select-dropdown .ant-select-item:last-child .ant-select-item-option-content div{border-top: none !important;}\n.ant-select-dropdown .ant-select-item:last-child .ant-select-item-option-content .label-date-dropdown span{color: var(--color-primary-content);\n font-size: 14px; margin:0;\n font-style: normal;\n font-weight: 400;\n line-height: 20px; }\n\n\n.ant-select-dropdown .ant-select-item:last-child .ant-select-item-option-content span{color: var(--color-secondary-content);\n font-size: 12px; margin:4px 0 0 0;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; }\n\n\n.ant-select-dropdown .ant-select-item-option-active span{ color: var(--color-primary) !important;}\n.ant-picker-range {opacity: 0;}\n.ant-picker-dropdown-range { padding: 0; }\n\n\n\n@media only screen and (max-width: 600px) {\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n padding: 8px;\n }\n\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {\n width: 24px; font-size: 12px; font-weight: bold; }\n\n .ant-picker-dropdown .ant-picker-content th {\n height: 24px;\n }\n .ant-picker-dropdown .ant-picker-content td {\n font-size: 12px;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content {\n width: 100%;\n }\n\n}\n\n\n.ant-picker .ant-picker-clear{\n font-size: 20px;\n}\n"])));
24
+ const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n max-width: 1154px;\n margin: 0 auto;\n padding: 0 16px;\n}\n\n.container-fluid {\n width: 100%;\n padding: 0 16px;\n}\n\n.row {\n display: flex;\n flex-direction: column;\n}\n\n.gutter {\n padding: 0 24px 0 0;\n}\n\n.row::after {\n content: \"\";\n clear: both;\n display: table;\n}\n\n.col-xs-1 {\n width: 8.33333%;\n}\n\n.col-xs-2 {\n width: 16.66667%;\n}\n\n.col-xs-3 {\n width: 25%;\n}\n\n.col-xs-4 {\n width: 33.33333%;\n}\n\n.col-xs-5 {\n width: 41.66667%;\n}\n\n.col-xs-6 {\n width: 50%;\n}\n\n.col-xs-7 {\n width: 58.33333%;\n}\n\n.col-xs-8 {\n width: 66.66667%;\n}\n\n.col-xs-9 {\n width: 75%;\n}\n\n.col-xs-10 {\n width: 83.33333%;\n}\n\n.col-xs-11 {\n width: 91.66667%;\n}\n\n.col-xs-12 {\n width: 100%;\n}\n\n@media (min-width: 768px) {\n .row {\n flex-direction: row;\n }\n\n .col-sm-1 {\n width: 8.33333%;\n }\n\n .col-sm-2 {\n width: 16.66667%;\n }\n\n .col-sm-3 {\n width: 25%;\n }\n\n .col-sm-4 {\n width: 33.33333%;\n }\n\n .col-sm-5 {\n width: 41.66667%;\n }\n\n .col-sm-6 {\n width: 50%;\n }\n\n .col-sm-7 {\n width: 58.33333%;\n }\n\n .col-sm-8 {\n width: 66.66667%;\n }\n\n .col-sm-9 {\n width: 75%;\n }\n\n .col-sm-10 {\n width: 83.33333%;\n }\n\n .col-sm-11 {\n width: 91.66667%;\n }\n\n .col-sm-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-1 {\n width: 8.33333%;\n }\n\n .col-md-2 {\n width: 16.66667%;\n }\n\n .col-md-3 {\n width: 25%;\n }\n\n .col-md-4 {\n width: 33.33333%;\n float: left;\n }\n\n .col-md-5 {\n width: 41.66667%;\n }\n\n .col-md-6 {\n width: 50%;\n }\n\n .col-md-7 {\n width: 58.33333%;\n }\n\n .col-md-8 {\n width: 66.66667%;\n }\n\n .col-md-9 {\n width: 75%;\n }\n\n .col-md-10 {\n width: 83.33333%;\n }\n\n .col-md-11 {\n width: 91.66667%;\n }\n\n .col-md-12 {\n width: 100%;\n }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n .gutter {\n padding: 0 24px 0 0;\n }\n\n .col-lg-1 {\n width: 8.33333%;\n }\n\n .col-lg-2 {\n width: 16.66667%;\n }\n\n .col-lg-3 {\n width: 25%;\n }\n\n .col-lg-4 {\n width: 33.33333%;\n }\n\n .col-lg-5 {\n width: 41.66667%;\n }\n\n .col-lg-6 {\n width: 50%;\n }\n\n .col-lg-7 {\n width: 58.33333%;\n }\n\n .col-lg-8 {\n width: 66.66667%;\n }\n\n .col-lg-9 {\n width: 75%;\n }\n\n .col-lg-10 {\n width: 83.33333%;\n }\n\n .col-lg-11 {\n width: 91.66667%;\n }\n\n .col-lg-12 {\n width: 100%;\n }\n}\n.ant-modal .ant-modal-content {\n padding: 24px 24px 32px;\n border-radius: 12px;\n }\n .ant-select-dropdown .ant-select-item{\n min-height: auto !important;\n }\n @media (max-width: 372px) {\n .ant-picker-date-panel .ant-picker-body{\n padding: 8px !important;\n }\n }\n@media (max-width: 600px) {\n .ant-drawer .ant-drawer-header,.ant-drawer .ant-drawer-body{\n padding: 16px !important;\n }\n .ant-drawer .ant-drawer-footer {\n padding: 12px 16px;\n }\n .ant-picker-dropdown .ant-picker-date-panel{\n width: 100%;\n }\n .ant-picker-dropdown .ant-picker-time-panel-column {\n overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n width: 2px;\n }\n\n .ant-modal-root .ant-modal-wrap {\n position: fixed;\n overflow: inherit;\n }\n .ant-modal-root .ant-modal-centered .ant-modal{\n vertical-align: middle;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100% !important;\n max-width: 100%!important;\n // transform-origin: bottom !important;\n //animation-duration: 0s !important;\n animation-name: slideUp;\n animation-duration: 0.2s;\n transition: .3s ease-in-out;\n animation-timing-function: ease-in;\n }\n @keyframes slideUp {\n 0%,\n 50% {\n transform: translateY(100%);\n opacity: 0;\n }\n \n 60%,\n 100% {\n transform: translateY(0);\n opacity: 1;\n \n }\n }\n .ant-modal .ant-modal-content {\n bottom: -8px;\n left: 0;\n position: absolute;\n right: 0;\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n max-height: calc(90vh - 126px);\n overflow: auto;\n padding-right: 16px;\n }\n .ant-modal-footer{\n padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n padding: 24px 16px 32px;\n padding-right: 0;\n }\n}\n@media (min-width: 1200px) {\n .gutter {\n padding: 0 32px 0 0;\n }\n\n .col-xl-1 {\n width: 8.33333%;\n }\n \n .col-xl-2 {\n width: 16.66667%;\n }\n\n .col-xl-3 {\n width: 25%;\n }\n\n .col-xl-4 {\n width: 33.33333%;\n }\n\n .col-xl-5 {\n width: 41.66667%;\n }\n\n .col-xl-6 {\n width: 50%;\n }\n\n .col-xl-7 {\n width: 58.33333%;\n }\n\n .col-xl-8 {\n width: 66.66667%;\n }\n\n .col-xl-9 {\n width: 75%;\n }\n\n .col-xl-10 {\n width: 83.33333%;\n }\n\n .col-xl-11 {\n width: 91.66667%;\n }\n\n .col-xl-12 {\n width: 100%;\n }\n \n}\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n padding: 12px 24px;\n}\n.ant-dropdown-menu{\n min-width: 256px;\n top: 4px;\n}\n.ant-space-item span{\n line-height: 0 !important;\n display: flex;\n}\n\n\n.ant-select-dropdown{border-radius: 4px; padding:8px 0 !important;\n background: var(--color-primary-background) ;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n\n\n\n .ant-select-dropdown .ant-select-item { \n min-height: auto;\n padding: 12px 16px;\n color: var(--color-primary-content) ;\n line-height: 20px;\n border-radius: 0px;\n}\n\n.label-date-dropdown {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n}\n.label-date-dropdown span + span {height:20px !important;}\n.ant-select-dropdown .ant-select-item:last-child {border-top: 1px solid #E0E0E0;}\n.ant-select-dropdown .ant-select-item:last-child .ant-select-item-option-content div{border-top: none !important;}\n.ant-select-dropdown .ant-select-item:last-child .ant-select-item-option-content .label-date-dropdown span{color: var(--color-primary-content);\n font-size: 14px; margin:0;\n font-style: normal;\n font-weight: 400;\n line-height: 20px; }\n\n\n.ant-select-dropdown .ant-select-item:last-child .ant-select-item-option-content span{color: var(--color-secondary-content);\n font-size: 12px; margin:4px 0 0 0;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; }\n\n\n.ant-select-dropdown .ant-select-item-option-active span{ color: var(--color-primary) !important;}\n.ant-picker-range {opacity: 0;}\n.ant-picker-dropdown-range { padding: 0; }\n\n.fadeImg{\n position: relative;\n width: 100%;\n max-height: 300px;\n overflow-x: auto;\n}\n.overLayImg{\n background: rgb(0 0 0 / 40%);\n border-radius: 12px 12px 0px 0px;\n overflow: hidden;\n}\n.react-transform-component,.react-transform-wrapper,.react-transform-component > div{\n width: 100%;\n}\n\n@media only screen and (max-width: 600px) {\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n padding: 8px;\n }\n\n .fadeImg{\n max-height: auto;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {\n width: 24px; font-size: 12px; font-weight: bold; }\n\n .ant-picker-dropdown .ant-picker-content th {\n height: 24px;\n }\n .ant-picker-dropdown .ant-picker-content td {\n font-size: 12px;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content {\n width: 100%;\n }\n\n}\n\n\n.ant-picker .ant-picker-clear{\n font-size: 20px;\n}\n"])));
25
25
  var _default = exports.default = GridLayout;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "0.18.187",
3
+ "version": "0.18.188",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",