diff options
Diffstat (limited to 'app/assets/stylesheets/pages/repo.scss')
| -rw-r--r-- | app/assets/stylesheets/pages/repo.scss | 303 |
1 files changed, 262 insertions, 41 deletions
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index 1f6f7138e1f..e74606e864f 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -17,6 +17,7 @@ } .ide-view { + position: relative; display: flex; height: calc(100vh - #{$header-height}); margin-top: 0; @@ -54,6 +55,7 @@ white-space: nowrap; text-overflow: ellipsis; max-width: inherit; + line-height: 22px; svg { vertical-align: middle; @@ -66,13 +68,21 @@ } } + .ide-file-icon-holder { + display: flex; + align-items: center; + } + .ide-file-changed-icon { margin-left: auto; + + > svg { + display: block; + } } .ide-new-btn { display: none; - margin-bottom: -4px; margin-right: -8px; } @@ -85,10 +95,8 @@ } } - &.folder { - svg { - fill: $gl-text-color-secondary; - } + .folder-icon { + fill: $gl-text-color-secondary; } } @@ -106,6 +114,7 @@ .file-col-commit-message { display: flex; overflow: visible; + align-items: center; padding: 6px 12px; } @@ -308,18 +317,81 @@ height: 100%; } -.multi-file-editor-btn-group { - padding: $gl-bar-padding $gl-padding; - border-top: 1px solid $white-dark; +.preview-container { + height: 100%; + overflow: auto; + + .file-container { + background-color: $gray-darker; + display: flex; + height: 100%; + align-items: center; + justify-content: center; + + text-align: center; + + .file-content { + padding: $gl-padding; + max-width: 100%; + max-height: 100%; + + img { + max-width: 90%; + max-height: 90%; + } + + .isZoomable { + cursor: pointer; + cursor: zoom-in; + + &.isZoomed { + cursor: pointer; + cursor: zoom-out; + max-width: none; + max-height: none; + margin-right: $gl-padding; + } + } + } + + .file-info { + font-size: $label-font-size; + color: $diff-image-info-color; + } + } + + .md-previewer { + padding: $gl-padding; + } +} + +.ide-mode-tabs { border-bottom: 1px solid $white-dark; - background: $white-light; + + .nav-links { + border-bottom: 0; + + li a { + padding: $gl-padding-8 $gl-padding; + line-height: $gl-btn-line-height; + } + } +} + +.ide-btn-group { + padding: $gl-padding-4 $gl-vert-padding; } .ide-status-bar { + border-top: 1px solid $white-dark; padding: $gl-bar-padding $gl-padding; background: $white-light; display: flex; - justify-content: space-between; + justify-content: flex-end; + + > div + div { + padding-left: $gl-padding; + } svg { vertical-align: middle; @@ -370,6 +442,7 @@ .projects-sidebar { display: flex; flex-direction: column; + flex: 1; .context-header { width: auto; @@ -379,8 +452,8 @@ .multi-file-commit-panel-inner { display: flex; - flex: 1; flex-direction: column; + height: 100%; } .multi-file-commit-panel-inner-scroll { @@ -461,9 +534,13 @@ overflow: auto; } -.multi-file-commit-empty-state-container { - align-items: center; - justify-content: center; +.ide-commit-empty-state { + padding: 0 $gl-padding; +} + +.ide-commit-empty-state-container { + margin-top: auto; + margin-bottom: auto; } .multi-file-commit-panel-header { @@ -472,35 +549,23 @@ margin-bottom: 0; border-bottom: 1px solid $white-dark; padding: $gl-btn-padding 0; - - &.is-collapsed { - border-bottom: 1px solid $white-dark; - - svg { - margin-left: auto; - margin-right: auto; - } - - .multi-file-commit-panel-collapse-btn { - margin-right: auto; - margin-left: auto; - border-left: 0; - } - } + min-height: 56px; } .multi-file-commit-panel-header-title { display: flex; flex: 1; - padding: 0 $gl-btn-padding; + padding-left: $grid-size; svg { margin-right: $gl-btn-padding; + color: $theme-gray-700; } } .multi-file-commit-panel-collapse-btn { border-left: 1px solid $white-dark; + margin-left: auto; } .multi-file-commit-list { @@ -514,12 +579,14 @@ display: flex; padding: 0; align-items: center; + border-radius: $border-radius-default; .multi-file-discard-btn { display: none; + margin-top: -2px; margin-left: auto; + margin-right: $grid-size; color: $gl-link-color; - padding: 0 2px; &:focus, &:hover { @@ -531,26 +598,31 @@ background: $white-normal; .multi-file-discard-btn { - display: block; + display: flex; } } } -.multi-file-addition { - fill: $green-500; +.multi-file-addition, +.multi-file-addition-solid { + color: $green-500; } -.multi-file-modified { - fill: $orange-500; +.multi-file-modified, +.multi-file-modified-solid { + color: $orange-500; } .multi-file-commit-list-collapsed { display: flex; flex-direction: column; + padding: $gl-padding 0; - > svg { + svg { + display: block; margin-left: auto; margin-right: auto; + color: $theme-gray-700; } .file-status-icon { @@ -562,7 +634,7 @@ .multi-file-commit-list-path { padding: $grid-size / 2; - padding-left: $gl-padding; + padding-left: $grid-size; background: none; border: 0; text-align: left; @@ -602,9 +674,22 @@ } } -.multi-file-commit-message.form-control { - height: 160px; - resize: none; +.multi-file-commit-panel-bottom { + position: relative; + + .multi-file-commit-panel-success-message { + position: absolute; + top: 1px; + left: 3px; + bottom: 0; + right: 0; + z-index: 10; + background: $gray-light; + overflow: auto; + display: flex; + flex-direction: column; + justify-content: center; + } } .dirty-diff { @@ -752,6 +837,41 @@ } } +.ide-commit-list-container { + display: flex; + flex-direction: column; + width: 100%; + padding: 0 16px; + + &:not(.is-collapsed) { + flex: 1; + min-height: 140px; + } + + &.is-collapsed { + .multi-file-commit-panel-header { + margin-left: -$gl-padding; + margin-right: -$gl-padding; + + svg { + margin-left: auto; + margin-right: auto; + } + + .multi-file-commit-panel-collapse-btn { + margin-right: auto; + margin-left: auto; + border-left: 0; + } + } + } +} + +.ide-staged-action-btn { + margin-left: auto; + color: $gl-link-color; +} + .ide-commit-radios { label { font-weight: normal; @@ -779,3 +899,104 @@ align-items: center; font-weight: $gl-font-weight-bold; } + +.ide-file-finder-overlay { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 100; +} + +.ide-file-finder { + top: 10px; + left: 50%; + transform: translateX(-50%); + + .highlighted { + color: $blue-500; + font-weight: $gl-font-weight-bold; + } +} + +.ide-commit-message-field { + height: 200px; + background-color: $white-light; + + .md-area { + display: flex; + flex-direction: column; + height: 100%; + } + + .nav-links { + height: 30px; + } + + .help-block { + margin-top: 2px; + color: $blue-500; + cursor: pointer; + } +} + +.ide-commit-message-textarea-container { + position: relative; + width: 100%; + height: 100%; + overflow: hidden; + + .note-textarea { + font-family: $monospace_font; + } +} + +.ide-commit-message-highlights-container { + position: absolute; + left: 0; + top: 0; + right: -100px; + bottom: 0; + padding-right: 100px; + pointer-events: none; + z-index: 1; + + .highlights { + white-space: pre-wrap; + word-wrap: break-word; + color: transparent; + } + + mark { + margin-left: -1px; + padding: 0 2px; + border-radius: $border-radius-small; + background-color: $orange-200; + color: transparent; + opacity: 0.6; + } +} + +.ide-commit-message-textarea { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + z-index: 2; + background: transparent; + resize: none; +} + +.ide-tree-changes { + display: flex; + align-items: center; + font-size: 12px; +} + +.ide-new-modal-label { + line-height: 34px; +} |