Merge pull request #55 from ckeditor/t/54

t/54: Created styles for contextual toolbar.

theme/components/balloonpanel.scss

@@ -38,6 +38,7 @@ $ck-balloon-arrow-half-width: 10px;
 		z-index: ck-z( 'default', 1 );
 	}
 
+	&_arrow_s,
 	&_arrow_se,
 	&_arrow_sw {
 		&:before,
@@ -57,6 +58,7 @@ $ck-balloon-arrow-half-width: 10px;
 		}
 	}
 
+	&_arrow_n,
 	&_arrow_ne,
 	&_arrow_nw {
 		&:before,
@@ -76,6 +78,15 @@ $ck-balloon-arrow-half-width: 10px;
 		}
 	}
 
+	&_arrow_s {
+		&:before,
+		&:after {
+			left: 50%;
+			margin-left: -$ck-balloon-arrow-half-width;
+			top: -$ck-balloon-arrow-height;
+		}
+	}
+
 	&_arrow_se {
 		&:before,
 		&:after {
@@ -92,6 +103,15 @@ $ck-balloon-arrow-half-width: 10px;
 		}
 	}
 
+	&_arrow_n {
+		&:before,
+		&:after {
+			left: 50%;
+			margin-left: -$ck-balloon-arrow-half-width;
+			bottom: -$ck-balloon-arrow-height;
+		}
+	}
+
 	&_arrow_ne {
 		&:before,
 		&:after {

theme/components/editor.scss

@@ -1,6 +1,37 @@
 // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 // For licensing, see LICENSE.md or http://ckeditor.com/license
 
+@mixin ck-editor-toolbar {
+	// Toolbars should not react to ck-rounded-corners() mixin.
+	border-radius: 0;
+
+	.ck-button {
+		border-width: 0;
+
+		// Make sure the next button does not overlap focused one.
+		&:focus {
+			z-index: 1;
+		}
+
+		&:not(:hover):not(:focus):not(.ck-on),
+		&.ck-disabled {
+			background: ck-color( 'foreground' );
+		}
+
+		&.ck-on {
+			@include ck-button-colors( 'foreground', -10 );
+		}
+	}
+
+	.ck-dropdown__button {
+		border-width: 1px;
+
+		&:not(:hover):not(:focus):not(.ck-on) {
+			background: ck-color( 'background' );
+		}
+	}
+}
+
 // TODO/NOTE: This along with _editor helper will probably become a creator theme.
 @include ck-editor {
 	@include ck-rounded-corners();
@@ -12,6 +43,8 @@
 
 	.ck-editor__top {
 		.ck-toolbar {
+			@include ck-editor-toolbar();
+
 			border-top: 0;
 			border-left: 0;
 			border-right: 0;
@@ -40,37 +73,6 @@
 			padding: 0 ck-spacing();
 		}
 	}
-
-	.ck-toolbar {
-		// Toolbars should not react to ck-rounded-corners() mixin.
-		border-radius: 0;
-
-		.ck-button {
-			border-width: 0;
-
-			// Make sure the next button does not overlap focused one.
-			&:focus {
-				z-index: 1;
-			}
-
-			&:not(:hover):not(:focus):not(.ck-on),
-			&.ck-disabled {
-				background: ck-color( 'foreground' );
-			}
-
-			&.ck-on {
-				@include ck-button-colors( 'foreground', -10 );
-			}
-		}
-
-		.ck-dropdown__button {
-			border-width: 1px;
-
-			&:not(:hover):not(:focus):not(.ck-on) {
-				background: ck-color( 'background' );
-			}
-		}
-	}
 }
 
 .ck-editor,