npm - fit-ui - Versions diffs - 2.8.4 → 2.9.2 - Mend

fit-ui 2.8.4 → 2.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (107) hide show

package/dist/Fit.UI.css CHANGED Viewed

@@ -4,17 +4,19 @@ Stacking context, Z-index:
  - Error indicator			: 500
  - Drop down				: 1000
- - Dialog					: 1200
-	- Modal BG layer		: 1200
+ - Dialog					: 1200 - changed to 2001200 in Dialog.css if html[data-fitui-companion="fluent-ui"]
+	- Modal BG layer		: 1200 - changed to 2001200 in Dialog.css if html[data-fitui-companion="fluent-ui"]
  - Context menu				: 1300 (mounted in <body>)
  - Calendar					: 1300 (mounted in <body>, might be re-mounted next to control) - changed to 2000000 in DatePicker.css if html[data-fitui-companion="fluent-ui"]
- - Dragging					: 10000 (incremented by 1 every time draggable is being dragged)
+ - Dragging					: 10000 (incremented by 1 every time draggable is being dragged) - changed to start from 2010000 in DragDrop.js if html[data-fitui-companion="fluent-ui"]
  - CKEditor
     - Tags context menu		: 9997 (mounted in <body>, might be re-mounted next to control) - changed to 2000000 in Input.css if html[data-fitui-companion="fluent-ui"]
 	- Image resize handlers	: 9999 (mounted in <body>) - changed to 2000000 in Input.css if html[data-fitui-companion="fluent-ui"]
 	- Emoji panel			: 10001 (mounted in <body>) - changed to 2000000 in Input.css if html[data-fitui-companion="fluent-ui"]
     - Dialogs				: 10010 (mounted in <body>, might be re-mounted next to control) - changed to 2000020 in Input.css (+10 compared to modal BG layer) if html[data-fitui-companion="fluent-ui"]
 	   - Modal BG layer		: 10000 (mounted in <body>) - changed to 2000010 in Input.css (+10 compared to image resize handlers) if html[data-fitui-companion="fluent-ui"]
+ - Alert, Confirm, Prompt	: 50000 (must stay on top of draggable dialogs with z-index 10000+) - changed to 2050000 in Dialog.css if html[data-fitui-companion="fluent-ui"]
+    - Modal BG layer		: 50000 - changed to 2050000 in Dialog.css if html[data-fitui-companion="fluent-ui"]
 */
 .FitUiStyleCheck
@@ -121,10 +123,7 @@ Stacking context, Z-index:
 .FitDragDropDraggable.FitDragDropDragging
 {
-	opacity: 0.6;
 	z-index: 99999;
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
 }
 /* Disabled control */
@@ -3335,6 +3334,13 @@ div.FitUiControlDialog:not(#LegacyIE) /* :not() not supported by IE8 and below *
 	box-shadow: 0px 0px 10px 0px #333333;
 	border-radius: 2px;
 }
