@mailstep/design-system 0.7.16-beta.14 → 0.7.16-beta.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 +1 -1
- package/ui/index.es.js +12 -4
- package/ui/index.umd.js +12 -4
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@ export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 =
|
|
|
10
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"])));
|
|
11
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
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: 1;\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 & .sticky {\n background-color:
|
|
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: 1;\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: 2;sticky\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: 1;\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: 2;sticky\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) {
|
|
14
14
|
var theme = _a.theme;
|
|
15
15
|
return theme.colors.white;
|
|
16
16
|
});
|
package/ui/index.es.js
CHANGED
|
@@ -43191,19 +43191,23 @@ const QTe = (e = {}, t) => Cxe(e, (r) => {
|
|
|
43191
43191
|
overflow: hidden;
|
|
43192
43192
|
position: relative;
|
|
43193
43193
|
}
|
|
43194
|
+
|
|
43194
43195
|
& .sticky {
|
|
43195
|
-
background-color:
|
|
43196
|
+
background-color: bgLightGray1;
|
|
43196
43197
|
}
|
|
43197
43198
|
}
|
|
43199
|
+
|
|
43198
43200
|
& .filterRow {
|
|
43199
43201
|
& .cell {
|
|
43200
43202
|
overflow: visible;
|
|
43201
43203
|
}
|
|
43204
|
+
|
|
43202
43205
|
& .cell > div {
|
|
43203
43206
|
width: 100%; // TODO fix in common-grid
|
|
43204
43207
|
}
|
|
43208
|
+
|
|
43205
43209
|
& .sticky {
|
|
43206
|
-
background-color:
|
|
43210
|
+
background-color: bgLightGray1;
|
|
43207
43211
|
}
|
|
43208
43212
|
border-bottom: none; // TODO fix in common-grid
|
|
43209
43213
|
}
|
|
@@ -43261,14 +43265,18 @@ const QTe = (e = {}, t) => Cxe(e, (r) => {
|
|
|
43261
43265
|
background: lightGray1;
|
|
43262
43266
|
}
|
|
43263
43267
|
|
|
43268
|
+
.sticky-right, .sticky-left {
|
|
43269
|
+
background: white;
|
|
43270
|
+
z-index: 2;sticky
|
|
43271
|
+
}
|
|
43272
|
+
|
|
43264
43273
|
.sticky-right {
|
|
43265
43274
|
border-left: 1px solid #dfe1e6;
|
|
43266
|
-
|
|
43275
|
+
|
|
43267
43276
|
}
|
|
43268
43277
|
|
|
43269
43278
|
.sticky-left {
|
|
43270
43279
|
border-right: 1px solid #dfe1e6;
|
|
43271
|
-
background: white;
|
|
43272
43280
|
}
|
|
43273
43281
|
}
|
|
43274
43282
|
|
package/ui/index.umd.js
CHANGED
|
@@ -3057,19 +3057,23 @@ Avoid returning a new reference inside your input selector, e.g.
|
|
|
3057
3057
|
overflow: hidden;
|
|
3058
3058
|
position: relative;
|
|
3059
3059
|
}
|
|
3060
|
+
|
|
3060
3061
|
& .sticky {
|
|
3061
|
-
background-color:
|
|
3062
|
+
background-color: bgLightGray1;
|
|
3062
3063
|
}
|
|
3063
3064
|
}
|
|
3065
|
+
|
|
3064
3066
|
& .filterRow {
|
|
3065
3067
|
& .cell {
|
|
3066
3068
|
overflow: visible;
|
|
3067
3069
|
}
|
|
3070
|
+
|
|
3068
3071
|
& .cell > div {
|
|
3069
3072
|
width: 100%; // TODO fix in common-grid
|
|
3070
3073
|
}
|
|
3074
|
+
|
|
3071
3075
|
& .sticky {
|
|
3072
|
-
background-color:
|
|
3076
|
+
background-color: bgLightGray1;
|
|
3073
3077
|
}
|
|
3074
3078
|
border-bottom: none; // TODO fix in common-grid
|
|
3075
3079
|
}
|
|
@@ -3125,14 +3129,18 @@ Avoid returning a new reference inside your input selector, e.g.
|
|
|
3125
3129
|
background: lightGray1;
|
|
3126
3130
|
}
|
|
3127
3131
|
|
|
3132
|
+
.sticky-right, .sticky-left {
|
|
3133
|
+
background: white;
|
|
3134
|
+
z-index: 2;sticky
|
|
3135
|
+
}
|
|
3136
|
+
|
|
3128
3137
|
.sticky-right {
|
|
3129
3138
|
border-left: 1px solid #dfe1e6;
|
|
3130
|
-
|
|
3139
|
+
|
|
3131
3140
|
}
|
|
3132
3141
|
|
|
3133
3142
|
.sticky-left {
|
|
3134
3143
|
border-right: 1px solid #dfe1e6;
|
|
3135
|
-
background: white;
|
|
3136
3144
|
}
|
|
3137
3145
|
}
|
|
3138
3146
|
|