fit-ui 2.9.2 → 2.10.2

package/dist/Fit.UI.css

@@ -3507,6 +3507,21 @@ html[data-fitui-companion="fluent-ui"] div.FitUiControlDialogBase
 {
 	z-index: 2050000; /* Remain on top of draggable dialogs with z-index 2010000+ */
 }
+div.FitUiControlDialogEditor div.FitUiControlDialogContent
+{
+	padding: 0px;
+	overflow: hidden; /* Make sure scrollbars do not emerge when resizing dialog (reducing height) - editor has scrollbars */
+}
+
+div.FitUiControlDialogEditor .cke_chrome
+{
+	border: none;
+}
+
+div.FitUiControlDialogEditor .cke_wysiwyg_div
+{
+	padding: 0.5em 1.5em;
+}
 div.FitUiControlDropDown
 {
 	min-width: 50px; /* In case width is set to 100% and control is squeezed */
@@ -4002,8 +4017,7 @@ div.FitUiControlInput
 }
 
 div.FitUiControlInput input:first-child,
-div.FitUiControlInput textarea:first-child,
-div.FitUiControlInput[data-dialogmode="true"] > div
+div.FitUiControlInput textarea:first-child
 {
 	width: 100%;
 	height: 100%;
@@ -4055,492 +4069,6 @@ 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,
-div.FitUiControlInput[data-enabled="true"][data-valid="false"] > div
-{
-	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;
-}
-
-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
-{
-	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;
-}
-
-/* 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 */
-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: 2100000;
-}
-
-/* Tags/mentions/autocomplete context menu */
-html[data-fitui-companion="fluent-ui"] .cke_autocomplete_panel
-{
-	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: 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: 2100010 !important; /* Using !important to override inline style */
-}
-html[data-fitui-companion="fluent-ui"] .cke_dialog_container
-{
-	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"]
 {
@@ -4868,24 +4396,6 @@ 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