@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
41 lines (40 loc) • 1.35 kB
JavaScript
import { css } from '@emotion/react';
import { N0, N100 } from '@atlaskit/theme/colors';
import { wrapperDefault } from '../Extension/styles';
// Wrapper the extension title and extensionContainer
export const mbeExtensionWrapperCSSStyles = css(wrapperDefault, {
'&.with-margin-styles': {
marginTop: 0,
marginLeft: "var(--ds-space-negative-150, -12px)",
marginRight: "var(--ds-space-negative-150, -12px)"
},
cursor: 'pointer',
marginTop: "var(--ds-space-250, 24px)",
marginBottom: "var(--ds-space-200, 16px)",
'.extension-title': {
display: 'flex',
alignItems: 'center',
lineHeight: '16px !important',
marginBottom: "var(--ds-space-100, 8px)",
marginLeft: `${"var(--ds-space-050, 4px)"} !important`,
marginRight: "var(--ds-space-100, 8px)",
paddingTop: `${"var(--ds-space-100, 8px)"} !important`
},
'&.with-border': {
border: `1px solid ${`var(--ds-border-inverse, ${N0})`}` // adding this so macro doesn't jump when hover border is shown
},
'&.with-hover-border': {
border: `1px solid ${`var(--ds-border-bold, ${N100})`}`,
opacity: '86%'
}
});
export const overlayStyles = css({
borderRadius: "var(--ds-border-radius, 3px)",
position: 'absolute',
width: '100%',
height: '100%',
opacity: 0,
pointerEvents: 'none',
transition: 'opacity 0.3s',
zIndex: 1
});