@atlaskit/editor-core 193.24.6 → 193.24.18

package/dist/es2019/ui/ContentStyles/extension.js

@@ -3,22 +3,19 @@ import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderS
 import { B400, B50, R400, R50 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 const extensionLabelStyles = css`
-  &.danger > span > div > .extension-label {
-    background-color: ${`var(--ds-background-accent-red-subtler, ${R50})`};
-    color: ${`var(--ds-text-danger, ${R400})`};
-    opacity: 1;
-    border: none;
-  }
-
-  &:not(.danger).${akEditorSelectedNodeClassName}
-    > span
-    > div
-    > .extension-label {
-    background-color: ${`var(--ds-background-selected, ${B50})`};
-    color: ${`var(--ds-text-selected, ${B400})`};
-    opacity: 1;
-    border: none;
-  }
+	&.danger > span > div > .extension-label {
+		background-color: ${`var(--ds-background-accent-red-subtler, ${R50})`};
+		color: ${`var(--ds-text-danger, ${R400})`};
+		opacity: 1;
+		border: none;
+	}
+
+	&:not(.danger).${akEditorSelectedNodeClassName} > span > div > .extension-label {
+		background-color: ${`var(--ds-background-selected, ${B50})`};
+		color: ${`var(--ds-text-selected, ${B400})`};
+		opacity: 1;
+		border: none;
+	}
 `;
 const dangerOverlayStyles = css({
   opacity: 0.3,
@@ -27,147 +24,145 @@ const dangerOverlayStyles = css({
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/no-exported-css -- Needs manual remediation
 export const extensionStyles = css`
-  .multiBodiedExtensionView-content-wrap {
-    &.danger > span > .multiBodiedExtension--container {
-      box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
-        ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
-      background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
-    }
-
-    ${extensionLabelStyles}
-
-    &.danger > span > .with-danger-overlay {
-      background-color: transparent;
-      .multiBodiedExtension--overlay {
-        ${dangerOverlayStyles}
-      }
-    }
-
-    &:not(.danger).${akEditorSelectedNodeClassName} {
-      & > span > .multiBodiedExtension--container {
-        ${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket])}
-      }
-    }
-    .multiBodiedExtension--container {
-      width: 100%;
-      max-width: 100%; // ensure width can't go over 100%;
-    }
-  }
-
-  .inlineExtensionView-content-wrap {
-    &.danger > span > .extension-container {
-      box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
-        ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
-      background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
-    }
-
-    &.danger > span > .with-danger-overlay {
-      // If the macro turned used to turn red before, not setting the background to be transparent will cause the
-      // danger state to have two layers of red which we don't want.
-      background-color: transparent;
-      .extension-overlay {
-        ${dangerOverlayStyles}
-      }
-    }
-
-    &:not(.danger).${akEditorSelectedNodeClassName} {
-      & > span > .extension-container {
-        ${getSelectionStyles([SelectionStyle.BoxShadow])}
-      }
-    }
-
-    ${extensionLabelStyles}
-  }
-
-  .extensionView-content-wrap,
-  .multiBodiedExtensionView-content-wrap,
-  .bodiedExtensionView-content-wrap {
-    margin: ${blockNodesVerticalMargin} 0;
-
-    &:first-of-type {
-      margin-top: 0;
-    }
-
-    &:last-of-type {
-      margin-bottom: 0;
-    }
-
-    &:not(.danger).${akEditorSelectedNodeClassName} {
-      & > span > .extension-container {
-        ${getSelectionStyles([SelectionStyle.BoxShadow])}
-      }
-    }
-
-    &.danger > span > .extension-container {
-      box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
-        ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
-      background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
-    }
-
-    ${extensionLabelStyles}
-
-    &.danger > span > .with-danger-overlay {
-      background-color: transparent;
-      .extension-overlay {
-        ${dangerOverlayStyles}
-      }
-    }
-
-    &.inline {
-      word-wrap: break-all;
-    }
-  }
-
-  .extensionView-content-wrap .extension-container {
-    overflow: hidden;
-  }
-
-  .bodiedExtensionView-content-wrap
-    .extensionView-content-wrap
-    .extension-container {
-    width: 100%;
-    max-width: 100%; // ensure width can't go over 100%;
-  }
-
-  [data-mark-type='fragment'] {
-    & > .extensionView-content-wrap,
-    & > .bodiedExtensionView-content-wrap {
-      margin: ${blockNodesVerticalMargin} 0;
-    }
-
-    & > [data-mark-type='dataConsumer'] {
-      & > .extensionView-content-wrap,
-      & > .bodiedExtensionView-content-wrap {
-        margin: ${blockNodesVerticalMargin} 0;
-      }
-    }
-
-    &:first-child {
-      & > .extensionView-content-wrap,
-      & > .bodiedExtensionView-content-wrap {
-        margin-top: 0;
-      }
-
-      & > [data-mark-type='dataConsumer'] {
-        & > .extensionView-content-wrap,
-        & > .bodiedExtensionView-content-wrap {
-          margin-top: 0;
-        }
-      }
-    }
-
-    &:nth-last-of-type(-n + 2):not(:first-of-type) {
-      & > .extensionView-content-wrap,
-      & > .bodiedExtensionView-content-wrap {
-        margin-bottom: 0;
-      }
-
-      & > [data-mark-type='dataConsumer'] {
-        & > .extensionView-content-wrap,
-        & > .bodiedExtensionView-content-wrap {
-          margin-bottom: 0;
-        }
-      }
-    }
-  }
+	.multiBodiedExtensionView-content-wrap {
+		&.danger > span > .multiBodiedExtension--container {
+			box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
+				${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+			background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
+		}
+
+		${extensionLabelStyles}
+
+		&.danger > span > .with-danger-overlay {
+			background-color: transparent;
+			.multiBodiedExtension--overlay {
+				${dangerOverlayStyles}
+			}
+		}
+
+		&:not(.danger).${akEditorSelectedNodeClassName} {
+			& > span > .multiBodiedExtension--container {
+				${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket])}
+			}
+		}
+		.multiBodiedExtension--container {
+			width: 100%;
+			max-width: 100%; // ensure width can't go over 100%;
+		}
+	}
+
+	.inlineExtensionView-content-wrap {
+		&.danger > span > .extension-container {
+			box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
+				${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+			background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
+		}
+
+		&.danger > span > .with-danger-overlay {
+			// If the macro turned used to turn red before, not setting the background to be transparent will cause the
+			// danger state to have two layers of red which we don't want.
+			background-color: transparent;
+			.extension-overlay {
+				${dangerOverlayStyles}
+			}
+		}
+
+		&:not(.danger).${akEditorSelectedNodeClassName} {
+			& > span > .extension-container {
+				${getSelectionStyles([SelectionStyle.BoxShadow])}
+			}
+		}
+
+		${extensionLabelStyles}
+	}
+
+	.extensionView-content-wrap,
+	.multiBodiedExtensionView-content-wrap,
+	.bodiedExtensionView-content-wrap {
+		margin: ${blockNodesVerticalMargin} 0;
+
+		&:first-of-type {
+			margin-top: 0;
+		}
+
+		&:last-of-type {
+			margin-bottom: 0;
+		}
+
+		&:not(.danger).${akEditorSelectedNodeClassName} {
+			& > span > .extension-container {
+				${getSelectionStyles([SelectionStyle.BoxShadow])}
+			}
+		}
+
+		&.danger > span > .extension-container {
+			box-shadow: 0 0 0 ${akEditorSelectedBorderSize}px
+				${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+			background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
+		}
+
+		${extensionLabelStyles}
+
+		&.danger > span > .with-danger-overlay {
+			background-color: transparent;
+			.extension-overlay {
+				${dangerOverlayStyles}
+			}
+		}
+
+		&.inline {
+			word-wrap: break-all;
+		}
+	}
+
+	.extensionView-content-wrap .extension-container {
+		overflow: hidden;
+	}
+
+	.bodiedExtensionView-content-wrap .extensionView-content-wrap .extension-container {
+		width: 100%;
+		max-width: 100%; // ensure width can't go over 100%;
+	}
+
+	[data-mark-type='fragment'] {
+		& > .extensionView-content-wrap,
+		& > .bodiedExtensionView-content-wrap {
+			margin: ${blockNodesVerticalMargin} 0;
+		}
+
+		& > [data-mark-type='dataConsumer'] {
+			& > .extensionView-content-wrap,
+			& > .bodiedExtensionView-content-wrap {
+				margin: ${blockNodesVerticalMargin} 0;
+			}
+		}
+
+		&:first-child {
+			& > .extensionView-content-wrap,
+			& > .bodiedExtensionView-content-wrap {
+				margin-top: 0;
+			}
+
+			& > [data-mark-type='dataConsumer'] {
+				& > .extensionView-content-wrap,
+				& > .bodiedExtensionView-content-wrap {
+					margin-top: 0;
+				}
+			}
+		}
+
+		&:nth-last-of-type(-n + 2):not(:first-of-type) {
+			& > .extensionView-content-wrap,
+			& > .bodiedExtensionView-content-wrap {
+				margin-bottom: 0;
+			}
+
+			& > [data-mark-type='dataConsumer'] {
+				& > .extensionView-content-wrap,
+				& > .bodiedExtensionView-content-wrap {
+					margin-bottom: 0;
+				}
+			}
+		}
+	}
 `;