+div.FitUiControlDialog[data-resizable="true"]
+{
+	min-width: 15em;
+	max-width: 100%;
+	min-height: 10em;
+	max-height: 100%;
+}
 div.FitUiControlDialog[data-maximized="true"]
 {
 	/* Using !important due to specificity above (:not(#LegacyIE)).
@@ -3361,13 +3367,24 @@ div.FitUiControlDialog[data-maximized="true"]
 div.FitUiControlDialogTitle
 {
-	padding: 1em;
-	font-size: 1.1em;
 	font-weight: bold;
 	overflow: hidden;
 	white-space: nowrap;
 }
+div.FitUiControlDialogTitle,
+div.FitUiControlDialogTitleText,
+div.FitUiControlDialogTitleButtons
+{
+	height: 3.2em;
+}
+div.FitUiControlDialogTitleText
+{
+	padding-left: 1em;
+	line-height: 3.2em;
+}
 div.FitUiControlDialogTitleButtons
 {
 	position: absolute;
@@ -3382,7 +3399,6 @@ div.FitUiControlDialogTitleButtons
 	background-color: white;
 	border-bottom: 0.065em solid silver;
 	border-bottom-width: 1px\9;
-	height: 3.2em;
 }
 .FitUiControlDialogTitle div.FitUiControlButton + div.FitUiControlButton
@@ -3422,6 +3438,24 @@ div.FitUiControlDialog iframe
 	height: 100%;
 }
+div.FitUiControlDialogResizer
+{
+	width: 0.65em;
+	height: 0.65em;
+	border-left: 0.65em solid transparent;
+	border-bottom: 0.65em solid #A0A0A0;
+	cursor: nwse-resize;
+	position: absolute;
+	right: 0.1em;
+	bottom: 0.1em;
+	user-select: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+}
 div.FitUiControlDialogButtons
 {
 	/*background-color: white;*/
@@ -3453,6 +3487,26 @@ div.FitUiControlDialogModalLayer
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 }
+/* Alert, Confirm and Promp dialogs */
+div.FitUiControlDialogBaseModalLayer,
+div.FitUiControlDialogBase
+{
+	z-index: 50000; /* Remain on top of draggable dialogs with z-index 10000+ */
+}
+/* Fluent UI compatibility */
+html[data-fitui-companion="fluent-ui"] div.FitUiControlDialog,
+html[data-fitui-companion="fluent-ui"] div.FitUiControlDialogModalLayer
+{
+	z-index: 2001200;
+}
+html[data-fitui-companion="fluent-ui"] div.FitUiControlDialogBaseModalLayer,
+html[data-fitui-companion="fluent-ui"] div.FitUiControlDialogBase
+{
+	z-index: 2050000; /* Remain on top of draggable dialogs with z-index 2010000+ */
+}
 div.FitUiControlDropDown
 {
 	min-width: 50px; /* In case width is set to 100% and control is squeezed */
@@ -3790,6 +3844,12 @@ div.FitUiControlDropDown[data-enabled="true"][data-valid="false"] div.FitUiContr
 /* Drag and drop */
+div.FitUiControlDropDownItems > span.FitDragDropDragging
+{
+	opacity: 0.6;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+}
 div.FitUiControlDropDownItems > span.FitDragDropDragging input
 {
 	visibility: hidden;
@@ -3942,7 +4002,8 @@ div.FitUiControlInput
 }
 div.FitUiControlInput input:first-child,
-div.FitUiControlInput textarea:first-child
+div.FitUiControlInput textarea:first-child,
+div.FitUiControlInput[data-dialogmode="true"] > div
 {
 	width: 100%;
 	height: 100%;
@@ -3970,11 +4031,19 @@ div.FitUiControlInput[data-multiline="true"][data-designmode="false"]
 }
 /* Make control container adjust to textarea or HTML editor when it has been resized */
-div.FitUiControlInput[data-resized="true"]
+div.FitUiControlInput[data-resized="true"][data-resizable="enabled"]
 {
 	width: auto !important;		/* Using !important since dimensions are set as inline styles */
 	height: auto !important;	/* Using !important since dimensions are set as inline styles */
 }
+div.FitUiControlInput[data-resized="true"][data-resizable="vertical"]
+{
+	height: auto !important;
+}
+div.FitUiControlInput[data-resized="true"][data-resizable="horizontal"]
+{
+	width: auto !important;
+}
 div.FitUiControlInput[data-resized="true"] textarea:first-child
 {
 	margin: 0px !important; /* Remove odd margin (inline style) added by Chrome when resizing */
@@ -3992,7 +4061,8 @@ div.FitUiControlInput[data-enabled="true"][data-valid="false"]
 	outline: none;
 }
 div.FitUiControlInput[data-enabled="true"][data-valid="false"] input:first-child,
-div.FitUiControlInput[data-enabled="true"][data-valid="false"] textarea:first-child
+div.FitUiControlInput[data-enabled="true"][data-valid="false"] textarea:first-child,
+div.FitUiControlInput[data-enabled="true"][data-valid="false"] > div
 {
 	border-color: red;
 }
@@ -4036,6 +4106,13 @@ div.FitUiControlInput[data-designmode="true"]:focus /* Prevent outline if toolba
 	outline: none;
 }
+div.FitUiControlInput[data-dialogmode="true"]:focus
+{
+	outline: 2px solid #4484C7;
+	outline-offset: 2px;
+	border: 1px solid #4484C7\9; /* Legacy IE (9 and earlier) which does not support outline */
+}
 /* Textarea resizing */
 div.FitUiControlInput textarea:first-child
 {
@@ -4054,6 +4131,55 @@ div.FitUiControlInput[data-resizable="horizontal"] textarea:first-child
 	resize: horizontal;
 }
