@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
155 lines (145 loc) • 4.49 kB
JavaScript
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css } from '@emotion/react';
import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
// menuItemDimensions and itemSpacing are copied from
// packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
export const menuItemDimensions = {
width: 175,
height: 32
};
// itemSpacing is used in calculations expecting a number, hence not using a space token
export const itemSpacing = 4;
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export const contextualMenuArrow = css`
display: flex;
&::after {
content: '›';
margin-left: ${"var(--ds-space-050, 4px)"};
line-height: 20px;
color: ${"var(--ds-icon, #292A2E)"};
}
`;
export const contextualMenuColorIcon = color => css`
${contextualMenuArrow}
&::before {
content: '';
display: block;
border: ${"var(--ds-border-width, 1px)"} solid ${DEFAULT_BORDER_COLOR};
border-radius: ${"var(--ds-radius-small, 3px)"};
width: 20px;
height: 20px;
${color && `background: ${color}`}
}
`;
export const contextualSubMenu = index => css`
border-radius: ${"var(--ds-radius-small, 3px)"};
background: ${"var(--ds-surface-overlay, #FFFFFF)"};
box-shadow: ${"var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"};
display: flex;
position: absolute;
top: ${index * (menuItemDimensions.height + itemSpacing * 2)}px;
left: ${menuItemDimensions.width}px;
padding: ${"var(--ds-space-100, 8px)"};
> div {
padding: 0;
}
`;
export const buttonStyle = selected => css`
height: 26px;
width: 26px;
padding: 0;
border-radius: ${"var(--ds-radius-small, 4px)"};
background-color: ${selected ? "var(--ds-text, #292A2E)" : "var(--ds-background-neutral, #0515240F)"};
border: 1px solid ${DEFAULT_BORDER_COLOR};
cursor: pointer;
display: block;
`;
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
export const buttonWrapperStyle = css`
border: 1px solid transparent;
margin: ${"var(--ds-space-025, 2px)"};
font-size: 0;
display: flex;
align-items: center;
padding: ${"var(--ds-space-025, 2px)"};
border-radius: ${"var(--ds-radius-medium, 6px)"};
&:focus-within,
&:focus,
&:hover {
border-color: ${"var(--ds-border, #0B120E24)"} ;
}
`;
export const line = (size, selected) => css`
position: relative;
&:before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: ${size}px;
background-color: ${selected ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #292A2E)"};
border-radius: 90px;
transform: translate(-50%, -50%) rotate(135deg);
}
`;
const getHoverStyles = selector => `&:hover ${selector} {
background: ${"var(--ds-background-neutral-subtle-hovered, #0515240F)"};
&:hover {
background: ${"var(--ds-background-neutral-hovered, #0B120E24)"};
}
}`;
export const toolbarButtonWrapper = ({
enabled,
isOpen
}) => css`
display: flex;
.image-border-toolbar-btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding: 0;
& > span {
margin: 0;
}
&:not([disabled])::after {
border: none;
}
}
.image-border-toolbar-dropdown {
padding: 0;
& > span {
margin: 0;
}
width: 16px ;
border-top-left-radius: 0 ;
border-bottom-left-radius: 0 ;
margin-left: ${"var(--ds-space-025, 2px)"};
&:not([disabled])::after {
border: none;
}
}
${!enabled && getHoverStyles('.image-border-toolbar-btn')}
${!isOpen && !enabled && getHoverStyles('.image-border-toolbar-dropdown')}
`;
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export const dropdownOptionButton = css`
background: transparent;
border: ${"var(--ds-border-width-focused, 2px)"} solid transparent;
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 8px 16px;
&:focus {
background-color: ${"var(--ds-background-neutral-subtle-hovered, #0515240F)"};
border: ${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #4688EC)"};
}
`;
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
export const dropdownWrapper = css`
span[role='menuitem'] {
padding: 0;
}
`;