@atlaskit/editor-common 81.1.5 → 81.2.1

package/dist/es2019/styles/shared/resizer.js

@@ -20,191 +20,193 @@ export const resizerHandleZIndex = 1;
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Seems perfectly safe to autofix, but comments would be lost…
 export const resizerStyles = css`
-  .${resizerItemClassName} {
-    will-change: width;
-
-    &:hover,
-    &.display-handle {
-      & > .${handleWrapperClass} > .${resizerHandleClassName} {
-        visibility: visible;
-        opacity: 1;
-      }
-    }
-
-    &.is-resizing {
-      & .${resizerHandleThumbClassName} {
-        background: ${`var(--ds-border-focused, ${B200})`};
-      }
-    }
-
-    &.${resizerDangerClassName} {
-      & .${resizerHandleThumbClassName} {
-        transition: none;
-        background: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`};
-      }
-    }
-  }
-
-  .${resizerHandleClassName} {
-    display: flex;
-    visibility: hidden;
-    opacity: 0;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 7px;
-    transition: visibility 0.2s, opacity 0.2s;
-
-    /*
+	.${resizerItemClassName} {
+		will-change: width;
+
+		&:hover,
+		&.display-handle {
+			& > .${handleWrapperClass} > .${resizerHandleClassName} {
+				visibility: visible;
+				opacity: 1;
+			}
+		}
+
+		&.is-resizing {
+			& .${resizerHandleThumbClassName} {
+				background: ${`var(--ds-border-focused, ${B200})`};
+			}
+		}
+
+		&.${resizerDangerClassName} {
+			& .${resizerHandleThumbClassName} {
+				transition: none;
+				background: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`};
+			}
+		}
+	}
+
+	.${resizerHandleClassName} {
+		display: flex;
+		visibility: hidden;
+		opacity: 0;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: 7px;
+		transition:
+			visibility 0.2s,
+			opacity 0.2s;
+
+		/*
       NOTE: The below style is targeted at the div element added by the tooltip. We don't have any means of injecting styles
       into the tooltip
     */
-    & div[role='presentation'] {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      margin-top: ${"var(--ds-space-negative-200, -16px)"};
-      white-space: normal;
-    }
-
-    /*
+		& div[role='presentation'] {
+			width: 100%;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			margin-top: ${"var(--ds-space-negative-200, -16px)"};
+			white-space: normal;
+		}
+
+		/*
       Handle Positions
     */
-    &.left {
-      align-items: flex-start;
-    }
-    &.right {
-      align-items: flex-end;
-    }
-
-    /*
+		&.left {
+			align-items: flex-start;
+		}
+		&.right {
+			align-items: flex-end;
+		}
+
+		/*
       Handle Sizing
     */
-    &.small {
-      & .${resizerHandleThumbClassName} {
-        height: 43px;
-      }
-    }
-    &.medium {
-      & .${resizerHandleThumbClassName} {
-        height: 64px;
-      }
-    }
-    &.large {
-      & .${resizerHandleThumbClassName} {
-        height: 96px;
-      }
-    }
-
-    /*
+		&.small {
+			& .${resizerHandleThumbClassName} {
+				height: 43px;
+			}
+		}
+		&.medium {
+			& .${resizerHandleThumbClassName} {
+				height: 64px;
+			}
+		}
+		&.large {
+			& .${resizerHandleThumbClassName} {
+				height: 96px;
+			}
+		}
+
+		/*
       Handle Alignment
     */
-    &.sticky {
-      & .${resizerHandleThumbClassName} {
-        position: sticky;
-        top: ${"var(--ds-space-150, 12px)"};
-        bottom: ${"var(--ds-space-150, 12px)"};
-      }
-    }
-
-    &:hover {
-      & .${resizerHandleThumbClassName} {
-        background: ${`var(--ds-border-focused, ${B200})`};
-      }
-
-      & .${resizerHandleTrackClassName} {
-        visibility: visible;
-        opacity: 0.5;
-      }
-    }
-  }
-
-  .${resizerHandleThumbClassName} {
-    content: ' ';
-    display: flex;
-    width: 3px;
-    margin: 0 ${"var(--ds-space-025, 2px)"};
-    height: 64px;
-    transition: background-color 0.2s;
-    border-radius: 6px;
-    border: 0;
-    padding: 0;
-    z-index: 2;
-    outline: none;
-    min-height: 24px;
-    background: ${`var(--ds-border, ${N60})`};
-
-    &:hover {
-      cursor: col-resize;
-    }
-
-    &:focus {
-      background: ${"var(--ds-border-selected, #0C66E4)"};
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: ${"var(--ds-space-negative-050, -4px)"};
-        right: ${"var(--ds-space-negative-050, -4px)"};
-        bottom: ${"var(--ds-space-negative-050, -4px)"};
-        left: ${"var(--ds-space-negative-050, -4px)"};
-        border: 2px solid ${"var(--ds-border-focused, #388BFF)"};
-        border-radius: inherit;
-        z-index: -1;
-      }
-    }
-  }
-
-  .${resizerHandleTrackClassName} {
-    visibility: hidden;
-    position: absolute;
-    width: 7px;
-    height: calc(100% - 40px);
-    border-radius: 4px;
-    opacity: 0;
-    transition: background-color 0.2s, visibility 0.2s, opacity 0.2s;
-
-    &.none {
-      background: none;
-    }
-
-    &.shadow {
-      background: ${`var(--ds-background-selected, ${B50})`};
-    }
-
-    &.full-height {
-      background: ${`var(--ds-background-selected, ${B50})`};
-      height: 100%;
-      min-height: 36px;
-    }
-  }
-
-  .${akEditorSelectedNodeClassName} {
-    & .${resizerHandleThumbClassName} {
-      background: ${`var(--ds-border-focused, ${B200})`};
-    }
-  }
-
-  .${resizerHoverZoneClassName} {
-    position: relative;
-    display: inline-block;
-    width: 100%;
-
-    &.${resizerExtendedZone} {
-      padding: 0 ${"var(--ds-space-150, 12px)"};
-      left: ${"var(--ds-space-negative-150, -12px)"};
-    }
-  }
-
-  // This below style is here to make sure the image width is correct when nested in a table
-  table
-    .${resizerHoverZoneClassName},
-    table
-    .${resizerHoverZoneClassName}.${resizerExtendedZone} {
-    padding: unset;
-    left: unset;
-  }
+		&.sticky {
+			& .${resizerHandleThumbClassName} {
+				position: sticky;
+				top: ${"var(--ds-space-150, 12px)"};
+				bottom: ${"var(--ds-space-150, 12px)"};
+			}
+		}
+
+		&:hover {
+			& .${resizerHandleThumbClassName} {
+				background: ${`var(--ds-border-focused, ${B200})`};
+			}
+
+			& .${resizerHandleTrackClassName} {
+				visibility: visible;
+				opacity: 0.5;
+			}
+		}
+	}
+
+	.${resizerHandleThumbClassName} {
+		content: ' ';
+		display: flex;
+		width: 3px;
+		margin: 0 ${"var(--ds-space-025, 2px)"};
+		height: 64px;
+		transition: background-color 0.2s;
+		border-radius: 6px;
+		border: 0;
+		padding: 0;
+		z-index: 2;
+		outline: none;
+		min-height: 24px;
+		background: ${`var(--ds-border, ${N60})`};
+
+		&:hover {
+			cursor: col-resize;
+		}
+
+		&:focus {
+			background: ${"var(--ds-border-selected, #0C66E4)"};
+
+			&::after {
+				content: '';
+				position: absolute;
+				top: ${"var(--ds-space-negative-050, -4px)"};
+				right: ${"var(--ds-space-negative-050, -4px)"};
+				bottom: ${"var(--ds-space-negative-050, -4px)"};
+				left: ${"var(--ds-space-negative-050, -4px)"};
+				border: 2px solid ${"var(--ds-border-focused, #388BFF)"};
+				border-radius: inherit;
+				z-index: -1;
+			}
+		}
+	}
+
+	.${resizerHandleTrackClassName} {
+		visibility: hidden;
+		position: absolute;
+		width: 7px;
+		height: calc(100% - 40px);
+		border-radius: 4px;
+		opacity: 0;
+		transition:
+			background-color 0.2s,
+			visibility 0.2s,
+			opacity 0.2s;
+
+		&.none {
+			background: none;
+		}
+
+		&.shadow {
+			background: ${`var(--ds-background-selected, ${B50})`};
+		}
+
+		&.full-height {
+			background: ${`var(--ds-background-selected, ${B50})`};
+			height: 100%;
+			min-height: 36px;
+		}
+	}
+
+	.${akEditorSelectedNodeClassName} {
+		& .${resizerHandleThumbClassName} {
+			background: ${`var(--ds-border-focused, ${B200})`};
+		}
+	}
+
+	.${resizerHoverZoneClassName} {
+		position: relative;
+		display: inline-block;
+		width: 100%;
+
+		&.${resizerExtendedZone} {
+			padding: 0 ${"var(--ds-space-150, 12px)"};
+			left: ${"var(--ds-space-negative-150, -12px)"};
+		}
+	}
+
+	// This below style is here to make sure the image width is correct when nested in a table
+	table .${resizerHoverZoneClassName}, table .${resizerHoverZoneClassName}.${resizerExtendedZone} {
+		padding: unset;
+		left: unset;
+	}
 `;

package/dist/es2019/styles/shared/smartCard.js

@@ -9,124 +9,114 @@ export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--lin
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Seems safe to autofix with a fix to `getSelectionStyles`
 export const smartCardStyles = css`