+/* DesignMode dialog mode */
+div.FitUiControlInput[data-dialogmode="true"]
+{
+	padding: 0px;
+	xxwidth: auto;
+	xxheight: 100%;
+}
+xxxdiv.FitUiControlInput[data-dialogmode="true"][data-autogrow="true"]
+{
+	height: auto;
+}
+div.FitUiControlInput[data-dialogmode="true"][data-resizable="enabled"] > div
+{
+	resize: both;
+}
+div.FitUiControlInput[data-dialogmode="true"][data-resizable="vertical"] > div
+{
+	resize: vertical;
+}
+div.FitUiControlInput[data-dialogmode="true"][data-resizable="horizontal"] > div
+{
+	resize: horizontal;
+}
+div.FitUiControlInput[data-dialogmode="true"] > div
+{
+	height: 100%;
+	min-height: 2em;
+	min-height: auto\9;
+	padding: 0 0.75em;
+	overflow: auto;
+}
+div.FitUiControlInput[data-dialogmode="true"] textarea:first-child
+{
+	display: none;
+}
+div.FitUiControlInput[data-dialogmode="true"] > div[data-placeholder]:before
+{
+	content: attr(data-placeholder);
+	display: block;
+	position: absolute; /* Take out of flow to prevent it from affecting auto grow (editor height) */
+	margin: 1em 0em;
+}
 /* CKEditor */
 /* Make control container adjust to the height of CKEditor when auto grow is enabled */
@@ -4313,6 +4439,24 @@ div.FitUiControlInput[data-designmode="true"] .cke_chrome a[data-tag-id]
 	width: 225px;
 }
