Style settings side panel

services/web/app/views/project/editor/left-menu.jade

@@ -3,75 +3,90 @@ aside#left-menu.full-size(
 	ng-cloak
 )
 	h4 Settings
-	form(ng-controller="SettingsController")
-		.form-controls
-			label(for="compiler") Compiler
-			select.form-control(
-				name="compiler"
-				ng-model="project.compiler"
-			)
-				option(value='pdflatex') pdfLaTeX
-				option(value='latex') LaTeX
-				option(value='xelatex') XeLaTeX
-				option(value='lualatex') LuaLaTeX
+	form.settings(ng-controller="SettingsController")
+		.containter-fluid
+			.form-controls
+				.row
+					label.col-md-6(for="compiler") Compiler
+					.col-md-6
+						select.form-control(
+							name="compiler"
+							ng-model="project.compiler"
+						)
+							option(value='pdflatex') pdfLaTeX
+							option(value='latex') LaTeX
+							option(value='xelatex') XeLaTeX
+							option(value='lualatex') LuaLaTeX
 
-		.form-controls
-			label(for="spellCheckLanguage") Spell Check
-			select.form-control(
-				name="spellCheckLanguage"
-				ng-model="project.spellCheckLanguage"
-			)
-				option(value="") Off
-				optgroup(label="Language")
-					for language in languages
-						option(
-							value=language.code
-						)= language.name
+			.form-controls
+				.row
+					label.col-md-6(for="spellCheckLanguage") Spell Check
+					.col-md-6
+						select.form-control(
+							name="spellCheckLanguage"
+							ng-model="project.spellCheckLanguage"
+						)
+							option(value="") Off
+							optgroup(label="Language")
+								for language in languages
+									option(
+										value=language.code
+									)= language.name
 
-		.form-controls
-			label(for="autoComplete") Auto-Complete
-			input.form-control(
-				type="checkbox"
-				name="autoComplete"
-				ng-model="settings.autoComplete"
-			)
+			.form-controls
+				.row
+					label.col-md-6(for="autoComplete") Auto-Complete
+					.col-md-6
+						input.form-control(
+							type="checkbox"
+							name="autoComplete"
+							ng-model="settings.autoComplete"
+						)
 
-		.form-controls
-			label(for="theme") Theme
-			select.form-control(
-				name="theme"
-				ng-model="settings.theme"
-			)
-				each theme in themes
-					option(value=theme) #{theme}
-					
-		.form-controls
-			label(for="mode") Keybindings
-			select.form-control(
-				name="mode"
-				ng-model="settings.mode"
-			)
-				option(value='default') None
-				option(value='vim') Vim
-				option(value='emacs') Emacs
+			.form-controls
+				.row
+					label.col-md-6(for="theme") Theme
+					.col-md-6
+						select.form-control(
+							name="theme"
+							ng-model="settings.theme"
+						)
+							each theme in themes
+								option(value=theme) #{theme}
 
-		.form-controls
-			label(for="fontSize") Font Size
-			select.form-control(
-				name="fontSize"
-				ng-model="settings.fontSize"
-			)
-				each size in ['10','11','12','13','14','16','20','24']
-					option(value=size) #{size}px
+			.form-controls
+				.row
+					label.col-md-6(for="mode") Keybindings
+					.col-md-6
+						select.form-control(
+							name="mode"
+							ng-model="settings.mode"
+						)
+							option(value='default') None
+							option(value='vim') Vim
+							option(value='emacs') Emacs
 
-		.form-controls
-			label(for="pdfViewer") PDF Viewer
-			select.form-control(
-				name="pdfViewer"
-				ng-model="settings.pdfViewer"
-			)
-				option(value="pdfjs") Built-In
-				option(value="native") Native
+			.form-controls
+				.row
+					label.col-md-6(for="fontSize") Font Size
+					.col-md-6
+						select.form-control(
+							name="fontSize"
+							ng-model="settings.fontSize"
+						)
+							each size in ['10','11','12','13','14','16','20','24']
+								option(value=size) #{size}px
+
+			.form-controls
+				.row
+					label.col-md-6(for="pdfViewer") PDF Viewer
+					.col-md-6
+						select.form-control(
+							name="pdfViewer"
+							ng-model="settings.pdfViewer"
+						)
+							option(value="pdfjs") Built-In
+							option(value="native") Native
 
 #left-menu-mask(
 	ng-show="ui.leftMenuShown",

services/web/public/stylesheets/app/editor/left-menu.less

@@ -1,14 +1,16 @@
 #left-menu {
 	position: absolute;
-	width: 210px;
-	padding: 10px;
+	width: 260px;
+	padding: (@line-height-computed / 2);
 	top: 0;
 	bottom: 0;
 	background-color: #f4f4f4;
 	z-index: 100;
-	overflow: auto;
+	overflow-y: auto;
+	overflow-x: hidden;
 	-webkit-transition: left ease-in-out 0.35s;
 	transition: left ease-in-out 0.35s;
+	font-size: 14px;
 
 	left: -280px;
 	&.shown {
@@ -16,14 +18,48 @@
 	}
 
 	h4 {
-		font-family: @font-family-serif;
+		font-family: @font-family-sans-serif;
 		font-weight: 400;
 		font-size: 1rem;
 		margin: (@line-height-computed / 2) 0;
 		padding-bottom: (@line-height-computed / 4);
 		color: @gray-light;
-		border-bottom: 1px solid @gray-light;
-		text-transform: uppercase;
+		border-bottom: 1px solid @gray-lighter;
+	}
+
+	h4:first-child {
+		margin-top: 0;
+	}
+
+	form.settings {
+		label {
+			font-weight: normal;
+			color: @gray-dark;
+			margin-bottom: 0;
+			padding-top: 8px;
+		}
+		select.form-control {
+			height: 34px;
+			background: none;
+			border: none;
+			box-shadow: none;
+			color: @link-color;
+			cursor: pointer;
+			font-size: 14px;
+			font-weight: 700;
+		}
+		.form-controls {
+			padding: 0 (@line-height-computed / 4);
+			&:hover {
+				background-color: @link-color;
+				select.form-control {
+					color: white;
+				}
+				label {
+					color: white;
+				}
+			}
+		}
 	}
 }