diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles')
| -rw-r--r-- | app/assets/stylesheets/page_bundles/boards.scss | 249 | ||||
| -rw-r--r-- | app/assets/stylesheets/page_bundles/editor.scss | 202 | ||||
| -rw-r--r-- | app/assets/stylesheets/page_bundles/group.scss | 23 | ||||
| -rw-r--r-- | app/assets/stylesheets/page_bundles/issues_show.scss | 69 | ||||
| -rw-r--r-- | app/assets/stylesheets/page_bundles/merge_requests.scss | 87 | ||||
| -rw-r--r-- | app/assets/stylesheets/page_bundles/pipeline_schedules.scss | 8 | ||||
| -rw-r--r-- | app/assets/stylesheets/page_bundles/profiles/preferences.scss | 83 | ||||
| -rw-r--r-- | app/assets/stylesheets/page_bundles/reports.scss | 4 | ||||
| -rw-r--r-- | app/assets/stylesheets/page_bundles/todos.scss | 32 | ||||
| -rw-r--r-- | app/assets/stylesheets/page_bundles/work_items.scss | 36 |
10 files changed, 398 insertions, 395 deletions
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index 197073412e8..d45bc865da5 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -5,34 +5,6 @@ pointer-events: none; } -.dropdown-projects { - .dropdown-content { - max-height: 200px; - } -} - -.issue-board-dropdown-content { - margin: 0; - padding: $gl-padding-4 $gl-padding $gl-padding; - border-bottom: 0; - color: var(--gray-500, $gray-500); -} - -[data-page$='epic_boards:index'], -[data-page$='epic_boards:show'], -.issue-boards-page { - .content-wrapper { - padding-bottom: 0; - } -} - -[data-page$='epic_boards:index'], -[data-page$='epic_boards:show'] { - .filtered-search-wrapper { - display: none !important; - } -} - .boards-app { @include media-breakpoint-up(sm) { transition: width $gl-transition-duration-medium; @@ -87,33 +59,7 @@ width: 400px; } - .board-title-caret { - border-radius: $border-radius-default; - line-height: $gl-spacing-scale-5; - - &.btn svg { - top: 0; - } - - &:hover { - background-color: var(--gray-50, $gray-50); - transition: background-color 0.1s linear; - } - } - - &:not(.is-collapsed) { - .board-title-caret { - margin-right: $gl-padding-4; - } - } - &.is-collapsed { - width: 50px; - - .board-title-caret { - margin-top: 1px; - } - .board-title-text > span, .issue-count-badge > span { height: 16px; @@ -124,17 +70,11 @@ // rotated element has square dimensions so it won't overlap with its siblings. margin: calc(50% - 8px) 0; - transform: rotate(90deg); transform-origin: center; } } } -.board-inner { - font-size: $issue-boards-font-size; - background: var(--gray-50, $gray-50); -} - // to highlight columns we have animated pulse of box-shadow // we don't want to actually animate the box-shadow property // because that causes costly repaints. Instead we can add a @@ -169,103 +109,45 @@ } } -.board-title { - height: 3rem; - - .max-issue-size::before { - content: '/'; - } -} - -.board-list-component { - min-height: 0; // firefox fix -} - -.board-list { - overflow-y: auto; - overflow-x: hidden; -} - -.board-list-loading { - margin-top: 10px; - font-size: (26px / $issue-boards-font-size) * 1em; -} - .board-card { background: var(--gray-10, $white); box-shadow: 0 1px 2px rgba(var(--black, $black), 0.1); - line-height: $gl-padding; - list-style: none; - position: relative; - - &:not(:last-child) { - margin-bottom: $gl-padding-8; - } - - &.is-active, - &.is-active .board-card-assignee:hover a { - background-color: var(--blue-50, $blue-50); - } - - &.multi-select { - border-color: var(--blue-200, $blue-200); - background-color: var(--blue-50, $blue-50); - } - - &.sortable-chosen { - box-shadow: 0 2px 4px 0 rgba($black, 0.16); - } - .gl-label { - margin-top: 4px; - margin-right: 4px; + &:last-child { + @include gl-mb-0; } - .confidential-icon, - .hidden-icon { - color: var(--orange-500, $orange-500); - cursor: help; + .move-to-position { + visibility: hidden; } - .issue-blocked-icon { - color: var(--red-500, $red-500); + &:hover .move-to-position { + visibility: visible; } - @include media-breakpoint-down(md) { - padding: $gl-padding-8; + @include media-breakpoint-down(sm) { + .move-to-position { + visibility: visible; + } } } .board-card-title { - @include overflow-break-word(); - font-size: 1em; + width: 95%; a { - color: var(--gray-900, $gray-900); - } - - @include media-breakpoint-down(md) { - font-size: $label-font-size; + @include media-breakpoint-down(md) { + font-size: $gl-font-size-sm; + } } } .board-card-assignee { - margin-top: -$gl-padding-4; - margin-bottom: -$gl-padding-4; - .avatar-counter { - vertical-align: middle; - line-height: $gl-padding-24; min-width: $gl-padding-24; height: $gl-padding-24; border-radius: $gl-padding-24; - background-color: var(--gray-400, $gray-400); font-size: $gl-font-size-xs; - cursor: help; - font-weight: $gl-font-weight-bold; - margin-left: -$gl-padding-4; - border: 0; - padding: 0 $gl-padding-4; @include media-breakpoint-down(md) { min-width: auto; @@ -275,12 +157,8 @@ } } - img { - vertical-align: top; - } - .user-avatar-link:not(:only-child) { - margin-left: -$gl-padding-4; + margin-left: -$gl-padding; &:nth-of-type(1) { z-index: 2; @@ -299,89 +177,26 @@ } @include media-breakpoint-down(md) { - margin-top: 0; - margin-bottom: 0; + margin-bottom: 0 !important; } } .board-card-number { - font-size: $gl-font-size-xs; - color: var(--gray-500, $gray-500); - - @include media-breakpoint-up(md) { - font-size: $label-font-size; + @include media-breakpoint-down(md) { + font-size: $gl-font-size-sm; } } .board-list-count { - padding: 10px 0; - color: var(--gray-500, $gray-500); font-size: 13px; } -.board-new-issue-form { - z-index: 4; - margin: 5px; -} - -.right-sidebar.boards-sidebar { - .gutter-toggle { - bottom: 15px; - width: 22px; - padding-left: $gl-padding-32; - - svg { - position: absolute; - top: 50%; - right: 0; - margin-top: (-11px / 2); - height: $gl-font-size-12; - width: $gl-font-size-12; - } - } - - .issuable-header-text { - @include overflow-break-word(); - padding-right: 35px; - } -} - -.right-sidebar.right-sidebar-expanded { - &.boards-sidebar-slide-enter-active, - &.boards-sidebar-slide-leave-active { - transition: width $gl-transition-duration-medium, padding $gl-transition-duration-medium; - } - - &.boards-sidebar-slide-enter, - &.boards-sidebar-slide-leave-active { - width: 0; - padding-left: 0; - padding-right: 0; - } -} - .board-card-info { - color: var(--gray-500, $gray-500); - white-space: nowrap; - margin-right: $gl-padding-8; - - &:not(.board-card-weight) { - cursor: help; - } - - &.board-card-weight { - color: var(--gray-500, $gray-500); - cursor: pointer; - - &:hover { - color: initial; - text-decoration: underline; - } + &.board-card-weight:hover { + color: initial; } .board-card-info-icon { - color: var(--gray-500, $gray-500); - margin-right: $gl-padding-4; vertical-align: text-top; } @@ -394,15 +209,6 @@ cursor: help; } -.board-labels-toggle-wrapper, -.board-swimlanes-toggle-wrapper { - /** - * Make the wrapper the same height as a button so it aligns properly when the - * filtered-search-box input element increases in size on Linux smaller breakpoints - */ - height: $input-height; -} - .issue-boards-content:not(.breadcrumbs) { isolation: isolate; } @@ -422,7 +228,6 @@ .boards-list { height: calc(100vh - #{$issue-boards-filter-height}); - overflow-x: scroll; } .boards-sidebar { @@ -433,15 +238,7 @@ .boards-sidebar { .sidebar-collapsed-icon { - display: none; - } - - .gl-drawer-header { - align-items: flex-start; - } - - .labels-select-wrapper.is-embedded .labels-select-wrapper.is-embedded { - width: auto; + @include gl-display-none; } .show.dropdown .dropdown-menu { @@ -449,10 +246,6 @@ } } -.board-header-collapsed-info-icon:hover { - color: var(--gray-900, $gray-900); -} - .board-card-skeleton { height: 110px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); diff --git a/app/assets/stylesheets/page_bundles/editor.scss b/app/assets/stylesheets/page_bundles/editor.scss new file mode 100644 index 00000000000..b7b698b2128 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/editor.scss @@ -0,0 +1,202 @@ +@import 'page_bundles/mixins_and_variables_and_functions'; + +.file-editor { + .nav-links { + border-top: 1px solid var(--border-color, $border-color); + border-right: 1px solid var(--border-color, $border-color); + border-left: 1px solid var(--border-color, $border-color); + border-bottom: 0; + border-radius: $border-radius-small $border-radius-small 0 0; + background: var(--gray-50, $gray-50); + } + + #editor, + .editor { + @include gl-border-0; + @include gl-m-0; + @include gl-p-0; + @include gl-relative; + @include gl-w-full; + height: 500px; + + .editor-loading-content { + @include gl-h-full; + @include gl-border-0; + } + } + + .cancel-btn { + color: $red-600; + + &:hover { + color: $red-600; + } + } + + .file-title { + @include gl-font-monospace; + } + + .editor-ref { + background: var(--gray-10, $gray-10); + padding-right: $gl-padding; + border-right: 1px solid var(--border-color, $border-color); + display: block; + float: left; + margin-right: 10px; + max-width: 250px; + } + + .new-file-name, + .new-file-path { + display: inline-block; + max-width: 250px; + float: left; + + @media(max-width: map-get($grid-breakpoints, lg)-1) { + width: 180px; + } + + @media (max-width: 1360px) { + width: auto; + } + } + + .file-buttons { + flex: 1; + } + + .soft-wrap-toggle { + font-family: $regular-font; + margin-left: $gl-padding-8; + + .soft-wrap { + display: inline-flex; + } + + .no-wrap { + display: none; + } + + &.soft-wrap-active { + .soft-wrap { + display: none; + } + + .no-wrap { + display: inline-flex; + } + } + } +} + + +@include media-breakpoint-down(md) { + .file-editor { + .file-title { + display: block; + } + + .new-file-name, + .new-file-path { + max-width: none; + width: 100%; + margin-top: $gl-padding-8; + } + + .file-buttons { + display: flex; + flex-direction: column; + width: 100%; + + .md-header-toolbar { + margin: $gl-padding 0; + } + + .soft-wrap-toggle { + width: 100%; + margin-left: 0; + } + + @media(max-width: map-get($grid-breakpoints, md)-1) { + clear: both; + } + } + } +} + +.blob-new-page-title, +.blob-edit-page-title { + margin: 19px 0 21px; + vertical-align: top; + display: inline-block; + + @media(max-width: map-get($grid-breakpoints, lg)-1) { + display: block; + margin: 19px 0 12px; + } +} + +.template-selectors-menu { + display: flex; + vertical-align: top; + + @media(max-width: map-get($grid-breakpoints, lg)-1) { + display: inline-block; + width: 100%; + padding: 0; + border-left: 0; + } +} + +.template-selector-dropdowns-wrap { + display: flex; + vertical-align: top; + + @media(max-width: map-get($grid-breakpoints, lg)-1) { + display: block; + width: 100%; + margin: 0 0 16px; + } + + .license-selector, + .gitignore-selector, + .gitlab-ci-yml-selector, + .dockerfile-selector, + .template-type-selector, + .metrics-dashboard-selector { + display: inline-block; + vertical-align: top; + font-family: $regular_font; + margin: 0 8px 0 0; + + @media(max-width: map-get($grid-breakpoints, lg)-1) { + display: block; + width: 100%; + margin: 5px 0; + } + + .dropdown { + line-height: 21px; + } + + .dropdown-menu-toggle { + width: 200px; + vertical-align: top; + + @media (max-width: map-get($grid-breakpoints, xl)-1) { + width: auto; + } + + @media(max-width: map-get($grid-breakpoints, lg)-1) { + display: block; + width: 100%; + margin: 5px 0; + } + } + } +} + +.popover.suggest-gitlab-ci-yml { + z-index: $header-zindex - 1; +} diff --git a/app/assets/stylesheets/page_bundles/group.scss b/app/assets/stylesheets/page_bundles/group.scss index 71dbb855103..5086cdbf9bc 100644 --- a/app/assets/stylesheets/page_bundles/group.scss +++ b/app/assets/stylesheets/page_bundles/group.scss @@ -1,35 +1,16 @@ @import 'page_bundles/mixins_and_variables_and_functions'; .group-home-panel { - margin-top: $gl-padding; - margin-bottom: $gl-padding; - .home-panel-avatar { width: $home-panel-title-row-height; height: $home-panel-title-row-height; - flex-shrink: 0; flex-basis: $home-panel-title-row-height; } .home-panel-title { - font-size: 20px; - line-height: $gl-line-height-24; - font-weight: bold; - .icon { vertical-align: -1px; } - - .home-panel-topic-list { - font-size: $gl-font-size; - font-weight: $gl-font-weight-normal; - - .icon { - position: relative; - top: 3px; - margin-right: $gl-padding-4; - } - } } .home-panel-title-row { @@ -52,7 +33,7 @@ line-height: $gl-font-size-large; } - .home-panel-topic-list, + .home-panel-metadata { font-size: $gl-font-size-small; } @@ -60,8 +41,6 @@ } .home-panel-metadata { - font-weight: normal; - font-size: 14px; line-height: $gl-btn-line-height; } diff --git a/app/assets/stylesheets/page_bundles/issues_show.scss b/app/assets/stylesheets/page_bundles/issues_show.scss index c664e0a734e..26d694f7421 100644 --- a/app/assets/stylesheets/page_bundles/issues_show.scss +++ b/app/assets/stylesheets/page_bundles/issues_show.scss @@ -1,77 +1,24 @@ @import 'mixins_and_variables_and_functions'; .description { - ul, - ol { - /* We're changing list-style-position to inside because the default of - * outside doesn't move negative margin to the left of the bullet. */ - list-style-position: inside; - } - li { position: relative; - /* In the browser, the li element comes after (to the right of) the bullet point, so hovering - * over the left of the bullet point doesn't trigger a row hover. To trigger hovering on the - * left, we're applying negative margin here to shift the li element left. */ - margin-inline-start: -1rem; - padding-inline-start: 2.5rem; + margin-inline-start: 2.25rem; .drag-icon { position: absolute; inset-block-start: 0.3rem; - inset-inline-start: 1rem; - } - - /* The inside bullet aligns itself to the bottom, which we see when text to the right of - * a multi-line list item wraps. We fix this by aligning it to the top, and excluding - * other elements. Targeting ::marker doesn't seem to work, instead we exclude custom elements - * or anything with a class */ - > *:not(gl-emoji, code, [class]) { - vertical-align: top; - } - - /* The inside bullet is treated like an element inside the li element, so when we have a - * multi-paragraph list item, the text doesn't start on the right of the bullet because - * it is a block level p element. We make it inline to fix this. */ - > p:first-of-type { - display: inline-block; - max-width: calc(100% - 1.5rem); - } - - /* We fix the other paragraphs not indenting to the - * right of the bullet due to the inside bullet. */ - p ~ a, - p ~ blockquote, - p ~ code, - p ~ details, - p ~ dl, - p ~ h1, - p ~ h2, - p ~ h3, - p ~ h4, - p ~ h5, - p ~ h6, - p ~ hr, - p ~ ol, - p ~ p, - p ~ table:not(.code), /* We need :not(.code) to override typography.scss */ - p ~ ul, - p ~ .markdown-code-block { - margin-inline-start: 1rem; + inset-inline-start: -2.3rem; + padding-inline-end: 1rem; + width: 2rem; } } - ul.task-list { - > li.task-list-item { - /* We're using !important to override the same selector in typography.scss */ - margin-inline-start: -1rem !important; - padding-inline-start: 2.5rem; + ul.task-list > li.task-list-item { + margin-inline-start: 0.5rem !important; /* Override typography.scss */ - > input.task-list-item-checkbox { - position: static; - vertical-align: middle; - margin-block-start: -2px; - } + > .drag-icon { + inset-inline-start: -0.6rem; } } } diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index b7a75884425..463c8f74342 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -41,17 +41,21 @@ $tabs-holder-z-index: 250; // If they don't match, the file tree and the diff files stick // to the top at different heights, which is a bad-looking defect $diff-file-header-top: 11px; - $top-pos: calc(#{$header-height} + #{$mr-tabs-height} + #{$diff-file-header-top}); + --initial-pos: calc(#{$header-height} + #{$mr-tabs-height} + #{$diff-file-header-top}); + --top-pos: var(--initial-pos); position: -webkit-sticky; position: sticky; - // Unitless zero values are not allowed in calculations - top: calc(#{$top-pos} + var(--system-header-height, 0px) + var(--performance-bar-height, 0px)); - max-height: calc(100vh - #{$top-pos} - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px)); + top: var(--top-pos); + max-height: calc(100vh - var(--top-pos) - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px)); .drag-handle { bottom: 16px; } + + &.is-sidebar-moved { + --top-pos: calc(var(--initial-pos) + 26px); + } } .tree-list-holder { @@ -196,12 +200,8 @@ $tabs-holder-z-index: 250; background-color: var(--gray-50, $gray-50); } -.mr-conflict-loader { - max-width: 334px; - - > svg { - vertical-align: middle; - } +.mr-widget-body-loading svg { + vertical-align: middle; } .mr-info-list { @@ -398,12 +398,6 @@ $tabs-holder-z-index: 250; display: block; } - .mr-widget-pipeline-graph { - .dropdown-menu { - z-index: $zindex-dropdown-menu; - } - } - .normal { flex: 1; flex-basis: auto; @@ -440,7 +434,7 @@ $tabs-holder-z-index: 250; .mr-widget-body { &:not(.mr-widget-body-line-height-1) { - line-height: 28px; + line-height: 24px; } @include clearfix; @@ -475,12 +469,6 @@ $tabs-holder-z-index: 250; margin: 0 0 0 10px; } - .bold { - font-weight: $gl-font-weight-bold; - color: var(--gray-600, $gray-600); - margin-left: 10px; - } - .state-label { font-weight: $gl-font-weight-bold; padding-right: 10px; @@ -490,11 +478,6 @@ $tabs-holder-z-index: 250; color: var(--red-500, $red-500); } - .spacing, - .bold { - vertical-align: middle; - } - .dropdown-menu { li a { padding: 5px; @@ -621,8 +604,8 @@ $tabs-holder-z-index: 250; .mr-widget-extension-icon::before { @include gl-content-empty; @include gl-absolute; - @include gl-left-0; - @include gl-top-0; + @include gl-left-50p; + @include gl-top-half; @include gl-opacity-3; @include gl-border-solid; @include gl-border-4; @@ -630,24 +613,20 @@ $tabs-holder-z-index: 250; width: 24px; height: 24px; + transform: translate(-50%, -50%); } .mr-widget-extension-icon::after { @include gl-content-empty; @include gl-absolute; @include gl-rounded-full; + @include gl-left-50p; + @include gl-top-half; - top: 4px; - left: 4px; width: 16px; height: 16px; - border: 4px solid currentColor; -} - -.mr-widget-extension-icon svg { - position: relative; - top: 2px; - left: 2px; + border: 4px solid; + transform: translate(-50%, -50%); } .mr-widget-heading { @@ -777,6 +756,7 @@ $tabs-holder-z-index: 250; &.show .dropdown-menu { width: calc(100vw - 20px); max-width: 650px; + max-height: calc(100vh - 50px); .gl-new-dropdown-inner { max-height: none !important; @@ -818,8 +798,7 @@ $tabs-holder-z-index: 250; } .md-preview-holder { - max-height: 180px; - height: 180px; + max-height: 172px; } } @@ -840,3 +819,29 @@ $tabs-holder-z-index: 250; } } } + +.merge-request-sticky-header { + z-index: 204; + box-shadow: 0 1px 2px $issue-boards-card-shadow; + --width: calc(100% - #{$contextual-sidebar-width}); + + @include media-breakpoint-down(lg) { + --width: calc(100% - #{$contextual-sidebar-collapsed-width}); + } +} + +.detail-page-header-actions { + .gl-toggle { + @include gl-ml-auto; + } +} + +.page-with-icon-sidebar .issue-sticky-header { + --width: calc(100% - #{$contextual-sidebar-collapsed-width}); +} + +.merge-request-notification-toggle { + .gl-toggle-label { + @include gl-font-weight-normal; + } +} diff --git a/app/assets/stylesheets/page_bundles/pipeline_schedules.scss b/app/assets/stylesheets/page_bundles/pipeline_schedules.scss index 412971253ca..0c73bece035 100644 --- a/app/assets/stylesheets/page_bundles/pipeline_schedules.scss +++ b/app/assets/stylesheets/page_bundles/pipeline_schedules.scss @@ -28,13 +28,6 @@ .pipeline-schedule-table-row { .branch-name-cell { max-width: 300px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .next-run-cell { - color: var(--gray-500, $gray-500); } a { @@ -50,7 +43,6 @@ .bordered-box.content-block { border: 1px solid var(--border-color, $border-color); background-color: transparent; - padding: $gl-spacing-scale-5; } } diff --git a/app/assets/stylesheets/page_bundles/profiles/preferences.scss b/app/assets/stylesheets/page_bundles/profiles/preferences.scss new file mode 100644 index 00000000000..c9c78a70163 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/profiles/preferences.scss @@ -0,0 +1,83 @@ +@import 'page_bundles/mixins_and_variables_and_functions'; + +.application-theme { + $ui-gray-bg: #303030; + $ui-light-gray-bg: #f0f0f0; + $ui-dark-mode-bg: #1f1f1f; + + .preview { + font-size: 0; + height: 48px; + border-radius: 4px; + min-width: 112px; + margin-bottom: $gl-padding-8; + + &.ui-indigo { + background-color: $indigo-900; + } + + &.ui-light-indigo { + background-color: $indigo-700; + } + + &.ui-blue { + background-color: $theme-blue-900; + } + + &.ui-light-blue { + background-color: $theme-light-blue-700; + } + + &.ui-green { + background-color: $theme-green-900; + } + + &.ui-light-green { + background-color: $theme-light-green-700; + } + + &.ui-red { + background-color: $theme-red-900; + } + + &.ui-light-red { + background-color: $theme-light-red-700; + } + + &.ui-gray { + background-color: $ui-gray-bg; + border: solid 1px $border-color; + } + + &.ui-light-gray { + background-color: $ui-light-gray-bg; + } + + &.gl-dark { + background-color: $ui-dark-mode-bg; + border: solid 1px $border-color; + } + } + + .preview-row { + display: block; + } +} + +.syntax-theme { + label { + margin-right: $gl-padding-32; + margin-bottom: $gl-padding; + text-align: center; + + .preview { + margin-bottom: 10px; + width: 160px; + + img { + border-radius: 4px; + max-width: 100%; + } + } + } +} diff --git a/app/assets/stylesheets/page_bundles/reports.scss b/app/assets/stylesheets/page_bundles/reports.scss index d0748779f47..03c9fc7508d 100644 --- a/app/assets/stylesheets/page_bundles/reports.scss +++ b/app/assets/stylesheets/page_bundles/reports.scss @@ -16,6 +16,10 @@ line-height: 20px; } +.report-block-child-icon { + height: 20px; +} + .report-block-list { list-style: none; padding: 0 1px; diff --git a/app/assets/stylesheets/page_bundles/todos.scss b/app/assets/stylesheets/page_bundles/todos.scss index e7813e3b56e..3eacf98688e 100644 --- a/app/assets/stylesheets/page_bundles/todos.scss +++ b/app/assets/stylesheets/page_bundles/todos.scss @@ -9,12 +9,6 @@ // workaround because we cannot use border-collapse border-top: 1px solid transparent; - &:hover { - background-color: var(--blue-50, $blue-50); - border-color: var(--blue-200, $blue-200); - cursor: pointer; - } - // overwrite border style of .content-list &:last-child { border-bottom: 1px solid transparent; @@ -26,8 +20,6 @@ &.todo-pending.done-reversible { &:hover { - border-color: var(--border-color, $border-color); - background-color: var(--gray-50, $gray-50); border-top: 1px solid transparent; .todo-avatar, @@ -40,20 +32,12 @@ .todo-item { opacity: 0.2; } - - .btn { - background-color: var(--gray-50, $gray-50); - } } } .todo-item { @include transition(opacity); - .status-box { - line-height: inherit; - } - .todo-label, .todo-project { a { @@ -66,22 +50,6 @@ color: var(--gl-text-color, $gl-text-color); } - pre { - border: 0; - background: var(--gray-50, $gray-50); - border-radius: 0; - color: var(--gray-500, $gray-500); - margin: 0 20px; - overflow: hidden; - } - - .note-image-attach { - margin-top: 4px; - margin-left: 0; - max-width: 200px; - float: none; - } - .gl-label-scoped { --label-inset-border: inset 0 0 0 1px currentColor; } diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss index 9220fa82b46..d0fc011dde7 100644 --- a/app/assets/stylesheets/page_bundles/work_items.scss +++ b/app/assets/stylesheets/page_bundles/work_items.scss @@ -7,7 +7,7 @@ #weight-widget-input:not(:hover, :focus), #weight-widget-input[readonly] { - box-shadow: inset 0 0 0 $gl-border-size-1 var(--white, $white); + box-shadow: none; } #weight-widget-input[readonly] { @@ -19,8 +19,38 @@ display: none; } - .assignees-selector:hover .assign-myself { - display: block; + @include media-breakpoint-up(sm) { + .assignees-selector:hover .assign-myself { + display: block; + } + } +} + +.work-item-due-date { + .gl-datepicker-input.gl-form-input.form-control { + width: 10rem; + + &:not(:focus, :hover) { + box-shadow: none; + + ~ .gl-datepicker-actions { + display: none; + } + } + + &[disabled] { + background-color: var(--white, $white); + box-shadow: none; + + ~ .gl-datepicker-actions { + display: none; + } + } + } + + .gl-datepicker-actions:focus, + .gl-datepicker-actions:hover { + display: flex !important; } } |