techsbcn-storybook 0.13.0 → 0.13.4
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/dist/components/fields/TextSimpleComponent/TextSimpleComponent.d.ts +1 -1
- package/dist/techsbcn-storybook.cjs.development.js +7 -5
- package/dist/techsbcn-storybook.cjs.development.js.map +1 -1
- package/dist/techsbcn-storybook.cjs.production.min.js +1 -1
- package/dist/techsbcn-storybook.cjs.production.min.js.map +1 -1
- package/dist/techsbcn-storybook.esm.js +7 -5
- package/dist/techsbcn-storybook.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/fields/TextSimpleComponent/TextSimpleComponent.scss +2 -2
- package/src/components/fields/TextSimpleComponent/TextSimpleComponent.tsx +1 -1
- package/src/components/tables/SearchComponent/SearchComponent.scss +15 -0
- package/src/components/tables/SearchComponent/SearchComponent.tsx +1 -1
- package/src/components/wrappers/MainWrapperComponent/MainWrapperComponent.scss +8 -0
- package/src/components/wrappers/MainWrapperComponent/MainWrapperComponent.tsx +28 -26
- package/src/stories/Tables/Tables.stories.tsx +1 -0
|
@@ -64,7 +64,7 @@ var PublicFormWrapper = function PublicFormWrapper(props) {
|
|
|
64
64
|
}, props.children)));
|
|
65
65
|
};
|
|
66
66
|
|
|
67
|
-
var css_248z$1 = ".search-component .title {\n color: #000;\n font-size: calc(21px + (23 - 21) * calc(100vw - 300px)/1300) !important;\n font-weight: 400;\n position: relative;\n}\n.search-component .tune-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 50px;\n cursor: pointer;\n color: white;\n}\n.search-component .tune-btn:hover {\n box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;\n}\n.search-component .wrapper-actions .btn-action {\n cursor: pointer;\n}\n.search-component .wrapper-actions .btn-action .btn {\n width: max-content;\n}\n.search-component .wrapper-actions .btn-action svg {\n font-size: 40px;\n}\n\n.search-menu-actions .wrapper-actions .btn-action {\n cursor: pointer;\n}\n.search-menu-actions .wrapper-actions .btn-action .btn {\n width: max-content;\n}\n.search-menu-actions .wrapper-actions .btn-action svg {\n font-size: 40px;\n}";
|
|
67
|
+
var css_248z$1 = ".search-component .title {\n color: #000;\n font-size: calc(21px + (23 - 21) * calc(100vw - 300px)/1300) !important;\n font-weight: 400;\n position: relative;\n}\n.search-component .tune-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 50px;\n cursor: pointer;\n color: white;\n}\n.search-component .tune-btn:hover {\n box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12) !important;\n}\n.search-component .wrapper-actions.min-action-width .btn-action .MuiButton-root {\n max-width: 100%;\n width: auto;\n}\n.search-component .wrapper-actions.min-action-width .btn-action .btn {\n max-width: 100%;\n width: auto;\n}\n.search-component .wrapper-actions .btn-action {\n cursor: pointer;\n}\n.search-component .wrapper-actions .btn-action .MuiButton-root {\n width: max-content;\n}\n.search-component .wrapper-actions .btn-action .btn {\n width: max-content;\n}\n.search-component .wrapper-actions .btn-action svg {\n font-size: 40px;\n}\n\n.search-menu-actions .wrapper-actions .btn-action {\n cursor: pointer;\n}\n.search-menu-actions .wrapper-actions .btn-action .btn {\n width: max-content;\n}\n.search-menu-actions .wrapper-actions .btn-action svg {\n font-size: 40px;\n}";
|
|
68
68
|
styleInject(css_248z$1);
|
|
69
69
|
|
|
70
70
|
var ActionsList = function ActionsList(actions) {
|
|
@@ -190,7 +190,7 @@ var SearchComponent = function SearchComponent(props) {
|
|
|
190
190
|
}, action.children));
|
|
191
191
|
}))) : React__default.createElement(material.Box, {
|
|
192
192
|
ml: "auto",
|
|
193
|
-
className: "wrapper-actions"
|
|
193
|
+
className: "wrapper-actions " + (props.title ? 'min-action-width' : '')
|
|
194
194
|
}, ActionsList(props.actions)))), (props.searchBar || props.filters || props.actions) && React__default.createElement(material.Grid, {
|
|
195
195
|
item: true,
|
|
196
196
|
xs: 12,
|
|
@@ -255,12 +255,14 @@ var LinearProgressComponent = function LinearProgressComponent() {
|
|
|
255
255
|
}));
|
|
256
256
|
};
|
|
257
257
|
|
|
258
|
-
var css_248z$3 = ".main-wrapper-component {\n background-color: white;\n box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);\n}\n.main-wrapper-component .main-background-color-after {\n position: relative;\n}\n.main-wrapper-component .main-background-color-after:after {\n content: \"\";\n position: absolute;\n left: -17px;\n top: -4px;\n width: 4px;\n height: 30px;\n}\n.main-wrapper-component .wrapper-actions .btn-action {\n cursor: pointer;\n}\n.main-wrapper-component .wrapper-actions .btn-action .MuiButton-root {\n width: max-content;\n}\n.main-wrapper-component .wrapper-actions .btn-action svg {\n font-size: 40px;\n}";
|
|
258
|
+
var css_248z$3 = ".main-wrapper-component {\n background-color: white;\n box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);\n}\n.main-wrapper-component .main-background-color-after {\n position: relative;\n}\n.main-wrapper-component .main-background-color-after:after {\n content: \"\";\n position: absolute;\n left: -17px;\n top: -4px;\n width: 4px;\n height: 30px;\n}\n.main-wrapper-component .wrapper-actions.min-action-width .btn-action .MuiButton-root {\n max-width: 100%;\n width: auto;\n}\n.main-wrapper-component .wrapper-actions .btn-action {\n cursor: pointer;\n}\n.main-wrapper-component .wrapper-actions .btn-action .MuiButton-root {\n width: max-content;\n}\n.main-wrapper-component .wrapper-actions .btn-action svg {\n font-size: 40px;\n}";
|
|
259
259
|
styleInject(css_248z$3);
|
|
260
260
|
|
|
261
261
|
var MainWrapperComponent = function MainWrapperComponent(props) {
|
|
262
262
|
return React__default.createElement(React__default.Fragment, null, props.loadingProgressBar && React__default.createElement(LinearProgressComponent, null), React__default.createElement(_.Box, {
|
|
263
263
|
className: "main-wrapper-component",
|
|
264
|
+
height: "100%"
|
|
265
|
+
}, React__default.createElement(_.Box, {
|
|
264
266
|
py: 2
|
|
265
267
|
}, props.loading ? React__default.createElement(_.Box, {
|
|
266
268
|
display: "flex",
|
|
@@ -285,7 +287,7 @@ var MainWrapperComponent = function MainWrapperComponent(props) {
|
|
|
285
287
|
px: 2
|
|
286
288
|
}, React__default.createElement(_.CircularProgress, {
|
|
287
289
|
className: "circular-progress-main-color"
|
|
288
|
-
})) : React__default.createElement(React__default.Fragment, null))));
|
|
290
|
+
})) : React__default.createElement(React__default.Fragment, null)))));
|
|
289
291
|
};
|
|
290
292
|
|
|
291
293
|
var css_248z$4 = ".table-component .paper-container {\n box-shadow: none;\n background-color: transparent !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-root {\n padding: 0 !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-root:hover {\n background-color: transparent !important;\n}\n.table-component .paper-container .checkbox-cell .Mui-checked {\n color: rgba(0, 0, 0, 0.54) !important;\n}\n.table-component .paper-container .checkbox-cell .MuiCheckbox-indeterminate {\n color: #212529 !important;\n}\n.table-component .paper-container .table-container {\n max-height: 68vh;\n border-bottom: 1px solid black;\n}\n.table-component .paper-container .table-container .table-column:first-child {\n border-radius: 5px 0 0 5px;\n}\n.table-component .paper-container .table-container .table-column:last-child {\n border-right: none !important;\n border-radius: 0 5px 5px 0;\n}\n.table-component .paper-container .table-container .table-column {\n font-weight: bold;\n font-size: 1rem !important;\n padding: 10px !important;\n border-top: 1px solid #e0e0e0;\n border-right: 1px solid #e0e0e0;\n border-bottom: 2px solid #e0e0e0;\n}\n.table-component .paper-container .table-container .table-column .table-header-cell {\n color: black;\n padding: 0px 10px 0px 10px !important;\n}\n.table-component .paper-container .table-container .table-rows.row-click {\n cursor: pointer;\n}\n.table-component .paper-container .table-container .table-rows.row-click:hover {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows.Mui-selected {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.table-component .paper-container .table-container .table-rows .Mui-selected {\n background-color: transparent !important;\n}\n.table-component .paper-container .table-container .table-rows .MuiTableCell-root {\n padding: 6px !important;\n overflow: hidden;\n}\n.table-component .paper-container .table-container .table-rows .img-table {\n width: 100%;\n height: 110px;\n}\n.table-component .paper-container .table-container .table-rows .img-table img {\n object-fit: contain;\n}\n.table-component .paper-container .table-container .table-rows .actions {\n float: right;\n}\n.table-component .paper-container .table-container .table-rows .btn-action {\n color: rgba(0, 0, 0, 0.54);\n display: inline-block;\n text-decoration: none;\n font-size: 1.6em !important;\n padding: 0px 7px;\n cursor: pointer;\n}\n.table-component .paper-container .MuiTable-root.loading {\n opacity: 0.5;\n}\n.table-component .paper-container .MuiTable-root.loading .MuiCircularProgress-root {\n width: 80px !important;\n height: 80px !important;\n position: absolute;\n left: 0;\n right: 0;\n top: 5px;\n margin: auto;\n color: grey;\n}\n.table-component .paper-container .MuiTablePagination-root {\n overflow: unset;\n}\n.table-component .paper-container .MuiTablePagination-root .MuiToolbar-root {\n justify-content: center !important;\n flex-wrap: wrap;\n padding: 0px !important;\n}\n.table-component .paper-container .MuiTablePagination-root .MuiTablePagination-spacer {\n flex: 0 !important;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page {\n border-radius: 0px;\n margin: 1px;\n color: white !important;\n background-color: #3f4d67;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination .MuiPaginationItem-page.Mui-selected {\n background-color: #3299C7;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li button {\n padding: 14px;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li:nth-child(2) .MuiPaginationItem-page {\n border-radius: 5px 0 0 5px !important;\n}\n.table-component .paper-container .MuiTablePagination-root .pagination li:nth-last-child(2) .MuiPaginationItem-page {\n border-radius: 0 5px 5px 0 !important;\n}\n@media (max-width: 992px) {\n .table-component .paper-container .table-container {\n max-height: 60vh;\n border-top: 1px solid #cccccc;\n }\n .table-component .paper-container .table-container .MuiTable-root {\n border-collapse: collapse !important;\n }\n .table-component .paper-container .table-container .MuiTableHead-root {\n display: none !important;\n }\n .table-component .paper-container .table-container .table-rows {\n border-bottom: 2px solid #cccccc;\n }\n .table-component .paper-container .table-container .table-rows .MuiTableCell-root {\n width: auto;\n border-bottom: none !important;\n }\n .table-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell {\n font-size: 1rem;\n vertical-align: top;\n width: 50%;\n height: auto;\n }\n .table-component .paper-container .table-container .table-rows .MuiTableCell-root .label-cell + div {\n display: inline-block;\n }\n .table-component .paper-container .table-container .table-rows .table-cell {\n display: block !important;\n }\n .table-component .paper-container .table-container .table-rows .format-value {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n width: 50%;\n max-width: 299px;\n }\n}";
|
|
@@ -1462,7 +1464,7 @@ ButtonComponent.defaultProps = {
|
|
|
1462
1464
|
component: 'button'
|
|
1463
1465
|
};
|
|
1464
1466
|
|
|
1465
|
-
var css_248z$e = ".text-simple-component .MuiFormLabel-root {\n color: #666666
|
|
1467
|
+
var css_248z$e = ".text-simple-component .MuiFormLabel-root {\n color: #666666;\n font-size: calc(12pt + (14 - 12) * calc(100vw - 300px)/1300) !important;\n transform: translate(0, 0.5px) scale(0.85);\n transform-origin: top left;\n text-overflow: initial !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-border {\n margin-top: 16px !important;\n}\n.text-simple-component .MuiFormLabel-root + .text-simple-box.no-margin.no-border {\n margin-top: 7px !important;\n}\n.text-simple-component .text-simple-box.no-border {\n border: none !important;\n padding: 0 !important;\n}\n.text-simple-component .text-simple-box {\n color: #666666;\n font-size: 1rem;\n border: 1px solid grey;\n padding: 0.868rem;\n border-radius: 3px !important;\n}\n.text-simple-component .helper-text {\n font-size: 0.85rem !important;\n padding: 0 !important;\n margin-top: 3px;\n line-height: 1.66;\n color: #666666 !important;\n letter-spacing: 0.03333em;\n}\n.text-simple-component .has-error-border {\n border-color: #F24726 !important;\n}\n.text-simple-component .has-error {\n color: #F24726 !important;\n}";
|
|
1466
1468
|
styleInject(css_248z$e);
|
|
1467
1469
|
|
|
1468
1470
|
var TextSimpleComponent = function TextSimpleComponent(props) {
|