diff options
Diffstat (limited to 'app/assets/stylesheets/pages/repo.scss')
-rw-r--r-- | app/assets/stylesheets/pages/repo.scss | 324 |
1 files changed, 324 insertions, 0 deletions
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss new file mode 100644 index 00000000000..1f4d4698199 --- /dev/null +++ b/app/assets/stylesheets/pages/repo.scss @@ -0,0 +1,324 @@ +.fade-enter-active, +.fade-leave-active { + transition: opacity $sidebar-transition-duration; +} + +.monaco-loader { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: $black-transparent; +} + +.modal.popup-dialog { + display: block; + background-color: $black-transparent; + z-index: 2100; + + @media (min-width: $screen-md-min) { + .modal-dialog { + width: 600px; + margin: 30px auto; + } + } +} + +.project-refs-form, +.project-refs-target-form { + display: inline-block; +} + +.fade-enter, +.fade-leave-to { + opacity: 0; +} + +.commit-message { + @include str-truncated(250px); +} + +.editable-mode { + display: inline-block; +} + +.blob-viewer[data-type="rich"] { + margin: 20px; +} + +.repository-view { + border: 1px solid $border-color; + border-radius: $border-radius-default; + color: $almost-black; + + .tree-content-holder { + display: flex; + max-height: 100vh; + min-height: 300px; + } + + .tree-content-holder-mini { + height: 100vh; + } + + .panel-right { + display: flex; + flex-direction: column; + width: 80%; + height: 100%; + + .monaco-editor.vs { + .line-numbers { + cursor: pointer; + + &:hover { + text-decoration: underline; + } + } + + .cursor { + display: none !important; + } + } + + &.edit-mode { + .blob-viewer-container { + overflow: hidden; + } + + .monaco-editor.vs { + .cursor { + background: $black; + border-color: $black; + display: block !important; + } + } + } + + .blob-viewer-container { + flex: 1; + overflow: auto; + } + + #tabs { + flex-shrink: 0; + display: flex; + width: 100%; + padding-left: 0; + margin-bottom: 0; + white-space: nowrap; + overflow-y: hidden; + overflow-x: auto; + + li { + animation: swipeRightAppear ease-in 0.1s; + animation-iteration-count: 1; + transform-origin: 0% 50%; + list-style-type: none; + background: $gray-normal; + display: inline-block; + padding: 10px 18px; + border-right: 1px solid $white-dark; + border-bottom: 1px solid $white-dark; + white-space: nowrap; + cursor: pointer; + + &.remove { + animation: swipeRightDissapear ease-in 0.1s; + animation-iteration-count: 1; + transform-origin: 0% 50%; + + a { + width: 0; + } + } + + &.active { + background: $white-light; + border-bottom: none; + } + + a { + @include str-truncated(100px); + color: $black; + width: 100px; + text-align: center; + vertical-align: middle; + text-decoration: none; + + &.close { + width: auto; + font-size: 15px; + opacity: 1; + margin-right: -6px; + } + } + + .close-icon, + .unsaved-icon { + float: right; + margin-top: 3px; + margin-left: 15px; + color: $gray-darkest; + } + + .unsaved-icon { + color: $brand-success; + } + + &.tabs-divider { + width: 100%; + background-color: $white-light; + border-right: none; + border-top-right-radius: 2px; + } + } + } + + #repo-file-buttons { + background-color: $white-light; + border-bottom: 1px solid $white-normal; + padding: 5px 10px; + position: relative; + border-top: 1px solid $white-normal; + margin-top: -5px; + } + + #binary-viewer { + height: 80vh; + overflow: auto; + margin: 0; + + .blob-viewer { + padding-top: 20px; + padding-left: 20px; + } + + .binary-unknown { + text-align: center; + padding-top: 100px; + background: $gray-light; + height: 100%; + font-size: 17px; + + span { + display: block; + } + } + } + } + + #commit-area { + background: $gray-light; + padding: 20px; + + .help-block { + padding-top: 7px; + margin-top: 0; + } + } + + #view-toggler { + height: 41px; + position: relative; + display: block; + border-bottom: 1px solid $white-normal; + background: $white-light; + margin-top: -5px; + } + + #binary-viewer { + img { + max-width: 100%; + } + } + + #sidebar { + flex: 1; + height: 100%; + + &.sidebar-mini { + width: 20%; + border-right: 1px solid $white-normal; + overflow: auto; + } + + table { + margin-bottom: 0; + } + + tr { + animation: fadein 0.5s; + cursor: pointer; + + &.repo-file-options td { + padding: 0; + border-top: none; + background: $gray-light; + width: 100%; + display: inline-block; + + &:first-child { + border-top-left-radius: 2px; + } + + .title { + display: inline-block; + font-size: 10px; + text-transform: uppercase; + font-weight: bold; + color: $gray-darkest; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: middle; + padding: 2px 16px; + } + } + + .file-icon { + margin-right: 5px; + } + + td { + white-space: nowrap; + } + } + + a { + @include str-truncated(250px); + color: $almost-black; + display: inline-block; + vertical-align: middle; + } + } +} + +.render-error { + min-height: calc(100vh - 62px); + + p { + width: 100%; + } +} + +@keyframes swipeRightAppear { + 0% { + transform: scaleX(0.00); + } + + 100% { + transform: scaleX(1.00); + } +} + +@keyframes swipeRightDissapear { + 0% { + transform: scaleX(1.00); + } + + 100% { + transform: scaleX(0.00); + } +} |