@mailstep/design-system 0.7.16-beta.8 → 0.7.16
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/package.json +1 -1
- package/ui/Blocks/CommonGrid/styles.js +5 -7
- package/ui/Blocks/CommonGrid/utils/constants.d.ts +4 -2
- package/ui/Blocks/CommonGrid/utils/constants.js +4 -4
- package/ui/index.es.js +5718 -5701
- package/ui/index.umd.js +263 -246
package/package.json
CHANGED
|
@@ -5,14 +5,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
5
5
|
import styled, { x } from '@xstyled/styled-components';
|
|
6
6
|
import { th } from '@xstyled/system';
|
|
7
7
|
import CommonGrid from './CommonGrid';
|
|
8
|
-
import { gridRowHeight } from './utils/constants';
|
|
9
|
-
var
|
|
10
|
-
var HeaderHeight = '75px';
|
|
11
|
-
export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n bottom: 9px;\n padding-top: 10px;\n padding-bottom: 10px;\n left: 0;\n width: 100%;\n height: ", ";\n background-color: bgLightGray;\n\n & > * {\n @media (min-width: 1024px) {\n justify-content: flex-end;\n }\n }\n\n @media print {\n display: none;\n }\n\n @media (min-width: 1024px) {\n position: relative;\n bottom: 0;\n margin-bottom: 0;\n height: ", ";\n }\n"], ["\n position: fixed;\n bottom: 9px;\n padding-top: 10px;\n padding-bottom: 10px;\n left: 0;\n width: 100%;\n height: ", ";\n background-color: bgLightGray;\n\n & > * {\n @media (min-width: 1024px) {\n justify-content: flex-end;\n }\n }\n\n @media print {\n display: none;\n }\n\n @media (min-width: 1024px) {\n position: relative;\n bottom: 0;\n margin-bottom: 0;\n height: ", ";\n }\n"])), FooterHeight, FooterHeight);
|
|
8
|
+
import { gridRowHeight, gridFooterHeight, gridButtonStripHeight, gridHeadHeight } from './utils/constants';
|
|
9
|
+
export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n bottom: 0px;\n padding-top: 10px;\n padding-bottom: 10px;\n left: 0;\n width: 100%;\n height: ", "px;\n background-color: bgLightGray;\n\n & > * {\n @media (min-width: 1024px) {\n justify-content: flex-end;\n }\n }\n\n @media print {\n display: none;\n }\n\n @media (min-width: 1024px) {\n position: relative;\n bottom: 0;\n margin-bottom: 0;\n }\n"], ["\n position: fixed;\n bottom: 0px;\n padding-top: 10px;\n padding-bottom: 10px;\n left: 0;\n width: 100%;\n height: ", "px;\n background-color: bgLightGray;\n\n & > * {\n @media (min-width: 1024px) {\n justify-content: flex-end;\n }\n }\n\n @media print {\n display: none;\n }\n\n @media (min-width: 1024px) {\n position: relative;\n bottom: 0;\n margin-bottom: 0;\n }\n"])), gridFooterHeight);
|
|
12
10
|
export var ContentContainer = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n height: 100%;\n"])));
|
|
13
|
-
export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: calc(100% - ", ");\n\n @media (min-width: 1024px) {\n height: calc(100% - ", ");\n }\n"], ["\n height: calc(100% - ", ");\n\n @media (min-width: 1024px) {\n height: calc(100% - ", ");\n }\n"])),
|
|
14
|
-
export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: ", ";\n flex-wrap: wrap;\n z-index: 2;\n"], ["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: ", ";\n flex-wrap: wrap;\n z-index: 2;\n"])),
|
|
15
|
-
export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: calc(100% - ", ");\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", ";\n }\n & .gridHead {\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index:
|
|
11
|
+
export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: calc(100% - ", "px);\n\n @media (min-width: 1024px) {\n height: calc(100% - ", "px);\n }\n"], ["\n height: calc(100% - ", "px);\n\n @media (min-width: 1024px) {\n height: calc(100% - ", "px);\n }\n"])), gridFooterHeight, gridFooterHeight);
|
|
12
|
+
export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: ", "px;\n flex-wrap: wrap;\n z-index: 2;\n"], ["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: ", "px;\n flex-wrap: wrap;\n z-index: 2;\n"])), gridButtonStripHeight);
|
|
13
|
+
export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n padding-left: 12px;\n border-top: 1px solid ", ";\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n position: relative;\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 12px;\n flex-grow: 1;\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: fit-content;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n width: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 2px;\n padding-right: 2px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right, .sticky-left {\n background: white;\n z-index: 1;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n \n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left, .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n max-width: 88px;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"], ["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n padding-left: 12px;\n border-top: 1px solid ", ";\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n position: relative;\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 12px;\n flex-grow: 1;\n @media (min-width: 1024px) {\n padding-left: 20px;\n }\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: fit-content;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n width: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 2px;\n padding-right: 2px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right, .sticky-left {\n background: white;\n z-index: 1;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n \n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left, .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n max-width: 88px;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"])), gridButtonStripHeight, th('fonts.primary'), gridRowHeight, gridHeadHeight, th('colors.lightGray6'), th('fonts.primary'), function (_a) {
|
|
16
14
|
var theme = _a.theme;
|
|
17
15
|
return theme.colors.white;
|
|
18
16
|
});
|
|
@@ -2,6 +2,8 @@ export declare const rowsPerPageOptions: {
|
|
|
2
2
|
value: number;
|
|
3
3
|
label: number;
|
|
4
4
|
}[];
|
|
5
|
-
export declare const
|
|
6
|
-
export declare const
|
|
5
|
+
export declare const gridButtonStripHeight = 75;
|
|
6
|
+
export declare const gridHeadHeight = 79;
|
|
7
|
+
export declare const gridHeaderHeight: number;
|
|
8
|
+
export declare const gridFooterHeight = 60;
|
|
7
9
|
export declare const gridRowHeight = 40;
|
|
@@ -4,8 +4,8 @@ export var rowsPerPageOptions = [
|
|
|
4
4
|
{ value: 50, label: 50 },
|
|
5
5
|
{ value: 100, label: 100 }
|
|
6
6
|
];
|
|
7
|
-
|
|
8
|
-
export var
|
|
9
|
-
|
|
10
|
-
export var gridFooterHeight =
|
|
7
|
+
export var gridButtonStripHeight = 75;
|
|
8
|
+
export var gridHeadHeight = 79;
|
|
9
|
+
export var gridHeaderHeight = gridButtonStripHeight + gridHeadHeight;
|
|
10
|
+
export var gridFooterHeight = 60;
|
|
11
11
|
export var gridRowHeight = 40;
|