debian-mirror-gitlab/app/assets/stylesheets/framework/contextual_sidebar.scss
2022-03-02 08:16:31 +05:30

489 lines
9.1 KiB
SCSS

//
// MIXINS
//
@mixin collapse-contextual-sidebar-content {
@include context-header-collapsed;
.context-header {
@include gl-h-auto;
a {
@include gl-p-2;
}
}
.sidebar-top-level-items > li {
.sidebar-sub-level-items {
&:not(.flyout-list) {
display: none;
}
}
}
.nav-icon-container {
margin-right: 0;
}
.toggle-sidebar-button {
width: $contextual-sidebar-collapsed-width;
.collapse-text {
display: none;
}
.icon-chevron-double-lg-left {
@include gl-rotate-180;
@include gl-m-0;
}
}
}
@mixin collapse-contextual-sidebar {
width: $contextual-sidebar-collapsed-width;
.nav-sidebar-inner-scroll {
overflow-x: hidden;
}
.badge.badge-pill:not(.fly-out-badge),
.nav-item-name,
.collapse-text {
@include gl-sr-only;
}
.sidebar-top-level-items > li > a {
min-height: unset;
}
.fly-out-top-item:not(.divider) {
display: block !important;
}
.avatar-container {
margin: 0 auto;
}
li.active:not(.fly-out-top-item) > a {
background-color: $indigo-900-alpha-008;
}
}
@mixin sub-level-items-flyout {
.sidebar-sub-level-items {
@include media-breakpoint-up(sm) {
@include gl-fixed;
@include gl-top-0;
@include gl-left-0;
@include gl-ml-3;
@include gl-mt-0;
@include gl-px-0;
@include gl-pb-2;
@include gl-pt-0;
background-color: $gray-10;
box-shadow: 0 $gl-spacing-scale-2 $gl-spacing-scale-5 $t-gray-a-24, 0 0 $gl-spacing-scale-1 $t-gray-a-24;
border-style: none;
border-radius: $border-radius-default;
.divider {
@include gl-display-none;
}
.divider + li > a {
@include gl-mt-2;
}
li:last-of-type a {
@include gl-mb-0;
}
&.is-above {
@include gl-mt-0;
}
}
a {
@include gl-px-4;
}
.fly-out-top-item {
> a {
display: flex;
}
.fly-out-badge {
margin-left: 8px;
}
}
.fly-out-top-item-name {
flex: 1;
}
}
}
@mixin context-header {
$avatar-box-shadow: inset 0 0 0 1px $t-gray-a-08;
@include gl-p-2;
@include gl-mb-2;
@include gl-mt-0;
.avatar-container {
@include gl-font-weight-normal;
flex: none;
box-shadow: $avatar-box-shadow;
&.rect-avatar {
@include gl-border-none;
.avatar.s32 {
border-radius: $border-radius-default;
box-shadow: $avatar-box-shadow;
}
}
}
}
@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;
@include gl-line-height-normal;
transition: none;
margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin;
&:hover {
background-color: $indigo-900-alpha-008;
}
}
@mixin fly-out-top-item($has-sub-items: false) {
@include gl-display-none;
a,
a:hover,
&.active a,
.fly-out-top-item-container {
@include gl-mx-0;
@include gl-px-5;
@include gl-cursor-default;
@include gl-pointer-events-none;
@include gl-font-sm;
@if $has-sub-items {
@include gl-mt-0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
} @else {
@include gl-my-n2;
@include gl-mt-0;
@include gl-relative;
@include gl-text-white;
background: var(--black, $black);
strong {
@include gl-font-weight-normal;
}
&::before {
@include gl-absolute;
content: '';
display: block;
top: 50%;
left: -$gl-spacing-scale-2;
margin-top: -$gl-spacing-scale-2;
width: 0;
height: 0;
border-top: $gl-spacing-scale-2 solid transparent;
border-bottom: $gl-spacing-scale-2 solid transparent;
border-right: $gl-spacing-scale-2 solid $black;
border-right-color: var(--black, $black);
}
}
}
}
//
// PAGE-LAYOUT
//
.page-with-contextual-sidebar {
transition: padding-left $sidebar-transition-duration;
@include media-breakpoint-up(md) {
padding-left: $contextual-sidebar-collapsed-width;
}
@include media-breakpoint-up(xl) {
padding-left: $contextual-sidebar-width;
}
.issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
padding: 10px 0 15px;
}
}
.page-with-icon-sidebar {
@include media-breakpoint-up(md) {
padding-left: $contextual-sidebar-collapsed-width;
}
}
//
// THE PANEL
//
.nav-sidebar {
@include gl-fixed;
@include gl-bottom-0;
@include gl-left-0;
transition: width $sidebar-transition-duration, left $sidebar-transition-duration;
z-index: 600;
width: $contextual-sidebar-width;
top: $header-height;
background-color: $gray-50;
transform: translate3d(0, 0, 0);
&.sidebar-collapsed-desktop {
@include collapse-contextual-sidebar;
}
&.sidebar-expanded-mobile {
left: 0;
}
a {
@include gl-text-decoration-none;
color: $gray-900;
}
li {
white-space: nowrap;
.nav-item-name {
flex: 1;
}
> a,
> .fly-out-top-item-container {
@include top-level-item;
}
&.active {
> a {
font-weight: $gl-font-weight-bold;
}
&:not(.fly-out-top-item) {
> a:not(.has-sub-items) {
background-color: $indigo-900-alpha-008;
}
}
}
}
ul {
padding-left: 0;
list-style: none;
}
@include media-breakpoint-down(sm) {
left: (-$contextual-sidebar-width);
}
.nav-icon-container {
display: flex;
margin-right: 8px;
}
a:not(.has-sub-items) + .sidebar-sub-level-items {
.fly-out-top-item {
@include fly-out-top-item($has-sub-items: false);
}
}
a.has-sub-items + .sidebar-sub-level-items {
@include media-breakpoint-up(sm) {
min-width: 150px;
}
.fly-out-top-item {
@include fly-out-top-item($has-sub-items: true);
}
}
a.has-sub-items + .sidebar-sub-level-items.fly-out-list {
@include gl-mt-n2;
&.is-above {
@include gl-mt-2;
}
}
@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;
@include collapse-contextual-sidebar-content;
}
}
}
.nav-sidebar-inner-scroll {
@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 {
// TODO: Remove this block once all sidebar badges use gl_badge_tag
// https://gitlab.com/gitlab-org/gitlab/-/issues/350061
.badge.badge-pill:not(.gl-badge) {
@include gl-rounded-lg;
@include gl-py-1;
@include gl-px-3;
background-color: $blue-100;
color: $blue-700;
}
&.active {
.sidebar-sub-level-items:not(.is-fly-out-only) {
display: block;
}
// TODO: Remove this block once all sidebar badges use gl_badge_tag
// https://gitlab.com/gitlab-org/gitlab/-/issues/350061
.badge.badge-pill:not(.gl-badge) {
@include gl-font-weight-normal;
color: $blue-700;
}
}
}
li > a.gl-link {
// undo gl-link text items for things in the sidebar - including sub menus
// defined in https://gitlab.com/gitlab-org/gitlab-ui/-/blob/5431e0ca5149d4e02e3d5d617d194ac9609bb82d/src/components/base/link/link.scss
@include gl-text-body;
&:active,
&:focus,
&:focus:active {
@include gl-text-decoration-none;
}
}
}
.sidebar-sub-level-items {
@include gl-py-0;
@include gl-display-none;
&:not(.fly-out-list) {
li > a {
// The calculation formula:
// 12px: normal padding on the menu anchors
// +
// 16px: the width of the SVG icon in the top-level links
// +
// 8px: margin-right on the SVG icon in the top-level links
// =
// 36px (4.5 times the $grid-size)
padding-left: $grid-size * 4.5;
}
}
}
.is-showing-fly-out {
@include sub-level-items-flyout;
}
//
// COLLAPSED STATE
//
.toggle-sidebar-button,
.close-nav-button {
@include side-panel-toggle;
background-color: $gray-50;
border-top: 1px solid $border-color;
position: fixed;
bottom: 0;
width: $contextual-sidebar-width;
.collapse-text,
.icon-chevron-double-lg-left,
.icon-chevron-double-lg-right {
color: inherit;
}
}
.collapse-text {
white-space: nowrap;
overflow: hidden;
}
.sidebar-collapsed-desktop {
@include collapse-contextual-sidebar-content;
}
//
// MOBILE PANEL
//
.close-nav-button {
display: none;
}
@include media-breakpoint-down(sm) {
.close-nav-button {
display: flex;
}
.toggle-sidebar-button {
display: none;
}
.mobile-overlay {
display: none;
&.mobile-nav-open {
display: block;
position: fixed;
background-color: $black-transparent;
height: 100%;
width: 100%;
z-index: $zindex-dropdown-menu;
}
}
}
//
// PANELS-SPECIFIC
//
.settings-avatar {
svg {
margin: auto;
}
}