+/* Detached and maximizable editor hosted in a modal dialog */
+div.FitUiControlDialog.FitUiControlInputDetached div.FitUiControlDialogContent
+{
+	padding: 0px;
+	overflow: hidden; /* Make sure scrollbars do not emerge when resizing dialog (reducing height) - editor has scrollbars */
+}
+div.FitUiControlDialog.FitUiControlInputDetached .cke_chrome
+{
+	border: none;
+}
+div.FitUiControlDialog.FitUiControlInputDetached .cke_wysiwyg_div
+{
+	padding: 0.5em 1.5em;
+}
 /* Fluent UI compatibility */
 /* The following elements are mounted in document root - make sure they stay on
@@ -4321,30 +4465,460 @@ div.FitUiControlInput[data-designmode="true"] .cke_chrome a[data-tag-id]
 /* Image resize handlers */
 html[data-fitui-companion="fluent-ui"] #ckimgrsz
 {
-	z-index: 2000000;
+	z-index: 2100000;
 }
 /* Tags/mentions/autocomplete context menu */
 html[data-fitui-companion="fluent-ui"] .cke_autocomplete_panel
 {
-	z-index: 2000000 !important; /* Using !important to override inline style */
+	z-index: 2100000 !important; /* Using !important to override inline style */
 }
 /* Panels such as the toolbar's emoji panel/callout  */
 html[data-fitui-companion="fluent-ui"] .cke_panel
 {
-	z-index: 2000000 !important; /* Using !important to override inline style */
+	z-index: 2100000 !important; /* Using !important to override inline style */
 }
 /* Dialogs (e.g. link and image dialogs) */
 html[data-fitui-companion="fluent-ui"] .cke_dialog_background_cover
 {
-	z-index: 2000010 !important; /* Using !important to override inline style */
+	z-index: 2100010 !important; /* Using !important to override inline style */
 }
 html[data-fitui-companion="fluent-ui"] .cke_dialog_container
 {
-	z-index: 2000020 !important; /* Using !important to override inline style */
+	z-index: 2100020 !important; /* Using !important to override inline style */
+}
+div.FitUiControlInput
+{
+	height: 2em; /* Equal height for all controls */
+	height: auto\9; /* Undo equal height for all controls in IE9 and below - assume height of content in legacy IE which does not render properly when input height is set to 100% of container */
+}
+div.FitUiControlInput input:first-child,
+div.FitUiControlInput textarea:first-child
+{
+	width: 100%;
+	height: 100%;
+	padding: 0.2em;
+	padding-left: 0.3em;
+	padding-right: 0.3em;
+	margin: 0px;
+	text-align: inherit;
+	font-size: inherit;
+	border: 0.065em solid #BBBBBB;
+	border-width: 1px\9;
+	border-radius: 2px;
+	display: block; /* Remove annoying spacing above input when outline is applied (when value is invalid) */
+	/* Make it look decent on iOS Safari */
+	-moz-appearance: none;
+	-webkit-appearance: none;
+	appearance: none;
+}
+/* Default height for ordinary multi line input control (textarea) */
+div.FitUiControlInput[data-multiline="true"][data-designmode="false"]
+{
+	height: 150px;
+}
+/* Make control container adjust to textarea or HTML editor when it has been resized */
+div.FitUiControlInput[data-resized="true"]
+{
+	width: auto !important;		/* Using !important since dimensions are set as inline styles */
+	height: auto !important;	/* Using !important since dimensions are set as inline styles */
+}
+div.FitUiControlInput[data-resized="true"] textarea:first-child
+{
+	margin: 0px !important; /* Remove odd margin (inline style) added by Chrome when resizing */
+}
+/* Hide clear button within input fields in IE */
+div.FitUiControlInput input:first-child::-ms-clear
+{
+	display: none;
+}
+/* Error indication */
+div.FitUiControlInput[data-enabled="true"][data-valid="false"]
+{
+	outline: none;
+}
+div.FitUiControlInput[data-enabled="true"][data-valid="false"] input:first-child,
+div.FitUiControlInput[data-enabled="true"][data-valid="false"] textarea:first-child
+{
+	border-color: red;
+}
+/* Maximize button */
+div.FitUiControlInput > span.fa
+{
+	position: absolute;
+	bottom: -0.65em;
+	left: 50%;
+	margin-left: -0.67em; /* transform: translateX(-50%); */
+	cursor: pointer;
+	background-color: white;
+	border: 0.065em solid #BBBBBB;
+	border-width: 1px\9;
+	border-radius: 1em;
+	padding: 0.1em;
+	font-size: 0.8em;
+	color: #BBBBBB;
+}
+div.FitUiControlInput[data-designmode="true"][data-autogrow="true"] > span.fa /* Maximize button does nothing (disabled) when auto grow is enabled in DesignMode */
+{
+	border-color: #DEDEDE;
+	color: #DEDEDE;
+	cursor: not-allowed;
+}
+div.FitUiControlInput > span.fa:focus
+{
+	outline: none;
+}
+div.FitUiControlInput[data-maximizable="true"] textarea:first-child
+{
+	padding-bottom: 0.65em; /* Add spacing at the bottom to prevent text from colliding with the maximize button */
+}
+/* Remove outline when input has focus */
+div.FitUiControlInput input:first-child:focus,
+div.FitUiControlInput textarea:first-child:focus,
+div.FitUiControlInput[data-designmode="true"]:focus /* Prevent outline if toolbar is clicked */
+{
+	outline: none;
+}
+/* Textarea resizing */
+div.FitUiControlInput textarea:first-child
+{
+	resize: none;
+}
+div.FitUiControlInput[data-resizable="enabled"] textarea:first-child
+{
+	resize: both;
+}
+div.FitUiControlInput[data-resizable="vertical"] textarea:first-child
+{
+	resize: vertical;
+}
+div.FitUiControlInput[data-resizable="horizontal"] textarea:first-child
+{
+	resize: horizontal;
+}
+/* CKEditor */
+/* Make control container adjust to the height of CKEditor when auto grow is enabled */
+div.FitUiControlInput[data-designmode="true"][data-autogrow="true"]
+{
+	height: auto;
+}
+/* Hide empty labels in dialogs (make controls align properly in Base64Image dialog) */
+.cke_dialog_contents label:empty
+{
+	display: none;
+}
+/* Override: Do not hide content overflow when a dialog is open - it remove scrollbars on page
+   which affects available space and positioning slightly, which might trigger OnScroll, and might
+   result in re-rendering. One downside of this change is that the user can now scroll the content
+   behind the dialog, which is probably why overflow:hidden was applied. */
+.cke_dialog_open /* Class is added to <body> when a dialog is open */
+{
+	overflow: auto !important; /* Using !mportant since CKEditor styles load on demand after Fit.UI styles */
 }
