diff options
Diffstat (limited to 'app/assets/stylesheets')
29 files changed, 874 insertions, 330 deletions
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index 1ae144fb471..b849cc2d853 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -91,7 +91,7 @@ .award-menu-holder { display: inline-block; - position: relative; + position: absolute; .tooltip { white-space: nowrap; @@ -117,11 +117,41 @@ &.active, &:hover, - &:active { + &:active, + &.is-active { background-color: $row-hover; border-color: $row-hover-border; box-shadow: none; outline: 0; + + .award-control-icon svg { + background: $award-emoji-positive-add-bg; + + path { + fill: $award-emoji-positive-add-lines; + } + } + + .award-control-icon-neutral { + opacity: 0; + } + + .award-control-icon-positive { + opacity: 1; + transform: scale(1.15); + } + } + + &.is-active { + .award-control-icon-positive { + opacity: 0; + transform: scale(1); + } + + .award-control-icon-super-positive { + opacity: 1; + transform: scale(1); + } } &.btn { @@ -162,9 +192,33 @@ color: $border-gray-normal; margin-top: 1px; padding: 0 2px; + + svg { + margin-bottom: 1px; + height: 18px; + width: 18px; + border-radius: 50%; + + path { + fill: $border-gray-normal; + } + } + } + + .award-control-icon-positive, + .award-control-icon-super-positive { + position: absolute; + left: 7px; + bottom: 9px; + opacity: 0; + @include transition(opacity, transform); } .award-control-text { vertical-align: middle; } } + +.note-awards .award-control-icon-positive { + left: 6px; +} diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index 9a4129cdc8d..52425262925 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -292,6 +292,10 @@ } @media(min-width: $screen-xs-max) { + &.merge-requests .text-content { + margin-top: 40px; + } + &.labels .text-content { margin-top: 70px; } diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 50849e95541..4369ae78bde 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -362,3 +362,13 @@ width: 100%; } } + +.btn-blank { + padding: 0; + background: transparent; + border: 0; + + &:focus { + outline: 0; + } +} diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index da5b754aec7..7767826b033 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -119,6 +119,46 @@ } } +@mixin dropdown-link { + display: block; + position: relative; + padding: 5px 8px; + color: $gl-text-color; + line-height: initial; + text-overflow: ellipsis; + border-radius: 2px; + white-space: nowrap; + overflow: hidden; + + &:hover, + &:focus, + &.is-focused { + background-color: $dropdown-link-hover-bg; + text-decoration: none; + + .badge { + background-color: darken($dropdown-link-hover-bg, 5%); + } + } + + &.dropdown-menu-empty-link { + &.is-focused { + background-color: $dropdown-empty-row-bg; + } + } + + &.dropdown-menu-user-link { + line-height: 16px; + } + + .icon-play { + fill: $gl-text-color-secondary; + margin-right: 6px; + height: 12px; + width: 11px; + } +} + .dropdown-menu, .dropdown-menu-nav { display: none; @@ -137,10 +177,6 @@ border-radius: $border-radius-base; box-shadow: 0 2px 4px $dropdown-shadow-color; - .filtered-search-input-container & { - max-width: 280px; - } - &.is-loading { .dropdown-content { display: none; @@ -151,6 +187,15 @@ } } + .shortcut-mappings { + display: none; + } + + &.shortcuts .shortcut-mappings { + display: inline-block; + margin-right: 5px; + } + ul { margin: 0; padding: 0; @@ -178,43 +223,7 @@ } a { - display: block; - position: relative; - padding: 5px 8px; - color: $gl-text-color; - line-height: initial; - text-overflow: ellipsis; - border-radius: 2px; - white-space: nowrap; - overflow: hidden; - - &:hover, - &:focus, - &.is-focused { - background-color: $dropdown-link-hover-bg; - text-decoration: none; - - .badge { - background-color: darken($dropdown-link-hover-bg, 5%); - } - } - - &.dropdown-menu-empty-link { - &.is-focused { - background-color: $dropdown-empty-row-bg; - } - } - - &.dropdown-menu-user-link { - line-height: 16px; - } - - .icon-play { - fill: $gl-text-color-secondary; - margin-right: 6px; - height: 12px; - width: 11px; - } + @include dropdown-link; } .dropdown-header { @@ -463,6 +472,11 @@ overflow-y: auto; } +.dropdown-info-note { + color: $gl-text-color-secondary; + text-align: center; +} + .dropdown-footer { padding-top: 10px; margin-top: 10px; diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index ffece53a093..a5a8522739e 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -275,3 +275,22 @@ span.idiff { } } } + +.is-stl-loading { + .stl-controls { + display: none; + } +} + +.file-fork-suggestion { + display: flex; + align-items: center; + justify-content: flex-end; + background-color: $gray-light; + border-bottom: 1px solid $border-color; + padding: 5px $gl-padding; +} + +.file-fork-suggestion-note { + margin-right: 1.5em; +} diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 51805c5d734..484df6214d3 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -22,7 +22,6 @@ } @media (min-width: $screen-sm-min) { - .issues-filters, .issues_bulk_update { .dropdown-menu-toggle { width: 132px; @@ -56,7 +55,7 @@ } } -.filtered-search-container { +.filtered-search-wrapper { display: -webkit-flex; display: flex; @@ -151,11 +150,13 @@ width: 100%; } -.filtered-search-input-container { +.filtered-search-box { + position: relative; + flex: 1; display: -webkit-flex; display: flex; - position: relative; width: 100%; + min-width: 0; border: 1px solid $border-color; background-color: $white-light; @@ -163,14 +164,6 @@ -webkit-flex: 1 1 auto; flex: 1 1 auto; margin-bottom: 10px; - - .dropdown-menu { - width: auto; - left: 0; - right: 0; - max-width: none; - min-width: 100%; - } } &:hover { @@ -229,6 +222,118 @@ } } +.filtered-search-box-input-container { + flex: 1; + position: relative; + // Fix PhantomJS not supporting `flex: 1;` properly. + // This is important because it can change the expected `e.target` when clicking things in tests. + // See https://gitlab.com/gitlab-org/gitlab-ce/blob/b54acba8b732688c59fe2f38510c469dc86ee499/spec/features/issues/filtered_search/visual_tokens_spec.rb#L61 + // - With `width: 100%`: `e.target` = `.tokens-container`, https://i.imgur.com/jGq7wbx.png + // - Without `width: 100%`: `e.target` = `.filtered-search`, https://i.imgur.com/cNI2CyT.png + width: 100%; + min-width: 0; +} + +.filtered-search-input-dropdown-menu { + max-width: 280px; + + @media (max-width: $screen-xs-min) { + width: auto; + left: 0; + right: 0; + max-width: none; + min-width: 100%; + } +} + +.filtered-search-history-dropdown-toggle-button { + display: flex; + align-items: center; + width: auto; + height: 100%; + padding-top: 0; + padding-left: 0.75em; + padding-bottom: 0; + padding-right: 0.5em; + + background-color: transparent; + border-radius: 0; + border-top: 0; + border-left: 0; + border-bottom: 0; + border-right: 1px solid $border-color; + + color: $gl-text-color-secondary; + + transition: color 0.1s linear; + + &:hover, + &:focus { + color: $gl-text-color; + border-color: $dropdown-input-focus-border; + outline: none; + } + + .dropdown-toggle-text { + color: inherit; + + .fa { + color: inherit; + } + } + + .fa { + position: initial; + } + +} + +.filtered-search-history-dropdown-wrapper { + position: initial; + flex-shrink: 0; +} + +.filtered-search-history-dropdown { + width: 40%; + + @media (max-width: $screen-xs-min) { + left: 0; + right: 0; + max-width: none; + } +} + +.filtered-search-history-dropdown-content { + max-height: none; +} + +.filtered-search-history-dropdown-item, +.filtered-search-history-clear-button { + @include dropdown-link; + + overflow: hidden; + width: 100%; + margin: 0.5em 0; + + background-color: transparent; + border: 0; + text-align: left; + white-space: nowrap; + text-overflow: ellipsis; +} + +.filtered-search-history-dropdown-token { + display: inline; + + &:not(:last-child) { + margin-right: 0.3em; + } + + & > .value { + font-weight: 600; + } +} + .filter-dropdown-container { display: -webkit-flex; display: flex; @@ -248,10 +353,8 @@ } @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { - .issues-details-filters { - .dropdown-menu-toggle { - width: 100px; - } + .issue-bulk-update-dropdown-toggle { + width: 100px; } } diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 65bbbda41c8..abb092623c0 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -48,10 +48,10 @@ header { color: $gl-text-color-secondary; font-size: 18px; padding: 0; - margin: ($header-height - 28) / 2 0; + margin: (($header-height - 28) / 2) 3px; margin-left: 8px; height: 28px; - min-width: 28px; + min-width: 32px; line-height: 28px; text-align: center; @@ -73,21 +73,29 @@ header { background-color: $gray-light; color: $gl-text-color; - .todos-pending-count { - background: darken($todo-alert-blue, 10%); + svg { + fill: $gl-text-color; } } .fa-caret-down { font-size: 14px; } + + svg { + position: relative; + top: 2px; + height: 17px; + // hack to get SVG to line up with FA icons + width: 23px; + fill: $gl-text-color-secondary; + } } .navbar-toggle { color: $nav-toggle-gray; - margin: 7px 0; + margin: 5px 0; border-radius: 0; - position: absolute; right: -10px; padding: 6px 10px; @@ -141,10 +149,6 @@ header { min-height: $header-height; padding-left: 30px; - @media (max-width: $screen-sm-max) { - padding-right: 20px; - } - .dropdown-menu { margin-top: -5px; } @@ -243,10 +247,7 @@ header { .navbar-collapse { flex: 0 0 auto; border-top: none; - - @media (min-width: $screen-md-min) { - padding: 0; - } + padding: 0; @media (max-width: $screen-xs-max) { flex: 1 1 auto; @@ -263,6 +264,34 @@ header { } } +.navbar-nav { + li { + .badge { + position: inherit; + top: -3px; + font-weight: normal; + margin-left: -12px; + font-size: 11px; + color: $white-light; + padding: 1px 5px 2px; + border-radius: 7px; + box-shadow: 0 1px 0 rgba($gl-header-color, .2); + + &.issues-count { + background-color: $green-500; + } + + &.merge-requests-count { + background-color: $orange-600; + } + + &.todos-count { + background-color: $blue-500; + } + } + } +} + @media (max-width: $screen-xs-max) { header .container-fluid { font-size: 18px; diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index df78bbdea51..b3340d41333 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -52,6 +52,18 @@ } } +@mixin basic-list-stats { + .stats { + float: right; + line-height: $list-text-height; + color: $gl-text-color; + + span { + margin-right: 15px; + } + } +} + @mixin bulleted-list { > ul { list-style-type: disc; diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss index 8cd49280e1c..7098203321d 100644 --- a/app/assets/stylesheets/framework/modal.scss +++ b/app/assets/stylesheets/framework/modal.scss @@ -16,6 +16,8 @@ body.modal-open { overflow: hidden; } -.modal .modal-dialog { - width: 860px; +@media (min-width: $screen-md-min) { + .modal-dialog { + width: 860px; + } } diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index 5ab505034b6..e6d808717f3 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -146,6 +146,10 @@ display: block; } + &.scrolling-tabs { + float: left; + } + li a { padding: 16px 15px 11px; } @@ -476,3 +480,44 @@ } } } + +.inner-page-scroll-tabs { + position: relative; + + .nav-links { + padding-bottom: 1px; + } + + .fade-right { + @include fade(left, $white-light); + right: 0; + text-align: right; + + .fa { + right: 5px; + } + } + + .fade-left { + @include fade(right, $white-light); + left: 0; + text-align: left; + + .fa { + left: 5px; + } + } + + .fade-right, + .fade-left { + top: 16px; + bottom: auto; + } + + &.is-smaller { + .fade-right, + .fade-left { + top: 11px; + } + } +} diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 40e93032f59..746c9c25620 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -33,7 +33,7 @@ padding-right: 0; @media (min-width: $screen-sm-min) { - .content-wrapper { + &:not(.wiki-sidebar):not(.build-sidebar) .content-wrapper { padding-right: $gutter_collapsed_width; } @@ -55,7 +55,7 @@ padding-right: 0; @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { - .content-wrapper { + &:not(.wiki-sidebar):not(.build-sidebar) .content-wrapper { padding-right: $gutter_collapsed_width; } } diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index ff185cd8767..cd23deb6d75 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -1,15 +1,18 @@ .timeline { @include basic-list; - margin: 0; padding: 0; .timeline-entry { - padding: $gl-padding $gl-btn-padding 11px; + padding: $gl-padding $gl-btn-padding 14px; border-color: $white-normal; color: $gl-text-color; border-bottom: 1px solid $border-white-light; + .timeline-entry-inner { + position: relative; + } + &:target { background: $line-target-blue; } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 97794a47df8..712eb7caf33 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -293,6 +293,8 @@ $badge-color: $gl-text-color-secondary; * Award emoji */ $award-emoji-menu-shadow: rgba(0,0,0,.175); +$award-emoji-positive-add-bg: #fed159; +$award-emoji-positive-add-lines: #bb9c13; /* * Search Box diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index b6168a293e0..0be1c215959 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -46,7 +46,7 @@ } .issue-boards-page { - .page-with-sidebar { + .content-wrapper { padding-bottom: 0; } } @@ -72,7 +72,7 @@ @media (min-width: $screen-sm-min) { height: 475px; // Needed for PhantomJS - height: calc(100vh - 220px); + height: calc(100vh - 222px); min-height: 475px; transition: width .2s; @@ -197,7 +197,7 @@ .card { position: relative; - padding: 10px $gl-padding; + padding: 11px 10px 11px $gl-padding; background: $white-light; border-radius: $border-radius-default; box-shadow: 0 1px 2px $issue-boards-card-shadow; @@ -217,6 +217,8 @@ } .confidential-icon { + position: relative; + top: 1px; margin-right: 5px; } } @@ -224,34 +226,43 @@ .card-title { margin: 0; font-size: 1em; + line-height: inherit; a { - color: inherit; + color: $gl-text-color; word-wrap: break-word; + margin-right: 2px; } } -.card-footer { - margin-top: 5px; - line-height: 25px; - - .label { - margin-right: 5px; - font-size: (14px / $issue-boards-font-size) * 1em; - } +.card-header { + display: flex; + min-height: 20px; .card-assignee { + margin-left: auto; margin-right: 5px; + padding-left: 10px; + height: 20px; } .avatar { - margin-left: 0; - margin-right: 0; + margin: 0; + } +} + +.card-footer { + margin: 0 0 5px; + + .label { + margin-top: 5px; + margin-right: 6px; } } .card-number { - margin-right: 5px; + font-size: 12px; + color: $gl-text-color-secondary; } .issue-boards-search { diff --git a/app/assets/stylesheets/pages/container_registry.scss b/app/assets/stylesheets/pages/container_registry.scss new file mode 100644 index 00000000000..3266714396e --- /dev/null +++ b/app/assets/stylesheets/pages/container_registry.scss @@ -0,0 +1,16 @@ +/** + * Container Registry + */ + +.container-image { + border-bottom: 1px solid $white-normal; +} + +.container-image-head { + padding: 0 16px; + line-height: 4em; +} + +.table.tags { + margin-bottom: 0; +} diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index eab79c2a481..1aa1079903c 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -431,6 +431,21 @@ border-bottom: none; } +.diff-stats-summary-toggler { + padding: 0; + background-color: transparent; + border: 0; + color: $gl-link-color; + transition: color 0.1s linear; + + &:hover, + &:focus { + outline: none; + text-decoration: underline; + color: $gl-link-hover-color; + } +} + // Mobile @media (max-width: 480px) { .diff-title { diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss index 4af267403d8..f6b8c8ee2bc 100644 --- a/app/assets/stylesheets/pages/editor.scss +++ b/app/assets/stylesheets/pages/editor.scss @@ -1,4 +1,13 @@ .file-editor { + .nav-links { + border-top: 1px solid $border-color; + border-right: 1px solid $border-color; + border-left: 1px solid $border-color; + border-bottom: none; + border-radius: 2px; + background: $gray-normal; + } + #editor { border: none; border-radius: 0; @@ -72,11 +81,7 @@ } .encoding-selector, - .soft-wrap-toggle, - .license-selector, - .gitignore-selector, - .gitlab-ci-yml-selector, - .dockerfile-selector { + .soft-wrap-toggle { display: inline-block; vertical-align: top; font-family: $regular_font; @@ -103,28 +108,9 @@ } } } - - .gitignore-selector, - .license-selector, - .gitlab-ci-yml-selector, - .dockerfile-selector { - .dropdown { - line-height: 21px; - } - - .dropdown-menu-toggle { - vertical-align: top; - width: 220px; - } - } - - .gitlab-ci-yml-selector { - .dropdown-menu-toggle { - width: 250px; - } - } } + @media(max-width: $screen-xs-max){ .file-editor { .file-title { @@ -149,10 +135,7 @@ margin: 3px 0; } - .encoding-selector, - .license-selector, - .gitignore-selector, - .gitlab-ci-yml-selector { + .encoding-selector { display: block; margin: 3px 0; @@ -163,3 +146,104 @@ } } } + +.blob-new-page-title, +.blob-edit-page-title { + margin: 19px 0 21px; + vertical-align: top; + display: inline-block; + + @media(max-width: $screen-sm-max) { + display: block; + margin: 19px 0 12px; + } +} + +.template-selectors-menu { + display: inline-block; + vertical-align: top; + margin: 14px 0 0 16px; + padding: 0 0 0 14px; + border-left: 1px solid $border-color; + + @media(max-width: $screen-sm-max) { + display: block; + width: 100%; + margin: 5px 0; + padding: 0; + border-left: none; + } +} + +.templates-selectors-label { + display: inline-block; + vertical-align: top; + margin-top: 6px; + line-height: 21px; + + @media(max-width: $screen-sm-max) { + display: block; + margin: 5px 0; + } +} + +.template-selector-dropdowns-wrap { + display: inline-block; + margin-left: 8px; + vertical-align: top; + margin: 5px 0 0 8px; + + @media(max-width: $screen-sm-max) { + display: block; + width: 100%; + margin: 0 0 16px; + } + + .license-selector, + .gitignore-selector, + .gitlab-ci-yml-selector, + .dockerfile-selector, + .template-type-selector { + display: inline-block; + vertical-align: top; + font-family: $regular_font; + margin-top: -5px; + + @media(max-width: $screen-sm-max) { + display: block; + width: 100%; + margin: 5px 0; + } + + .dropdown { + line-height: 21px; + } + + .dropdown-menu-toggle { + width: 250px; + vertical-align: top; + + @media(max-width: $screen-sm-max) { + display: block; + width: 100%; + margin: 5px 0; + } + } + + } +} + +.template-selectors-undo-menu { + display: inline-block; + margin: 7px 0 0 10px; + + @media(max-width: $screen-sm-max) { + display: block; + width: 100%; + margin: 20px 0; + } + + button { + margin: -4px 0 0 15px; + } +} diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 25be7f408d0..72e7d42858d 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -26,7 +26,7 @@ .table.ci-table { .environments-actions { - min-width: 200px; + min-width: 300px; } .environments-commit, @@ -159,6 +159,16 @@ text { fill: $stat-graph-axis-fill; } + + .label-axis-text, + .text-metric-usage { + fill: $black; + font-weight: 500; + } + + .legend-axis-text { + fill: $black; + } } .x-axis path, @@ -222,3 +232,21 @@ stroke: $black; stroke-width: 1; } + +.prometheus-state { + margin-top: 10px; + display: none; + + .state-button-section { + margin-top: 10px; + } +} + +.environments-actions { + .external-url, + .monitoring-url, + .terminal-button, + .stop-env-link { + width: 38px; + } +} diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss index 08398bb43a2..e7f9bbbc62f 100644 --- a/app/assets/stylesheets/pages/events.scss +++ b/app/assets/stylesheets/pages/events.scss @@ -4,14 +4,14 @@ */ .event-item { font-size: $gl-font-size; - padding: $gl-padding-top 0 $gl-padding-top ($gl-avatar-size + $gl-padding-top); + padding: $gl-padding-top 0 $gl-padding-top 40px; border-bottom: 1px solid $white-normal; color: $list-text-color; + position: relative; &.event-inline { - .avatar { - position: relative; - top: -2px; + .profile-icon { + top: 20px; } .event-title, @@ -24,8 +24,28 @@ color: $gl-text-color; } - .avatar { - margin-left: -($gl-avatar-size + $gl-padding-top); + .profile-icon { + position: absolute; + left: 0; + top: 14px; + + svg { + width: 20px; + height: auto; + fill: $gl-text-color-secondary; + } + + &.open-icon svg { + fill: $green-300; + } + + &.closed-icon svg { + fill: $red-300; + } + + &.fork-icon svg { + fill: $blue-300; + } } .event-title { @@ -163,7 +183,7 @@ max-width: 100%; } - .avatar { + .profile-icon { display: none; } diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index cf45f0af2aa..73a5889867a 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -17,15 +17,7 @@ } .group-row { - .stats { - float: right; - line-height: $list-text-height; - color: $gl-text-color; - - span { - margin-right: 15px; - } - } + @include basic-list-stats; } .ldap-group-links { diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index c1a9bc4be28..e84a05e3e9e 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -243,6 +243,10 @@ font-size: 13px; font-weight: normal; } + + .hide-expanded { + display: none; + } } &.right-sidebar-collapsed { @@ -282,10 +286,11 @@ display: block; width: 100%; text-align: center; - padding-bottom: 10px; + margin-bottom: 10px; color: $issuable-sidebar-color; - &:hover { + &:hover, + &:hover .todo-undone { color: $gl-text-color; } @@ -294,6 +299,10 @@ margin-top: 0; } + .todo-undone { + color: $gl-link-color; + } + .author { display: none; } @@ -582,3 +591,21 @@ opacity: 0; } } + +.issuable-todo-btn { + .fa-spinner { + display: none; + } + + &.is-loading { + .fa-spinner { + display: inline-block; + } + + &.sidebar-collapsed-icon { + .issuable-todo-inner { + display: none; + } + } + } +} diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 6630904ec92..2f946ab2f59 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -60,7 +60,17 @@ } .modify-merge-commit-link { + padding: 0; + + background-color: transparent; + border: 0; + color: $gl-text-color; + + &:hover, + &:focus { + text-decoration: underline; + } } .merge-param-checkbox { @@ -319,8 +329,6 @@ } #modal_merge_info .modal-dialog { - width: 600px; - .dark { margin-right: 40px; } diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index efbd9365fd9..335e587b8f4 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -52,66 +52,62 @@ } } -.milestone-summary { - .milestone-stat { - white-space: nowrap; - margin-right: 10px; +.milestone-sidebar { + .gutter-toggle { + margin-bottom: 10px; + } - &.with-drilldown { - margin-right: 2px; + .milestone-progress { + .title { + padding-top: 5px; } - } - .remaining-days { - color: $orange-600; + .progress { + height: 6px; + margin: 0; + } } - .milestone-stats-and-buttons { - display: flex; - justify-content: flex-start; - flex-wrap: wrap; + .collapsed-milestone-date { + font-size: 12px; + } - @media (min-width: $screen-xs-min) { - justify-content: space-between; - flex-wrap: nowrap; - } + .milestone-date { + display: block; } - .milestone-progress-buttons { - order: 1; - margin-top: 10px; + .date-separator { + line-height: 5px; + } - @media (min-width: $screen-xs-min) { - order: 2; - margin-top: 0; - flex-shrink: 0; - } + .remaining-days strong { + font-weight: normal; + } - .btn { - float: left; - margin-right: $btn-side-margin; + .milestone-stat { + float: left; + margin-right: 14px; + } - &:last-child { - margin-right: 0; - } - } + .milestone-stat:last-child { + margin-right: 0; } - .milestone-stats { - order: 2; - width: 100%; - padding: 7px 0; - flex-shrink: 1; + .milestone-progress { + .sidebar-collapsed-icon { + clear: both; + padding: 15px 5px 5px; - @media (min-width: $screen-xs-min) { - // when displayed on one line stats go first, buttons second - order: 1; + .progress { + margin: 5px 0; + } } } - .progress { - width: 100%; - margin: 15px 0; + .right-sidebar-collapsed & { + .reference { + border-top: 1px solid $border-gray-normal; + } } } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 6e63bb75e88..12ca20a1420 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -16,6 +16,15 @@ ul.notes { .timeline-icon { float: left; + + svg { + width: 18px; + height: auto; + fill: $gray-darkest; + position: absolute; + left: 30px; + top: 15px; + } } .timeline-content { @@ -33,6 +42,103 @@ ul.notes { white-space: nowrap; } + .discussion-body { + padding-top: 15px; + } + + .discussion { + overflow: hidden; + display: block; + position: relative; + } + + .note { + display: block; + position: relative; + border-bottom: 1px solid $white-normal; + + &.note-discussion { + &.timeline-entry { + padding: 14px 10px; + } + + .system-note { + padding: 0; + } + } + + &.is-editting { + .note-header, + .note-text, + .edited-text { + display: none; + } + + .note-edit-form { + display: block; + + &.current-note-edit-form + .note-awards { + display: none; + } + } + } + + .note-body { + overflow-x: auto; + overflow-y: hidden; + + .note-text { + word-wrap: break-word; + @include md-typography; + // Reset ul style types since we're nested inside a ul already + @include bulleted-list; + ul.task-list { + ul:not(.task-list) { + padding-left: 1.3em; + } + } + } + } + + .note-awards { + .js-awards-block { + padding: 2px; + margin-top: 10px; + } + } + + .note-header { + padding-bottom: 3px; + padding-right: 20px; + + @media (min-width: $screen-sm-min) { + padding-right: 0; + } + + @media (max-width: $screen-xs-min) { + .inline { + display: block; + } + } + } + + .note-emoji-button { + .fa-spinner { + display: none; + } + + &.is-loading { + .fa-smile-o { + display: none; + } + + .fa-spinner { + display: inline-block; + } + } + } + } + .system-note { font-size: 14px; padding: 0; @@ -68,6 +174,10 @@ ul.notes { padding: 14px 10px; } + .note-header { + padding-bottom: 0; + } + .note-body { overflow: hidden; @@ -130,116 +240,6 @@ ul.notes { } } } - - .timeline-icon { - display: none; - - .avatar { - visibility: hidden; - - .discussion-body & { - visibility: visible; - } - } - } - } - - .discussion-body { - padding-top: 15px; - } - - .discussion { - overflow: hidden; - display: block; - position: relative; - } - - .note { - display: block; - position: relative; - border-bottom: 1px solid $white-normal; - - &.note-discussion { - &.timeline-entry { - padding: 14px 10px; - } - - .system-note { - padding: 0; - } - } - - &.is-editting { - .note-header, - .note-text, - .edited-text { - display: none; - } - - .note-edit-form { - display: block; - - &.current-note-edit-form + .note-awards { - display: none; - } - } - } - - .note-body { - overflow-x: auto; - overflow-y: hidden; - - .note-text { - word-wrap: break-word; - @include md-typography; - // Reset ul style types since we're nested inside a ul already - @include bulleted-list; - ul.task-list { - ul:not(.task-list) { - padding-left: 1.3em; - } - } - } - } - - .note-awards { - .js-awards-block { - padding: 2px; - margin-top: 10px; - } - } - - .note-header { - padding-bottom: 3px; - padding-right: 20px; - - @media (min-width: $screen-sm-min) { - padding-right: 0; - } - - @media (max-width: $screen-xs-min) { - .inline { - display: block; - } - } - } - - .note-emoji-button { - .fa-spinner { - display: none; - } - - &.is-loading { - .fa-smile-o { - display: none; - } - - .fa-spinner { - display: inline-block; - } - } - } - } } @@ -398,20 +398,71 @@ ul.notes { font-size: 17px; } - &:hover { + svg { + height: 16px; + width: 16px; + fill: $gray-darkest; + vertical-align: text-top; + } + + .award-control-icon-positive, + .award-control-icon-super-positive { + position: absolute; + margin-left: -20px; + opacity: 0; + } + + &:hover, + &.is-active { .danger-highlight { color: $gl-text-red; } .link-highlight { color: $gl-link-color; + + svg { + fill: $gl-link-color; + } + } + + .award-control-icon-neutral { + opacity: 0; + } + + .award-control-icon-positive { + opacity: 1; + } + } + + &.is-active { + .award-control-icon-positive { + opacity: 0; + } + + .award-control-icon-super-positive { + opacity: 1; } } } .discussion-toggle-button { + padding: 0; + background-color: transparent; + border: 0; line-height: 20px; font-size: 13px; + transition: color 0.1s linear; + + &:hover { + color: $gl-link-color; + } + + &:focus { + text-decoration: underline; + outline: none; + color: $gl-link-color; + } .fa { margin-right: 3px; @@ -494,7 +545,6 @@ ul.notes { } .line-resolve-all-container { - .btn-group { margin-left: -4px; } @@ -523,7 +573,6 @@ ul.notes { fill: $gray-darkest; } } - } .line-resolve-all { diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 703c5fc8869..8c6dd392865 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -230,6 +230,14 @@ font-size: 0; } + .fade-right { + right: 0; + } + + .fade-left { + left: 0; + } + @media (max-width: $screen-xs-max) { .cover-block { padding-top: 20px; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index eed58e618e8..0fa1f68e034 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -459,20 +459,13 @@ a.deploy-project-label { flex-wrap: wrap; .btn { - margin: 0 10px 10px 0; padding: 8px; + margin-left: 10px; } > div { + margin-bottom: 10px; padding-left: 0; - - &:last-child { - margin-bottom: 0; - - .btn { - margin-right: 0; - } - } } } } @@ -573,9 +566,19 @@ pre.light-well { display: flex; flex-direction: column; + // Disable Flexbox for admin page + &.admin-projects { + display: block; + + .project-row { + display: block; + } + } + .project-row { display: flex; align-items: center; + @include basic-list-stats; } h3 { @@ -732,6 +735,15 @@ pre.light-well { } } +.create-new-protected-branch-button { + @include dropdown-link; + + width: 100%; + background-color: transparent; + border: 0; + text-align: left; +} + .protected-branches-list { margin-bottom: 30px; diff --git a/app/assets/stylesheets/pages/settings_ci_cd.scss b/app/assets/stylesheets/pages/settings_ci_cd.scss index b97a29cd1a0..fe22d186af1 100644 --- a/app/assets/stylesheets/pages/settings_ci_cd.scss +++ b/app/assets/stylesheets/pages/settings_ci_cd.scss @@ -6,6 +6,8 @@ } .trigger-actions { + white-space: nowrap; + .btn { margin-left: 10px; } diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss index b071d7f18cd..a39815319f3 100644 --- a/app/assets/stylesheets/pages/todos.scss +++ b/app/assets/stylesheets/pages/todos.scss @@ -3,25 +3,6 @@ * */ -.navbar-nav { - li { - .badge.todos-pending-count { - position: inherit; - top: -6px; - margin-top: -5px; - font-weight: normal; - background: $todo-alert-blue; - margin-left: -17px; - font-size: 11px; - color: $white-light; - padding: 3px; - padding-top: 1px; - padding-bottom: 1px; - border-radius: 3px; - } - } -} - .todos-list > .todo { // workaround because we cannot use border-colapse border-top: 1px solid transparent; diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index fc4da4c495f..f3916622b6f 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -145,8 +145,6 @@ margin: 0; } -#modal-remove-blob > .modal-dialog { width: 850px; } - .blob-upload-dropzone-previews { text-align: center; border: 2px; |