72157766a2
* master: (33 commits) Ignore SQL CACHE hits in Sherlock Fix SQL timings for the performance bar Find the LFS-objects for a fork within a the fork network Remove bottom-border from last responsive table row Add system hooks user_rename and group_rename Unlink a project from a fork network when it's source was deleted. Make sure the settings page renders when root of a fork is deleted Remove Peek's original keyboard shortcut (numpad 0, keycode 96) Add application setting to Auto DevOps docs Enable MergeableSelector in scss-lint (for !14567) Enable MergeableSelector in scss-lint (for !14055) Enable MergeableSelector in scss-lint (for !14062) Enable MergeableSelector in scss-lint (for !14398) Enable MergeableSelector in scss-lint (for !13480) Enable MergeableSelector in scss-lint (for !13473) Enable MergeableSelector in scss-lint (for !13600) Enable MergeableSelector in scss-lint Resolve ""To do" should be "Todos" on Todos list page" Avoid regenerating the ref path for the environment Remove white space at bottom of issue boards ...
493 lines
8.1 KiB
SCSS
493 lines
8.1 KiB
SCSS
.page-with-contextual-sidebar {
|
|
@media (min-width: $screen-md-min) {
|
|
padding-left: $contextual-sidebar-collapsed-width;
|
|
}
|
|
|
|
@media (min-width: $screen-lg-min) {
|
|
padding-left: $contextual-sidebar-width;
|
|
}
|
|
|
|
// Override position: absolute
|
|
.right-sidebar {
|
|
position: fixed;
|
|
height: calc(100% - #{$header-height});
|
|
}
|
|
|
|
.issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header {
|
|
padding: 10px 0 15px;
|
|
}
|
|
}
|
|
|
|
.page-with-icon-sidebar {
|
|
@media (min-width: $screen-sm-min) {
|
|
padding-left: $contextual-sidebar-collapsed-width;
|
|
}
|
|
}
|
|
|
|
.context-header {
|
|
position: relative;
|
|
margin-right: 2px;
|
|
|
|
a {
|
|
font-weight: $gl-font-weight-bold;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 16px 10px 10px;
|
|
color: $gl-text-color;
|
|
}
|
|
|
|
&:hover,
|
|
a:hover {
|
|
background-color: $link-hover-background;
|
|
color: $gl-text-color;
|
|
|
|
.settings-avatar {
|
|
svg {
|
|
fill: $gl-text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.avatar-container {
|
|
flex: 0 0 40px;
|
|
background-color: $white-light;
|
|
}
|
|
|
|
.sidebar-context-title {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.settings-avatar {
|
|
background-color: $white-light;
|
|
|
|
svg {
|
|
fill: $gl-text-color-secondary;
|
|
margin: auto;
|
|
}
|
|
}
|
|
|
|
.nav-sidebar {
|
|
position: fixed;
|
|
z-index: 400;
|
|
width: $contextual-sidebar-width;
|
|
transition: left $sidebar-transition-duration;
|
|
top: $header-height;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: $gray-light;
|
|
box-shadow: inset -2px 0 0 $border-color;
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
&:not(.sidebar-icons-only) {
|
|
@media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
|
|
box-shadow: inset -2px 0 0 $border-color,
|
|
2px 1px 3px $dropdown-shadow-color;
|
|
}
|
|
}
|
|
|
|
&.sidebar-icons-only {
|
|
width: auto;
|
|
min-width: $contextual-sidebar-collapsed-width;
|
|
|
|
.nav-sidebar-inner-scroll {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.badge:not(.fly-out-badge),
|
|
.sidebar-context-title,
|
|
.nav-item-name {
|
|
display: none;
|
|
}
|
|
|
|
.sidebar-top-level-items > li > a {
|
|
min-height: 44px;
|
|
}
|
|
|
|
.fly-out-top-item {
|
|
display: block;
|
|
}
|
|
|
|
.avatar-container {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
&.nav-sidebar-expanded {
|
|
left: 0;
|
|
}
|
|
|
|
a {
|
|
transition: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
ul {
|
|
padding-left: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
li {
|
|
white-space: nowrap;
|
|
|
|
a {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
color: $gl-text-color-secondary;
|
|
}
|
|
|
|
svg {
|
|
fill: $gl-text-color-secondary;
|
|
}
|
|
|
|
.nav-item-name {
|
|
flex: 1;
|
|
}
|
|
|
|
&.active {
|
|
> a {
|
|
font-weight: $gl-font-weight-bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: $screen-xs-max) {
|
|
left: (-$contextual-sidebar-width);
|
|
}
|
|
|
|
.nav-icon-container {
|
|
display: flex;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.fly-out-top-item {
|
|
display: none;
|
|
}
|
|
|
|
svg {
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
}
|
|
|
|
.nav-sidebar-inner-scroll {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: auto;
|
|
|
|
@media (min-width: $screen-sm-min) {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.with-performance-bar .nav-sidebar {
|
|
top: $header-height + $performance-bar-height;
|
|
}
|
|
|
|
.sidebar-sub-level-items {
|
|
display: none;
|
|
padding-bottom: 8px;
|
|
|
|
> li {
|
|
a {
|
|
padding: 8px 16px 8px 40px;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: $link-active-background;
|
|
color: $gl-text-color;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
background: $link-active-background;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar-top-level-items {
|
|
margin-bottom: 60px;
|
|
|
|
> li {
|
|
> a {
|
|
@media (min-width: $screen-sm-min) {
|
|
margin-right: 2px;
|
|
}
|
|
|
|
&:hover {
|
|
color: $gl-text-color;
|
|
|
|
svg {
|
|
fill: $gl-text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-showing-fly-out {
|
|
> a {
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.sidebar-sub-level-items {
|
|
@media (min-width: $screen-sm-min) {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
min-width: 150px;
|
|
margin-top: -1px;
|
|
padding: 4px 1px;
|
|
background-color: $white-light;
|
|
box-shadow: 2px 1px 3px $dropdown-shadow-color;
|
|
border: 1px solid $gray-darker;
|
|
border-left: 0;
|
|
border-radius: 0 3px 3px 0;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -30px;
|
|
bottom: -30px;
|
|
left: -10px;
|
|
right: -30px;
|
|
z-index: -1;
|
|
}
|
|
|
|
&.is-above {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.divider {
|
|
height: 1px;
|
|
margin: 4px -1px;
|
|
padding: 0;
|
|
background-color: $dropdown-divider-color;
|
|
}
|
|
|
|
> .active {
|
|
box-shadow: none;
|
|
|
|
> a {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
a {
|
|
padding: 8px 16px;
|
|
color: $gl-text-color;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: $gray-darker;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.badge {
|
|
background-color: $inactive-badge-background;
|
|
color: $gl-text-color-secondary;
|
|
}
|
|
|
|
&.active {
|
|
background: $link-active-background;
|
|
|
|
> a {
|
|
margin-left: 4px;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.badge {
|
|
font-weight: $gl-font-weight-bold;
|
|
}
|
|
|
|
.sidebar-sub-level-items:not(.is-fly-out-only) {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&.active > a:hover,
|
|
&.is-over > a {
|
|
background-color: $link-hover-background;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Collapsed nav
|
|
|
|
.toggle-sidebar-button,
|
|
.close-nav-button {
|
|
width: $contextual-sidebar-width - 2px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
padding: 16px;
|
|
background-color: $gray-light;
|
|
border: 0;
|
|
border-top: 2px solid $border-color;
|
|
color: $gl-text-color-secondary;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
svg {
|
|
fill: $gl-text-color-secondary;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.icon-angle-double-right {
|
|
display: none;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $border-color;
|
|
color: $gl-text-color;
|
|
|
|
svg {
|
|
fill: $gl-text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toggle-sidebar-button {
|
|
@media (max-width: $screen-xs-max) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
.sidebar-icons-only {
|
|
.context-header {
|
|
height: 61px;
|
|
|
|
a {
|
|
padding: 10px 4px;
|
|
}
|
|
}
|
|
|
|
li a {
|
|
padding: 12px 15px;
|
|
}
|
|
|
|
.sidebar-top-level-items > li {
|
|
&.active a {
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.sidebar-sub-level-items {
|
|
&:not(.flyout-list) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-icon-container {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.toggle-sidebar-button {
|
|
width: $contextual-sidebar-collapsed-width - 2px;
|
|
padding: 16px;
|
|
|
|
.collapse-text,
|
|
.icon-angle-double-left {
|
|
display: none;
|
|
}
|
|
|
|
.icon-angle-double-right {
|
|
display: block;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fly-out-top-item {
|
|
> a {
|
|
display: flex;
|
|
}
|
|
|
|
.fly-out-badge {
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
|
|
.fly-out-top-item-name {
|
|
flex: 1;
|
|
}
|
|
|
|
// Mobile nav
|
|
|
|
.close-nav-button {
|
|
display: none;
|
|
}
|
|
|
|
.toggle-mobile-nav {
|
|
display: none;
|
|
background-color: transparent;
|
|
border: 0;
|
|
padding: 6px 16px;
|
|
margin: 0 0 0 -15px;
|
|
height: 46px;
|
|
|
|
i {
|
|
font-size: 20px;
|
|
color: $gl-text-color-secondary;
|
|
}
|
|
|
|
@media (max-width: $screen-xs-max) {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
i {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $screen-xs-max) {
|
|
+ .breadcrumbs-links {
|
|
padding-left: $gl-padding;
|
|
border-left: 1px solid $gl-text-color-quaternary;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: $screen-xs-max) {
|
|
.close-nav-button {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.mobile-overlay {
|
|
display: none;
|
|
|
|
&.mobile-nav-open {
|
|
display: block;
|
|
position: fixed;
|
|
background-color: $black-transparent;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 300;
|
|
}
|
|
}
|
|
|
|
|
|
// Make issue boards full-height now that sub-nav is gone
|
|
|
|
.boards-list {
|
|
height: calc(100vh - #{$header-height});
|
|
|
|
@media (min-width: $screen-sm-min) {
|
|
height: calc(100vh - 180px);
|
|
}
|
|
}
|
|
|
|
.with-performance-bar .boards-list {
|
|
height: calc(100vh - #{$header-height} - #{$performance-bar-height});
|
|
}
|