+/* Reduce z-index for image resize handlers to allow modal image dialog background layer to stay on top */
+div#ckimgrsz
+{
+	z-index: 9999; /* Defaults to 10001 but modal dialog background layer has z-index 10000 */
+}
+/* Reduce flickering while editor is loading by hiding components */
+div.FitUiControlInput[data-designmode="true"] textarea:first-child
+{
+	visibility: hidden; /* Hide textarea but preserve space consumed */
+}
+div.FitUiControlInput[data-designmode="true"] .cke_chrome
+{
+	visibility: hidden; /* Hide editor but preserve space consumed - changed back to "visible" in Input.js when editor is done loading */
+}
+/* Placeholder (not enabled on IE8/9) */
+/* Placeholder attributes are only set when placeholder is supposed to
+   be displayed. The text color for placeholders is defined i Styles.css. */
+div.FitUiControlInput[data-designmode="true"] .cke_editable[data-placeholder]:before
+{
+	content: attr(data-placeholder);
+	display: block;
+	position: absolute; /* Take out of flow to prevent it from affecting auto grow (editor height) */
+	/*margin: 1em 0em;*/
+}
+/* Set identical margins for paragraphs and placeholder in HTML editor to ensure proper alignment,
+   in case default margin for paragraphs have been changed, or if they differ across different browsers. */
+div.FitUiControlInput[data-designmode="true"] .cke_editable p,
+div.FitUiControlInput[data-designmode="true"] .cke_editable[data-placeholder]:before
+{
+	margin: 1em 0em;
+}
+/* CKEditor - moono-lisa skin overrides */
+/* Apply rounded corners */
+div.FitUiControlInput[data-designmode="true"] .cke_chrome[data-skin="moono-lisa"],
+div.FitUiControlInput[data-designmode="true"] .cke_chrome[data-skin="moono-lisa"] .cke_inner
+{
+    border-radius: 2px;
+}
+div.FitUiControlInput[data-designmode="true"] .cke_chrome[data-skin="moono-lisa"] .cke_top
+{
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+}
+div.FitUiControlInput[data-designmode="true"] .cke_chrome[data-skin="moono-lisa"] .cke_contents
+{
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+}
+div.FitUiControlInput[data-designmode="true"] .cke_chrome[data-skin="moono-lisa"] .cke_editable
+{
+    border-radius: 2px;
+}
+div.FitUiControlInput[data-designmode="true"] .cke_chrome[data-skin="moono-lisa"] .cke_bottom
+{
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+}
+/* CKEditor - bootstrapck skin overrides */
+/* Override: The bootstrapck skin define margins for content
+   areas in dialogs which makes the vertical scrollbar appear. */
+.cke_dialog_container[data-skin="bootstrapck"] .cke_dialog_ui_vbox
+{
+	margin-top: 0px !important; /* Using !mportant since CKEditor styles load on demand after Fit.UI styles */
+}
+.cke_dialog_container[data-skin="bootstrapck"] .cke_dialog_body label
+{
+	margin-bottom: 0px !important; /* Using !mportant since CKEditor styles load on demand after Fit.UI styles */
+}
+/* Override: The bootstrapck skin does not align checkboxes and labels properly */
+.cke_dialog_container[data-skin="bootstrapck"] .cke_dialog_ui_checkbox .cke_dialog_ui_checkbox_input,
+.cke_dialog_container[data-skin="bootstrapck"] .cke_dialog_ui_checkbox .cke_dialog_ui_checkbox_input+label,
+.cke_dialog_container[data-skin="bootstrapck"] .cke_dialog fieldset .cke_dialog_ui_vbox .cke_dialog_ui_checkbox .cke_dialog_ui_checkbox_input,
+.cke_dialog_container[data-skin="bootstrapck"] .cke_dialog fieldset .cke_dialog_ui_vbox .cke_dialog_ui_checkbox .cke_dialog_ui_checkbox_input+label
+{
+	vertical-align: top !important; /* Using !mportant since CKEditor styles load on demand after Fit.UI styles */
+}
+/* Override: The bootstrapck skin has too little spacing in the bottom part of its chrome when the bottom panel (with the resize handle) is not present */
+div.FitUiControlInput[data-resizable="disabled"] .cke_chrome[data-skin="bootstrapck"] /* cke_chrome is a <div> on modern browsers, a <span> in IE */
+{
+	padding: 0px 3px 3px 3px;
+}
+/* Override: Add missing spacing to editor chrome when toolbar is hidden or positioned at the bottom */
+div.FitUiControlInput[data-designmode="true"][data-toolbar="false"] .cke_chrome[data-skin="bootstrapck"],
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="bottom"] .cke_chrome[data-skin="bootstrapck"]
+{
+	padding-top: 3px;
+}
+div.FitUiControlInput[data-designmode="true"][data-toolbar="false"][data-toolbar-position="bottom"] .cke_chrome[data-skin="bootstrapck"]
+{
+	padding-bottom: 3px;
+}
+/* CKEditor - bottom panel, resize handle, and information panel */
+/* Opimize resize handle when toolbar is placed at the top */
+/* Allow positioning of cke_resizer outside of bottom container */
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="enabled"] .cke_chrome .cke_bottom,
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="vertical"] .cke_chrome .cke_bottom,
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="horizontal"] .cke_chrome .cke_bottom
+{
+	overflow: visible;
+}
+/* Remove/collapse bottom panel - resize handle is just placed in the lower right corner */
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="enabled"] .cke_chrome[data-skin="moono-lisa"] .cke_bottom,
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="vertical"] .cke_chrome[data-skin="moono-lisa"] .cke_bottom,
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="horizontal"] .cke_chrome[data-skin="moono-lisa"] .cke_bottom
+{
+	padding: 0px;
+	border-top: none;
+}
+/* Position resize handle */
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="enabled"] .cke_chrome .cke_resizer,
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="vertical"] .cke_chrome .cke_resizer,
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="horizontal"] .cke_chrome .cke_resizer
+{
+	border-color: transparent #A0A0A0 transparent transparent;
+	margin: 0;
+	position: absolute;
+	color: gray;
+}
+/* Position resize handle (moona-lisa skin) */
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="enabled"] .cke_chrome[data-skin="moono-lisa"] .cke_resizer,
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="vertical"] .cke_chrome[data-skin="moono-lisa"] .cke_resizer,
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="horizontal"] .cke_chrome[data-skin="moono-lisa"] .cke_resizer
+{
+	top: -9px;
+	right: -1px;
+}
+/* Position resize handle (bootstrapck skin) */
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="enabled"] .cke_chrome[data-skin="bootstrapck"] .cke_resizer,
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="vertical"] .cke_chrome[data-skin="bootstrapck"] .cke_resizer,
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"][data-resizable="horizontal"] .cke_chrome[data-skin="bootstrapck"] .cke_resizer
+{
+	top: -6px;
+	right: -4px;
+}
+/* Opimize resize handle when toolbar is placed at the bottom */
+/* Position resize handle (bootstrapck skin) */
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="bottom"][data-resizable="enabled"] .cke_chrome[data-skin="bootstrapck"] .cke_resizer,
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="bottom"][data-resizable="vertical"] .cke_chrome[data-skin="bootstrapck"] .cke_resizer,
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="bottom"][data-resizable="horizontal"] .cke_chrome[data-skin="bootstrapck"] .cke_resizer
+{
+	position: absolute;
+	margin: 0px;
+	bottom: 3px;
+	right: -3px;
+}
+/* Position resize handle (moono-lisa skin) */
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="bottom"][data-resizable="enabled"] .cke_chrome[data-skin="moono-lisa"] .cke_resizer,
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="bottom"][data-resizable="vertical"] .cke_chrome[data-skin="moono-lisa"] .cke_resizer,
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="bottom"][data-resizable="horizontal"] .cke_chrome[data-skin="moono-lisa"] .cke_resizer
+{
+	position: absolute;
+	margin: 0px;
+	bottom: 2px;
+	right: 2px;
+}
+/* Make editor toolbar sticky if enabled  */
+@supports (position: sticky)
+{
+	div.FitUiControlInput[data-designmode="true"][data-toolbar-sticky="true"][data-toolbar-position="top"] .cke_top
+	{
+		position: sticky;
+		top: 0px;
+	}
+	div.FitUiControlInput[data-designmode="true"][data-toolbar-sticky="true"][data-toolbar-position="bottom"] .cke_bottom
+	{
+		position: sticky;
+		bottom: 0px;
+	}
+}
+/* Editor information panel at the bottom of editor (moono-lisa skin) */
+div.FitUiControlInput[data-designmode="true"] .cke_chrome[data-skin="moono-lisa"] div.FitUiControlInputInfoPanel
+{
+	font-size: 0.8em;
+	padding-top: 0.2em;
+	padding-bottom: 0.2em;
+	color: #585858;
+}
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"] .cke_chrome[data-skin="moono-lisa"] div.FitUiControlInputInfoPanel
+{
+	border-top: 1px solid #D1D1D1;
+}
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="bottom"] .cke_chrome[data-skin="moono-lisa"] div.FitUiControlInputInfoPanel
+{
+	border-bottom: 1px solid #D1D1D1;
+}
+/* Editor information panel at the bottom of editor (bootstrapck skin) */
+div.FitUiControlInput[data-designmode="true"] .cke_chrome[data-skin="bootstrapck"] div.FitUiControlInputInfoPanel
+{
+	font-size: 0.8em;
+	color: #585858;
+}
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="top"] .cke_chrome[data-skin="bootstrapck"] div.FitUiControlInputInfoPanel
+{
+	padding-top: 0.2em;
+}
+div.FitUiControlInput[data-designmode="true"][data-toolbar-position="bottom"] .cke_chrome[data-skin="bootstrapck"] div.FitUiControlInputInfoPanel
+{
+	padding-bottom: 0.2em;
+}
+/* CKEditor - tags/mentions support */
+div.FitUiControlInput[data-designmode="true"] .cke_chrome a[data-tag-id]
+{
+	background-color: #F5FbFF;
+	border: 0.065em solid #C6dAE1;
+	border-radius: 0.2em;
+	text-decoration: none;
+	font-size: 0.95em;
+	color: blue;
+	cursor: default;
+}
+.cke_autocomplete_panel.cke_autocomplete_opened /* Using both .cke_autocomplete_panel and .cke_autocomplete_opened to increase specificity */
+{
+	width: 225px;
+}
+/* Detached and maximizable editor hosted in a modal dialog */
+div.FitUiControlDialog.FitUiControlInputDetached div.FitUiControlDialogContent
+{
+	padding: 0px;
+	overflow: hidden; /* Make sure scrollbars do not emerge when resizing dialog (reducing height) - editor has scrollbars */
+}
+div.FitUiControlDialog.FitUiControlInputDetached .cke_chrome
+{
+	border: none;
+}
+div.FitUiControlDialog.FitUiControlInputDetached .cke_wysiwyg_div
+{
+	padding: 0.5em 1.5em;
+}
+/* Fluent UI compatibility */
+/* The following elements are mounted in document root - make sure they stay on
+   top of everything else in Fluent UI which use very aggressive z-index values. */
+/* Image resize handlers */
+html[data-fitui-companion="fluent-ui"] #ckimgrsz
+{
+	z-index: 2050000;
+}
+/* Tags/mentions/autocomplete context menu */
+html[data-fitui-companion="fluent-ui"] .cke_autocomplete_panel
+{
+	z-index: 2050000 !important; /* Using !important to override inline style */
+}
+/* Panels such as the toolbar's emoji panel/callout  */
+html[data-fitui-companion="fluent-ui"] .cke_panel
+{
+	z-index: 2050000 !important; /* Using !important to override inline style */
+}
+/* Dialogs (e.g. link and image dialogs) */
+html[data-fitui-companion="fluent-ui"] .cke_dialog_background_cover
+{
+	z-index: 2050010 !important; /* Using !important to override inline style */
+}
+html[data-fitui-companion="fluent-ui"] .cke_dialog_container
+{
+	z-index: 2050020 !important; /* Using !important to override inline style */
+}
 div.FitUiControlListView
 {
 	overflow-y: auto;