-  .${SmartCardSharedCssClassName.INLINE_CARD_CONTAINER} {
-    max-width: calc(100% - 20px);
-    vertical-align: top;
-    word-break: break-all;
-    ${getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? `.card-with-comment {
+	.${SmartCardSharedCssClassName.INLINE_CARD_CONTAINER} {
+		max-width: calc(100% - 20px);
+		vertical-align: top;
+		word-break: break-all;
+		${getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? `.card-with-comment {
           background: ${`var(--ds-background-accent-yellow-subtler, ${Y75})`};
           border-bottom: 2px solid ${`var(--ds-border-accent-yellow, ${Y300})`};
           box-shadow: ${`var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`};
         }` : ''}
-    .card {
-      padding-left: ${"var(--ds-space-025, 2px)"};
-      padding-right: ${"var(--ds-space-025, 2px)"};
-      padding-top: 0.5em;
-      padding-bottom: 0.5em;
-      margin-bottom: -0.5em;
+		.card {
+			padding-left: ${"var(--ds-space-025, 2px)"};
+			padding-right: ${"var(--ds-space-025, 2px)"};
+			padding-top: 0.5em;
+			padding-bottom: 0.5em;
+			margin-bottom: -0.5em;
 
-      .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a:focus {
-        ${getSelectionStyles([SelectionStyle.BoxShadow])}
-      }
-    }
+			.${SmartCardSharedCssClassName.LOADER_WRAPPER} > a:focus {
+				${getSelectionStyles([SelectionStyle.BoxShadow])}
+			}
+		}
 
-    &.${akEditorSelectedNodeClassName}
-      .${SmartCardSharedCssClassName.LOADER_WRAPPER}
-      > a {
-      ${getSelectionStyles([SelectionStyle.BoxShadow])}
-    }
-    .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a {
-      /* EDM-1717: box-shadow Safari fix start */
-      z-index: 1;
-      position: relative;
-      /* EDM-1717: box-shadow Safari fix end */
-    }
+		&.${akEditorSelectedNodeClassName} .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a {
+			${getSelectionStyles([SelectionStyle.BoxShadow])}
+		}
+		.${SmartCardSharedCssClassName.LOADER_WRAPPER} > a {
+			/* EDM-1717: box-shadow Safari fix start */
+			z-index: 1;
+			position: relative;
+			/* EDM-1717: box-shadow Safari fix end */
+		}
 
-    &.danger {
-      .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a {
-        box-shadow: 0 0 0 1px
-          ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
-        /* EDM-1717: box-shadow Safari fix start */
-        z-index: 2;
-        /* EDM-1717: box-shadow Safari fix end */
-      }
-    }
-  }
+		&.danger {
+			.${SmartCardSharedCssClassName.LOADER_WRAPPER} > a {
+				box-shadow: 0 0 0 1px ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+				/* EDM-1717: box-shadow Safari fix start */
+				z-index: 2;
+				/* EDM-1717: box-shadow Safari fix end */
+			}
+		}
+	}
 
-  .${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER} {
-    .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
-      cursor: pointer;
-    }
+	.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER} {
+		.${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
+			cursor: pointer;
+		}
 
-    &.${akEditorSelectedNodeClassName}
-      .${SmartCardSharedCssClassName.LOADER_WRAPPER}
-      > div {
-      ${getSelectionStyles([SelectionStyle.BoxShadow])}
-      border-radius: ${"var(--ds-border-radius-200, 8px)"};
-    }
+		&.${akEditorSelectedNodeClassName} .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
+			${getSelectionStyles([SelectionStyle.BoxShadow])}
+			border-radius: ${"var(--ds-border-radius-200, 8px)"};
+		}
 
-    &.danger {
-      .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
-        box-shadow: 0 0 0 1px
-          ${`var(--ds-border-danger, ${akEditorDeleteBorder})`} !important;
-      }
-    }
-  }
+		&.danger {
+			.${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
+				box-shadow: 0 0 0 1px ${`var(--ds-border-danger, ${akEditorDeleteBorder})`} !important;
+			}
+		}
+	}
 
-  .${SmartCardSharedCssClassName.DATASOURCE_CONTAINER}.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER} {
-    max-width: 100%;
-    display: flex;
-    justify-content: center;
+	.${SmartCardSharedCssClassName.DATASOURCE_CONTAINER}.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER} {
+		max-width: 100%;
+		display: flex;
+		justify-content: center;
 
-    .${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
-      cursor: pointer;
-      background-color: ${`var(--ds-background-neutral-subtle, ${N0})`};
-      border-radius: ${"var(--ds-border-radius-200, 8px)"};
-      border: 1px solid ${`var(--ds-border, ${N40})`};
-    }
+		.${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
+			cursor: pointer;
+			background-color: ${`var(--ds-background-neutral-subtle, ${N0})`};
+			border-radius: ${"var(--ds-border-radius-200, 8px)"};
+			border: 1px solid ${`var(--ds-border, ${N40})`};
+		}
 
-    &.${akEditorSelectedNodeClassName} {
-      .${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
-        ${getSelectionStyles([SelectionStyle.BoxShadow])}
-      }
-    }
+		&.${akEditorSelectedNodeClassName} {
+			.${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
+				${getSelectionStyles([SelectionStyle.BoxShadow])}
+			}
+		}
 
-    &.danger {
-      .${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
-        box-shadow: 0 0 0 1px
-          ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
-      }
-    }
-  }
+		&.danger {
+			.${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
+				box-shadow: 0 0 0 1px ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+			}
+		}
+	}
 
-  .${SmartCardSharedCssClassName.EMBED_CARD_CONTAINER} {
-    .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
-      cursor: pointer;
-      &::after {
-        transition: box-shadow 0s;
-      }
-    }
+	.${SmartCardSharedCssClassName.EMBED_CARD_CONTAINER} {
+		.${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
+			cursor: pointer;
+			&::after {
+				transition: box-shadow 0s;
+			}
+		}
 
-    &.${akEditorSelectedNodeClassName}
-      .${SmartCardSharedCssClassName.LOADER_WRAPPER}
-      > div::after {
-      ${getSelectionStyles([SelectionStyle.BoxShadow])}
-    }
+		&.${akEditorSelectedNodeClassName} .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after {
+			${getSelectionStyles([SelectionStyle.BoxShadow])}
+		}
 
-    &.danger {
-      .media-card-frame::after {
-        box-shadow: 0 0 0 1px
-          ${`var(--ds-border-danger, ${akEditorDeleteBorder})`} !important;
-        background: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`} !important;
-      }
-      .richMedia-resize-handle-right::after,
-      .richMedia-resize-handle-left::after {
-        background: ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
-      }
-    }
-  }
+		&.danger {
+			.media-card-frame::after {
+				box-shadow: 0 0 0 1px ${`var(--ds-border-danger, ${akEditorDeleteBorder})`} !important;
+				background: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`} !important;
+			}
+			.richMedia-resize-handle-right::after,
+			.richMedia-resize-handle-left::after {
+				background: ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+			}
+		}
+	}
 
-  .${FLOATING_TOOLBAR_LINKPICKER_CLASSNAME} {
-    padding: 0;
-  }
+	.${FLOATING_TOOLBAR_LINKPICKER_CLASSNAME} {
+		padding: 0;
+	}
 `;