@atlaskit/editor-plugin-table 2.5.0 → 2.5.2
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/CHANGELOG.md +12 -0
- package/dist/cjs/plugins/table/ui/FloatingContextualButton/styles.js +1 -1
- package/dist/cjs/plugins/table/ui/common-styles.js +1 -1
- package/dist/cjs/plugins/table/ui/consts.js +46 -8
- package/dist/cjs/plugins/table/ui/ui-styles.js +29 -15
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/plugins/table/ui/FloatingContextualButton/styles.js +1 -1
- package/dist/es2019/plugins/table/ui/common-styles.js +27 -27
- package/dist/es2019/plugins/table/ui/consts.js +43 -9
- package/dist/es2019/plugins/table/ui/ui-styles.js +38 -38
- package/dist/es2019/version.json +1 -1
- package/dist/esm/plugins/table/ui/FloatingContextualButton/styles.js +1 -1
- package/dist/esm/plugins/table/ui/common-styles.js +1 -1
- package/dist/esm/plugins/table/ui/consts.js +43 -9
- package/dist/esm/plugins/table/ui/ui-styles.js +31 -17
- package/dist/esm/version.json +1 -1
- package/dist/types/plugins/table/ui/consts.d.ts +11 -7
- package/dist/types/plugins/table/ui/ui-styles.d.ts +8 -8
- package/dist/types-ts4.5/plugins/table/ui/consts.d.ts +11 -7
- package/dist/types-ts4.5/plugins/table/ui/ui-styles.d.ts +8 -8
- package/package.json +2 -2
- package/src/__tests__/unit/pm-plugins/main.ts +11 -0
- package/src/__tests__/unit/ui/FloatingContextualButton.tsx +11 -0
- package/src/__tests__/unit/ui/FloatingInsertButton.tsx +11 -0
- package/src/plugins/table/ui/FloatingContextualButton/styles.ts +1 -1
- package/src/plugins/table/ui/common-styles.ts +27 -42
- package/src/plugins/table/ui/consts.ts +47 -20
- package/src/plugins/table/ui/ui-styles.ts +49 -64
- package/tmp/api-report-tmp.d.ts +108 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 2.5.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`8b77d484c89`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8b77d484c89) - Change snap gap for tables guideline to 9px
|
|
8
|
+
|
|
9
|
+
## 2.5.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`e64541c6fda`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e64541c6fda) - [ux] [ED-18759] Updated table border, handlebar controls, blanket, icon, icon background and table cell options button colour tokens on light and dark theme for table selection and table deletion. Borders for Table Floating Contextual Button & Floating toolbar color palette button on dark & light theme are also updated.
|
|
14
|
+
|
|
3
15
|
## 2.5.0
|
|
4
16
|
|
|
5
17
|
### Minor Changes
|
|
@@ -16,7 +16,7 @@ var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles(props
|
|
|
16
16
|
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n > div {\n // Sits behind button to provide surface-color background\n background: ", ";\n border-radius: ", "px;\n display: flex;\n height: ", "px;\n flex-direction: column;\n }\n && button {\n background: ", ";\n flex-direction: column;\n margin: 2px;\n outline: 2px solid ", ";\n border-radius: 1px;\n padding: 0;\n height: calc(100% - 4px);\n display: flex;\n }\n && button:hover {\n background: ", ";\n }\n && button:active {\n background: ", ";\n }\n && button > span {\n margin: 0px -4px;\n }\n && span {\n pointer-events: none;\n }\n"])), "var(--ds-surface, ".concat(_colors.N20, ")"), (0, _constants.borderRadius)(), _consts.contextualMenuTriggerSize + 2, (0, _components.themed)({
|
|
17
17
|
light: "var(--ds-background-neutral, none)",
|
|
18
18
|
dark: "var(--ds-background-neutral, none)"
|
|
19
|
-
})(props), "var(--ds-
|
|
19
|
+
})(props), "var(--ds-surface, ".concat(_colors.N0, ")"), (0, _components.themed)({
|
|
20
20
|
light: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")"),
|
|
21
21
|
dark: "var(--ds-background-neutral-hovered, ".concat(_colors.DN60, ")")
|
|
22
22
|
})(props), (0, _components.themed)({
|
|
@@ -41,7 +41,7 @@ var breakoutWidthStyling = function breakoutWidthStyling(useFragmentMarkBreakout
|
|
|
41
41
|
// TODO: https://product-fabric.atlassian.net/browse/DSP-4139
|
|
42
42
|
var tableStyles = function tableStyles(props) {
|
|
43
43
|
var _props$featureFlags, _props$featureFlags$u, _props$featureFlags2, _props$featureFlags3;
|
|
44
|
-
return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n .", " .", " {\n z-index: 0;\n }\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: 0 6px 4px -4px ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid\n ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky\n .", ",\n tr.sticky\n .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", " {\n padding: 0 ", "px;\n\n // https://product-fabric.atlassian.net/browse/ED-16386\n // Fixes issue where the extra padding that is added here throws off the position\n // of the rows control dot\n &::after {\n right: 6px !important;\n }\n }\n\n &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n }\n\n /* Breakout only works on top level unless wrapped in fragment mark */\n ", "\n\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: 1px;\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", " {\n cursor: pointer;\n }\n .", ":hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n // Allows better positioning for the shadow sentinels - ED-16668\n position: relative;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n td.", ", td.", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n border: 1px solid ", ";\n z-index: ", ";\n }\n }\n }\n .", " {\n position: absolute;\n /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n top: ", "px;\n }\n .", ".", " {\n z-index: ", ";\n }\n .", " {\n left: -", "px;\n }\n .", " {\n padding-right: ", "px;\n margin-right: -", "px;\n padding-bottom: 0px;\n /* fixes gap cursor height */\n overflow: auto;\n overflow-y: hidden;\n position: relative;\n }\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n\n ", "\n"])), _types.TableCssClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), "var(--ds-icon, ".concat(_colors.N300, ")"), _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(_colors.B300, ")"), "var(--ds-icon, white)", (0, _styles.tableSharedStyle)(props), (0, _uiStyles.columnControlsLineMarker)(), _uiStyles.hoveredDeleteButton, _uiStyles.hoveredCell, _uiStyles.hoveredWarningCell, _uiStyles.resizeHandle, rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, (0, _consts.tableCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, _uiStyles.insertColumnButtonWrapper, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, _uiStyles.insertRowButtonWrapper, _uiStyles.DeleteButton, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, "var(--ds-surface, white)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, white)", _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, "var(--ds-surface, white)", _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, green)", _consts.stickyRowOffsetTop, _consts.stickyRowZIndex, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.stickyRowZIndex + 1, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, "var(--ds-surface, white)", (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', (0, _uiStyles.OverflowShadow)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling((_props$featureFlags$u = (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.useFragmentMarkBreakoutWidthStylingFix) !== null && _props$featureFlags$u !== void 0 ? _props$featureFlags$u : true), (0, _uiStyles.columnControlsDecoration)(props), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)(props, "\n left: -11px;\n top: 9px;\n "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, (0, _consts.tableBorderColor)(props), _consts.tableBorderRadiusSize, (0, _consts.tableHeaderCellBackgroundColor)(props), _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, "var(--ds-background-danger, ".concat(_consts.tableToolbarDeleteColor, ")"), _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)(props, "\n bottom: -1px;\n left: -11px;\n "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)(props, "\n border-bottom: 1px solid ".concat((0, _consts.tableBorderColor)(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(_consts.tableToolbarSize, "px;\n\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize - 1, _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderColor)(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _consts.tableHeaderCellBackgroundColor)(props), (0, _consts.tableTextColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, "var(--ds-background-selected, ".concat(_consts.tableToolbarSelectedColor, ")"), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, "var(--ds-background-danger, ".concat(_consts.tableToolbarDeleteColor, ")"), _consts.tableBorderDeleteColor, "var(--ds-text-danger, ".concat(_colors.R500, ")"), _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableCellDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
|
|
44
|
+
return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n .", " button {\n background: ", ";\n color: ", ";\n cursor: none;\n }\n\n .", ":not(.", ") button:hover {\n background: ", ";\n color: ", " !important;\n cursor: pointer;\n }\n\n .ProseMirror {\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n\n .", " {\n margin-bottom: 0;\n }\n\n .", " {\n td.", ", th.", " {\n position: relative;\n overflow: visible;\n }\n\n td.", " {\n background-color: ", ";\n\n // ED-15246: Trello card is visible through a border of a table border\n // This fixes a border issue caused by relative positioned table cells\n &::after {\n height: 100%;\n content: '';\n border-left: 1px solid ", ";\n border-bottom: 1px solid ", ";\n position: absolute;\n right: 0px;\n top: 0px;\n bottom: 0;\n width: 100%;\n display: inline-block;\n pointer-events: none;\n }\n }\n }\n\n .", " {\n ", "\n }\n\n .", " {\n ", "\n }\n\n /* Delete button */\n ", "\n /* Ends Delete button */\n\n /* sticky styles */\n .", " .", " .", ":first-of-type {\n margin-top: ", "px;\n width: ", "px;\n\n position: fixed !important;\n z-index: ", " !important;\n box-shadow: 0px -", "px ", ";\n border-right: 0 none;\n /* top set by NumberColumn component */\n }\n\n .", " .", ".sticky {\n position: fixed !important;\n /* needs to be above row controls */\n z-index: ", " !important;\n background: ", ";\n\n width: ", "px;\n height: ", "px;\n }\n\n .", ".sticky .", " {\n border-bottom: 0px none;\n border-right: 0px none;\n\n height: ", "px;\n width: ", "px;\n }\n\n .", " .", " {\n z-index: 0;\n }\n\n .", "\n .", "\n .", ".sticky {\n position: fixed !important;\n z-index: ", " !important;\n display: flex;\n border-left: ", "px solid\n ", ";\n margin-left: -", "px;\n }\n\n .", " col:first-of-type {\n /* moving rows out of a table layout does weird things in Chrome */\n border-right: 1px solid ", ";\n }\n\n tr.sticky {\n padding-top: ", "px;\n position: fixed;\n display: grid;\n\n /* to keep it above cell selection */\n z-index: ", ";\n\n overflow-y: visible;\n overflow-x: hidden;\n\n grid-auto-flow: column;\n\n /* background for where controls apply */\n background: ", ";\n box-sizing: content-box;\n\n margin-top: 2px;\n\n box-shadow: 0 6px 4px -4px ", ";\n margin-left: -1px;\n\n &.no-pointer-events {\n pointer-events: none;\n }\n }\n\n .", " .", " {\n left: unset;\n position: fixed;\n z-index: ", ";\n }\n\n .", ".", "\n .", " {\n padding-bottom: ", "px;\n }\n\n tr.sticky th {\n border-bottom: ", "px solid\n ", ";\n margin-right: -1px;\n }\n\n .", " tr.sticky > th:last-child {\n border-right-width: 1px;\n }\n\n /* add left edge for first cell */\n .", " tr.sticky > th:first-of-type {\n margin-left: 0px;\n }\n\n /* add a little bit so the scroll lines up with the table */\n .", " tr.sticky::after {\n content: ' ';\n width: ", "px;\n }\n\n /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n .", " .sticky + tr {\n min-height: 0px;\n }\n\n /* move resize line a little in sticky bar */\n .", ".", " {\n tr.sticky\n td.", ",\n tr.sticky\n th.", " {\n .", "::after {\n right: ", "px;\n }\n }\n\n /* when selected put it back to normal -- :not selector would be nicer */\n tr.sticky\n td.", ".", ",\n tr.sticky\n th.", ".", " {\n .", "::after {\n right: ", "px;\n }\n }\n }\n\n tr.sticky\n .", ",\n tr.sticky\n .", " {\n z-index: 1;\n }\n\n .", " tr.sticky {\n padding-top: ", "px;\n }\n\n .", ".", "\n .", "\n .", ":first-of-type {\n margin-top: ", "px;\n }\n\n .", ".sticky {\n border-top: ", "px solid\n ", ";\n }\n\n ", "\n ", "\n\n .", " .", " {\n height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n }\n\n .less-padding {\n padding: 0 ", "px;\n\n .", " {\n padding: 0 ", "px;\n\n // https://product-fabric.atlassian.net/browse/ED-16386\n // Fixes issue where the extra padding that is added here throws off the position\n // of the rows control dot\n &::after {\n right: 6px !important;\n }\n }\n\n &.", "[data-number-column='true'] {\n padding-left: ", "px;\n }\n\n .", " {\n left: 6px;\n }\n\n .", " {\n left: calc(100% - 6px);\n }\n }\n\n > .", " {\n /**\n * Prevent margins collapsing, aids with placing the gap-cursor correctly\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n *\n * TODO: Enable this, many tests will fail!\n * border-top: 1px solid transparent;\n */\n }\n\n /* Breakout only works on top level unless wrapped in fragment mark */\n ", "\n\n ", ";\n\n /* Corner controls */\n .", " {\n width: ", "px;\n height: ", "px;\n display: none;\n\n .", " {\n position: relative;\n\n ", ";\n }\n }\n\n .", ".sticky {\n .", " {\n /* sticky row insert dot overlaps other row insert and messes things up */\n display: none !important;\n }\n }\n\n .", " {\n position: absolute;\n top: 0;\n width: ", "px;\n height: ", "px;\n border: 1px solid ", ";\n border-radius: 0;\n border-top-left-radius: ", "px;\n background: ", ";\n box-sizing: border-box;\n padding: 0;\n :focus {\n outline: none;\n }\n }\n .active .", " {\n border-color: ", ";\n background: ", ";\n }\n\n .", "[data-number-column='true'] {\n .", ", .", " {\n width: ", "px;\n }\n .", " .", " {\n border-right-width: 0;\n }\n }\n\n :not(.", ") .", ":hover {\n border-color: ", ";\n background: ", ";\n cursor: pointer;\n }\n\n :not(.", ")\n .", ".", " {\n border-color: ", ";\n background: ", ";\n }\n\n /* Row controls */\n .", " {\n width: ", "px;\n box-sizing: border-box;\n display: none;\n position: relative;\n\n ", ";\n\n .", " {\n display: flex;\n flex-direction: column;\n }\n .", ":last-child > button {\n border-bottom-left-radius: ", "px;\n }\n .", " {\n position: relative;\n margin-top: -1px;\n }\n .", ":hover,\n .", ".active,\n .", ":hover {\n z-index: ", ";\n }\n\n ", "\n }\n\n :not(.", ") .", " {\n ", "\n ", "\n }\n\n /* Numbered column */\n .", " {\n position: relative;\n float: right;\n margin-left: ", "px;\n top: ", "px;\n width: ", "px;\n box-sizing: border-box;\n }\n\n .", " {\n border: 1px solid ", ";\n box-sizing: border-box;\n margin-top: -1px;\n padding-bottom: 2px;\n padding: 10px 2px;\n text-align: center;\n font-size: ", ";\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n\n :first-child:not(style),\n style:first-child + * {\n margin-top: 0;\n }\n :last-child {\n border-bottom: 1px solid ", ";\n }\n }\n\n .", " {\n .", ", .", " {\n display: block;\n }\n .", " {\n padding-left: 1px;\n .", " {\n border-left: 0 none;\n }\n\n .", ".active {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n }\n }\n :not(.", ") .", " {\n .", " {\n cursor: pointer;\n }\n .", ":hover {\n border-bottom: 1px solid ", ";\n border-color: ", ";\n background-color: ", ";\n position: relative;\n z-index: ", ";\n color: ", ";\n }\n .", ".", " {\n background-color: ", ";\n border: 1px solid ", ";\n border-left: 0;\n color: ", ";\n position: relative;\n z-index: ", ";\n }\n }\n\n /* Table */\n .", " > table {\n table-layout: fixed;\n white-space: normal;\n border-top: none;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n // Allows better positioning for the shadow sentinels - ED-16668\n position: relative;\n\n > tbody > tr {\n white-space: pre-wrap;\n }\n\n .", " + * {\n margin-top: 0;\n }\n\n /*\n * Headings have a top margin by default, but we don't want this on the\n * first heading within table header cells.\n *\n * This specifically sets margin-top for the first heading within a header\n * cell when center/right aligned.\n */\n th.", " > .fabric-editor-block-mark {\n > h1:first-of-type,\n > h2:first-of-type,\n > h3:first-of-type,\n > h4:first-of-type,\n > h5:first-of-type,\n > h6:first-of-type {\n margin-top: 0;\n }\n }\n\n .", ", .", " {\n position: relative;\n }\n /* Give selected cells a blue overlay */\n .", "::after,\n .", "::after {\n z-index: ", ";\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n width: 100%;\n pointer-events: none;\n }\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n z-index: ", ";\n }\n th.", "::after,\n td.", "::after {\n background: ", ";\n z-index: ", ";\n }\n // ED-15246: Trello card is visible through a border of a table border\n td.", ", td.", " {\n &::after {\n height: 100%;\n width: 100%;\n border: 1px solid ", ";\n content: '';\n position: absolute;\n left: -1px;\n top: -1px;\n bottom: 0;\n z-index: ", ";\n display: inline-block;\n pointer-events: none;\n }\n &.", "::after {\n border: 1px solid ", ";\n z-index: ", ";\n }\n }\n }\n .", " {\n position: absolute;\n /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n top: ", "px;\n }\n .", ".", " {\n z-index: ", ";\n }\n .", " {\n left: -", "px;\n }\n .", " {\n padding-right: ", "px;\n margin-right: -", "px;\n padding-bottom: 0px;\n /* fixes gap cursor height */\n overflow: auto;\n overflow-y: hidden;\n position: relative;\n }\n }\n\n .ProseMirror.", " {\n .", " {\n overflow-x: auto;\n ", ";\n }\n }\n\n .ProseMirror.", " {\n cursor: col-resize;\n }\n\n /*\n ED-15882: When custom start numbers is enabled for lists, we have\n styles that handle this generally (in editor-common) so we can\n throw away the older table-specific styles here.\n */\n ", "\n\n ", "\n"])), _types.TableCssClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), "var(--ds-icon, ".concat(_colors.N300, ")"), _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(_colors.B300, ")"), "var(--ds-icon, white)", (0, _styles.tableSharedStyle)(props), (0, _uiStyles.columnControlsLineMarker)(), (0, _uiStyles.hoveredDeleteButton)(props), (0, _uiStyles.hoveredCell)(props), _uiStyles.hoveredWarningCell, (0, _uiStyles.resizeHandle)(props), rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, (0, _consts.tableCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, (0, _uiStyles.insertColumnButtonWrapper)(props), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, (0, _uiStyles.insertRowButtonWrapper)(props), (0, _uiStyles.DeleteButton)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, "var(--ds-surface, white)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, white)", _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, "var(--ds-surface, white)", _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, green)", _consts.stickyRowOffsetTop, _consts.stickyRowZIndex, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.stickyRowZIndex + 1, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, (0, _consts.tableBorderColor)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, "var(--ds-surface, white)", (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', (0, _uiStyles.OverflowShadow)(props), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling((_props$featureFlags$u = (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.useFragmentMarkBreakoutWidthStylingFix) !== null && _props$featureFlags$u !== void 0 ? _props$featureFlags$u : true), (0, _uiStyles.columnControlsDecoration)(props), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)(props, "\n left: -11px;\n top: 9px;\n "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, (0, _consts.tableBorderColor)(props), _consts.tableBorderRadiusSize, (0, _consts.tableHeaderCellBackgroundColor)(props), _types.TableCssClassName.CONTROLS_CORNER_BUTTON, (0, _consts.tableBorderSelectedColor)(props), (0, _consts.tableToolbarSelectedColor)(props), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, (0, _consts.tableBorderSelectedColor)(props), (0, _consts.tableToolbarSelectedColor)(props), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, (0, _consts.tableBorderDeleteColor)(props), (0, _consts.tableToolbarDeleteColor)(props), _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)(props, "\n bottom: -1px;\n left: -11px;\n "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)(props, "\n border-bottom: 1px solid ".concat((0, _consts.tableBorderColor)(props), ";\n border-right: 0px;\n border-radius: 0;\n height: 100%;\n width: ").concat(_consts.tableToolbarSize, "px;\n\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n position: absolute;\n width: 30px;\n height: 50%;\n right: 0;\n bottom: 0;\n }\n .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n top: 0;\n }\n ")), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(props), (0, _uiStyles.HeaderButtonDanger)(props), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize - 1, _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderColor)(props), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _consts.tableHeaderCellBackgroundColor)(props), (0, _consts.tableTextColor)(props), (0, _consts.tableBorderColor)(props), (0, _consts.tableBorderColor)(props), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderSelectedColor)(props), (0, _consts.tableBorderSelectedColor)(props), (0, _consts.tableToolbarSelectedColor)(props), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, (0, _consts.tableBorderSelectedColor)(props), (0, _consts.tableBorderSelectedColor)(props), (0, _consts.tableToolbarSelectedColor)(props), _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), "var(--ds-text-danger, ".concat(_colors.R500, ")"), _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, (0, _consts.tableBorderSelectedColor)(props), _types.TableCssClassName.SELECTED_CELL, (0, _consts.tableCellSelectedColor)(props), _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, (0, _consts.tableCellDeleteColor)(props), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, (0, _consts.tableBorderSelectedColor)(props), _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, (0, _consts.tableBorderDeleteColor)(props), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableToolbarSize, _types.TableCssClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, props !== null && props !== void 0 && (_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.restartNumberedLists ? "" : listLargeNumericMarkersOldStyles, shadowSentinelStyles);
|
|
45
45
|
};
|
|
46
46
|
exports.tableStyles = tableStyles;
|
|
47
47
|
var tableFullPageEditorStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n .ProseMirror .", " > table {\n margin-left: 0;\n // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n margin-right: -1px;\n width: 100%;\n }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePadding = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedColor = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_GAP = void 0;
|
|
6
|
+
exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePadding = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_GAP = void 0;
|
|
7
7
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
8
8
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
9
9
|
var _colors = require("@atlaskit/theme/colors");
|
|
@@ -43,18 +43,56 @@ exports.tableBorderColor = tableBorderColor;
|
|
|
43
43
|
var tableFloatingControlsColor = "var(--ds-background-neutral, ".concat(_colors.N20, ")");
|
|
44
44
|
// TODO: https://product-fabric.atlassian.net/browse/DSP-4461
|
|
45
45
|
exports.tableFloatingControlsColor = tableFloatingControlsColor;
|
|
46
|
-
var tableCellSelectedColor =
|
|
46
|
+
var tableCellSelectedColor = (0, _components.themed)({
|
|
47
|
+
light: "var(--ds-blanket-selected, ".concat(_editorSharedStyles.akEditorTableCellBlanketSelected, ")"),
|
|
48
|
+
dark: "var(--ds-blanket-selected, ".concat(_editorSharedStyles.akEditorTableCellBlanketSelected, ")")
|
|
49
|
+
});
|
|
47
50
|
exports.tableCellSelectedColor = tableCellSelectedColor;
|
|
48
|
-
var tableToolbarSelectedColor =
|
|
51
|
+
var tableToolbarSelectedColor = (0, _components.themed)({
|
|
52
|
+
light: "var(--ds-background-selected-pressed, ".concat(_colors.B200, ")"),
|
|
53
|
+
dark: "var(--ds-background-selected-pressed, ".concat(_colors.B200, ")")
|
|
54
|
+
});
|
|
49
55
|
exports.tableToolbarSelectedColor = tableToolbarSelectedColor;
|
|
50
|
-
var tableBorderSelectedColor =
|
|
56
|
+
var tableBorderSelectedColor = (0, _components.themed)({
|
|
57
|
+
light: "var(--ds-border-focused, ".concat(_editorSharedStyles.akEditorTableBorderSelected, ")"),
|
|
58
|
+
dark: "var(--ds-border-focused, ".concat(_editorSharedStyles.akEditorTableBorderSelected, ")")
|
|
59
|
+
});
|
|
51
60
|
exports.tableBorderSelectedColor = tableBorderSelectedColor;
|
|
52
|
-
var
|
|
61
|
+
var tableCellSelectedDeleteIconColor = (0, _components.themed)({
|
|
62
|
+
light: "var(--ds-icon-subtle, ".concat(_colors.N300, ")"),
|
|
63
|
+
dark: "var(--ds-icon-subtle, ".concat(_colors.N300, ")")
|
|
64
|
+
});
|
|
65
|
+
exports.tableCellSelectedDeleteIconColor = tableCellSelectedDeleteIconColor;
|
|
66
|
+
var tableCellSelectedDeleteIconBackground = (0, _components.themed)({
|
|
67
|
+
light: "var(--ds-background-accent-gray-subtlest, ".concat(_colors.N20A, ")"),
|
|
68
|
+
dark: "var(--ds-background-accent-gray-subtlest, ".concat(_colors.N20A, ")")
|
|
69
|
+
});
|
|
70
|
+
exports.tableCellSelectedDeleteIconBackground = tableCellSelectedDeleteIconBackground;
|
|
71
|
+
var tableCellDeleteColor = (0, _components.themed)({
|
|
72
|
+
light: "var(--ds-blanket-danger, ".concat(_editorSharedStyles.akEditorTableCellBlanketDeleted, ")"),
|
|
73
|
+
dark: "var(--ds-blanket-danger, ".concat(_editorSharedStyles.akEditorTableCellBlanketDeleted, ")")
|
|
74
|
+
});
|
|
53
75
|
exports.tableCellDeleteColor = tableCellDeleteColor;
|
|
54
|
-
var tableBorderDeleteColor =
|
|
76
|
+
var tableBorderDeleteColor = (0, _components.themed)({
|
|
77
|
+
light: "var(--ds-border-danger, ".concat(_colors.R400, ")"),
|
|
78
|
+
dark: "var(--ds-border-danger, ".concat(_colors.R400, ")")
|
|
79
|
+
});
|
|
55
80
|
exports.tableBorderDeleteColor = tableBorderDeleteColor;
|
|
56
|
-
var tableToolbarDeleteColor =
|
|
81
|
+
var tableToolbarDeleteColor = (0, _components.themed)({
|
|
82
|
+
light: "var(--ds-background-danger-pressed, ".concat(_colors.R75, ")"),
|
|
83
|
+
dark: "var(--ds-background-danger-pressed, ".concat(_colors.R75, ")")
|
|
84
|
+
});
|
|
57
85
|
exports.tableToolbarDeleteColor = tableToolbarDeleteColor;
|
|
86
|
+
var tableCellHoverDeleteIconColor = (0, _components.themed)({
|
|
87
|
+
light: "var(--ds-icon-inverse, white)",
|
|
88
|
+
dark: "var(--ds-icon-inverse, white)"
|
|
89
|
+
});
|
|
90
|
+
exports.tableCellHoverDeleteIconColor = tableCellHoverDeleteIconColor;
|
|
91
|
+
var tableCellHoverDeleteIconBackground = (0, _components.themed)({
|
|
92
|
+
light: "var(--ds-background-danger-bold, ".concat(_colors.R300, ")"),
|
|
93
|
+
dark: "var(--ds-background-danger-bold, ".concat(_colors.R300, ")")
|
|
94
|
+
});
|
|
95
|
+
exports.tableCellHoverDeleteIconBackground = tableCellHoverDeleteIconBackground;
|
|
58
96
|
var tableBorderRadiusSize = 3;
|
|
59
97
|
exports.tableBorderRadiusSize = tableBorderRadiusSize;
|
|
60
98
|
var tablePadding = 8;
|
|
@@ -105,7 +143,7 @@ var stickyRowOffsetTop = 8;
|
|
|
105
143
|
exports.stickyRowOffsetTop = stickyRowOffsetTop;
|
|
106
144
|
var stickyHeaderBorderBottomWidth = 1;
|
|
107
145
|
exports.stickyHeaderBorderBottomWidth = stickyHeaderBorderBottomWidth;
|
|
108
|
-
var TABLE_SNAP_GAP =
|
|
146
|
+
var TABLE_SNAP_GAP = 9;
|
|
109
147
|
exports.TABLE_SNAP_GAP = TABLE_SNAP_GAP;
|
|
110
148
|
var TABLE_HIGHLIGHT_GAP = 10;
|
|
111
149
|
exports.TABLE_HIGHLIGHT_GAP = TABLE_HIGHLIGHT_GAP;
|
|
@@ -14,8 +14,8 @@ var _constants = require("@atlaskit/theme/constants");
|
|
|
14
14
|
var _types = require("../types");
|
|
15
15
|
var _consts = require("./consts");
|
|
16
16
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
|
|
17
|
-
var InsertLine = function InsertLine(cssString) {
|
|
18
|
-
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n background: ", ";\n display: none;\n position: absolute;\n z-index: ", ";\n ", "\n }\n"])), _types.TableCssClassName.CONTROLS_INSERT_LINE, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorUnitZIndex, cssString);
|
|
17
|
+
var InsertLine = function InsertLine(props, cssString) {
|
|
18
|
+
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n background: ", ";\n display: none;\n position: absolute;\n z-index: ", ";\n ", "\n }\n"])), _types.TableCssClassName.CONTROLS_INSERT_LINE, (0, _consts.tableBorderSelectedColor)(props), _editorSharedStyles.akEditorUnitZIndex, cssString);
|
|
19
19
|
};
|
|
20
20
|
var Marker = function Marker(props) {
|
|
21
21
|
return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n"])), (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize);
|
|
@@ -28,15 +28,15 @@ var Button = function Button(cssString) {
|
|
|
28
28
|
return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: ", "px;\n border-width: 0px;\n display: inline-flex;\n max-width: 100%;\n text-align: center;\n margin: 0px;\n padding: 0px;\n text-decoration: none;\n transition: background 0.1s ease-out 0s,\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\n outline: none !important;\n cursor: none;\n\n > .", " {\n display: inline-flex;\n max-height: 100%;\n max-width: 100%;\n }\n ", "\n"])), (0, _constants.borderRadius)(), _types.TableCssClassName.CONTROLS_BUTTON_ICON, cssString);
|
|
29
29
|
};
|
|
30
30
|
var HeaderButton = function HeaderButton(props, cssString) {
|
|
31
|
-
return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n background: ", ";\n border: 1px solid ", ";\n display: block;\n box-sizing: border-box;\n padding: 0;\n\n :focus {\n outline: none;\n }\n ", "\n }\n\n .", "::after {\n content: ' ';\n background-color: transparent;\n left: -15px;\n top: 0;\n position: absolute;\n width: 15px;\n height: 100%;\n z-index: 1;\n }\n\n .active .", " {\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n }\n"])), _types.TableCssClassName.CONTROLS_BUTTON, (0, _consts.tableHeaderCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), cssString, _types.TableCssClassName.ROW_CONTROLS_BUTTON, _types.TableCssClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
|
|
31
|
+
return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n background: ", ";\n border: 1px solid ", ";\n display: block;\n box-sizing: border-box;\n padding: 0;\n\n :focus {\n outline: none;\n }\n ", "\n }\n\n .", "::after {\n content: ' ';\n background-color: transparent;\n left: -15px;\n top: 0;\n position: absolute;\n width: 15px;\n height: 100%;\n z-index: 1;\n }\n\n .active .", " {\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n }\n"])), _types.TableCssClassName.CONTROLS_BUTTON, (0, _consts.tableHeaderCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), cssString, _types.TableCssClassName.ROW_CONTROLS_BUTTON, _types.TableCssClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(_colors.N0, ")"), (0, _consts.tableToolbarSelectedColor)(props), (0, _consts.tableBorderSelectedColor)(props));
|
|
32
32
|
};
|
|
33
33
|
exports.HeaderButton = HeaderButton;
|
|
34
|
-
var HeaderButtonHover = function HeaderButtonHover() {
|
|
35
|
-
return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n .", ":hover {\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n cursor: pointer;\n }\n"])), _types.TableCssClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
|
|
34
|
+
var HeaderButtonHover = function HeaderButtonHover(props) {
|
|
35
|
+
return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n .", ":hover {\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n cursor: pointer;\n }\n"])), _types.TableCssClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, ".concat(_colors.N0, ")"), (0, _consts.tableToolbarSelectedColor)(props), (0, _consts.tableBorderSelectedColor)(props));
|
|
36
36
|
};
|
|
37
37
|
exports.HeaderButtonHover = HeaderButtonHover;
|
|
38
|
-
var HeaderButtonDanger = function HeaderButtonDanger() {
|
|
39
|
-
return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n .", " .", " {\n background-color: ", ";\n border-color: ", ";\n position: relative;\n z-index: ", ";\n }\n"])), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.CONTROLS_BUTTON,
|
|
38
|
+
var HeaderButtonDanger = function HeaderButtonDanger(props) {
|
|
39
|
+
return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n .", " .", " {\n background-color: ", ";\n border-color: ", ";\n position: relative;\n z-index: ", ";\n }\n"])), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.CONTROLS_BUTTON, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _editorSharedStyles.akEditorUnitZIndex);
|
|
40
40
|
};
|
|
41
41
|
exports.HeaderButtonDanger = HeaderButtonDanger;
|
|
42
42
|
var InsertButton = function InsertButton() {
|
|
@@ -45,15 +45,21 @@ var InsertButton = function InsertButton() {
|
|
|
45
45
|
var InsertButtonHover = function InsertButtonHover() {
|
|
46
46
|
return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n .", ":hover {\n background: ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, ".concat(_colors.B300, ")"), "var(--ds-icon-inverse, white)");
|
|
47
47
|
};
|
|
48
|
-
var insertColumnButtonWrapper =
|
|
48
|
+
var insertColumnButtonWrapper = function insertColumnButtonWrapper(props) {
|
|
49
|
+
return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", "\n ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine(props, "\n width: 2px;\n left: 9px;\n "));
|
|
50
|
+
};
|
|
49
51
|
exports.insertColumnButtonWrapper = insertColumnButtonWrapper;
|
|
50
|
-
var insertRowButtonWrapper =
|
|
52
|
+
var insertRowButtonWrapper = function insertRowButtonWrapper(props) {
|
|
53
|
+
return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", "\n ", "\n"])), InsertButton(), InsertButtonHover(), InsertLine(props, "\n height: 2px;\n top: -11px;\n left: ".concat(_consts.tableInsertColumnButtonSize - 1, "px;\n ")));
|
|
54
|
+
};
|
|
51
55
|
exports.insertRowButtonWrapper = insertRowButtonWrapper;
|
|
52
56
|
var columnControlsLineMarker = function columnControlsLineMarker() {
|
|
53
57
|
return (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n .", ".", "\n table\n tr:first-of-type\n td,\n .", ".", "\n table\n tr:first-of-type\n th {\n position: relative;\n }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS);
|
|
54
58
|
};
|
|
55
59
|
exports.columnControlsLineMarker = columnControlsLineMarker;
|
|
56
|
-
var DeleteButton =
|
|
60
|
+
var DeleteButton = function DeleteButton(props) {
|
|
61
|
+
return (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n .", ",\n .", " {\n height: ", "px;\n width: ", "px;\n }\n .", " {\n .", " {\n ", "\n }\n }\n\n .", ":hover {\n background: ", ";\n color: ", ";\n cursor: pointer;\n }\n"])), _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableDeleteButtonSize, _consts.tableDeleteButtonSize, _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, Button("\n background: ".concat((0, _consts.tableCellSelectedDeleteIconBackground)(props), ";\n color: ").concat((0, _consts.tableCellSelectedDeleteIconColor)(props), ";\n ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, (0, _consts.tableCellHoverDeleteIconBackground)(props), (0, _consts.tableCellHoverDeleteIconColor)(props));
|
|
62
|
+
};
|
|
57
63
|
exports.DeleteButton = DeleteButton;
|
|
58
64
|
var OverflowShadow = function OverflowShadow(props) {
|
|
59
65
|
return (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n .", ", .", " {\n display: block;\n height: calc(100% - ", "px);\n position: absolute;\n pointer-events: none;\n top: ", "px;\n z-index: ", ";\n width: 8px;\n }\n .", " {\n background: linear-gradient(\n to left,\n transparent 0,\n ", " 100%\n ),\n linear-gradient(\n to right,\n ", " 0px,\n transparent 1px\n );\n left: 0px;\n }\n .", "[data-number-column='true'] > :not(.", ").", " {\n left: ", "px;\n }\n .", " {\n background: linear-gradient(\n to right,\n transparent 0,\n ", " 100%\n ),\n linear-gradient(\n to left,\n ", " 0px,\n transparent 1px\n );\n left: calc(100% + 2px);\n }\n .", " {\n z-index: 0;\n }\n .", " {\n .", ", .", " {\n height: calc(100% - ", "px);\n top: ", "px;\n }\n .", " {\n border-left: 1px solid ", ";\n }\n }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, _types.TableCssClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _types.TableCssClassName.TABLE_COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTopWithControl, _styles.tableMarginTopWithControl, _types.TableCssClassName.TABLE_LEFT_SHADOW, (0, _consts.tableBorderColor)(props));
|
|
@@ -62,16 +68,24 @@ exports.OverflowShadow = OverflowShadow;
|
|
|
62
68
|
var columnHeaderButton = function columnHeaderButton(props, cssString) {
|
|
63
69
|
return (0, _react.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n background: ", ";\n border: 1px solid ", ";\n display: block;\n box-sizing: border-box;\n padding: 0;\n\n :focus {\n outline: none;\n }\n\n ", "\n"])), (0, _consts.tableHeaderCellBackgroundColor)(props), (0, _consts.tableBorderColor)(props), cssString);
|
|
64
70
|
};
|
|
65
|
-
var columnHeaderButtonSelected =
|
|
71
|
+
var columnHeaderButtonSelected = function columnHeaderButtonSelected(props) {
|
|
72
|
+
return (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n background-color: ", ";\n border-color: ", ";\n z-index: ", ";\n"])), "var(--ds-text-inverse, ".concat(_colors.N0, ")"), (0, _consts.tableToolbarSelectedColor)(props), (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsSelectedZIndex);
|
|
73
|
+
};
|
|
66
74
|
var columnControlsDecoration = function columnControlsDecoration(props) {
|
|
67
|
-
return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n display: none;\n cursor: pointer;\n position: absolute;\n width: calc(100% + ", "px);\n left: -1px;\n top: -", "px;\n height: ", "px;\n z-index: 0;\n\n &::before {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: 2px;\n right: -1px;\n }\n\n &::after {\n content: ' ';\n\n ", "\n }\n }\n\n div.", ">.", "::after {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: -", "px;\n right: -1px;\n }\n\n .", " .", " {\n display: block;\n }\n\n table\n tr:first-of-type\n td.", ",\n table\n tr:first-of-type\n th.", " {\n &.", ",\n &.", ",\n &.", " {\n .", "::after {\n ", ";\n }\n\n &.", "\n .", "::after {\n background-color: ", ";\n border: 1px solid ", ";\n border-bottom: none;\n z-index: ", ";\n }\n }\n }\n\n .", "\n table\n tr:first-of-type\n td.", ",\n .", "\n table\n tr:first-of-type\n th.", " {\n .", "::after {\n ", ";\n }\n }\n"])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _styles.tableCellBorderWidth * 2, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, columnHeaderButton(props, "\n border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n border-bottom: none;\n height: ").concat(_consts.tableToolbarSize, "px;\n width: 100%;\n position: absolute;\n top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n left: 0px;\n z-index: ").concat(_consts.columnControlsZIndex, ";\n ")), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS,
|
|
75
|
+
return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n display: none;\n cursor: pointer;\n position: absolute;\n width: calc(100% + ", "px);\n left: -1px;\n top: -", "px;\n height: ", "px;\n z-index: 0;\n\n &::before {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: 2px;\n right: -1px;\n }\n\n &::after {\n content: ' ';\n\n ", "\n }\n }\n\n div.", ">.", "::after {\n content: ' ';\n background-color: ", ";\n position: absolute;\n height: ", "px;\n width: ", "px;\n border-radius: 50%;\n pointer-events: none;\n top: -", "px;\n right: -1px;\n }\n\n .", " .", " {\n display: block;\n }\n\n table\n tr:first-of-type\n td.", ",\n table\n tr:first-of-type\n th.", " {\n &.", ",\n &.", ",\n &.", " {\n .", "::after {\n ", ";\n }\n\n &.", "\n .", "::after {\n background-color: ", ";\n border: 1px solid ", ";\n border-bottom: none;\n z-index: ", ";\n }\n }\n }\n\n .", "\n table\n tr:first-of-type\n td.", ",\n .", "\n table\n tr:first-of-type\n th.", " {\n .", "::after {\n ", ";\n }\n }\n"])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _styles.tableCellBorderWidth * 2, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, columnHeaderButton(props, "\n border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat((0, _consts.tableBorderColor)(props), ";\n border-bottom: none;\n height: ").concat(_consts.tableToolbarSize, "px;\n width: 100%;\n position: absolute;\n top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n left: 0px;\n z-index: ").concat(_consts.columnControlsZIndex, ";\n ")), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, (0, _consts.tableBorderColor)(props), _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, (0, _consts.tableToolbarDeleteColor)(props), (0, _consts.tableBorderDeleteColor)(props), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(props));
|
|
68
76
|
};
|
|
69
77
|
exports.columnControlsDecoration = columnControlsDecoration;
|
|
70
|
-
var hoveredDeleteButton =
|
|
78
|
+
var hoveredDeleteButton = function hoveredDeleteButton(props) {
|
|
79
|
+
return (0, _react.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n .", ".", " {\n .", ",\n .", ",\n .", " {\n border: 1px solid ", ";\n }\n .", "::after {\n background: ", ";\n }\n }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderDeleteColor)(props), _types.TableCssClassName.SELECTED_CELL, (0, _consts.tableCellDeleteColor)(props));
|
|
80
|
+
};
|
|
71
81
|
exports.hoveredDeleteButton = hoveredDeleteButton;
|
|
72
|
-
var hoveredCell =
|
|
82
|
+
var hoveredCell = function hoveredCell(props) {
|
|
83
|
+
return (0, _react.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n :not(.", ")\n .", ":not(.", ") {\n .", " {\n position: relative;\n border: 1px solid ", ";\n }\n }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, (0, _consts.tableBorderSelectedColor)(props));
|
|
84
|
+
};
|
|
73
85
|
exports.hoveredCell = hoveredCell;
|
|
74
86
|
var hoveredWarningCell = (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n :not(.", ")\n .", ":not(.", ") {\n td.", " {\n background-color: ", " !important; // We need to override the background-color added to the cell\n border: 1px solid ", ";\n }\n }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(_colors.Y50, ")"), "var(--ds-border-warning, ".concat(_colors.Y200, ")"));
|
|
75
87
|
exports.hoveredWarningCell = hoveredWarningCell;
|
|
76
|
-
var resizeHandle =
|
|
88
|
+
var resizeHandle = function resizeHandle(props) {
|
|
89
|
+
return (0, _react.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n .", " {\n background-color: transparent;\n position: absolute;\n width: ", "px;\n height: 100%;\n top: 0;\n right: -", "px;\n cursor: col-resize;\n z-index: ", ";\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n left: -2px;\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n left: -2px;\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n td.", "::before {\n content: ' ';\n position: absolute;\n right: -1px;\n top: -1px;\n width: ", "px;\n height: calc(100% + 2px);\n background-color: ", ";\n z-index: ", ";\n }\n\n th.", "::before {\n content: ' ';\n right: -1px;\n position: absolute;\n width: ", "px;\n height: calc(100% + ", "px);\n background-color: ", ";\n z-index: ", ";\n top: -", "px;\n }\n\n table\n tr:first-of-type\n th.", "\n .", "::after,\n table\n tr:first-of-type\n td.", "\n .", "::after {\n top: -", "px;\n height: calc(100% + ", "px);\n }\n }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, _types.TableCssClassName.WITH_RESIZE_LINE, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, (0, _consts.tableBorderSelectedColor)(props), _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
|
|
90
|
+
};
|
|
77
91
|
exports.resizeHandle = resizeHandle;
|
package/dist/cjs/version.json
CHANGED
|
@@ -19,7 +19,7 @@ export const tableFloatingCellButtonStyles = props => css`
|
|
|
19
19
|
})(props)};
|
|
20
20
|
flex-direction: column;
|
|
21
21
|
margin: 2px;
|
|
22
|
-
outline: 2px solid ${`var(--ds-
|
|
22
|
+
outline: 2px solid ${`var(--ds-surface, ${N0})`};
|
|
23
23
|
border-radius: 1px;
|
|
24
24
|
padding: 0;
|
|
25
25
|
height: calc(100% - 4px);
|
|
@@ -116,10 +116,10 @@ export const tableStyles = props => {
|
|
|
116
116
|
.ProseMirror {
|
|
117
117
|
${tableSharedStyle(props)};
|
|
118
118
|
${columnControlsLineMarker()};
|
|
119
|
-
${hoveredDeleteButton};
|
|
120
|
-
${hoveredCell};
|
|
119
|
+
${hoveredDeleteButton(props)};
|
|
120
|
+
${hoveredCell(props)};
|
|
121
121
|
${hoveredWarningCell};
|
|
122
|
-
${resizeHandle};
|
|
122
|
+
${resizeHandle(props)};
|
|
123
123
|
${rangeSelectionStyles};
|
|
124
124
|
|
|
125
125
|
.${ClassName.LAST_ITEM_IN_CELL} {
|
|
@@ -154,15 +154,15 @@ export const tableStyles = props => {
|
|
|
154
154
|
}
|
|
155
155
|
|
|
156
156
|
.${ClassName.CONTROLS_FLOATING_BUTTON_COLUMN} {
|
|
157
|
-
${insertColumnButtonWrapper}
|
|
157
|
+
${insertColumnButtonWrapper(props)}
|
|
158
158
|
}
|
|
159
159
|
|
|
160
160
|
.${ClassName.CONTROLS_FLOATING_BUTTON_ROW} {
|
|
161
|
-
${insertRowButtonWrapper}
|
|
161
|
+
${insertRowButtonWrapper(props)}
|
|
162
162
|
}
|
|
163
163
|
|
|
164
164
|
/* Delete button */
|
|
165
|
-
${DeleteButton}
|
|
165
|
+
${DeleteButton(props)}
|
|
166
166
|
/* Ends Delete button */
|
|
167
167
|
|
|
168
168
|
/* sticky styles */
|
|
@@ -411,8 +411,8 @@ export const tableStyles = props => {
|
|
|
411
411
|
}
|
|
412
412
|
}
|
|
413
413
|
.active .${ClassName.CONTROLS_CORNER_BUTTON} {
|
|
414
|
-
border-color: ${tableBorderSelectedColor};
|
|
415
|
-
background: ${
|
|
414
|
+
border-color: ${tableBorderSelectedColor(props)};
|
|
415
|
+
background: ${tableToolbarSelectedColor(props)};
|
|
416
416
|
}
|
|
417
417
|
|
|
418
418
|
.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
|
|
@@ -425,15 +425,15 @@ export const tableStyles = props => {
|
|
|
425
425
|
}
|
|
426
426
|
|
|
427
427
|
:not(.${ClassName.IS_RESIZING}) .${ClassName.CONTROLS_CORNER_BUTTON}:hover {
|
|
428
|
-
border-color: ${tableBorderSelectedColor};
|
|
429
|
-
background: ${
|
|
428
|
+
border-color: ${tableBorderSelectedColor(props)};
|
|
429
|
+
background: ${tableToolbarSelectedColor(props)};
|
|
430
430
|
cursor: pointer;
|
|
431
431
|
}
|
|
432
432
|
|
|
433
433
|
:not(.${ClassName.IS_RESIZING})
|
|
434
434
|
.${ClassName.CONTROLS_CORNER_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
|
|
435
|
-
border-color: ${tableBorderDeleteColor};
|
|
436
|
-
background: ${
|
|
435
|
+
border-color: ${tableBorderDeleteColor(props)};
|
|
436
|
+
background: ${tableToolbarDeleteColor(props)};
|
|
437
437
|
}
|
|
438
438
|
|
|
439
439
|
/* Row controls */
|
|
@@ -486,8 +486,8 @@ export const tableStyles = props => {
|
|
|
486
486
|
}
|
|
487
487
|
|
|
488
488
|
:not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
|
|
489
|
-
${HeaderButtonHover()}
|
|
490
|
-
${HeaderButtonDanger()}
|
|
489
|
+
${HeaderButtonHover(props)}
|
|
490
|
+
${HeaderButtonDanger(props)}
|
|
491
491
|
}
|
|
492
492
|
|
|
493
493
|
/* Numbered column */
|
|
@@ -532,9 +532,9 @@ export const tableStyles = props => {
|
|
|
532
532
|
}
|
|
533
533
|
|
|
534
534
|
.${ClassName.NUMBERED_COLUMN_BUTTON}.active {
|
|
535
|
-
border-bottom: 1px solid ${tableBorderSelectedColor};
|
|
536
|
-
border-color: ${tableBorderSelectedColor};
|
|
537
|
-
background-color: ${
|
|
535
|
+
border-bottom: 1px solid ${tableBorderSelectedColor(props)};
|
|
536
|
+
border-color: ${tableBorderSelectedColor(props)};
|
|
537
|
+
background-color: ${tableToolbarSelectedColor(props)};
|
|
538
538
|
position: relative;
|
|
539
539
|
z-index: ${akEditorUnitZIndex};
|
|
540
540
|
color: ${`var(--ds-text-selected, ${N0})`};
|
|
@@ -546,16 +546,16 @@ export const tableStyles = props => {
|
|
|
546
546
|
cursor: pointer;
|
|
547
547
|
}
|
|
548
548
|
.${ClassName.NUMBERED_COLUMN_BUTTON}:hover {
|
|
549
|
-
border-bottom: 1px solid ${tableBorderSelectedColor};
|
|
550
|
-
border-color: ${tableBorderSelectedColor};
|
|
551
|
-
background-color: ${
|
|
549
|
+
border-bottom: 1px solid ${tableBorderSelectedColor(props)};
|
|
550
|
+
border-color: ${tableBorderSelectedColor(props)};
|
|
551
|
+
background-color: ${tableToolbarSelectedColor(props)};
|
|
552
552
|
position: relative;
|
|
553
553
|
z-index: ${akEditorUnitZIndex};
|
|
554
554
|
color: ${`var(--ds-text-selected, ${N0})`};
|
|
555
555
|
}
|
|
556
556
|
.${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
|
|
557
|
-
background-color: ${
|
|
558
|
-
border: 1px solid ${tableBorderDeleteColor};
|
|
557
|
+
background-color: ${tableToolbarDeleteColor(props)};
|
|
558
|
+
border: 1px solid ${tableBorderDeleteColor(props)};
|
|
559
559
|
border-left: 0;
|
|
560
560
|
color: ${`var(--ds-text-danger, ${R500})`};
|
|
561
561
|
position: relative;
|
|
@@ -616,15 +616,15 @@ export const tableStyles = props => {
|
|
|
616
616
|
pointer-events: none;
|
|
617
617
|
}
|
|
618
618
|
.${ClassName.SELECTED_CELL} {
|
|
619
|
-
border: 1px solid ${tableBorderSelectedColor};
|
|
619
|
+
border: 1px solid ${tableBorderSelectedColor(props)};
|
|
620
620
|
}
|
|
621
621
|
.${ClassName.SELECTED_CELL}::after {
|
|
622
|
-
background: ${tableCellSelectedColor};
|
|
622
|
+
background: ${tableCellSelectedColor(props)};
|
|
623
623
|
z-index: ${akEditorSmallZIndex};
|
|
624
624
|
}
|
|
625
625
|
th.${ClassName.HOVERED_CELL_IN_DANGER}::after,
|
|
626
626
|
td.${ClassName.HOVERED_CELL_IN_DANGER}::after {
|
|
627
|
-
background: ${tableCellDeleteColor};
|
|
627
|
+
background: ${tableCellDeleteColor(props)};
|
|
628
628
|
z-index: ${akEditorUnitZIndex * 100};
|
|
629
629
|
}
|
|
630
630
|
// ED-15246: Trello card is visible through a border of a table border
|
|
@@ -632,7 +632,7 @@ export const tableStyles = props => {
|
|
|
632
632
|
&::after {
|
|
633
633
|
height: 100%;
|
|
634
634
|
width: 100%;
|
|
635
|
-
border: 1px solid ${tableBorderSelectedColor};
|
|
635
|
+
border: 1px solid ${tableBorderSelectedColor(props)};
|
|
636
636
|
content: '';
|
|
637
637
|
position: absolute;
|
|
638
638
|
left: -1px;
|
|
@@ -643,7 +643,7 @@ export const tableStyles = props => {
|
|
|
643
643
|
pointer-events: none;
|
|
644
644
|
}
|
|
645
645
|
&.${ClassName.HOVERED_CELL_IN_DANGER}::after {
|
|
646
|
-
border: 1px solid ${tableBorderDeleteColor};
|
|
646
|
+
border: 1px solid ${tableBorderDeleteColor(props)};
|
|
647
647
|
z-index: ${akEditorUnitZIndex * 100};
|
|
648
648
|
}
|
|
649
649
|
}
|