Adjustments to the folders menu.

services/web/app/views/project/list/side-bar.pug

@@ -45,7 +45,7 @@
 			a(href) #{translate("shared_with_you")}
 		li(ng-class="{active: (filter == 'archived')}", ng-click="filterProjects('archived')")
 			a(href) #{translate("deleted_projects")}
-		li
+		li.separator
 			h2 #{translate("folders")}
 		li.tag(
 			ng-repeat="tag in tags | orderBy:'name'",

services/web/public/stylesheets/app/project-list.less

@@ -95,19 +95,21 @@ ul.folders-menu {
 	}
 	> li {
 		cursor: pointer;
-		line-height: 1.8;
 		position: relative;
 		> a {
+			line-height: @folders-menu-line-height;
 			display: block;
-			font-size: 0.9rem;
 			color: @sidebar-link-color;
-			padding: (@line-height-computed / 4) (@grid-gutter-width / 2);
-			line-height: 1.2;
+			padding: @folders-menu-item-v-padding (@grid-gutter-width / 2);
+			border-bottom: solid 1px transparent;
 			&:hover {
 				background-color: @sidebar-hover-bg;
 				text-decoration: @sidebar-hover-text-decoration;
 			}
 		}
+		&.separator {
+			cursor: auto;
+		}
 	}
 	> li.active {
 		//border-right: 4px solid @red;
@@ -125,10 +127,14 @@ ul.folders-menu {
 		color: @gray;
 	}
 	h2 {
-		margin-top: @line-height-computed / 2;
-		margin-bottom: @line-height-computed / 4;
-		font-size: @font-size-base;
-		font-weight: 500;
+		margin-top: @folders-title-margin-top;
+		margin-bottom: @folders-title-margin-bottom;
+		font-size: @folders-title-font-size;
+		color: @folders-title-color;
+		line-height: @folders-title-line-height;
+		text-transform: @folders-title-text-transform;
+		padding: @folders-menu-item-v-padding (@grid-gutter-width / 2);
+		font-weight: @folders-title-font-weight;
 		font-family: @font-family-sans-serif;
 	}
 	> li.tag {
@@ -137,7 +143,7 @@ ul.folders-menu {
 				color: white;
 				border-color: white;
 				&:hover {
-					background-color: darken(@brand-primary, 10%);
+					background-color: @folders-tag-menu-active-hover;
 				}
 			}
 		}
@@ -145,7 +151,7 @@ ul.folders-menu {
 			font-style: italic;
 			margin-bottom: @line-height-computed / 4;
 			a {
-				line-height: 1.7;
+				line-height: @folders-untagged-line-height;
 				&:hover,
 				&:focus {
 					text-decoration: none;
@@ -157,7 +163,7 @@ ul.folders-menu {
 		}
 		&:hover {
 			&:not(.active) {
-				background-color: darken(@gray-lightest, 2%);
+				background-color: @folders-tag-hover;
 			}
 			.tag-menu {
 				display: block
@@ -165,30 +171,30 @@ ul.folders-menu {
 		}
 		&:not(.active) {
 			.tag-menu > a:hover {
-				background-color: @gray-light;
+				background-color: @folders-tag-menu-hover;
 			}
 		}
 		a.tag-name {
-			padding: 2px (@line-height-computed / 4);
-			margin-right: 18px;
-			display: inline-block;
+			padding: @folders-tag-padding;
+			margin-right: @folders-tag-margin-right;
+			display: @folders-tag-display;
 			position: relative;
 			i {
-				position: absolute;
+				position: @folders-tag-icon-position;
 				top: 5px;
 				left: 6px;
 			}
 			span.name {
 				display: inline-block;
-				padding-left: 22px;
+				padding-left: @folders-tag-spacing;
 				line-height: 1.4;
 			}
 		}
 		.tag-menu {
 			> a {
-				border: 1px solid @gray;
+				border: 1px solid @folders-tag-border-color;
 				border-radius: @border-radius-small;
-				color: @text-color;
+				color: @folders-tag-menu-color;
 				display: block;
 				width: 16px;
 				height: 16px;
@@ -201,7 +207,8 @@ ul.folders-menu {
 			}
 			display: none;
 			position: absolute;
-			top: 6px;
+			top: 50%;
+			margin-top: -8px; // Half the element height.
 			right: 4px;
 			&.open {
 				display: block;
@@ -272,7 +279,7 @@ ul.structured-list {
 
 ul.project-list {
 	li {
-		line-height: 3;
+		line-height: @structured-list-line-height;
 		padding: 0;
 		// .last-modified, .owner {
 		// 	font-size: .8rem;

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

@@ -825,6 +825,28 @@
 @sidebar-hover-bg: transparent;
 @sidebar-hover-text-decoration: underline;
 
+@structured-list-line-height: inherit;
+@folders-menu-line-height: 1.8;
+@folders-menu-item-v-padding: (@line-height-computed / 4);
+@folders-title-margin-top: @line-height-computed / 2;
+@folders-title-margin-bottom: @line-height-computed / 4;
+@folders-title-font-size: @font-size-base;
+@folders-title-font-weight: 500;
+@folders-title-line-height: @headings-line-height;
+@folders-title-color: inherit;
+@folders-title-text-transform: none;
+@folders-tag-icon-position: absolute;
+@folders-tag-padding: 2px (@line-height-computed / 4);
+@folders-tag-spacing: 22px;
+@folders-tag-display: inline-block;
+@folders-tag-margin-right: 18px;
+@folders-tag-menu-color: @gray;
+@folders-tag-hover: darken(@gray-lightest, 2%);
+@folders-tag-border-color: @text-color;
+@folders-tag-menu-active-hover: darken(@brand-primary, 10%);
+@folders-tag-menu-hover: @gray-light;
+@folders-untagged-line-height: 1.7;
+
 @btn-border-width: 1px;        
 @btn-border-bottom-width: 2px; 
 

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

@@ -80,18 +80,18 @@
 
 // Forms
 @input-border-radius              : unit(@line-height-base, em);
-@input-height-base                : @line-height-computed + (@padding-base-vertical * 2);
+@input-height-base                : @line-height-computed + (@padding-base-vertical * 2) - 1;
 // TODO Warning color-orange?
-@btn-warning-color       : #FFF;
-@btn-warning-bg          : @ol-red;
-@btn-warning-border      : transparent;
+@btn-warning-color                : #FFF;
+@btn-warning-bg                   : @ol-red;
+@btn-warning-border               : transparent;
 
-@btn-danger-color        : #FFF;
-@btn-danger-bg           : @ol-red;
-@btn-danger-border       : transparent;
+@btn-danger-color                 : #FFF;
+@btn-danger-bg                    : @ol-red;
+@btn-danger-border                : transparent;
 
 // Cards
-@card-box-shadow         : none;
+@card-box-shadow                  : none;
 
 // Sidebar
 @sidebar-bg                     : @ol-blue-gray-5;
@@ -107,6 +107,27 @@
 @structured-list-border-color   : @ol-blue-gray-1;
 @structured-list-hover-color    : lighten(@ol-blue-gray-1, 5%);
 
+@structured-list-line-height    : 2.5;
+@folders-menu-line-height       : @structured-list-line-height;
+@folders-menu-item-v-padding    : 0;
+@folders-title-margin-top       : 0;
+@folders-title-margin-bottom    : 0;
+@folders-title-font-weight      : normal;
+@folders-title-font-size        : @font-size-small;
+@folders-title-line-height      : unit((@font-size-base / @font-size-small) * @folders-menu-line-height);
+@folders-title-color            : @ol-blue-gray-3;
+@folders-title-text-transform   : uppercase;
+@folders-tag-display            : block;
+@folders-tag-margin-right       : 0;
+@folders-tag-icon-position      : static;
+@folders-tag-padding            : @folders-menu-item-v-padding (@grid-gutter-width / 2);
+@folders-tag-spacing            : 0.5em;
+@folders-tag-menu-color         : #FFF;
+@folders-tag-hover              : @sidebar-hover-bg;
+@folders-tag-border-color       : @folders-tag-menu-color;
+@folders-tag-menu-hover         : rgba(0, 0, 0, .1);
+@folders-tag-menu-active-hover  : rgba(0, 0, 0, .1);
+@folders-untagged-line-height   : @folders-menu-line-height;
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.