Customize buttons; make button borders configurable.

services/web/app/views/project/list.pug

@@ -15,59 +15,58 @@ block content
 			}
 		};
 
-	.content.content-alt.project-list-page(ng-controller="ProjectPageController")
+	.container-fluid.content.content-alt.project-list-page(ng-controller="ProjectPageController")
-		.container
+		.announcements(
-			.announcements(
+			ng-controller="AnnouncementsController"
-				ng-controller="AnnouncementsController"
+			ng-class="{ 'announcements-open': ui.isOpen }"
-				ng-class="{ 'announcements-open': ui.isOpen }"
+			ng-cloak
-				ng-cloak
+		)
+			.announcements-backdrop(
+				ng-if="ui.isOpen"
+				ng-click="toggleAnnouncementsUI();"
 			)
-				.announcements-backdrop(
+			a.announcements-btn(
-					ng-if="ui.isOpen"
+				href
-					ng-click="toggleAnnouncementsUI();"
+				ng-if="announcements.length"
-				)
+				ng-click="toggleAnnouncementsUI();"
-				a.announcements-btn(
+				ng-class="{ 'announcements-btn-open': ui.isOpen, 'announcements-btn-has-new': ui.newItems }"
-					href
+			)
-					ng-if="announcements.length"
+				span.announcements-badge(ng-if="ui.newItems") {{ ui.newItems }}
-					ng-click="toggleAnnouncementsUI();"
+			.announcements-body(
-					ng-class="{ 'announcements-btn-open': ui.isOpen, 'announcements-btn-has-new': ui.newItems }"
+				ng-if="ui.isOpen"
-				)
+			)
-					span.announcements-badge(ng-if="ui.newItems") {{ ui.newItems }}
+				.announcements-scroller
-				.announcements-body(
+					.announcement(
-					ng-if="ui.isOpen"
+						ng-repeat="announcement in announcements | filter:(ui.newItems ? { read: false } : '') track by announcement.id"
-				)
+					)
-					.announcements-scroller
+						h2.announcement-header {{ announcement.title }}
-						.announcement(
+						p.announcement-description(ng-bind-html="announcement.excerpt")
-							ng-repeat="announcement in announcements | filter:(ui.newItems ? { read: false } : '') track by announcement.id"
+						.announcement-meta
-						)
+							p.announcement-date {{ announcement.date | date:"longDate" }}
-							h2.announcement-header {{ announcement.title }}
+							a.announcement-link(
-							p.announcement-description(ng-bind-html="announcement.excerpt")
+								ng-href="{{ announcement.url }}"
-							.announcement-meta
+								ng-click="logAnnouncementClick()",
-								p.announcement-date {{ announcement.date | date:"longDate" }}
+								target="_blank"
-								a.announcement-link(
+							) Read more
-									ng-href="{{ announcement.url }}"
+					div.text-center(
-									ng-click="logAnnouncementClick()",
+						ng-if="ui.newItems > 0 && ui.newItems < announcements.length"
-									target="_blank"
+					)
-								) Read more
+						a.btn.btn-default.btn-sm(
-						div.text-center(
+							href
-							ng-if="ui.newItems > 0 && ui.newItems < announcements.length"
+							ng-click="showAll();"
-						)
+						) Show all
-							a.btn.btn-default.btn-sm(
-								href
-								ng-click="showAll();"
-							) Show all
 
-			.row(ng-cloak)
+		.row(ng-cloak)
-				span(ng-if="projects.length > 0")
+			span(ng-if="projects.length > 0")
-					aside.col-md-2.col-xs-3
+				aside.col-md-2.col-xs-3
-						include ./list/side-bar
+					include ./list/side-bar
 
-					.col-md-10.col-xs-9
+				.col-md-10.col-xs-9
-						include ./list/notifications
+					include ./list/notifications
-						include ./list/project-list
+					include ./list/project-list
-				
+			
-				span(ng-if="projects.length === 0")
+			span(ng-if="projects.length === 0")
-					.col-md-offset-2.col-md-8.col-md-offset-2.col-xs-8
+				.col-md-offset-2.col-md-8.col-md-offset-2.col-xs-8
-						include ./list/empty-project-list
+					include ./list/empty-project-list
 
 		include ./list/modals

services/web/public/stylesheets/components/buttons.less

@@ -14,8 +14,8 @@
   vertical-align: middle;
   cursor: pointer;
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
-  border: 1px solid transparent;
+  border: @btn-border-width solid transparent;
-  border-bottom: 2px solid transparent;
+  border-bottom: @btn-border-bottom-width solid transparent;
   white-space: nowrap;
   .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
   .user-select(none);

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

@@ -796,6 +796,9 @@
 // Custom
 @content-alt-bg-color: lighten(@gray-lightest, 2.5%);
 
+@btn-border-width: 1px;        
+@btn-border-bottom-width: 2px; 
+
 @left-menu-width: 260px;
 @left-menu-animation-duration: 0.35s;
 

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

@@ -37,6 +37,49 @@
 
 @card-border-radius-base: 3px;
 
+// Button colors and sizing
+@btn-border-width        : 0;
+@btn-border-bottom-width : 0;
+
+@btn-default-color       : #FFF;
+@btn-default-bg          : @ol-blue-gray-4;
+@btn-default-border      : transparent;
+
+@btn-primary-color       : #FFF;
+@btn-primary-bg          : @ol-green;
+@btn-primary-border      : transparent;
+
+@btn-success-color       : #FFF;
+@btn-success-bg          : @ol-green;
+@btn-success-border      : transparent;
+
+@btn-info-color          : #FFF;
+@btn-info-bg             : @ol-blue;
+@btn-info-border         : transparent;
+
+// TODO Warning color-orange?
+@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-info {
+  .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
+}
+// Warning appears as orange
+.btn-warning {
+  .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
+}
+// Danger and error appear as red
+.btn-danger {
+  .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
+}
+
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.