@atlaskit/editor-core
Version:
A package contains Atlassian editor core functionality
348 lines (342 loc) • 15.6 kB
JavaScript
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled */
import { css } from '@emotion/react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var panelStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel': {
cursor: 'pointer',
/* Danger when top level node */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&.danger': {
boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
backgroundColor: "var(--ds-background-danger, #FFECEB)".concat(" !important"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
color: "var(--ds-icon-danger, #C9372C)".concat(" !important")
}
},
// panelSharedStyles()
// panelSharedStylesWithoutPrefix()
borderRadius: "var(--ds-radius-small, 3px)",
margin: "0.75rem 0 0",
paddingTop: "var(--ds-space-100, 8px)",
paddingRight: "var(--ds-space-200, 16px)",
paddingBottom: "var(--ds-space-100, 8px)",
paddingLeft: "var(--ds-space-100, 8px)",
minWidth: '48px',
display: 'flex',
position: 'relative',
alignItems: 'normal',
wordBreak: 'break-word',
// mainDynamicStyles(PanelType.INFO)
// > getPanelTypeBackground(PanelType.INFO)
backgroundColor: "var(--ds-background-accent-blue-subtlest, #E9F2FE)",
color: 'inherit',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon': {
flexShrink: 0,
height: "var(--ds-space-300, 24px)",
width: "var(--ds-space-300, 24px)",
boxSizing: 'content-box',
paddingRight: "var(--ds-space-100, 8px)",
textAlign: 'center',
userSelect: 'none',
MozUserSelect: 'none',
WebkitUserSelect: 'none',
msUserSelect: 'none',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
marginTop: '0.1em',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'> span': {
verticalAlign: 'middle',
display: 'inline-flex'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.emoji-common-emoji-sprite': {
verticalAlign: '-2px' // -(8*3-20)/2 [px]
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.emoji-common-emoji-image': {
verticalAlign: '-3px',
// panelEmojiSpriteVerticalAlignment - 1 [px]
/* Vertical align only works for inline-block elements in Firefox */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
'@-moz-document url-prefix()': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
img: {
display: 'inline-block'
}
}
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__content': {
margin: "var(--ds-space-025, 2px)".concat(" 0 ", "var(--ds-space-025, 2px)"),
flex: '1 0 0',
/*
https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox
The default value for min-width is auto, which is computed to zero.
When an element is a flex item, the value of min-width doesn’t compute to zero.
The minimum size of a flex item is equal to the size of its contents.
*/
minWidth: 0
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="note"]': {
// mainDynamicStyles(PanelType.NOTE)
backgroundColor: "var(--ds-background-accent-purple-subtlest, #F8EEFE)",
color: 'inherit'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="tip"]': {
// mainDynamicStyles(PanelType.TIP)
backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
color: 'inherit'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="warning"]': {
// mainDynamicStyles(PanelType.WARNING)
backgroundColor: "var(--ds-background-accent-yellow-subtlest, #FEF7C8)",
color: 'inherit'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="error"]': {
// mainDynamicStyles(PanelType.ERROR)
backgroundColor: "var(--ds-background-accent-red-subtlest, #FFECEB)",
color: 'inherit'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="success"]': {
// mainDynamicStyles(PanelType.SUCCESS)
backgroundColor: "var(--ds-background-accent-green-subtlest, #DCFFF1)",
color: 'inherit'
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__content': {
cursor: 'text'
},
/* Danger when nested node */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.danger .ak-editor-panel': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type]': {
backgroundColor: "var(--ds-blanket-danger, #EF5C4814)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon': {
color: "var(--ds-icon-danger, #C9372C)"
}
}
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'.ak-editor-panel.ak-editor-selected-node:not(.danger)': {
// getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]),
// SelectionStyle.BoxShadow
boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #1868DB)"),
borderColor: 'transparent',
// SelectionStyle.Blanket
position: 'relative',
// Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel
// in Safari. Looks like it's caused by user-select: all in the emoji element
WebkitUserSelect: 'text',
'&::before': {
position: 'absolute',
content: '""',
left: 0,
right: 0,
top: 0,
bottom: 0,
width: '100%',
pointerEvents: 'none',
zIndex: 12,
// akEditorSmallZIndex
backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
},
// hideNativeSelectionStyles
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&::selection, *::selection': {
backgroundColor: 'transparent'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
'&::-moz-selection, *::-moz-selection': {
backgroundColor: 'transparent'
}
}
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var nestedPanelBorderStylesMixin = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel': {
// Support nested panel
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__content .ak-editor-panel': {
border: "1px solid ".concat("var(--ds-border, #0B120E24)")
}
}
}
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var panelStylesMixin_fg_platform_editor_nested_dnd_styles_changes = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&.ak-editor-panel__no-icon': {
paddingRight: "var(--ds-space-150, 12px)",
paddingLeft: "var(--ds-space-150, 12px)"
}
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-content-area.appearance-full-page .ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel .ak-editor-panel__icon': {
paddingRight: "var(--ds-space-150, 12px)"
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel.ak-editor-panel__no-icon': {
paddingLeft: "var(--ds-space-250, 20px)",
paddingRight: "var(--ds-space-250, 20px)"
}
},
/* Don't want extra padding for inline editor (nested) */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-content-area .ak-editor-content-area .ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel .ak-editor-panel__icon': {
paddingRight: "var(--ds-space-100, 8px)"
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel.ak-editor-panel__no-icon': {
paddingRight: "var(--ds-space-150, 12px)",
paddingLeft: "var(--ds-space-150, 12px)"
}
}
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var panelStylesMixin = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="info"]': {
// getIconStyles(PanelType.INFO),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon[data-panel-type="info"]': {
color: "var(--ds-icon-information, #357DE8)"
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="note"]': {
// getIconStyles(PanelType.NOTE),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon[data-panel-type="note"]': {
color: "var(--ds-icon-discovery, #AF59E1)"
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="tip"]': {
// getIconStyles(PanelType.TIP),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon[data-panel-type="tip"]': {
color: "var(--ds-icon-success, #6A9A23)"
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="warning"]': {
// getIconStyles(PanelType.WARNING),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon[data-panel-type="warning"]': {
color: "var(--ds-icon-warning, #E06C00)"
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="error"]': {
// getIconStyles(PanelType.ERROR),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon[data-panel-type="error"]': {
color: "var(--ds-icon-danger, #C9372C)"
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="success"]': {
// getIconStyles(PanelType.SUCCESS),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon[data-panel-type="success"]': {
color: "var(--ds-icon-success, #6A9A23)"
}
}
}
}
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var panelViewStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.panelView-content-wrap': {
boxSizing: 'border-box'
}
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export var nestedPanelDangerStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ProseMirror': {
/* Danger when nested node */
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.danger .ak-editor-panel': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="info"]': {
backgroundColor: "var(--ds-blanket-danger, #EF5C4814)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon[data-panel-type="info"]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
color: "var(--ds-icon-danger, #C9372C)"
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="note"]': {
backgroundColor: "var(--ds-blanket-danger, #EF5C4814)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon[data-panel-type="note"]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
color: "var(--ds-icon-danger, #C9372C)"
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="success"]': {
backgroundColor: "var(--ds-blanket-danger, #EF5C4814)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon[data-panel-type="success"]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
color: "var(--ds-icon-danger, #C9372C)"
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="warning"]': {
backgroundColor: "var(--ds-blanket-danger, #EF5C4814)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon[data-panel-type="warning"]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
color: "var(--ds-icon-danger, #C9372C)"
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&[data-panel-type="error"]': {
backgroundColor: "var(--ds-blanket-danger, #EF5C4814)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'.ak-editor-panel__icon[data-panel-type="error"]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
color: "var(--ds-icon-danger, #C9372C)"
}
}
}
}
});