diff --git a/less/_components/quicksilver/sidebar-block.less b/less/_components/quicksilver/sidebar-block.less new file mode 100644 index 00000000..e548c454 --- /dev/null +++ b/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 + * + * 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; + } + } +} \ No newline at end of file diff --git a/less/quicksilver/_variables.less b/less/quicksilver/_variables.less index 56cb3bb1..6dbf8853 100644 --- a/less/quicksilver/_variables.less +++ b/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; diff --git a/less/quicksilver/styles.less b/less/quicksilver/styles.less index d3da0ef2..c5ae318e 100644 --- a/less/quicksilver/styles.less +++ b/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';