Add main sidebar styles for Quicksilver

less/_components/quicksilver/sidebar-block.less

@@ -0,0 +1,76 @@
+/*!
+ * Copyright (c) 2020 Eclipse Foundation, Inc.
+ * 
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ * 
+ * Contributors:
+ *   Eric Poirier <eric.poirier@eclipse-foundation.org>
+ * 
+ * SPDX-License-Identifier: EPL-2.0
+*/
+
+
+.sidebar-block {
+  margin-top:50px;
+  .sidebar-block-item {
+    margin-bottom:@sidebar-block-item-margin-bottom;
+    background-color: @sidebar-block-item-bg-color;
+    padding-top:17px;
+    padding-bottom:10px;
+    &.active {
+      background-color: @sidebar-block-item-active-bg-color;
+      a {
+        color:@sidebar-block-item-active-a-color;
+      }
+      &:hover {
+        background-color: @sidebar-block-item-active-a-bg-color-hover;
+      }
+    }
+    &:hover:not(.active) {
+      background-color: @sidebar-block-item-bg-color-hover;
+      a {
+        color:@sidebar-block-item-a-color;
+      }
+    }
+  }
+  .sidebar-block-sub-items {
+    background-color:@sidebar-block-sub-items-bg-color;
+    margin-top:@sidebar-block-sub-items-margin-top;
+    border:@sidebar-block-sub-items-border;
+    a {
+      &:hover {
+        font-weight:bold;
+      }
+    }
+  }
+  .sidebar-block-sub-item {
+    padding:0 0 8px 15px;
+    margin-bottom:0;
+    a.active {
+      .sidebar-text {
+        font-weight:bold;
+      }
+    }
+    &:first-child {
+      margin-top:15px;
+    }
+    &:last-child {
+      margin-bottom:15px;
+    }
+  }
+  a {
+    display: block;
+    color:@sidebar-block-a-color;
+    .sidebar-block-icon {
+      width:@sidebar-block-a-icon-width;
+      height:@sidebar-block-a-icon-height;
+      stroke-width: 1;
+      margin:@sidebar-block-a-icon-margin;
+    }
+    .sidebar-block-text {
+      padding:2px 0 0;
+    }
+  }
+}

less/quicksilver/_variables.less

@@ -138,6 +138,22 @@
 @mobile-main-menu-link-padding:18px 15px;
 @mobile-main-menu-link-border-bottom:1px solid @mobile-menu-dropdown-menu-background;
 
+//== Sidebar Menu
+@sidebar-block-item-bg-color:#f1f1f1;
+@sidebar-block-item-active-bg-color:@brand-secondary;
+@sidebar-block-item-margin-bottom: 20px;
+@sidebar-block-item-active-a-color: #fff;
+@sidebar-block-item-active-a-bg-color-hover: darken(@brand-secondary, 15%);
+@sidebar-block-item-bg-color-hover: darken(#f1f1f1, 15%);
+@sidebar-block-item-a-color: darken(@brand-secondary, 20%);
+@sidebar-block-sub-items-bg-color: #fff;
+@sidebar-block-sub-items-margin-top: -20px;
+@sidebar-block-sub-items-border:none;
+@sidebar-block-a-color: @brand-secondary;
+@sidebar-block-a-icon-width: 40px;
+@sidebar-block-a-icon-height: 40px;
+@sidebar-block-a-icon-margin: 0 20px 0 0px;
+
 //== Bugzilla menu
 @bugzilla-menu-link-color: @main-menu-link-color;
 

less/quicksilver/styles.less

@@ -47,6 +47,7 @@
 @import '../_components/quicksilver/content-nav-tab.less';
 @import '../_components/quicksilver/resources-group.less';
 @import '../_components/quicksilver/eclipsefdn-adopters.less';
+@import '../_components/quicksilver/sidebar-block.less';
 
 @import '../_components/_mixin.less';
 @import '../_components/ads.less';