diff options
Diffstat (limited to 'app/assets/stylesheets/framework/files.scss')
| -rw-r--r-- | app/assets/stylesheets/framework/files.scss | 205 |
1 files changed, 97 insertions, 108 deletions
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index b28302f29ef..9ea5a66b3bc 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -142,106 +142,6 @@ padding: 100px 0; } - /** - * Blame file - */ - &.blame { - table { - border: 0; - margin: 0; - } - - // - // IMPORTANT PERFORMANCE OPTIMIZATION - // - // When viewinng a blame with many commits a lot of content is rendered on the page. - // content-visibility rule below ensure that we only render what is visible to the user, - // thus reducing TBT in the browser. - // Grid is used instead of table layout because content-visibility performs better with it. - tr { - content-visibility: auto; - display: grid; - grid-template-columns: 400px max-content auto; - border-bottom: 1px solid $gray-darker; - - &:last-child { - border-bottom: 0; - } - } - - td { - border-top: 0; - border-bottom: 0; - - &:first-child { - border-left: 0; - } - - &:last-child { - border-right: 0; - } - - &.blame-commit { - padding: 5px 10px; - min-width: 400px; - max-width: 400px; - background: $gray-light; - border-left: 3px solid; - - .commit-row-title { - display: flex; - } - - .item-title { - flex: 1; - margin-right: 0.5em; - } - } - - &.line-numbers { - float: none; - border-left: 1px solid $gray-100; - - .file-line-num { - @include gl-min-w-9; - } - - i { - float: none; - margin-right: 0; - } - } - - &.lines { - padding: 0; - } - - .code { - height: 100%; - } - } - - @for $i from 0 through 5 { - td.blame-commit-age-#{$i} { - border-left-color: mix($blame-cyan, $blame-blue, $i / 5 * 100%); - } - } - - @for $i from 1 through 4 { - td.blame-commit-age-#{$i + 5} { - border-left-color: mix($blame-gray, $blame-cyan, $i / 4 * 100%); - } - } - - .doc-versions { - color: $gray-400; - - &:hover { - color: $gray-900; - } - } - } - &.logs { background: $gray-darker; max-height: 700px; @@ -271,14 +171,6 @@ } } - /** - * Code file - */ - &.code { - padding: 0; - border-radius: 0 0 $border-radius-default $border-radius-default; - } - .list-inline.previews { display: flex; flex-wrap: wrap; @@ -591,3 +483,100 @@ span.idiff { .file-holder [data-loading] .file-content *:nth-of-type(1n+30) { @include gl-display-none; } + +.tree-list-scroll:not(.tree-list-blobs) { + .tree-list-parent::before { + @include gl-content-empty; + @include gl-absolute; + @include gl-z-index-1; + @include gl-pointer-events-none; + + top: 28px; + left: calc(14px + (var(--level) * 16px)); + width: 1px; + height: calc(100% - 24px); + background-color: var(--gray-100, $gray-100); + } +} + +.blame-table { + margin: 0; +} + +.blame-table-wrapper { + overflow-x: auto; + min-width: max-content; +} + +.blame { + position: relative; + + .tr { + display: flex; + border-bottom: 1px solid $gray-darker; + + &.last-row { + border-bottom: 0; + } + } + + .blame-commit { + padding: 5px 10px; + width: 400px; + flex: none; + background: $gray-light; + border-left: 3px solid; + + .commit-row-title { + display: flex; + } + + .item-title { + flex: 1; + margin-right: 0.5em; + } + } + + .lines { + flex: 1; + } + + .code { + height: 100%; + } + + @for $i from 0 through 5 { + .blame-commit-age-#{$i} { + border-left-color: mix($blame-cyan, $blame-blue, $i / 5 * 100%); + } + } + + @for $i from 1 through 4 { + .blame-commit-age-#{$i + 5} { + border-left-color: mix($blame-gray, $blame-cyan, $i / 4 * 100%); + } + } + + .doc-versions { + color: $gray-400; + + &:hover { + color: $gray-900; + } + } +} + +.blame.file-content .td.line-numbers { + float: none; + border-left: 1px solid $gray-100; + border-radius: 0; + + .file-line-num { + @include gl-min-w-9; + } +} + +.code { + padding: 0; + border-radius: 0 0 $border-radius-default $border-radius-default; +} |