diff options
Diffstat (limited to 'app/assets/stylesheets/framework/sidebar.scss')
| -rw-r--r-- | app/assets/stylesheets/framework/sidebar.scss | 97 |
1 files changed, 52 insertions, 45 deletions
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index a07a57f40f7..9fdf889f4e9 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -22,7 +22,7 @@ &:not(.is-merge-request) { @include media-breakpoint-up(sm) { &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper { - padding-right: $gutter-collapsed-width; + padding-right: $right-sidebar-collapsed-width; } } } @@ -30,7 +30,7 @@ &.is-merge-request { @include media-breakpoint-up(lg) { .content-wrapper { - padding-right: $gutter-collapsed-width; + padding-right: $right-sidebar-collapsed-width; } } } @@ -56,7 +56,7 @@ z-index: $zindex-dropdown-menu; &.right-sidebar-merge-requests { - width: 300px; + width: $right-sidebar-width; @include media-breakpoint-up(md) { z-index: auto; @@ -69,21 +69,21 @@ @include media-breakpoint-only(sm) { &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper { - padding-right: $gutter-collapsed-width; + padding-right: $right-sidebar-collapsed-width; } } &:not(.is-merge-request) { @include media-breakpoint-up(md) { .content-wrapper { - padding-right: $gutter-width; + padding-right: $right-sidebar-width; } } } } .right-sidebar { - border-left: 1px solid $gray-100; + border-left: 1px solid $gray-50; &.right-sidebar-merge-requests { @include media-breakpoint-up(lg) { @@ -102,7 +102,7 @@ @mixin maintain-sidebar-dimensions { display: block; - width: $gutter-width; + width: $right-sidebar-width; } .issues-bulk-update.right-sidebar { @@ -113,7 +113,7 @@ &.right-sidebar-expanded { @include maintain-sidebar-dimensions; - width: $gutter-width; + width: $right-sidebar-width; .issuable-sidebar-header { // matches `.top-area .nav-controls` for issuable index pages @@ -140,6 +140,11 @@ .issuable-sidebar { padding: 0 3px; } + + .block { + border-bottom: 0; + padding-top: 0; + } } .issuable-sidebar .labels { @@ -266,6 +271,24 @@ } } +.merge-request-approved-icon { + animation: approval-animate 350ms ease-in; +} + +@include keyframes(approval-animate) { + 0% { + transform: scale(0); + } + + 75% { + transform: scale(1.4); + } + + 100% { + transform: scale(1); + } +} + .assignee-grid, .reviewer-grid { [data-css-area='attention'] { @@ -283,32 +306,34 @@ @mixin right-sidebar { position: fixed; - top: $header-height; - // Default value for CSS var must contain a unit - // stylelint-disable-next-line length-zero-no-unit - bottom: var(--review-bar-height, 0px); + bottom: calc(#{$calc-application-footer-height} + var(--mr-review-bar-height)); right: 0; transition: width $gl-transition-duration-medium; background-color: $white; z-index: 200; overflow: hidden; - } .right-sidebar { &:not(.right-sidebar-merge-requests) { @include right-sidebar; + top: calc(#{$header-height} + #{$calc-application-bars-height}); + + @include media-breakpoint-down(md) { + z-index: 251; + } } &.right-sidebar-merge-requests { @include media-breakpoint-down(md) { @include right-sidebar; + top: calc(#{$header-height} + #{$calc-application-bars-height}); z-index: 251; } - } - @include media-breakpoint-down(sm) { - z-index: 251; + @include media-breakpoint-down(sm) { + top: $calc-application-header-height; + } } a:not(.btn) { @@ -376,7 +401,7 @@ border-bottom: 1px solid $border-gray-normal; // This prevents the mess when resizing the sidebar // of elements repositioning themselves.. - width: $gutter-inner-width; + width: $right-sidebar-inner-width; // -- &:last-child { @@ -449,7 +474,7 @@ &.right-sidebar-expanded { &:not(.right-sidebar-merge-requests) { - width: $gutter-width; + width: $right-sidebar-width; } .value { @@ -464,28 +489,14 @@ padding: 0; .issuable-context-form { - --initial-top: calc(#{$header-height} + 76px); - --top: var(--initial-top); + $issue-sticky-header-height: 76px; - @include gl-sticky; - @include gl-overflow-auto; - - top: var(--top); - height: calc(100vh - var(--top)); + top: calc(#{$calc-application-header-height} + #{$issue-sticky-header-height}); + height: calc(#{$calc-application-viewport-height} - #{$issue-sticky-header-height} - var(--mr-review-bar-height)); + position: sticky; + overflow: auto; padding: 0 15px; - margin-bottom: calc(var(--top) * -1); - - .with-performance-bar & { - --top: calc(var(--initial-top) + #{$performance-bar-height}); - } - - .with-system-header & { - --top: calc(var(--initial-top) + #{$system-header-height}); - } - - .with-performance-bar.with-system-header & { - --top: calc(var(--initial-top) + #{$system-header-height} + #{$performance-bar-height}); - } + margin-bottom: calc((#{$header-height} + $issue-sticky-header-height) * -1); } } } @@ -543,13 +554,13 @@ } } - width: $gutter-collapsed-width; + width: $right-sidebar-collapsed-width; padding: 0; .block, .sidebar-contained-width, .issuable-sidebar-header { - width: $gutter-collapsed-width - 2px; + width: $right-sidebar-collapsed-width - 2px; padding: 0; border-bottom: 0; overflow: hidden; @@ -737,10 +748,6 @@ } } -.with-performance-bar .right-sidebar { - top: calc(#{$header-height} + #{$performance-bar-height}); -} - .issuable-show-labels { .gl-label { margin-bottom: 5px; @@ -786,7 +793,7 @@ .participants-author { &:nth-of-type(8n) { - padding-right: 0; + margin-right: 0; } .avatar.avatar-inline { |