Add animation and other styling items. Small refactor with Less vars.

services/web/app/views/project/editor/feature-onboarding.jade

@@ -1,12 +1,13 @@
 .feat-onboard(
 	ng-controller="FeatureOnboardingController"
+	ng-class="('feat-onboard-step' + innerStep)"
 	ng-cloak
 )
 	.feat-onboard-wrapper
 		h1.feat-onboard-title
 			| Introducing 
 			span.feat-onboard-title-name Code check
-		div(ng-if="step === 1;")
+		div(ng-if="innerStep === 1;")
 			p.feat-onboard-description
 				span.feat-onboard-description-name Code check 
 				| will highlight potential problems in your LaTeX code, allowing you to handle errors earlier and become more productive.
@@ -30,5 +31,5 @@
 				.btn.btn-primary(ng-click="turnCodeCheckOn();") Yes, turn Code check on
 			div
 				.btn.btn-default(ng-click="turnCodeCheckOn();") No, disable it for now
-		div(ng-if="step === 2;")
+		div(ng-if="innerStep === 2;")
 			p Step 2, TODO.

services/web/public/coffee/ide/FeatureOnboardingController.coffee

@@ -2,14 +2,14 @@ define [
 	"base"
 ], (App) ->
 	App.controller "FeatureOnboardingController", ($scope, $modal, event_tracking) ->
-		$scope.step = 1;
+		$scope.innerStep = 1;
 
 		$scope.turnCodeCheckOn = () ->
-			goToStep2()
+			navToInnerStep2()
 			
 		$scope.turnCodeCheckOn = () ->
-			goToStep2()
+			navToInnerStep2()
 
-		goToStep2 = () ->
-			$scope.step = 2
+		navToInnerStep2 = () ->
+			$scope.innerStep = 2
 			$scope.ui.leftMenuShown = true

services/web/public/stylesheets/app/editor/feature-onboarding.less

@@ -7,7 +7,41 @@
 	background-color: rgba(0, 0, 0, .85);
 	color: #FFF;
 	text-align: center;
-	z-index: 100;
+	z-index: 102;
+	transition: left ease-in-out @left-menu-animation-duration;
+	&::before {
+		content: '';
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		width: 0;
+		opacity: 0;
+		transition: opacity ease-in-out @left-menu-animation-duration, width ease-in-out @left-menu-animation-duration;
+	}
+}
+
+.feat-onboard-step2 {
+	left: @left-menu-width;
+	&::before {
+		content: '';
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		width: @left-menu-width;
+		opacity: 1;
+		background-image: linear-gradient(
+			180deg,
+			rgba(0,0,0,.85),
+			rgba(0,0,0,.85) 160px,
+			transparent 205px,
+			transparent 210px,
+			rgba(0,0,0,.85) 215px,
+			rgba(0,0,0,.85)
+		);
+
+	}
 }
 	.feat-onboard-wrapper {
 		width: 600px;

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

@@ -1,6 +1,6 @@
 #left-menu {
 	position: absolute;
-	width: 260px;
+	width: @left-menu-width;
 	padding: (@line-height-computed / 2);
 	top: 0;
 	bottom: 0;
@@ -8,8 +8,8 @@
 	z-index: 100;
 	overflow-y: auto;
 	overflow-x: hidden;
-	-webkit-transition: left ease-in-out 0.35s;
-	transition: left ease-in-out 0.35s;
+	-webkit-transition: left ease-in-out @left-menu-animation-duration;
+	transition: left ease-in-out @left-menu-animation-duration;
 	font-size: 14px;
 
 	left: -280px;

services/web/public/stylesheets/core/variables.less

@@ -820,6 +820,9 @@
 
 // Custom
 
+@left-menu-width: 260px;
+@left-menu-animation-duration: 0.35s;
+
 @toolbar-border-color: @gray-lighter;
 @file-tree-droppable-background-color: rgb(252, 231, 199);