diff options
Diffstat (limited to 'app/assets/stylesheets/pages')
| -rw-r--r-- | app/assets/stylesheets/pages/commits.scss | 5 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/detail_page.scss | 23 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/issuable.scss | 107 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/issues.scss | 29 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/login.scss | 1 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/merge_requests.scss | 6 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/notes.scss | 29 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 25 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/search.scss | 46 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/tree.scss | 6 |
10 files changed, 136 insertions, 141 deletions
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index cc8ea1493fc..afe57bb26e6 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -35,9 +35,6 @@ } .mr-widget-pipeline-graph { - display: inline-block; - vertical-align: middle; - .dropdown-menu { margin-top: 11px; } @@ -45,8 +42,6 @@ } .branch-info .commit-icon { - margin-right: 8px; - svg { top: 3px; } diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss index f237d57aa88..e0319952adb 100644 --- a/app/assets/stylesheets/pages/detail_page.scss +++ b/app/assets/stylesheets/pages/detail_page.scss @@ -8,7 +8,8 @@ a { color: $gl-text-color; - &.link { + &.link, + &.gl-link { color: $blue-600; } } @@ -25,6 +26,7 @@ .detail-page-header-body { position: relative; display: flex; + align-items: center; flex: 1 1; min-width: 0; @@ -38,9 +40,18 @@ align-self: center; flex: 0 0 auto; - @include media-breakpoint-down(xs) { - width: 100%; - margin-top: 10px; + &:not(.is-merge-request) { + @include media-breakpoint-down(xs) { + width: 100%; + margin-top: 10px; + } + } + + &.is-merge-request { + @include media-breakpoint-down(sm) { + width: 100%; + margin-top: 10px; + } } } @@ -56,4 +67,8 @@ .description { margin-top: 6px; } + + .author-link { + color: $gl-text-color; + } } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index c00af802c06..4093ef087dc 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -108,21 +108,13 @@ .merge-icon { color: $orange-400; position: absolute; + bottom: -3px; + right: -3px; filter: drop-shadow(0 0 0.5px $white) drop-shadow(0 0 1px $white) drop-shadow(0 0 2px $white); } } -.assignee .merge-icon { - top: calc(50% + 0.25rem); - left: 1.275rem; -} - -.reviewer .merge-icon { - bottom: -3px; - right: -3px; -} - -.right-sidebar { +@mixin right-sidebar { position: fixed; top: $header-height; // Default value for CSS var must contain a unit @@ -130,10 +122,23 @@ bottom: var(--review-bar-height, 0px); right: 0; transition: width $sidebar-transition-duration; - background: $gray-light; + background-color: $white; z-index: 200; overflow: hidden; +} + +.right-sidebar { + &:not(.right-sidebar-merge-requests) { + @include right-sidebar; + } + + &.right-sidebar-merge-requests { + @include media-breakpoint-down(sm) { + @include right-sidebar; + } + } + @include media-breakpoint-down(sm) { z-index: 251; } @@ -143,10 +148,6 @@ &:hover { color: $blue-800; - - .avatar { - border-color: rgba($gray-normal, 0.2); - } } } @@ -176,12 +177,26 @@ } } + &.right-sidebar-merge-requests { + .block, + .sidebar-contained-width, + .issuable-sidebar-header { + width: 100%; + border-bottom: 0; + } + + .block { + @include media-breakpoint-up(md) { + padding: $gl-spacing-scale-5 0; + } + } + } + .block, .sidebar-contained-width, .issuable-sidebar-header { @include clearfix; padding: $gl-padding 0; - border-bottom: 1px solid $border-gray-normal; // This prevents the mess when resizing the sidebar // of elements repositioning themselves.. width: $gutter-inner-width; @@ -218,16 +233,6 @@ } } - .cross-project-reference { - span { - width: 85%; - } - - button { - padding: 1px 5px; - } - } - .selectbox { display: none; @@ -242,9 +247,20 @@ .issuable-sidebar { height: 100%; - overflow-y: scroll; - overflow-x: hidden; - -webkit-overflow-scrolling: touch; + + &:not(.is-merge-request) { + overflow-y: scroll; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + } + + &.is-merge-request { + @include media-breakpoint-down(sm) { + overflow-y: scroll; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + } + } } &.affix-top .issuable-sidebar { @@ -252,7 +268,9 @@ } &.right-sidebar-expanded { - width: $gutter-width; + &:not(.right-sidebar-merge-requests) { + width: $gutter-width; + } .value { line-height: 1; @@ -260,6 +278,12 @@ .issuable-sidebar { padding: 0 20px; + + &.is-merge-request { + @include media-breakpoint-up(md) { + padding: 0; + } + } } &:not(.boards-sidebar):not([data-signed-in]):not([data-always-show-toggle]) { @@ -302,8 +326,17 @@ /* Extra small devices (phones, less than 768px) */ display: none; /* Small devices (tablets, 768px and up) */ - @include media-breakpoint-up(sm) { - display: block; + + &:not(.right-sidebar-merge-requests) { + @include media-breakpoint-up(sm) { + display: block; + } + } + + &.right-sidebar-merge-requests { + @include media-breakpoint-up(md) { + display: block; + } } width: $gutter-collapsed-width; @@ -380,10 +413,6 @@ } } - .sidebar-avatar-counter { - padding-top: 2px; - } - .todo-undone { color: $blue-600; fill: $blue-600; @@ -428,6 +457,10 @@ width: 24px; height: 24px; border-radius: 12px; + + ~.merge-icon { + bottom: 0; + } } .sidebar-collapsed-user { diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index f127b0dc66c..04e0ef6631e 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -307,32 +307,3 @@ ul.related-merge-requests > li gl-emoji { .issuable-header-slide-leave-to { transform: translateY(-100%); } - -.description.work-items-enabled { - ul.task-list { - > li.task-list-item { - padding-inline-start: 2.5rem; - - .js-add-task { - svg { - visibility: hidden; - } - - &:focus svg { - visibility: visible; - } - } - - > input.task-list-item-checkbox { - left: 1.25rem; - } - - &:hover, - &:focus-within { - .js-add-task svg { - visibility: visible; - } - } - } - } -} diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 4a3ec5992a5..7f0bdadd2bc 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -45,7 +45,6 @@ .omniauth-container { box-shadow: 0 0 0 1px $border-color; border-radius: $border-radius; - padding: 15px; .login-heading h3 { font-weight: $gl-font-weight-normal; diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index f95cff012d0..0d3ed0e7c71 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -233,8 +233,7 @@ $tabs-holder-z-index: 250; top: calc(#{$header-height} + #{$system-header-height} + #{$performance-bar-height}); } - @include media-breakpoint-up(sm) { - position: -webkit-sticky; + @include media-breakpoint-up(md) { position: sticky; } @@ -294,8 +293,7 @@ $tabs-holder-z-index: 250; justify-content: space-between; @include media-breakpoint-down(xs) { - .discussion-filter-container, - .line-resolve-all-container { + .discussion-filter-container { margin-bottom: $gl-padding-4; } } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index d8c3851748d..1949603b416 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -840,35 +840,6 @@ $system-note-svg-size: 16px; } } -.line-resolve-all-container { - > div { - white-space: nowrap; - } - - .btn-group .btn:first-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } -} - -.line-resolve-all { - vertical-align: middle; - display: inline-block; - padding: $gl-padding-8 $gl-padding-12; - background-color: $gray-light; - border: 1px solid $border-color; - border-right: 0; - border-radius: $border-radius-default; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - font-size: $gl-font-size; - line-height: 1rem; - - @include media-breakpoint-down(xs) { - flex: 1; - } -} - .line-resolve-btn { position: relative; top: 0; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 8034389adc8..3b76130dd1a 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -548,15 +548,6 @@ pre.light-well { } } -.git-clone-holder, -.mobile-git-clone { - .btn { - .icon { - fill: $white; - } - } -} - .new-protected-branch, .new-protected-tag { label { @@ -713,22 +704,6 @@ pre.light-well { margin-bottom: 10px; } -.service-installation { - padding: 32px; - margin: 32px; - border-radius: 3px; - background-color: $white; - - h3 { - margin-top: 0; - } - - hr { - margin: 32px 0; - border-color: $border-color; - } -} - .project-badge { opacity: 0.9; diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 18a0f119edf..8755db83d35 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -2,6 +2,11 @@ $search-dropdown-max-height: 400px; $search-avatar-size: 16px; $search-sidebar-min-width: 240px; $search-sidebar-max-width: 300px; +$search-input-field-x-min-width: 200px; +$search-input-field-min-width: 320px; +$search-input-field-max-width: 600px; + +$border-radius-medium: 3px; .search-results { .search-result-row { @@ -37,8 +42,44 @@ input[type='checkbox']:hover { 0 0 0 1px lighten($dropdown-input-focus-shadow, 20%); } +.header-content { + .header-search-new { + max-width: $search-input-field-max-width; + } + + &.header-search-is-active { + .navbar-collapse { + flex-grow: 1; + } + + @include media-breakpoint-down(lg) { + .title-container { + flex: 0; + overflow: hidden; + } + } + + @include media-breakpoint-up(xl) { + .navbar-nav { + padding-left: 1rem; + } + } + } +} + +// This is a temporary workaround! +// the button in GitLab UI Search components need to be updated to not be the small size +// see in Figma: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=43905%3A45540 +.header-search .gl-search-box-by-type-clear.btn-sm { + padding: 0.5rem !important; +} + .header-search { - width: 320px; + min-width: $search-input-field-min-width; + + @include media-breakpoint-between(md, lg) { + min-width: $search-input-field-x-min-width; + } input, svg { @@ -66,9 +107,10 @@ input[type='checkbox']:hover { border-width: 0; border-style: solid; border-image: none; - border-radius: 3px; + border-radius: $border-radius-medium; box-shadow: none; white-space: pre-wrap; + box-sizing: border-box; // Safari word-wrap: break-word; overflow-wrap: break-word; diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index 33c66648718..a9fbff8958d 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -6,10 +6,6 @@ .nav-block { margin: 16px 0; - .btn svg { - color: $gl-text-color-secondary; - } - .tree-ref-holder { margin-right: 15px; } @@ -100,7 +96,7 @@ } } - .tree-table { + table.tree-table { margin-bottom: 0; tr { |