Merge branch 't/14763' into major

CHANGES.md

@@ -16,6 +16,7 @@ New Features:
 Fixed Issues:
 
 * [#14672](http://dev.ckeditor.com/ticket/14672): Fixed: Balloonpanel not blurred on close.
+* [#14763](http://dev.ckeditor.com/ticket/14763): Fixed: Balloonpanel plugin moono-lisa skin adjustments.
 * [#13828](http://dev.ckeditor.com/ticket/13828): Fixed: Widget classes should be added to wrapper rather than widget element.
 * [#13519](http://dev.ckeditor.com/ticket/13519): Response should be more flexible.
 

plugins/balloonpanel/skins/moono-lisa/balloonpanel.css

@@ -0,0 +1,223 @@
+/*
+Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+
+.cke_balloon
+{
+	position: absolute;
+	z-index: 10000;
+
+	background: #fff;
+	border: 2px solid #aaa;
+	outline: none;
+}
+
+.cke_balloon_title
+{
+	font-weight: bold;
+	font-size: 12px;
+	cursor: default;
+
+	color: #484848;
+
+	padding: 12px 30px 12px 12px; /* Let's the title and close don't overlap each other - padding-right. */
+	background: #f8f8f8;
+}
+
+/* The close button at the top of the panel. */
+a.cke_balloon_close_button
+{
+	background-image: url(images/close.png);
+	background-repeat: no-repeat;
+	background-position: 50% -1px;
+	position: absolute;
+	cursor: pointer;
+	text-align: center;
+	height: 16px;
+	width: 16px;
+	top: 8px;
+	z-index: 5;
+	opacity: 0.7;
+	filter: alpha(opacity = 70);
+	border: 2px solid transparent;
+	border-radius: 2px;
+}
+
+a.cke_balloon_close_button:focus,
+a.cke_balloon_close_button:active
+{
+	outline: none;
+	border: 2px solid #0079f7;
+}
+
+.cke_balloon_content
+{
+	overflow: hidden;
+	min-height: 68px;
+	padding: 0 6px 6px 6px;
+}
+
+.cke_balloon_close_button:hover
+{
+	opacity: 1;
+	filter: alpha(opacity = 100);
+}
+
+.cke_balloon_close_button:focus:hover
+{
+	opacity: 1;
+	filter: alpha(opacity = 100);
+	border: 2px solid #139FF7;
+}
+
+.cke_hidpi .cke_balloon_close_button
+{
+	background-image: url(images/hidpi/close.png);
+	background-size: 16px;
+}
+
+.cke_balloon_close_button span
+{
+	display: none;
+}
+
+.cke_ltr .cke_balloon_close_button
+{
+	right: 10px;
+}
+
+.cke_rtl .cke_balloon_close_button
+{
+	left: 10px;
+}
+
+.cke_balloon_triangle
+{
+	position: absolute;
+	border-style: solid;
+	display: block;
+	width: 0;
+	height: 0;
+}
+
+.cke_balloon_triangle_inner
+{
+	z-index: 0;
+}
+
+.cke_balloon_triangle_outer
+{
+	z-index: 0;
+}
+
+/* side: [ bottom, top ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_bottom,
+.cke_balloon_triangle_outer.cke_balloon_triangle_top
+{
+	border-color: #999 transparent;
+}
+
+.cke_balloon_triangle_inner.cke_balloon_triangle_bottom,
+.cke_balloon_triangle_inner.cke_balloon_triangle_top
+{
+	left: -20px;
+}
+
+/* side: [ bottom ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_bottom
+{
+	border-width: 20px 20px 0;
+	bottom: -20px;
+}
+
+.cke_balloon_triangle_inner.cke_balloon_triangle_bottom
+{
+	border-color: #fff transparent;
+	border-width: 20px 20px 0;
+	top: -22px;
+}
+
+/* side: [ top ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_top
+{
+	border-width: 0 20px 20px;
+	top: -20px;
+}
+
+.cke_balloon_triangle_inner.cke_balloon_triangle_top
+{
+	border-color: #f8f8f8 transparent;
+	border-width: 0 20px 20px;
+	top: 2px;
+}
+
+/* side: [ left, right ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_left,
+.cke_balloon_triangle_outer.cke_balloon_triangle_right
+{
+	border-color: transparent #999;
+}
+
+.cke_balloon_triangle_inner.cke_balloon_triangle_left,
+.cke_balloon_triangle_inner.cke_balloon_triangle_right
+{
+	border-color: transparent #fff;
+	top: -20px;
+}
+
+/* side: [ left ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_left
+{
+	border-width: 20px 20px 20px 0;
+	left: -20px;
+}
+
+.cke_balloon_triangle_inner.cke_balloon_triangle_left
+{
+	border-color: transparent #fff;
+	border-width: 20px 20px 20px 0;
+	left: 2px;
+}
+
+/* side: [ right ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_right
+{
+	border-width: 20px 0 20px 20px;
+	right: -20px;
+}
+
+.cke_balloon_triangle_inner.cke_balloon_triangle_right
+{
+	border-width: 20px 0 20px 20px;
+	right: 2px;
+}
+
+
+/* align: [ hcenter ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_align_hcenter
+{
+	left: 50%;
+	margin-left: -20px;
+}
+
+/* align: [ left ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_align_left
+{
+	left: 20px;
+	margin-left: 0;
+}
+
+/* align: [ right ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_align_right
+{
+	right: 20px;
+	margin-left: 0;
+}
+
+/* align: [ vcenter ] */
+.cke_balloon_triangle_outer.cke_balloon_triangle_align_vcenter
+{
+	top: 50%;
+	margin-top: -20px;
+}

tests/plugins/balloonpanel/manual/moono.html

@@ -0,0 +1,45 @@
+<style>
+	body {
+		margin: 0px;
+		padding-left: 350px;
+		position: static;
+	}
+</style>
+
+<h1>Moono skin</h1>
+
+<h2>Classic</h2>
+
+<textarea id="editor1" cols="10" rows="10">
+	<p><em>Foo</em></p>
+</textarea>
+
+<h2>Inline</h2>
+
+<div id="editor2" contenteditable="true">
+	<p><em>Foo</em></p>
+</div>
+
+<script>
+	CKEDITOR.disableAutoInline = true;
+
+	var cfg = {
+		extraPlugins: 'balloonpanel',
+		on: {
+			instanceReady: function() {
+				var panel = new CKEDITOR.ui.balloonPanel( this, {
+					width: 'auto',
+					height: 100,
+					title: 'Balloon title',
+					content: 'This is the balloon content'
+				} );
+
+				panel.attach( this.editable().findOne( 'em' ) );
+			}
+		},
+		skin: 'moono'
+	};
+
+	CKEDITOR.replace( 'editor1', cfg );
+	CKEDITOR.inline( 'editor2', cfg );
+</script>

tests/plugins/balloonpanel/manual/moono.md

@@ -0,0 +1,7 @@
+@bender-ui: collapsed
+@bender-tags: balloonpanel, tc, 4.6.0, 14449
+@bender-ckeditor-plugins: wysiwygarea, toolbar, basicstyles, floatingspace, balloonpanel
+
+Look at balloon panels, ensure that they're pointing first `em` element in the editable.
+
+Also pay attention if it's compatible with moono skin, you can tell it by the close button.