Merge branch 't/13192' into major

Author: Reinmar

samples/css/samples.css

@@ -12,6 +12,24 @@ main .grid-container.freed-width {
 .switch {
 	background: darken( @global-link-font-color, 3% );
 	float: right;
+	overflow: visible;
+
+	// Switch balloon tooltip.
+	.balloon-a {
+		// Custom position relative to the switch.
+		position: absolute;
+		top: -40px;
+		right: 50%;
+		margin-right: -15px;
+
+		// Customize balloon colors.
+		background: #FFEFC1;
+		border-bottom-color: #DCDCA4;
+
+		&:before {
+			border-color: #FFEFC1 transparent transparent transparent;
+		}
+	}
 }
 
 #toolbar .editors-container {
@@ -103,3 +121,53 @@ div.cke .cke_combo_button {
 		opacity: 1;
 	}
 }
+
+// Styles that allow .balloon-a to be absolutely positioned.
+header {
+	overflow: visible;
+
+	div.grid-container {
+		overflow: visible;
+	}
+
+	.navigation-b {
+		overflow: visible;
+
+		ul {
+			overflow: visible;
+		}
+
+		a {
+			// Tip is relative to the anchor.
+			position: relative;
+		}
+	}
+
+	.balloon-a {
+		position: absolute;
+		top: 48px;
+
+		left: 50%;
+		margin-left: -35px;
+
+		// Switch the balloon arrow and position on narrow screen
+		// to make it fully visible.
+		.global-is-max-width( 1140px, {
+			left: auto;
+			margin-left: auto;
+
+			right: 50%;
+			margin-right: -35px;
+
+			&:before {
+				left: auto;
+				right: 22px;
+			}
+		} );
+
+		// Don't display the balloon on mobile.
+		.global-is-mobile( {
+			display: none;
+		} );
+	}
+}

samples/less/custom.less

@@ -57,6 +57,7 @@ <h1 class="header-a-logo grid-width-30">
 					<h1 class="grid-width-60">Toolbar configurator</h1>
 					<div class="grid-width-40 grid-switch-magic">
 						<div class="switch">
+							<span class="balloon-a balloon-a-se">Select configurator type</span>
 							<input type="radio" name="radio" data-num="1" id="radio-basic" />
 							<input type="radio" name="radio" data-num="2" id="radio-advanced" />
 							<label data-for="1" for="radio-basic">Basic</label>

samples/toolbarconfigurator/index.html

@@ -28,6 +28,7 @@
 				text: 'Toggle visibility of empty elements',
 				group: 'edit',
 				position: 'left',
+				cssClass: 'button-a-soft',
 				clickCallback: function( button ) {
 					var className = 'button-a-background';
 
@@ -39,6 +40,7 @@
 				text: 'Add row separator',
 				group: 'edit',
 				position: 'left',
+				cssClass: 'button-a-soft',
 				clickCallback: function() {
 					this._addSeparator();
 				}
@@ -60,6 +62,7 @@
 				text: 'Select config',
 				group: 'config',
 				position: 'left',
+				cssClass: 'button-a-soft',
 				clickCallback: function() {
 					this.configContainer.findOne( 'textarea' ).$.select();
 				}

samples/toolbarconfigurator/js/toolbarmodifier.js

@@ -68,22 +68,6 @@
 	overflow: hidden;
 
 	button.button-a {
-		background-color: @modifier-toolbar-button-color;
-
-		&:active,
-		&:hover {
-			background-color: darken( @modifier-toolbar-button-color, 20% );
-		}
-
-		&.button-a-background {
-			background-color: @global-link-font-color;
-
-			&:active,
-			&:hover {
-				background-color: @global-link-font-color-hover;
-			}
-		}
-
 		&.cke_button {
 			cursor: pointer;