Commit 3abfc315 authored by Denys Mishunov's avatar Denys Mishunov

Styled the contextual header

Both the refactored and non-refactored contextual
headers were updated to match the design.
parent 4db9364b
......@@ -19,7 +19,7 @@
li.active {
background-color: transparent;
box-shadow: none;
box-shadow: none !important; // TODO: This should be updated in `theme_helper.scss`
}
}
......@@ -137,6 +137,32 @@
}
}
@mixin context-header {
@include gl-pl-2;
@include gl-py-2;
@include gl-mb-2;
.avatar-container {
flex: 0 0 $sidebar-avatar-size;
border-color: $t-gray-a-08;
}
}
@mixin top-level-item {
@include gl-px-4;
@include gl-py-3;
@include gl-display-flex;
@include gl-align-items-center;
@include gl-rounded-base;
@include gl-w-auto;
transition: padding $sidebar-transition-duration;
margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin;
&:hover {
background-color: $indigo-900-alpha-008;
}
}
//
// PAGE-LAYOUT
//
......@@ -206,19 +232,7 @@
}
> a {
@include gl-mx-2;
@include gl-px-4;
@include gl-py-3;
@include gl-display-flex;
@include gl-align-items-center;
@include gl-rounded-base;
@include gl-w-auto;
transition: padding $sidebar-transition-duration;
margin-bottom: 1px;
&:hover {
background-color: $indigo-900-alpha-008;
}
@include top-level-item;
}
&.active {
......@@ -250,11 +264,6 @@
display: none;
}
svg {
height: 16px;
width: 16px;
}
@media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {
&:not(.sidebar-expanded-mobile) {
@include collapse-contextual-sidebar;
......@@ -264,14 +273,28 @@
}
.nav-sidebar-inner-scroll {
height: 100%;
width: 100%;
overflow: auto;
@include gl-h-full;
@include gl-w-full;
@include gl-overflow-auto;
> div.context-header {
@include gl-mt-2;
a {
@include top-level-item;
@include context-header;
}
}
}
.sidebar-top-level-items {
@include gl-mt-2;
margin-bottom: 60px;
.context-header a {
@include context-header;
}
> li {
.badge.badge-pill {
@include gl-rounded-lg;
......
......@@ -573,6 +573,9 @@ $inactive-badge-background: rgba($black, 0.08);
$sidebar-toggle-height: 60px;
$sidebar-toggle-width: 40px;
$sidebar-milestone-toggle-bottom-margin: 10px;
$sidebar-avatar-size: 32px;
$sidebar-top-item-lr-margin: 4px;
$sidebar-top-item-tb-margin: 1px;
/*
* Buttons
......
......@@ -2,8 +2,8 @@
.nav-sidebar-inner-scroll
.context-header
= link_to admin_root_path, title: _('Admin Overview') do
%span.avatar-container.s40.settings-avatar
= sprite_icon('admin', size: 24)
%span.avatar-container.s32.settings-avatar
= sprite_icon('admin', size: 18)
%span.sidebar-context-title
= _('Admin Area')
%ul.sidebar-top-level-items{ data: { qa_selector: 'admin_sidebar_overview_submenu_content' } }
......
= link_to group_path(@group), title: @group.name do
%span.avatar-container.rect-avatar.s40.group-avatar
= group_icon(@group, class: "avatar s40 avatar-tile")
%span.avatar-container.rect-avatar.s32.group-avatar
= group_icon(@group, class: "avatar s32 avatar-tile")
%span.sidebar-context-title
= @group.name
......@@ -2,8 +2,8 @@
.nav-sidebar-inner-scroll
.context-header
= link_to profile_path, title: _('Profile Settings') do
%span.avatar-container.s40.settings-avatar
= image_tag avatar_icon_for_user(current_user, 40), class: "avatar s40 avatar-tile js-sidebar-user-avatar", alt: current_user.name, data: { testid: 'sidebar-user-avatar' }
%span.avatar-container.s32.settings-avatar
= image_tag avatar_icon_for_user(current_user, 40), class: "avatar s32 avatar-tile js-sidebar-user-avatar", alt: current_user.name, data: { testid: 'sidebar-user-avatar' }
%span.sidebar-context-title= _('User Settings')
%ul.sidebar-top-level-items
= nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
......
= link_to scope_menu.link, **scope_menu.container_html_options do
%span.avatar-container.rect-avatar.s40.project-avatar
= source_icon(scope_menu.container, alt: scope_menu.title, class: 'avatar s40 avatar-tile', width: 40, height: 40)
%span.avatar-container.rect-avatar.s32.project-avatar
= source_icon(scope_menu.container, alt: scope_menu.title, class: 'avatar s32 avatar-tile', width: 40, height: 40)
%span.sidebar-context-title
= scope_menu.title
......@@ -2,7 +2,7 @@
.nav-sidebar-inner-scroll
.context-header
= link_to security_dashboard_path, title: _('Security Dashboard'), id: 'logo' do
%span.avatar-container.s40.settings-avatar.rect-avatar
%span.avatar-container.s32.settings-avatar.rect-avatar
= brand_header_logo
%span.sidebar-context-title
= _('Security')
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment