npm - fit-ui - Versions diffs - 2.5.4 → 2.6.0 - Mend

fit-ui 2.5.4 → 2.6.0

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 (39) hide show

package/dist/Fit.UI.css CHANGED Viewed

@@ -7,12 +7,14 @@ Stacking context, Z-index:
  - Dialog					: 1200
 	- Modal BG layer		: 1200
  - Context menu				: 1300 (mounted in <body>)
- - Calendar					: 1300 (mounted in <body>, re-mounted next to control)
- - Dragging					: 99999
+ - 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)
  - CKEditor
-    - Dialogs				: 10010 (mounted in <body>, re-mounted next to control)
-	- Image resize handlers	: 10001 (mounted in <body>)
+    - 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"]
 */
 .FitUiStyleCheck
@@ -3230,6 +3232,14 @@ div.fitui-datepicker
 	z-index: 1300 !important; /* Using !important to override inline style */
 }
+/* Fluent UI compatibility */
+html[data-fitui-companion="fluent-ui"] div.fitui-datepicker
+{
+	/* Calendar widget is mounted in document root - make sure it stays on top
+	   of everything else in Fluent UI which use very aggressive z-index values. */
+	z-index: 2000000 !important; /* Using !important to override inline style */
+}
 td.fitui-datepicker-week-col
 {
 	font-weight: bold;
@@ -4049,6 +4059,12 @@ table.cke_dialog_contents label:empty
 	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 */
+}
 /* CKEditor - bootstrapck skin overrides */
 /* Override: The bootstrapck skin define margins for content
@@ -4077,8 +4093,10 @@ div.FitUiControlInput[data-resizable="disabled"] .cke_chrome[data-skin="bootstra
 	padding: 0px 3px 3px 3px;
 }
+/* CKEditor - bottom panel, resize handler, and information panel */
 /* Optimize how resize handler looks in modern browsers */
-@supports not (-ms-high-contrast: none)
+@supports (font-kerning: normal) /* Exclude legacy browsers (IE, Edge 12-18, etc.) by detecting support for modern feature */
 {
 	div.cke span.cke_bottom
 	{
@@ -4100,7 +4118,85 @@ div.FitUiControlInput[data-resizable="disabled"] .cke_chrome[data-skin="bootstra
 	}
 }
+/* Editor information panel at the bottom of editor (moono-lisa skin) */
+div.cke[data-skin="moono-lisa"] div.FitUiControlInputInfoPanel
+{
+	background-color: #F8F8F8;
+	border-top: 1px solid #D1D1D1;
+	font-size: 0.8em;
+	padding-top: 0.2em;
+	padding-bottom: 0.2em;
+	color: #585858;
+}
+/* Visually merge bottom panel with information panel (moono-lisa skin) */
+@supports (font-kerning: normal) /* Exclude legacy browsers (IE, Edge 12-18, etc.) by detecting support for modern feature */
+{
+	div.cke[data-skin="moono-lisa"] div.FitUiControlInputInfoPanel + span.cke_bottom
+	{
+		padding: 0px;
+		border: none;
+	}
+	div.cke[data-skin="moono-lisa"] div.FitUiControlInputInfoPanel + span.cke_bottom > span.cke_resizer
+	{
+		top: -9px;
+	}
+}
+/* Editor information panel at the bottom of editor (bootstrapck skin) */
+div.cke[data-skin="bootstrapck"] div.FitUiControlInputInfoPanel
+{
+	background-color: #EEEEEE;
+	font-size: 0.8em;
+	padding-top: 0.2em;
+	color: #585858;
+}
+/* CKEditor - tags/mentions support */
+div.cke 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;
+}
+/* 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"] div#ckimgrsz
+{
+	z-index: 2000000;
+}
+/* Tags/mentions/autocomplete context menu */
+html[data-fitui-companion="fluent-ui"] ul.cke_autocomplete_panel
+{
+	z-index: 2000000 !important; /* Using !important to override inline style */
+}
+/* Panels such as the toolbar's emoji panel/callout  */
+html[data-fitui-companion="fluent-ui"] div.cke_panel
+{
+	z-index: 2000000 !important; /* Using !important to override inline style */
+}
+/* Dialogs (e.g. link and image dialogs) */
+html[data-fitui-companion="fluent-ui"] div.cke_dialog_background_cover
+{
+	z-index: 2000010 !important; /* Using !important to override inline style */
+}
+html[data-fitui-companion="fluent-ui"] div.cke_dialog_container
+{
+	z-index: 2000020 !important; /* Using !important to override inline style */
+}
 div.FitUiControlListView
 {
 	overflow-y: auto;