diff options
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r-- | app/assets/stylesheets/framework/animations.scss | 78 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/layout.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/markdown_area.scss | 10 | ||||
-rw-r--r-- | app/assets/stylesheets/new_sidebar.scss | 8 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/diff.scss | 6 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/issuable.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/repo.scss | 124 |
7 files changed, 114 insertions, 120 deletions
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index 3cd7f81da47..667b73e150d 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -187,3 +187,81 @@ a { .fade-in-full { animation: fadeInFull $fade-in-duration 1; } + + +.animation-container { + background: $repo-editor-grey; + height: 40px; + overflow: hidden; + position: relative; + + &.animation-container-small { + height: 12px; + } + + &::before { + animation-duration: 1s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: blockTextShine; + animation-timing-function: linear; + background-image: $repo-editor-linear-gradient; + background-repeat: no-repeat; + background-size: 800px 45px; + content: ' '; + display: block; + height: 100%; + position: relative; + } + + div { + background: $white-light; + height: 6px; + left: 0; + position: absolute; + right: 0; + } + + .skeleton-line-1 { + left: 0; + top: 8px; + } + + .skeleton-line-2 { + left: 150px; + top: 0; + height: 10px; + } + + .skeleton-line-3 { + left: 0; + top: 23px; + } + + .skeleton-line-4 { + left: 0; + top: 38px; + } + + .skeleton-line-5 { + left: 200px; + top: 28px; + height: 10px; + } + + .skeleton-line-6 { + top: 14px; + left: 230px; + height: 10px; + } +} + +@keyframes blockTextShine { + 0% { + transform: translateX(-468px); + } + + 100% { + transform: translateX(468px); + } +} diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index bd0367f86dd..bd521028c44 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -117,10 +117,6 @@ body { margin-top: $header-height + $performance-bar-height; } -[v-cloak] { - display: none; -} - .vertical-center { min-height: 100vh; display: flex; diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index fcd4c72b430..e3920b5d3d9 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -204,6 +204,16 @@ } } + div.avatar { + display: inline-flex; + justify-content: center; + align-items: center; + + .center { + line-height: 14px; + } + } + strong { color: $gl-text-color; } diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss index faedd207e01..d078c8b956b 100644 --- a/app/assets/stylesheets/new_sidebar.scss +++ b/app/assets/stylesheets/new_sidebar.scss @@ -97,9 +97,9 @@ $new-sidebar-collapsed-width: 50px; top: $header-height; bottom: 0; left: 0; - overflow: auto; background-color: $gray-normal; box-shadow: inset -2px 0 0 $border-color; + transform: translate3d(0, 0, 0); &.sidebar-icons-only { width: $new-sidebar-collapsed-width; @@ -176,6 +176,12 @@ $new-sidebar-collapsed-width: 50px; } } +.nav-sidebar-inner-scroll { + height: 100%; + width: 100%; + overflow: auto; +} + .with-performance-bar .nav-sidebar { top: $header-height + $performance-bar-height; } diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 215bedc04fd..913a1a95dca 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -560,9 +560,13 @@ } .diff-files-changed { + .inline-parallel-buttons { + position: relative; + z-index: 1; + } + .commit-stat-summary { @include new-style-dropdown; - z-index: -1; @media (min-width: $screen-sm-min) { margin-left: -$gl-padding; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index d14b976374c..87eaf27663f 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -8,13 +8,13 @@ .is-confidential { color: $orange-600; background-color: $orange-50; - border-radius: 3px; + border-radius: $border-radius-default; padding: 5px; margin: 0 3px 0 -4px; } .is-not-confidential { - border-radius: 3px; + border-radius: $border-radius-default; padding: 5px; margin: 0 3px 0 -4px; } diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index ad17078c98a..b3527fe8cd9 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -1,6 +1,6 @@ .fade-enter-active, .fade-leave-active { - transition: opacity .5s; + transition: opacity $sidebar-transition-duration; } .monaco-loader { @@ -28,11 +28,6 @@ .project-refs-form, .project-refs-target-form { display: inline-block; - - &.disabled { - opacity: 0.5; - pointer-events: none; - } } .fade-enter, @@ -90,7 +85,7 @@ } .blob-viewer-container { - height: calc(100vh - 63px); + height: calc(100vh - 62px); overflow: auto; } @@ -114,6 +109,7 @@ border-right: 1px solid $white-dark; border-bottom: 1px solid $white-dark; white-space: nowrap; + cursor: pointer; &.remove { animation: swipeRightDissapear ease-in 0.1s; @@ -133,10 +129,10 @@ a { @include str-truncated(100px); color: $black; - display: inline-block; width: 100px; text-align: center; vertical-align: middle; + text-decoration: none; &.close { width: auto; @@ -146,15 +142,15 @@ } } - i.fa.fa-times, - i.fa.fa-circle { + .close-icon, + .unsaved-icon { float: right; margin-top: 3px; margin-left: 15px; color: $gray-darkest; } - i.fa.fa-circle { + .unsaved-icon { color: $brand-success; } @@ -204,7 +200,7 @@ background: $gray-light; padding: 20px; - span.help-block { + .help-block { padding-top: 7px; margin-top: 0; } @@ -232,6 +228,7 @@ vertical-align: top; width: 20%; border-right: 1px solid $white-normal; + min-height: 475px; height: calc(100vh + 20px); overflow: auto; } @@ -261,7 +258,6 @@ text-transform: uppercase; font-weight: bold; color: $gray-darkest; - width: 185px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -270,7 +266,7 @@ } } - .fa { + .file-icon { margin-right: 5px; } @@ -280,118 +276,22 @@ } a { + @include str-truncated(250px); color: $almost-black; display: inline-block; vertical-align: middle; } - - ul { - list-style-type: none; - padding: 0; - - li { - border-bottom: 1px solid $border-gray-normal; - padding: 10px 20px; - - a { - color: $almost-black; - } - - .fa { - font-size: $code_font_size; - margin-right: 5px; - } - } - } - } - -} - -.animation-container { - background: $repo-editor-grey; - height: 40px; - overflow: hidden; - position: relative; - - &.animation-container-small { - height: 12px; - } - - &::before { - animation-duration: 1s; - animation-fill-mode: forwards; - animation-iteration-count: infinite; - animation-name: blockTextShine; - animation-timing-function: linear; - background-image: $repo-editor-linear-gradient; - background-repeat: no-repeat; - background-size: 800px 45px; - content: ' '; - display: block; - height: 100%; - position: relative; - } - - div { - background: $white-light; - height: 6px; - left: 0; - position: absolute; - right: 0; - } - - .line-of-code-1 { - left: 0; - top: 8px; - } - - .line-of-code-2 { - left: 150px; - top: 0; - height: 10px; - } - - .line-of-code-3 { - left: 0; - top: 23px; - } - - .line-of-code-4 { - left: 0; - top: 38px; - } - - .line-of-code-5 { - left: 200px; - top: 28px; - height: 10px; - } - - .line-of-code-6 { - top: 14px; - left: 230px; - height: 10px; } } .render-error { - min-height: calc(100vh - 63px); + min-height: calc(100vh - 62px); p { width: 100%; } } -@keyframes blockTextShine { - 0% { - transform: translateX(-468px); - } - - 100% { - transform: translateX(468px); - } -} - @keyframes swipeRightAppear { 0% { transform: scaleX(0.00); |