[Mobile] IN PROGRESS: General fixes, spurred by mobile, for object-header

open #74
Attempting to layout using flex - not working;
See http://jsfiddle.net/charlesh88/cpf9zjts/9/ for working example;
New _flex.scss added;
This commit is changed elements that are mostly solid;

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -362,25 +362,41 @@ label.checkbox.custom {
 
 /******************************************************** OBJECT-HEADER */
 .object-header {
-	display: inline-block;
+	//@include test();
 	font-size: 1em;
+	line-height: 120%;
 	.label {
-		.title-label {
-			color: lighten($colorBodyFg, 40%);
-		}
-		.type-icon {
-			font-size: 120%;
-			margin-right: $interiorMargin;
-			vertical-align: middle;
-		}
+		//display: flex;
+		//flex-direction: row;
+	}
+
+	.title-label,
+	.type-icon,
+	.context-available {
+		@include tmpBorder(#6666ff);
+		vertical-align: middle;
+	}
+	> .type-icon {
+		font-size: 120%;
+	}
+
+	.title-label {
+		@include ellipsize();
+		color: lighten($colorBodyFg, 40%);
+		padding-right: 0.75em; // For context arrow. Done with em's so pad is relative to the scale of the text.
+		position: relative;
+	}
+
+	.context-available {
+		@include trans-prop-nice(opacity, 0.25s);
+		opacity: 0;
+		font-size: 0.7em;
+		position: absolute;
+		right: 0;
+	}
+	&:hover {
 		.context-available {
-			opacity: 0;
-			font-size: 0.8em;
-		}
-		&:hover {
-			.context-available {
-				opacity: 1;
-			}
+			opacity: 1;
 		}
 	}
 }
@@ -388,9 +404,9 @@ label.checkbox.custom {
 .top-bar,
 .object-browse-bar {
 	.object-header {
-		font-size: 1.1em;
+		//font-size: 1.1em;
 		span {
-			display: inline-block;
+			//display: inline-block;
 		}
 	}
 }