OO-1068 improve theme configuration, type-ahead style

src/main/webapp/static/themes/light/_config.scss

@@ -143,6 +143,29 @@ $o-tree-padding-opener-left-px 	: 1px !default;
 /* Tabbed pane component */
 $o-tabbed-pane-padding			: ($padding-large-vertical * 2) 0 $padding-base-vertical 0;
 
+/* Auto completer input field */
+$o-autocomplete-width				: 400px !default;
+$o-autocomplete-font-size			: $font-size-base !default;
+$o-autocomplete-line-height			: $line-height-base !default;
+$o-autocomplete-border-radius		: $input-border-radius !default;
+$o-autocomplete-bg-color			: $input-bg !default;
+$o-autocomplete-color 				: $input-color !default;
+$o-autocomplete-suggestion-color 	: $btn-primary-color !default;
+$o-autocomplete-suggestion-bg-color	: $btn-primary-bg !default;
+
+/* Chart library configuration for visualized statistics */
+$o-d3chart-default 				: $brand-primary;
+$o-d3chart-light 				: lighten($brand-primary, 15%);
+$o-d3chart-dark 				: darken($brand-primary, 15%);
+
+/* Toggle sliders */
+$o-toggle-size					: 16px !default;
+$o-toggle-border-color			: $gray-light !default;
+$o-toggle-bg					: $gray-lighter !default;
+$o-toggle-off-color				: $gray-light !default;
+$o-toggle-on-color				: $brand-primary !default;
+$o-toggle-text-color			: $text-muted !default;
+
 /* Dirty button */
 $o-button-dirty-color			: $btn-warning-color !default;
 $o-button-dirty-bg				: $btn-warning-bg !default; 

src/main/webapp/static/themes/light/modules/_autocomplete.scss

-
-.typeahead,
-.tt-query,
-.tt-hint {
-  width: 396px;
-  height: 30px;
-  padding: 8px 12px;
-  font-size: 24px;
-  line-height: 30px;
-  border: 2px solid #ccc;
-  -webkit-border-radius: 8px;
-     -moz-border-radius: 8px;
-          border-radius: 8px;
-  outline: none;
-}
-
-.typeahead {
-  background-color: #fff;
-}
-
-.typeahead:focus {
-  border: 2px solid #0097cf;
-}
-
-.tt-query {
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-
-.tt-hint {
-  color: #999
+.tt-input {
+	width: $o-autocomplete-width;
 }
 
 .tt-dropdown-menu {
-  width: 422px;
-  margin-top: 12px;
-  padding: 8px 0;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  -webkit-border-radius: 8px;
-     -moz-border-radius: 8px;
-          border-radius: 8px;
-  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-          box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  	width: $o-autocomplete-width;
+  	margin-top: $padding-base-vertical;
+  	padding: 0 0 0;
+  	color: $o-autocomplete-color;
+  	background-color: $o-autocomplete-bg-color;
+  	/* same border style as in bootstrap form */
+  	border: 1px solid $input-border-focus;
+  	@include border-top-radius($o-autocomplete-border-radius);
+  	@include border-bottom-radius($o-autocomplete-border-radius);
+    @include box-shadow(0 0 8px rgba(red($input-border-focus), green($input-border-focus), blue($input-border-focus), .6));
 }
 
 .tt-suggestion {
-  padding: 3px 20px;
-  font-size: 18px;
-  line-height: 24px;
+  	padding: $padding-base-vertical $padding-base-horizontal;
+  	font-size: $o-autocomplete-font-size;
+  	line-height: $o-autocomplete-line-height;
 }
 
 .tt-suggestion.tt-cursor {
-  color: #fff;
-  background-color: #0097cf;
-
+  	color: $o-autocomplete-suggestion-color;
+  	background-color: $o-autocomplete-suggestion-bg-color;
 }
 
 .tt-suggestion p {
-  margin: 0;
+  	margin: 0;
 }
\ No newline at end of file

src/main/webapp/static/themes/light/modules/_chart.scss

 /* charts (crispEdges) */
-$o-d3chart-default : $brand-primary;
-$o-d3chart-light : lighten($brand-primary, 15%);
-$o-d3chart-dark : darken($brand-primary, 15%);
-
 .d3chart {
 	.bar { shape-rendering: crispEdges; }
 	.bar_default_light { fill: $o-d3chart-light; }

src/main/webapp/static/themes/light/modules/_coursesite.scss

@@ -268,9 +268,9 @@
 					@extend %o_undecorated;
 					display: block;
 					
-					color: $brand-primary;
+					color: $o-coursesite-meta-title-color;
 					&:hover {
-					    color: darken($brand-primary, 10%);
+					    color: darken($o-coursesite-meta-title-color, 10%);
 					}				
 				}
 			}
@@ -350,9 +350,9 @@
 					a {
 						@extend %o_undecorated;
 						display: block;
-						color: $brand-primary;
+						color: $o-coursesite-meta-title-color;
 						&:hover {
-						    color: darken($brand-primary, 10%);
+						    color: darken($o-coursesite-meta-title-color, 10%);
 						}				
 					}
 				}				

src/main/webapp/static/themes/light/modules/_form.scss

 .o_form{
-	legend {}
-	.o_chelp {}
-	
 	.o_desc {
 		@extend %o_note;
 	}
@@ -24,9 +21,7 @@
 		margin-bottom: 0;
 		padding: 10px;
 	}	
-	.o_disabled {}
 	
-	hr.o_spacer {}
 	hr.o_spacer_noline {
 		border-top: 1px solid transparent;
 	}
@@ -103,37 +98,36 @@
 }
 
 /* TOGGLE SLIDERS */
-$toggle-size: 16px !default;
 .o_button_toggle {
-	border: 1px solid $gray-light;
-	@include border-top-radius($toggle-size/2 + 1px);
-	@include border-bottom-radius($toggle-size/2 + 1px);
-	background: $gray-lighter;
+	border: 1px solid $o-toggle-border-color;
+	@include border-top-radius($o-toggle-size/2 + 1px);
+	@include border-bottom-radius($o-toggle-size/2 + 1px);
+	background: $o-toggle-bg;
 	display: inline-block;
-	height: $toggle-size + 2px;
-	line-height: $toggle-size;
-	font-size: $toggle-size;
+	height: $o-toggle-size + 2px;
+	line-height: $o-toggle-size;
+	font-size: $o-toggle-size;
 	text-align: left;
 	padding: 0 0.5em 0 0;
 	margin: 0;
 	@extend %o_undecorated;
 	
 	i {
-		color: $gray-light;
+		color: $o-toggle-off-color;
 		text-shadow: 1px 0 2px rgba(0,0,0,.25);		
 	}	
 	span {
-		line-height: $toggle-size;
+		line-height: $o-toggle-size;
 		vertical-align: top;		
 		font-size: 60%;
-		color: $text-muted;
+		color: $o-toggle-text-color;
 		text-transform: uppercase;
 	}
 	&.o_on {
 		text-align: right;
 		padding: 0 0 0 0.5em;
 		i {
-			color: $brand-primary;
+			color: $o-toggle-on-color;
 			text-shadow: -1px 0 2px rgba(0,0,0,.25);
 		}	
 	}

src/main/webapp/static/themes/light/modules/_forum.scss

 .o_forum_peekview {
-	.o_quote_wrapper, .b_quote_wrapper {
+	.o_quote_wrapper, .b_quote_wrapper { /* keep b_* for legacy posts */
 		display: none;
 	}
 }