diff options
Diffstat (limited to 'app/assets/stylesheets')
60 files changed, 2484 insertions, 777 deletions
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 5bb7e8caec1..d2ec1791d2b 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -47,3 +47,4 @@ @import "framework/emoji-sprites.scss"; @import "framework/icons.scss"; @import "framework/snippets.scss"; +@import "framework/memory_graph.scss"; diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index 90935b9616b..3cd7f81da47 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -145,3 +145,45 @@ a { .dropdown-menu-nav a { transition: none; } + +@keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +.fade-in { + animation: fadeIn $fade-in-duration 1; +} + +@keyframes fadeInHalf { + 0% { + opacity: 0; + } + + 100% { + opacity: 0.5; + } +} + +.fade-in-half { + animation: fadeInHalf $fade-in-duration 1; +} + +@keyframes fadeInFull { + 0% { + opacity: 0.5; + } + + 100% { + opacity: 1; + } +} + +.fade-in-full { + animation: fadeInFull $fade-in-duration 1; +} diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss index 3f5b78ed445..4ae2b164d2e 100644 --- a/app/assets/stylesheets/framework/avatar.scss +++ b/app/assets/stylesheets/framework/avatar.scss @@ -10,6 +10,8 @@ border-radius: $avatar_radius; border: 1px solid $avatar-border; &.s16 { @include avatar-size(16px, 6px); } + &.s18 { @include avatar-size(18px, 6px); } + &.s19 { @include avatar-size(19px, 6px); } &.s20 { @include avatar-size(20px, 7px); } &.s24 { @include avatar-size(24px, 8px); } &.s26 { @include avatar-size(26px, 8px); } @@ -93,3 +95,14 @@ align-self: center; } } + +.avatar-counter { + background-color: $gray-darkest; + color: $white-light; + border: 1px solid $border-color; + border-radius: 1em; + font-family: $regular_font; + font-size: 9px; + line-height: 16px; + text-align: center; +} diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index 1ae144fb471..9159927ed8b 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -38,6 +38,15 @@ height: 300px; overflow-y: scroll; } + + .disabled { + cursor: default; + opacity: 0.5; + + &:hover { + transform: none; + } + } } .emoji-search { @@ -91,7 +100,7 @@ .award-menu-holder { display: inline-block; - position: relative; + position: absolute; .tooltip { white-space: nowrap; @@ -99,8 +108,7 @@ } .award-control { - margin: 3px 5px 3px 0; - padding: .35em .4em; + margin-right: 5px; outline: 0; &.disabled { @@ -117,11 +125,52 @@ &.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); + } + } + + &.user-authored { + cursor: default; + opacity: 0.65; + + &:hover, + &:active { + background-color: $white-light; + border-color: $border-color; + } } &.btn { @@ -162,9 +211,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: 11px; + bottom: 7px; + 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..3dec911d289 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -230,7 +230,6 @@ float: right; margin-top: 8px; padding-bottom: 8px; - border-bottom: 1px solid $border-color; } } @@ -255,8 +254,65 @@ padding: 10px 0; } +.landing { + margin-bottom: $gl-padding; + overflow: hidden; + display: flex; + position: relative; + border: 1px solid $blue-300; + border-radius: $border-radius-default; + background-color: $blue-25; + justify-content: center; + + .dismiss-button { + position: absolute; + right: 6px; + top: 6px; + cursor: pointer; + color: $blue-300; + z-index: 1; + border: none; + background-color: transparent; + + &:hover, + &:focus { + border: none; + color: $blue-400; + } + } + + .svg-container { + align-self: center; + } + + .inner-content { + text-align: left; + white-space: nowrap; + + h4 { + color: $gl-text-color; + font-size: 17px; + } + + p { + color: $gl-text-color; + margin-bottom: $gl-padding; + } + } + + @media (max-width: $screen-sm-min) { + flex-direction: column; + + .inner-content { + white-space: normal; + padding: 0 28px; + text-align: center; + } + } +} + .empty-state { - margin: 100px 0 0; + margin: 5% auto 0; .text-content { max-width: 460px; @@ -279,23 +335,12 @@ } .btn { - margin: $btn-side-margin $btn-side-margin 0 0; - } - - @media(max-width: $screen-xs-max) { - margin-top: 50px; - text-align: center; + margin: $btn-side-margin 5px; - .btn { + @media(max-width: $screen-xs-max) { width: 100%; } } - - @media(min-width: $screen-xs-max) { - &.labels .text-content { - margin-top: 70px; - } - } } .flex-container-block { diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss index 9a0f7a14e57..759401a7806 100644 --- a/app/assets/stylesheets/framework/calendar.scss +++ b/app/assets/stylesheets/framework/calendar.scss @@ -5,7 +5,7 @@ direction: rtl; @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) { - overflow-x: scroll; + overflow-x: auto; } } diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 2c33b235980..57387b913dc 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -40,6 +40,10 @@ line-height: 24px; } +.bold { + font-weight: 600; +} + .tab-content { overflow: visible; } @@ -66,7 +70,7 @@ pre { } hr { - margin: $gl-padding 0; + margin: 24px 0; border-top: 1px solid darken($gray-normal, 8%); } @@ -88,7 +92,8 @@ hr { .item-title { font-weight: 600; } /** FLASH message **/ -.author_link { +.author_link, +.author-link { color: $gl-link-color; } @@ -420,6 +425,11 @@ table { } } +.bordered-box { + border: 1px solid $border-color; + border-radius: $border-radius-default; +} + .str-truncated { &-60 { @include str-truncated(60%); diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 2ede47e9de6..5ab48b6c874 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -14,14 +14,32 @@ } } +@mixin set-visible { + transform: translateY(0); + visibility: visible; + opacity: 1; + transition-duration: 100ms, 150ms, 25ms; + transition-delay: 35ms, 50ms, 25ms; +} + +@mixin set-invisible { + transform: translateY(-10px); + visibility: hidden; + opacity: 0; + transition-property: opacity, transform, visibility; + transition-duration: 70ms, 250ms, 250ms; + transition-timing-function: linear, $dropdown-animation-timing; + transition-delay: 25ms, 50ms, 0ms; +} + .open { .dropdown-menu, .dropdown-menu-nav { display: block; + @include set-visible; @media (max-width: $screen-xs-max) { width: 100%; - min-width: 240px; } } @@ -79,7 +97,7 @@ .fa-chevron-down { font-size: $dropdown-chevron-size; position: relative; - top: -3px; + top: -2px; margin-left: 5px; } @@ -161,8 +179,9 @@ .dropdown-menu, .dropdown-menu-nav { - display: none; + display: block; position: absolute; + width: 100%; top: 100%; left: 0; z-index: 9; @@ -176,9 +195,10 @@ border: 1px solid $dropdown-border-color; border-radius: $border-radius-base; box-shadow: 0 2px 4px $dropdown-shadow-color; + @include set-invisible; - .filtered-search-input-container & { - max-width: 280px; + @media (max-width: $screen-sm-min) { + width: 100%; } &.is-loading { @@ -191,6 +211,15 @@ } } + .shortcut-mappings { + display: none; + } + + &.shortcuts .shortcut-mappings { + display: inline-block; + margin-right: 5px; + } + ul { margin: 0; padding: 0; @@ -222,14 +251,16 @@ } .dropdown-header { - color: $gl-text-color; + color: $gl-text-color-secondary; font-size: 13px; - font-weight: 600; line-height: 22px; - text-transform: capitalize; padding: 0 16px; } + &.capitalize-header .dropdown-header { + text-transform: capitalize; + } + .separator + .dropdown-header { padding-top: 2px; } @@ -247,6 +278,23 @@ } } +.filtered-search-box-input-container .dropdown-menu, +.filtered-search-box-input-container .dropdown-menu-nav, +.comment-type-dropdown .dropdown-menu { + display: none; + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.filtered-search-box-input-container { + .dropdown-menu, + .dropdown-menu-nav { + max-width: 280px; + width: auto; + } +} + .dropdown-menu-drop-up { top: auto; bottom: 100%; @@ -291,8 +339,8 @@ .dropdown-menu-user { .avatar { float: left; - width: 30px; - height: 30px; + width: 2 * $gl-padding; + height: 2 * $gl-padding; margin: 0 10px 0 0; } } @@ -321,6 +369,10 @@ .dropdown-select { width: $dropdown-width; + + @media (max-width: $screen-sm-min) { + width: 100%; + } } .dropdown-menu-align-right { @@ -331,6 +383,7 @@ .dropdown-menu-selectable { a { padding-left: 26px; + position: relative; &.is-indeterminate, &.is-active { @@ -340,7 +393,8 @@ &::before { position: absolute; left: 6px; - top: 6px; + top: 50%; + transform: translateY(-50%); font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; @@ -355,6 +409,9 @@ &.is-active::before { content: "\f00c"; + position: absolute; + top: 50%; + transform: translateY(-50%); } } } @@ -467,6 +524,11 @@ overflow-y: auto; } +.dropdown-info-note { + color: $gl-text-color-secondary; + text-align: center; +} + .dropdown-footer { padding-top: 10px; margin-top: 10px; @@ -554,3 +616,28 @@ color: $gl-text-color-secondary; } } + +.droplab-item-ignore { + pointer-events: none; +} + +.pika-single.animate-picker.is-bound, +.pika-single.animate-picker.is-bound.is-hidden { + /* + * Having `!important` is not recommended but + * since `pikaday` sets positioning inline + * there's no way it can be gracefully overridden + * using config options. + */ + position: absolute !important; + display: block; +} + +.pika-single.animate-picker.is-bound { + @include set-visible; +} + +.pika-single.animate-picker.is-bound.is-hidden { + @include set-invisible; + overflow: hidden; +} diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index ffece53a093..f8674b763c8 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -4,13 +4,14 @@ */ .file-holder { border: 1px solid $border-color; + border-radius: $border-radius-default; &.file-holder-no-border { border: 0; } &.readme-holder { - margin: $gl-padding-top 0; + margin: $gl-padding 0; } table { @@ -25,7 +26,7 @@ text-align: left; padding: 10px $gl-padding; word-wrap: break-word; - border-radius: 3px 3px 0 0; + border-radius: $border-radius-default $border-radius-default 0 0; &.file-title-clear { padding-left: 0; @@ -61,11 +62,13 @@ .file-content { background: $white-light; - &.image_file { + &.image_file, + &.video { background: $file-image-bg; text-align: center; - img { + img, + video { padding: 20px; max-width: 80%; } @@ -73,14 +76,6 @@ &.wiki { padding: 30px $gl-padding; - - .highlight { - margin-bottom: 9px; - - > pre { - margin: 0; - } - } } &.blob-no-preview { @@ -100,9 +95,16 @@ tr { border-bottom: 1px solid $blame-border; + + &:last-child { + border-bottom: none; + } } td { + border-top: none; + border-bottom: none; + &:first-child { border-left: none; } @@ -113,7 +115,7 @@ } td.blame-commit { - padding: 0 10px; + padding: 5px 10px; min-width: 400px; background: $gray-light; } @@ -168,6 +170,18 @@ &.code { padding: 0; } + + .list-inline.previews { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: flex-start; + align-items: baseline; + + .preview { + padding: $gl-padding; + } + } } } @@ -240,7 +254,7 @@ span.idiff { border-bottom: 1px solid $border-color; padding: 5px $gl-padding; margin: 0; - border-radius: 3px 3px 0 0; + border-radius: $border-radius-default $border-radius-default 0 0; .file-header-content { white-space: nowrap; @@ -275,3 +289,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..637731cc479 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; @@ -83,7 +82,7 @@ .input-token:last-child { flex: 1; -webkit-flex: 1; - max-width: initial; + max-width: inherit; } } @@ -105,6 +104,34 @@ padding: 2px 7px; } + .value { + padding-right: 0; + } + + .remove-token { + display: inline-block; + padding-left: 4px; + padding-right: 8px; + + .fa-close { + color: $gl-text-color-secondary; + } + + &:hover .fa-close { + color: $gl-text-color; + } + + &.inverted { + .fa-close { + color: $gl-text-color-secondary-inverted; + } + + &:hover .fa-close { + color: $gl-text-color-inverted; + } + } + } + .name { background-color: $filter-name-resting-color; color: $filter-name-text-color; @@ -113,7 +140,7 @@ text-transform: capitalize; } - .value { + .value-container { background-color: $white-normal; color: $filter-value-text-color; border-radius: 0 2px 2px 0; @@ -125,7 +152,7 @@ background-color: $filter-name-selected-color; } - .value { + .value-container { background-color: $filter-value-selected-color; } } @@ -151,11 +178,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 +192,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 +250,115 @@ } } +.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-wrapper { + position: static; + display: flex; + flex-direction: column; +} + +.filtered-search-history-dropdown-toggle-button { + flex: 1; + width: auto; + border-radius: 0; + border: 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; + + svg { + fill: $gl-text-color; + } + } + + svg { + height: 14px; + width: 14px; + fill: $gl-text-color-secondary; + vertical-align: middle; + } + + .dropdown-toggle-text { + display: inline-block; + color: inherit; + + .fa { + vertical-align: middle; + color: inherit; + } + } +} + +.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 +378,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; } } @@ -343,10 +471,8 @@ } } -.filter-dropdown-item.dropdown-active { - .btn { - @extend %filter-dropdown-item-btn-hover; - } +.filter-dropdown-item.droplab-item-active .btn { + @extend %filter-dropdown-item-btn-hover; } .filter-dropdown-loading { diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss index c0de09f3968..dbdd5a4464b 100644 --- a/app/assets/stylesheets/framework/gfm.scss +++ b/app/assets/stylesheets/framework/gfm.scss @@ -2,7 +2,7 @@ * Styles that apply to all GFM related forms. */ +.gfm-commit, .gfm-commit_range { - font-family: $monospace_font; - font-size: 90%; + @extend .commit-sha; } diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index abb092623c0..ce8b27a1951 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -24,19 +24,23 @@ header { &.navbar-gitlab { padding: 0 16px; - z-index: 100; + z-index: 400; margin-bottom: 0; min-height: $header-height; background-color: $gray-light; border: none; border-bottom: 1px solid $border-color; + position: fixed; + top: 0; + left: 0; + right: 0; @media (max-width: $screen-xs-min) { padding: 0 16px; } &.with-horizontal-nav { - border-bottom: none; + border-color: transparent; } .container-fluid { @@ -110,6 +114,16 @@ header { } } + .navbar-border { + height: 1px; + position: absolute; + right: 0; + left: 0; + bottom: 0; + background-color: $border-color; + opacity: 0; + } + .global-dropdown { position: absolute; left: -10px; @@ -155,7 +169,7 @@ header { .header-logo { display: inline-block; - margin: 0 7px 0 2px; + margin: 0 12px 0 2px; position: relative; top: 10px; transition-duration: .3s; @@ -186,7 +200,7 @@ header { display: flex; align-items: flex-start; flex: 1 1 auto; - padding-top: (($header-height - 19) / 2); + padding-top: 14px; overflow: hidden; } @@ -329,8 +343,17 @@ header { .header-user { .dropdown-menu-nav { + width: auto; min-width: 140px; margin-top: -5px; + + .current-user { + padding: 5px 18px; + + .user-name { + display: block; + } + } } } diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index 87667f39ab8..ef864e8f6a9 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -1,4 +1,5 @@ -.ci-status-icon-success { +.ci-status-icon-success, +.ci-status-icon-passed { color: $green-500; svg { @@ -64,3 +65,7 @@ text-decoration: none; } } + +.user-avatar-link { + text-decoration: none; +} diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index 20c7bc93c28..9e8acf4e73c 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -25,6 +25,10 @@ body { .content-wrapper { padding-bottom: 100px; + + &:not(.page-with-layout-nav) { + margin-top: $header-height; + } } .container { diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index 15dc0aa6a52..d76053fe72a 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -152,6 +152,7 @@ ul.content-list { margin-top: 3px; margin-bottom: 4px; + &.has-tooltip, &:last-child { margin-right: 0; @@ -255,6 +256,7 @@ ul.controls { .avatar-inline { margin-left: 0; margin-right: 0; + margin-bottom: 0; } } } diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index a668a6c4c39..80691a234f8 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -120,6 +120,10 @@ // Ensure that image does not exceed viewport max-height: calc(100vh - 100px); } + + table { + @include markdown-table; + } } .toolbar-group { diff --git a/app/assets/stylesheets/framework/memory_graph.scss b/app/assets/stylesheets/framework/memory_graph.scss new file mode 100644 index 00000000000..81cdf6b59e4 --- /dev/null +++ b/app/assets/stylesheets/framework/memory_graph.scss @@ -0,0 +1,22 @@ +.memory-graph-container { + svg { + background: $white-light; + cursor: pointer; + + &:hover { + box-shadow: 0 0 4px $gray-darkest inset; + } + } + + path { + fill: none; + stroke: $blue-500; + stroke-width: 2px; + } + + circle { + stroke: $blue-700; + fill: $blue-700; + stroke-width: 4px; + } +} diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index b3340d41333..3a98332e46c 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -13,6 +13,13 @@ } /* + * Mixin for markdown tables + */ +@mixin markdown-table { + width: auto; +} + +/* * Base mixin for lists in GitLab */ @mixin basic-list { diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss index eb73f7cc794..678af978edd 100644 --- a/app/assets/stylesheets/framework/mobile.scss +++ b/app/assets/stylesheets/framework/mobile.scss @@ -112,7 +112,7 @@ } } - .issue_edited_ago, + .issue-edited-ago, .note_edited_ago { display: none; } 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 0e09638a8cc..28b2a7cfacd 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -24,10 +24,10 @@ } @mixin scrolling-links() { - white-space: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; + display: flex; &::-webkit-scrollbar { display: none; @@ -35,6 +35,7 @@ } .nav-links { + display: flex; padding: 0; margin: 0; list-style: none; @@ -42,17 +43,16 @@ border-bottom: 1px solid $border-color; li { - display: inline-block; + display: flex; a { - display: inline-block; padding: $gl-btn-padding; padding-bottom: 11px; - margin-bottom: -1px; font-size: 14px; line-height: 28px; color: $gl-text-color-secondary; border-bottom: 2px solid transparent; + white-space: nowrap; &:hover, &:active, @@ -85,10 +85,10 @@ .container-fluid { background-color: $gray-normal; margin-bottom: 0; + display: flex; } li { - &.active a { border-bottom: none; color: $link-underline-blue; @@ -110,7 +110,7 @@ .top-area { @include clearfix; - border-bottom: 1px solid $white-normal; + border-bottom: 1px solid $border-color; .nav-text { padding-top: 16px; @@ -137,15 +137,19 @@ } .nav-links { - display: inline-block; margin-bottom: 0; border-bottom: none; + float: left; &.wide { width: 100%; display: block; } + &.scrolling-tabs { + float: left; + } + li a { padding: 16px 15px 11px; } @@ -287,6 +291,7 @@ border-bottom: 1px solid $border-color; transition: padding $sidebar-transition-duration; text-align: center; + margin-top: $header-height; .container-fluid { position: relative; @@ -332,6 +337,10 @@ border-bottom: none; height: 51px; + @media (min-width: $screen-sm-min) { + justify-content: center; + } + li { a { padding-top: 10px; @@ -343,6 +352,10 @@ .scrolling-tabs-container { position: relative; + .merge-request-tabs-container & { + overflow: hidden; + } + .nav-links { @include scrolling-links(); } @@ -424,14 +437,14 @@ top: ($header-height + 1) * 3; &.affix { - top: 0; + top: $header-height; } } } } -.activities { - .nav-block { +.nav-block { + &.activities { border-bottom: 1px solid $border-color; .nav-links { diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 746c9c25620..018f61ca3a8 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -53,6 +53,7 @@ .right-sidebar-expanded { padding-right: 0; + z-index: 300; @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { &:not(.wiki-sidebar):not(.build-sidebar) .content-wrapper { @@ -80,6 +81,6 @@ &.affix { position: fixed; - top: 0; + top: $header-height; } } diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index ff185cd8767..aa0c512a277 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -1,29 +1,8 @@ .timeline { @include basic-list; - margin: 0; padding: 0; - .timeline-entry { - padding: $gl-padding $gl-btn-padding 11px; - border-color: $white-normal; - color: $gl-text-color; - border-bottom: 1px solid $border-white-light; - - &:target { - background: $line-target-blue; - } - - .avatar { - margin-right: 15px; - } - - .controls { - padding-top: 10px; - float: right; - } - } - .note-text { p:last-child { margin-bottom: 0; @@ -43,20 +22,45 @@ } } +.timeline-entry { + padding: $gl-padding $gl-btn-padding 0; + border-color: $white-normal; + color: $gl-text-color; + border-bottom: 1px solid $border-white-light; + + .timeline-entry-inner { + position: relative; + } + + &:target, + &.target { + background: $line-target-blue; + } + + .avatar { + margin-right: 15px; + } + + .controls { + padding-top: 10px; + float: right; + } +} + @media (max-width: $screen-xs-max) { .timeline { &::before { background: none; } + } - .timeline-entry .timeline-entry-inner { - .timeline-icon { - display: none; - } + .timeline-entry .timeline-entry-inner { + .timeline-icon { + display: none; + } - .timeline-content { - margin-left: 0; - } + .timeline-content { + margin-left: 0; } } } diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index c241816788b..0c3407f34f8 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -8,6 +8,13 @@ img { max-width: 100%; + margin: 0 0 8px; + } + + p a:not(.no-attachment-icon) img { + // Remove bottom padding because + // <p> already has $gl-padding bottom + margin-bottom: 0; } *:first-child:not(.katex-display) { @@ -47,44 +54,50 @@ h1 { font-size: 1.75em; font-weight: 600; - margin: 16px 0 10px; - padding: 0 0 0.3em; + margin: 24px 0 16px; + padding-bottom: 0.3em; border-bottom: 1px solid $white-dark; color: $gl-text-color; + + &:first-child { + margin-top: 0; + } } h2 { font-size: 1.5em; font-weight: 600; - margin: 16px 0 10px; + margin: 24px 0 16px; + padding-bottom: 0.3em; + border-bottom: 1px solid $white-dark; color: $gl-text-color; } h3 { - margin: 16px 0 10px; + margin: 24px 0 16px; font-size: 1.3em; } h4 { - margin: 16px 0 10px; + margin: 24px 0 16px; font-size: 1.2em; } h5 { - margin: 16px 0 10px; + margin: 24px 0 16px; font-size: 1em; } h6 { - margin: 16px 0 10px; + margin: 24px 0 16px; font-size: 0.95em; } blockquote { color: $gl-grayish-blue; font-size: inherit; - padding: 8px 21px; - margin: 12px 0; + padding: 8px 24px; + margin: 16px 0; border-left: 3px solid $white-dark; } @@ -95,19 +108,20 @@ blockquote p { color: $gl-grayish-blue !important; + margin: 0; font-size: inherit; line-height: 1.5; } p { color: $gl-text-color; - margin: 6px 0 0; + margin: 0 0 16px; } table { @extend .table; @extend .table-bordered; - margin: 12px 0; + margin: 16px 0; color: $gl-text-color; th { @@ -120,11 +134,20 @@ } pre { - margin: 12px 0; + margin-bottom: 16px; font-size: 13px; line-height: 1.6em; overflow-x: auto; border-radius: 2px; + + + &.plain-readme { + background: none; + border: none; + padding: 0; + margin: 0; + font-size: 14px; + } } p > code { @@ -134,7 +157,7 @@ ul, ol { padding: 0; - margin: 3px 0 !important; + margin: 0 0 16px !important; } ul:dir(rtl), @@ -155,13 +178,14 @@ } ul.task-list { - li.task-list-item { + > li.task-list-item { list-style-type: none; position: relative; + min-height: 22px; padding-left: 28px; margin-left: 0 !important; - input.task-list-item-checkbox { + > input.task-list-item-checkbox { position: absolute; left: 8px; top: 5px; @@ -264,19 +288,6 @@ h6 { /** CODE **/ pre { font-family: $monospace_font; - - &.plain-readme { - background: none; - border: none; - padding: 0; - margin: 0; - font-size: 14px; - } -} - -.monospace { - font-family: $monospace_font; - font-size: 90%; } code { @@ -290,6 +301,24 @@ a > code { color: $link-color; } +.monospace { + font-family: $monospace_font; +} + +.commit-sha, +.ref-name { + @extend .monospace; + font-size: 95%; +} + +.git-revision-dropdown-toggle { + @extend .monospace; +} + +.git-revision-dropdown .dropdown-content ul li a { + @extend .ref-name; +} + /** * Apply Markdown typography * @@ -337,3 +366,32 @@ h4 { .idiff.addition { background: $line-added-dark; } + + +/** + * form text input i.e. search bar, comments, forms, etc. + */ +input, +textarea { + &::-webkit-input-placeholder { + color: $placeholder-text-color; + } + + // support firefox 19+ vendor prefix + &::-moz-placeholder { + color: $placeholder-text-color; + opacity: 1; // FF defaults to 0.54 + } + + // scss-lint:disable PseudoElement + // support Edge vendor prefix + &::-ms-input-placeholder { + color: $placeholder-text-color; + } + + // scss-lint:disable PseudoElement + // support IE vendor prefix + &:-ms-input-placeholder { + color: $placeholder-text-color; + } +} diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 97794a47df8..17a4e8fd83e 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -26,6 +26,7 @@ $gray-dark: darken($gray-light, $darken-dark-factor); $gray-darker: #eee; $gray-darkest: #c4c4c4; +$green-25: #f6fcf8; $green-50: #e4f5eb; $green-100: #bae6cc; $green-200: #8dd5aa; @@ -37,6 +38,7 @@ $green-700: #12753a; $green-800: #0e5a2d; $green-900: #0a4020; +$blue-25: #f6fafd; $blue-50: #e4eff9; $blue-100: #bcd7f1; $blue-200: #8fbce8; @@ -48,6 +50,7 @@ $blue-700: #17599c; $blue-800: #134a81; $blue-900: #0f3b66; +$orange-25: #fffcf8; $orange-50: #fff2e1; $orange-100: #fedfb3; $orange-200: #feca81; @@ -59,6 +62,7 @@ $orange-700: #c26700; $orange-800: #a35100; $orange-900: #853b00; +$red-25: #fef7f6; $red-50: #fbe7e4; $red-100: #f4c4bc; $red-200: #ed9d90; @@ -97,6 +101,8 @@ $gl-font-size: 14px; $gl-text-color: rgba(0, 0, 0, .85); $gl-text-color-secondary: rgba(0, 0, 0, .55); $gl-text-color-disabled: rgba(0, 0, 0, .35); +$gl-text-color-inverted: rgba(255, 255, 255, 1.0); +$gl-text-color-secondary-inverted: rgba(255, 255, 255, .85); $gl-text-green: $green-600; $gl-text-red: $red-500; $gl-text-orange: $orange-600; @@ -105,8 +111,10 @@ $gl-link-hover-color: $blue-800; $gl-grayish-blue: #7f8fa4; $gl-gray: $gl-text-color; $gl-gray-dark: #313236; +$gl-gray-light: #5c5c5c; $gl-header-color: #4c4e54; $gl-header-nav-hover-color: #434343; +$placeholder-text-color: rgba(0, 0, 0, .42); /* * Lists @@ -147,7 +155,7 @@ $gl-sidebar-padding: 22px; /* * Misc */ -$row-hover: lighten($blue-50, 2%); +$row-hover: $blue-25; $row-hover-border: $blue-100; $progress-color: #c0392b; $header-height: 50px; @@ -155,7 +163,7 @@ $fixed-layout-width: 1280px; $limited-layout-width: 990px; $gl-avatar-size: 40px; $error-exclamation-point: $red-500; -$border-radius-default: 2px; +$border-radius-default: 3px; $settings-icon-size: 18px; $provider-btn-not-active-color: $blue-500; $link-underline-blue: $blue-500; @@ -223,18 +231,18 @@ $gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background; /* * Commit Diff Colors */ -$added: $green-300; -$deleted: $red-300; -$line-added: $green-50; -$line-added-dark: $green-100; -$line-removed: $red-50; -$line-removed-dark: $red-100; -$line-number-old: lighten($red-100, 5%); -$line-number-new: lighten($green-100, 5%); -$line-number-select: lighten($orange-100, 5%); -$line-target-blue: $blue-50; -$line-select-yellow: $orange-50; -$line-select-yellow-dark: $orange-100; +$added: #63c363; +$deleted: #f77; +$line-added: #ecfdf0; +$line-added-dark: #c7f0d2; +$line-removed: #fbe9eb; +$line-removed-dark: #fac5cd; +$line-number-old: #f9d7dc; +$line-number-new: #ddfbe6; +$line-number-select: #fbf2da; +$line-target-blue: #f6faff; +$line-select-yellow: #fcf8e7; +$line-select-yellow-dark: #f0e2bd; $dark-diff-match-bg: rgba(255, 255, 255, 0.3); $dark-diff-match-color: rgba(255, 255, 255, 0.1); $file-mode-changed: #777; @@ -293,6 +301,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 @@ -452,6 +462,11 @@ $label-remove-border: rgba(0, 0, 0, .1); $label-border-radius: 100px; /* +* Animation +*/ +$fade-in-duration: 200ms; + +/* * Lint */ $lint-incorrect-color: $red-500; @@ -550,3 +565,8 @@ $filter-name-text-color: rgba(0, 0, 0, 0.55); $filter-value-text-color: rgba(0, 0, 0, 0.85); $filter-name-selected-color: #ebebeb; $filter-value-selected-color: #d7d7d7; + +/* +Animation Functions +*/ +$dropdown-animation-timing: cubic-bezier(0.23, 1, 0.32, 1); diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index 32eb750180f..1c1392f8f67 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -12,10 +12,14 @@ } &.branch-info { - .monospace, + .commit-sha, .commit-info { margin-left: 4px; } + + .ref-name { + font-size: 12px; + } } } diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss index 09951fe3d3e..6e3829d994f 100644 --- a/app/assets/stylesheets/highlight/dark.scss +++ b/app/assets/stylesheets/highlight/dark.scss @@ -185,6 +185,11 @@ $dark-il: #de935f; color: $dark-highlight-color !important; } + // Links to URLs, emails, or dependencies + .line a { + color: $dark-na; + } + .hll { background-color: $dark-hll-bg; } .c { color: $dark-c; } /* Comment */ .err { color: $dark-err; } /* Error */ diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss index b6a6d298adf..68eb0c7720f 100644 --- a/app/assets/stylesheets/highlight/monokai.scss +++ b/app/assets/stylesheets/highlight/monokai.scss @@ -185,6 +185,11 @@ $monokai-gi: #a6e22e; color: $black !important; } + // Links to URLs, emails, or dependencies + .line a { + color: $monokai-k; + } + .hll { background-color: $monokai-hll; } .c { color: $monokai-c; } /* Comment */ .err { color: $monokai-err-color; background-color: $monokai-err-bg; } /* Error */ diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss index 4f7a50dcb4f..2cc968c32f2 100644 --- a/app/assets/stylesheets/highlight/solarized_dark.scss +++ b/app/assets/stylesheets/highlight/solarized_dark.scss @@ -188,6 +188,11 @@ $solarized-dark-il: #2aa198; background-color: $solarized-dark-highlight !important; } + // Links to URLs, emails, or dependencies + .line a { + color: $solarized-dark-kd; + } + /* Solarized Dark For use with Jekyll and Pygments diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss index 6463fe96c1b..b61b85a2cd1 100644 --- a/app/assets/stylesheets/highlight/solarized_light.scss +++ b/app/assets/stylesheets/highlight/solarized_light.scss @@ -196,6 +196,11 @@ $solarized-light-il: #2aa198; background-color: $solarized-light-highlight !important; } + // Links to URLs, emails, or dependencies + .line a { + color: $solarized-light-kd; + } + /* Solarized Light For use with Jekyll and Pygments diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss index ab2018bfbca..1daa10aef24 100644 --- a/app/assets/stylesheets/highlight/white.scss +++ b/app/assets/stylesheets/highlight/white.scss @@ -203,6 +203,11 @@ $white-gc-bg: #eaf2f5; background-color: $white-highlight !important; } + // Links to URLs, emails, or dependencies + .line a { + color: $white-nb; + } + .hll { background-color: $white-hll-bg; } .c { color: $white-c; font-style: italic; } .err { color: $white-err; background-color: $white-err-bg; } diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index b6168a293e0..68d7ab4bf84 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; @@ -207,8 +207,13 @@ margin-bottom: 5px; } - &.is-active { + &.is-active, + &.is-active .card-assignee:hover a { background-color: $row-hover; + + &:first-child:not(:only-child) { + box-shadow: -10px 0 10px 1px $row-hover; + } } .label { @@ -217,41 +222,111 @@ } .confidential-icon { + position: relative; + top: 1px; margin-right: 5px; } } .card-title { - margin: 0; + margin: 0 30px 0 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-right: 5px; + display: flex; + justify-content: flex-end; + position: absolute; + right: 15px; + height: 20px; + width: 20px; + + .avatar-counter { + display: none; + vertical-align: middle; + min-width: 20px; + line-height: 19px; + height: 20px; + padding-left: 2px; + padding-right: 2px; + border-radius: 2em; + } + + img { + vertical-align: top; + } + + a { + position: relative; + margin-left: -15px; + } + + a:nth-child(1) { + z-index: 3; + } + + a:nth-child(2) { + z-index: 2; + } + + a:nth-child(3) { + z-index: 1; + } + + a:nth-child(4) { + display: none; + } + + &:hover { + .avatar-counter { + display: inline-block; + } + + a { + position: static; + background-color: $white-light; + transition: background-color 0s; + margin-left: auto; + + &:nth-child(4) { + display: block; + } + + &:first-child:not(:only-child) { + box-shadow: -10px 0 10px 1px $white-light; + } + } + } } .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/builds.scss b/app/assets/stylesheets/pages/builds.scss index 969fc75c6eb..14a62b6cbf0 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -39,7 +39,7 @@ overflow-y: hidden; font-size: 12px; - .fa-refresh { + .fa-spinner { font-size: 24px; margin-left: 20px; } @@ -57,6 +57,48 @@ margin-right: 5px; } } + + .truncated-info { + text-align: center; + border-bottom: 1px solid; + background-color: $black; + height: 45px; + padding: 15px; + + &.affix { + top: 0; + } + + // with sidebar + &.affix.sidebar-expanded { + right: 312px; + left: 22px; + } + + // without sidebar + &.affix.sidebar-collapsed { + right: 20px; + left: 20px; + } + + &.affix-top { + position: absolute; + top: 0; + margin: 0 auto; + right: 5px; + left: 5px; + } + + .truncated-info-size { + margin: 0 5px; + } + + .raw-link { + color: inherit; + margin-left: 5px; + text-decoration: underline; + } + } } .scroll-controls { @@ -158,6 +200,7 @@ .header-content { flex: 1; + line-height: 1.8; a { color: $gl-text-color; @@ -186,8 +229,9 @@ white-space: pre; overflow-x: auto; font-size: 12px; + position: relative; - .fa-refresh { + .fa-spinner { font-size: 24px; } diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 0dad91ba128..bb72f453d1b 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -135,7 +135,7 @@ .text-expander { display: inline-block; - background: $gray-light; + background: $white-light; color: $gl-text-color-secondary; padding: 0 5px; cursor: pointer; @@ -146,6 +146,11 @@ line-height: $gl-font-size; outline: none; + &.open { + background: $gray-light; + box-shadow: inset 0 0 2px rgba($black, 0.2); + } + &:hover { background-color: darken($gray-light, 10%); text-decoration: none; @@ -158,7 +163,6 @@ .avatar-cell { width: 46px; - padding-left: 10px; img { margin-right: 0; @@ -170,7 +174,6 @@ justify-content: space-between; align-items: flex-start; flex-grow: 1; - padding-left: 10px; .merge-request-branches & { flex-direction: column; @@ -203,11 +206,11 @@ margin-left: $gl-padding; } } -} -.commit-short-id { - font-family: $monospace_font; - font-weight: 600; + .commit-sha { + font-size: 14px; + font-weight: 600; + } } .commit, @@ -268,7 +271,7 @@ } } - .commit-id { + .commit-sha { color: $gl-link-color; } 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/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index ad3dbc7ac48..7bec4bd5f56 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -3,6 +3,25 @@ margin: 24px auto 0; position: relative; + .landing { + margin-top: 10px; + + .inner-content { + white-space: normal; + + h4, + p { + margin: 7px 0 0; + max-width: 480px; + padding: 0 $gl-padding; + + @media (max-width: $screen-sm-min) { + margin: 0 auto; + } + } + } + } + .col-headers { ul { margin: 0; @@ -93,11 +112,6 @@ top: $gl-padding-top; } - .bordered-box { - border: 1px solid $border-color; - border-radius: $border-radius-default; - } - .content-list { li { padding: 18px $gl-padding $gl-padding; @@ -139,42 +153,9 @@ } } - .landing { - margin-bottom: $gl-padding; - overflow: hidden; - - .dismiss-icon { - position: absolute; - right: $cycle-analytics-box-padding; - cursor: pointer; - color: $cycle-analytics-dismiss-icon-color; - } - - .svg-container { - text-align: center; - - svg { - width: 136px; - height: 136px; - } - } - - .inner-content { - @media (max-width: $screen-xs-max) { - padding: 0 28px; - text-align: center; - } - - h4 { - color: $gl-text-color; - font-size: 17px; - } - - p { - color: $cycle-analytics-box-text-color; - margin-bottom: $gl-padding; - } - } + .landing svg { + width: 136px; + height: 136px; } .fa-spinner { @@ -213,7 +194,7 @@ } .stage-nav-item { - display: block; + display: flex; line-height: 65px; border-top: 1px solid transparent; border-bottom: 1px solid transparent; @@ -247,14 +228,10 @@ } .stage-nav-item-cell { - float: left; - - &.stage-name { - width: 65%; - } - &.stage-median { - width: 35%; + margin-left: auto; + margin-right: $gl-padding; + min-width: calc(35% - #{$gl-padding}); } } @@ -410,7 +387,7 @@ padding: 0 3px 0 0; } - .branch-name { + .ref-name { color: $black; display: inline-block; max-width: 180px; @@ -421,7 +398,7 @@ vertical-align: top; } - .short-sha { + .commit-sha { color: $gl-link-color; line-height: 1.3; vertical-align: top; diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss index 46fd19c93f9..f3de05aa5f6 100644 --- a/app/assets/stylesheets/pages/detail_page.scss +++ b/app/assets/stylesheets/pages/detail_page.scss @@ -29,11 +29,5 @@ .description { margin-top: 6px; - - p { - &:last-child { - margin-bottom: 0; - } - } } } diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 1aa1079903c..cfb1df4df84 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -1,38 +1,6 @@ // Common .diff-file { - border: 1px solid $border-color; margin-bottom: $gl-padding; - border-radius: 3px; - - .commit-short-id { - font-family: $regular_font; - font-weight: 400; - } - - .diff-header { - position: relative; - background: $gray-light; - border-bottom: 1px solid $border-color; - padding: 10px 16px; - color: $gl-text-color; - z-index: 10; - border-radius: 3px 3px 0 0; - - .diff-title { - font-family: $monospace_font; - word-break: break-all; - display: block; - - .file-mode { - color: $file-mode-changed; - } - } - - .commit-short-id { - font-family: $monospace_font; - font-size: smaller; - } - } .file-title, .file-title-flex-parent { @@ -106,6 +74,10 @@ span { white-space: pre-wrap; } + + .line { + word-wrap: break-word; + } } } @@ -421,12 +393,6 @@ float: right; } -.diffs { - .content-block { - border-bottom: none; - } -} - .files-changed { border-bottom: none; } @@ -572,14 +538,7 @@ .diff-comments-more-count, .diff-notes-collapse { - background-color: $gray-darkest; - color: $white-light; - border: 1px solid $white-light; - border-radius: 1em; - font-family: $regular_font; - font-size: 9px; - line-height: 17px; - text-align: center; + @extend .avatar-counter; } .diff-notes-collapse { 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 3d91e0b22d8..48d3b7b1d07 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -5,11 +5,6 @@ } } -.environments-list-loading { - width: 100%; - font-size: 34px; -} - .environments-folder-name { font-weight: normal; padding-top: 20px; @@ -73,10 +68,6 @@ margin: 0; } - .avatar-image-container { - text-decoration: none; - } - .icon-play { height: 13px; width: 12px; @@ -95,7 +86,7 @@ } .build-link, - .branch-name { + .ref-name { color: $gl-text-color; } @@ -140,7 +131,7 @@ } .branch-commit { - .commit-id { + .commit-sha { margin-right: 0; } } @@ -157,7 +148,18 @@ .prometheus-graph { text { - fill: $stat-graph-axis-fill; + fill: $gl-text-color; + stroke-width: 0; + } + + .label-axis-text, + .text-metric-usage { + fill: $black; + font-weight: 500; + } + + .legend-axis-text { + fill: $black; } } @@ -200,27 +202,42 @@ .rect-text-metric { fill: $white-light; stroke-width: 1; - stroke: $black; + stroke: $gray-darkest; } .rect-axis-text { fill: $white-light; } -.text-metric, -.text-median-metric, -.text-metric-usage, -.text-metric-date { - fill: $black; +.text-metric { + font-weight: 600; } -.text-metric-date { - font-weight: 200; +.selected-metric-line { + stroke: $gl-gray-dark; + stroke-width: 1; } -.selected-metric-line { +.deployment-line { stroke: $black; - stroke-width: 1; + stroke-width: 2; +} + +.deploy-info-text { + dominant-baseline: text-before-edge; +} + +.text-metric-bold { + font-weight: 600; +} + +.prometheus-state { + margin-top: 10px; + display: none; + + .state-button-section { + margin-top: 10px; + } } .environments-actions { diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss index 08398bb43a2..5b723f7c722 100644 --- a/app/assets/stylesheets/pages/events.scss +++ b/app/assets/stylesheets/pages/events.scss @@ -4,14 +4,18 @@ */ .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; + .system-note-image { + top: 20px; + } + + .user-avatar { + top: 14px; } .event-title, @@ -24,8 +28,31 @@ color: $gl-text-color; } - .avatar { - margin-left: -($gl-avatar-size + $gl-padding-top); + .system-note-image { + position: absolute; + left: 0; + top: 14px; + + svg { + width: 20px; + height: 20px; + fill: $gl-text-color-secondary; + } + + &.opened-icon, + &.created-icon { + svg { + fill: $green-300; + } + } + + &.closed-icon svg { + fill: $red-300; + } + + &.accepted-icon svg { + fill: $blue-300; + } } .event-title { @@ -108,8 +135,7 @@ li { &.commit { background: transparent; - padding: 3px; - padding-left: 0; + padding: 0; border: none; .commit-row-title { @@ -163,7 +189,7 @@ max-width: 100%; } - .avatar { + .system-note-image { display: none; } diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index 73a5889867a..72d73b89a2a 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -88,3 +88,26 @@ color: $gl-text-color-secondary; margin-top: 10px; } + +.explore-groups.landing { + margin-top: 10px; + + .inner-content { + padding: 0; + + p { + margin: 7px 0 0; + max-width: 480px; + padding: 0 $gl-padding; + + @media (max-width: $screen-sm-min) { + margin: 0 auto; + } + } + } + + svg { + width: 62px; + height: 50px; + } +} diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index e84a05e3e9e..9a63f758ce1 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -6,7 +6,12 @@ } .limit-container-width { - .detail-page-header { + .detail-page-header, + .page-content-header, + .commit-box, + .info-well, + .commit-ci-menu, + .files-changed { @extend .fixed-width-container; } @@ -17,16 +22,6 @@ .merge-manually { @extend .fixed-width-container; } - - .merge-request-tabs-holder { - &.affix { - border-bottom: 1px solid $border-color; - - .nav-links { - border: 0; - } - } - } } .merge-request-details { @@ -36,8 +31,7 @@ } .diffs { - .mr-version-controls, - .files-changed { + .mr-version-controls { @extend .fixed-width-container; } } @@ -52,7 +46,7 @@ .title { padding: 0; - margin: 0; + margin-bottom: 16px; border-bottom: none; } @@ -90,10 +84,15 @@ } .right-sidebar { - a { + a, + .btn-link { color: inherit; } + .btn-link { + outline: none; + } + .issuable-header-text { margin-top: 7px; } @@ -195,7 +194,17 @@ right: 0; transition: width .3s; background: $gray-light; - padding: 10px 20px; + padding: 0 20px; + z-index: 200; + overflow: hidden; + + .issuable-sidebar { + width: calc(100% + 100px); + height: 100%; + overflow-y: scroll; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + } &.right-sidebar-expanded { width: $gutter_width; @@ -209,8 +218,12 @@ } } - .bold { - font-weight: 600; + .issuable-sidebar-header { + padding-top: 10px; + } + + .assign-yourself .btn-link { + padding-left: 0; } .light { @@ -237,6 +250,10 @@ margin-left: 0; } + .assignee .user-list .avatar { + margin: 0; + } + .username { display: block; margin-top: 4px; @@ -258,11 +275,10 @@ } width: $gutter_collapsed_width; - padding-top: 0; + padding: 0; .block { width: $gutter_collapsed_width - 2px; - margin-left: -19px; padding: 15px 0 0; border-bottom: none; overflow: hidden; @@ -299,6 +315,10 @@ margin-top: 0; } + .sidebar-avatar-counter { + padding-top: 2px; + } + .todo-undone { color: $gl-link-color; } @@ -307,10 +327,15 @@ display: none; } - .avatar:hover { + .avatar:hover, + .avatar-counter:hover { border-color: $issuable-sidebar-color; } + .avatar-counter:hover { + color: $issuable-sidebar-color; + } + .btn-clipboard { border: none; color: $issuable-sidebar-color; @@ -320,6 +345,17 @@ color: $gl-text-color; } } + + &.multiple-users { + display: flex; + justify-content: center; + } + } + + .sidebar-avatar-counter { + width: 24px; + height: 24px; + border-radius: 12px; } .sidebar-collapsed-user { @@ -330,6 +366,37 @@ .issuable-header-btn { display: none; } + + .multiple-users { + height: 24px; + margin-bottom: 17px; + margin-top: 4px; + padding-bottom: 4px; + + .btn-link { + padding: 0; + border: 0; + + .avatar { + margin: 0; + } + } + + .btn-link:first-child { + position: absolute; + left: 10px; + z-index: 1; + } + + .btn-link:last-child { + position: absolute; + right: 10px; + + &:hover { + text-decoration: none; + } + } + } } a { @@ -360,6 +427,8 @@ } .detail-page-description { + padding: 16px 0 0; + small { color: $gray-darkest; } @@ -367,6 +436,8 @@ .edited-text { color: $gray-darkest; + display: block; + margin: 0 0 16px; .author_link { color: $gray-darkest; @@ -377,6 +448,12 @@ margin: -5px; } + +.user-list { + display: flex; + flex-wrap: wrap; +} + .participants-author { display: inline-block; padding: 5px; @@ -394,13 +471,39 @@ } } -.participants-more { +.user-item { + display: inline-block; + padding: 5px; + flex-basis: 20%; + + .user-link { + display: inline-block; + } +} + +.participants-more, +.user-list-more { margin-top: 5px; margin-left: 5px; - a { + a, + .btn-link { color: $gl-text-color-secondary; } + + .btn-link { + outline: none; + padding: 0; + } + + .btn-link:hover { + @extend a:hover; + text-decoration: none; + } + + .btn-link:focus { + text-decoration: none; + } } .issuable-form-padding-top { @@ -493,6 +596,19 @@ } } +.issuable-list li, +.issue-info-container .controls { + .avatar-counter { + display: inline-block; + vertical-align: middle; + min-width: 16px; + line-height: 14px; + height: 16px; + padding-left: 2px; + padding-right: 2px; + } +} + .time_tracker { padding-bottom: 0; border-bottom: 0; diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index b2f45625a2a..bee9b13b375 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -18,6 +18,15 @@ } } +.issue-realtime-pre-pulse { + opacity: 0; +} + +.issue-realtime-trigger-pulse { + transition: opacity $fade-in-duration linear; + opacity: 1; +} + .check-all-holder { line-height: 36px; float: left; @@ -42,6 +51,7 @@ ul.related-merge-requests > li { display: -ms-flexbox; display: -webkit-flex; display: flex; + align-items: center; .merge-request-id { flex-shrink: 0; @@ -50,6 +60,14 @@ ul.related-merge-requests > li { .merge-request-info { margin-left: 5px; } + + .row_title { + vertical-align: bottom; + } + + gl-emoji { + font-size: 1em; + } } .merge-requests-title, @@ -101,11 +119,15 @@ ul.related-merge-requests > li { } } -.merge-request-ci-status { +.merge-request-ci-status, +.related-merge-requests { + .ci-status-link { + display: block; + margin-right: 5px; + } + svg { - margin-right: 4px; - position: relative; - top: 1px; + display: block; } } @@ -156,3 +178,86 @@ ul.related-merge-requests > li { .recaptcha { margin-bottom: 30px; } + +.new-branch-col { + padding-top: 10px; +} + +.create-mr-dropdown-wrap { + .btn-group:not(.hide) { + display: flex; + } + + .js-create-merge-request { + flex-grow: 1; + flex-shrink: 0; + } + + .dropdown-menu { + width: 300px; + opacity: 1; + visibility: visible; + transform: translateY(0); + display: none; + } + + .dropdown-toggle { + .fa-caret-down { + pointer-events: none; + margin-left: 0; + color: inherit; + margin-left: 0; + } + } + + li:not(.divider) { + padding: 6px; + cursor: pointer; + + &:hover, + &:focus { + background-color: $dropdown-hover-color; + color: $white-light; + } + + &.droplab-item-selected { + .icon-container { + i { + visibility: visible; + } + } + } + + .icon-container { + float: left; + padding-left: 6px; + + i { + visibility: hidden; + } + } + + .description { + padding-left: 30px; + font-size: 13px; + + strong { + display: block; + font-weight: 600; + } + } + } +} + +@media (min-width: $screen-sm-min) { + .new-branch-col { + padding-top: 0; + text-align: right; + } + + .create-mr-dropdown-wrap { + .btn-group:not(.hide) { + display: inline-block; + } + } +} diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index e1ef0b029a5..c10588ac58e 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -116,7 +116,7 @@ } .manage-labels-list { - > li:not(.empty-message) { + > li:not(.empty-message):not(.is-not-draggable) { background-color: $white-light; cursor: move; cursor: -webkit-grab; diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index be7193bae04..8dbac76e30a 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -133,3 +133,55 @@ right: 160px; } } + +.flex-project-members-panel { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + @media (max-width: $screen-sm-min) { + display: block; + + .flex-project-title { + vertical-align: top; + display: inline-block; + max-width: 90%; + } + } + + .flex-project-title { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .badge { + height: 17px; + line-height: 16px; + margin-right: 5px; + padding-top: 1px; + padding-bottom: 1px; + } + + .flex-project-members-form { + flex-wrap: nowrap; + white-space: nowrap; + margin-left: auto; + } +} + +.panel { + .panel-heading { + .badge { + margin-top: 0; + } + + @media (max-width: $screen-sm-min) { + .badge { + margin-right: 0; + margin-left: 0; + } + } + } +}
\ No newline at end of file diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 566dcc64802..1ac9d5af21d 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -37,12 +37,6 @@ @include btn-red; } } - - .dropdown-toggle { - .fa { - color: inherit; - } - } } .accept-control { @@ -88,18 +82,13 @@ } } - .ci_widget { - border-bottom: 1px solid $well-inner-border; + .ci-widget { color: $gl-text-color; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; - - i, - svg { - margin-right: 8px; - } + padding: $gl-padding-top $gl-padding 0; svg { position: relative; @@ -115,16 +104,20 @@ flex-wrap: wrap; } - .ci-status-icon > .icon-link > svg { + .icon-link > .ci-status-icon > svg { width: 22px; height: 22px; + margin-right: 8px; + } + + .ci-error { + margin-right: $btn-side-margin; } } .mr-widget-body, - .ci_widget, .mr-widget-footer { - padding: 16px; + margin: 16px; } .mr-widget-pipeline-graph { @@ -132,18 +125,13 @@ .dropdown-menu { margin-top: 11px; + z-index: 200; } .ci-action-icon-wrapper { line-height: 16px; } - @media (min-width: $screen-sm-min) { - .stage-cell { - padding: 0 4px; - } - } - @media (max-width: $screen-xs-max) { order: 1; margin-top: $gl-padding-top; @@ -166,12 +154,78 @@ .normal { color: $gl-text-color; + font-size: 15px; + } + + .capitalize { + text-transform: capitalize; + } + + .label-branch { + @extend .ref-name; + + color: $gl-text-color; + font-weight: bold; + overflow: hidden; + margin: 0 3px; + word-break: break-all; + + &.label-truncated { + position: relative; + display: inline-block; + width: 250px; + margin-bottom: -3px; + white-space: nowrap; + text-overflow: clip; + line-height: 14px; + + &::after { + position: absolute; + content: '...'; + right: 0; + font-family: $regular_font; + background-color: $gray-light; + } + } } .js-deployment-link { display: inline-block; } + .mr-widget-help { + margin: $gl-padding; + color: $ci-skipped-color; + } + + .mr-info-list { + + &.mr-links { + margin-left: 28px; + } + + &.mr-memory-usage { + margin: 5px 0 10px 25px; + } + } + + .mr-widget-heading, + .mr-widget-body { + .btn-default.btn-xs { + margin-left: 5px; + } + } + + .mr-widget-body { + .btn { + font-size: 15px; + } + + .btn-group .btn { + padding: 5px 10px; + } + } + .mr-widget-body { h4 { font-weight: 600; @@ -182,6 +236,10 @@ &.has-conflicts .fa-exclamation-triangle { color: $gl-warning; } + + time { + font-weight: normal; + } } .btn-grouped { @@ -189,6 +247,86 @@ margin-right: 7px; } + label { + font-weight: normal; + } + + .spacing { + margin: 0 $gl-padding; + } + + .bold { + margin-left: 5px; + font-weight: bold; + font-size: 15px; + color: $gl-gray-light; + } + + .state-label { + font-size: 16px; + font-weight: bold; + padding-right: 10px; + } + + .danger { + color: $gl-danger; + } + + .mr-widget-help { + margin: $gl-padding 0; + } + + .with-button { + position: relative; + top: 6px; + margin-bottom: 24px; + } + + .spacing, + .bold { + vertical-align: middle; + } + + .dropdown-menu { + li a { + padding: 5px; + } + + .merge-opt-icon, + .merge-opt-title { + display: inline-block; + float: left; + } + + .merge-opt-icon svg { + height: 15px; + width: 15px; + } + + .merge-opt-title { + margin-left: 8px; + } + } + + .dropdown-toggle { + .fa { + color: inherit; + } + } + + .has-error-message + .has-custom-error { + margin-left: 0; + } + + .has-custom-error { + display: inline-block; + margin-left: 70px; + } + + .merge-error-text { + margin-left: 70px; + } + @media (max-width: $screen-xs-max) { h4 { font-size: 14px; @@ -220,6 +358,33 @@ margin: 0; } } + + .commit-message-editor { + label { + padding: 0; + } + } + + &.mr-state-locked .mr-info-list { + margin-top: 10px; + margin-left: 12px; + } + + &.empty-state { + .artwork { + margin-bottom: $gl-padding; + } + + .text { + span { + font-weight: bold; + } + + p { + margin-top: $gl-padding; + } + } + } } .mr-widget-footer { @@ -255,16 +420,6 @@ } } -.label-branch { - color: $gl-text-color; - font-family: $monospace_font; - font-weight: bold; - overflow: hidden; - font-size: 90%; - margin: 0 3px; - word-break: break-all; -} - .commits-empty { text-align: center; @@ -329,8 +484,6 @@ } #modal_merge_info .modal-dialog { - width: 600px; - .dark { margin-right: 40px; } @@ -345,61 +498,79 @@ } } -.remove-message-pipes { - ul { - margin: 10px 0 0 12px; - padding: 0; - list-style: none; - border-left: 2px solid $border-color; - display: inline-block; - } +.mr-info-list { + position: relative; + margin: 10px 0 $gl-padding 12px; - li { + p { + margin: 6px 0; position: relative; - margin: 0; - padding: 0; - display: block; + padding-left: 15px; + + &::before { + content: ''; + position: absolute; + border-top: 2px solid $border-color; + height: 1px; + top: 8px; + width: 8px; + left: 0; + } - span { - margin-left: 15px; - max-height: 20px; + &:last-child { + margin-bottom: 0; + + &::before { + top: 14px; + } } } - li::before { - content: ''; + .legend { + height: 100%; + width: 2px; + background: $border-color; position: absolute; - border-top: 2px solid $border-color; - height: 1px; - top: 8px; - width: 8px; + top: -5px; } +} - li:last-child { - &::before { - top: 18px; +.mr-info-list.mr-memory-usage { + .legend { + height: 65%; + top: 0; + + @media (max-width: $screen-xs-max) { + height: 20px; } + } - span { - display: block; - position: relative; - top: 5px; - margin-top: 5px; + p { + float: left; + padding-left: 20px; + + &::before { + top: 13px; } } + + .memory-graph-container { + float: left; + margin-left: 5px; + } } .mr-source-target { background-color: $gray-light; - line-height: 31px; - border-style: solid; - border-width: 1px; - border-color: $border-color; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - border-bottom: none; - padding: 16px; - margin-bottom: -1px; + border-radius: 3px 3px 0 0; + border-bottom: 1px solid $border-color; + padding: 0 $gl-padding; + margin-bottom: 6px; + line-height: 44px; + + .dropdown-toggle .fa { + color: $gl-text-color; + } } .panel-new-merge-request { @@ -484,6 +655,10 @@ } } +.target-branch-select-dropdown-container { + position: relative; +} + .assign-to-me-link { padding-left: 12px; white-space: nowrap; @@ -513,7 +688,6 @@ .mr-version-controls { background: $gray-light; - border-bottom: 1px solid $border-color; color: $gl-text-color; .mr-version-menus-container { @@ -525,11 +699,12 @@ } .content-block { - border-top: 1px solid $border-color; padding: $gl-padding-top $gl-padding; } .comments-disabled-notif { + line-height: 28px; + .btn { margin-left: 5px; } @@ -551,12 +726,18 @@ } .merge-request-tabs-holder { + top: $header-height; + z-index: 100; background-color: $white-light; + border-bottom: 1px solid $border-color; + + @media(min-width: $screen-sm-min) { + position: sticky; + position: -webkit-sticky; + } &.affix { - top: 0; left: 0; - z-index: 10; transition: right .15s; @media (max-width: $screen-xs-max) { @@ -568,6 +749,16 @@ padding-right: $gl-padding; } } + + .nav-links { + border: 0; + } +} + +.merge-request-tabs { + display: flex; + margin-bottom: 0; + padding: 0; } .limit-container-width { @@ -578,6 +769,15 @@ } } +.merge-request-tabs-container { + display: flex; + justify-content: space-between; + + @media (max-width: $screen-xs-max) { + flex-direction: column-reverse; + } +} + .limit-container-width:not(.container-limited) { .merge-request-tabs-holder:not(.affix) { .merge-request-tabs-container { @@ -585,3 +785,22 @@ } } } + +.mr-memory-usage { + p.usage-info-loading, + p.usage-info-unavailable, + p.usage-info-failed { + margin-bottom: 5px; + } + + p.usage-info-loading .usage-info-load-spinner { + margin-right: 10px; + font-size: 16px; + } + + @media (max-width: $screen-md-min) { + .mr-info-list.mr-memory-usage .legend { + height: 80%; + } + } +} diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 927bf9805ce..9db26f99a75 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -28,7 +28,7 @@ .note-edit-form { .note-form-actions { position: relative; - margin-top: $gl-padding; + margin: $gl-padding 0; } .note-preview-holder { @@ -277,6 +277,7 @@ .toolbar-text { font-size: 14px; line-height: 16px; + margin-top: 2px; @media (min-width: $screen-md-min) { float: left; @@ -310,3 +311,137 @@ margin-bottom: 10px; } } + +.comment-type-dropdown { + .comment-btn { + width: auto; + } + + .dropdown-toggle { + float: right; + + .toggle-icon { + color: $white-light; + padding-right: 2px; + margin-top: 2px; + pointer-events: none; + } + } + + .dropdown-menu { + top: initial; + bottom: 40px; + width: 298px; + } + + .description { + display: inline-block; + white-space: normal; + margin-left: 8px; + padding-right: 33px; + } + + li { + padding-top: 6px; + + & > a { + margin: 0; + padding: 0; + color: inherit; + border-radius: 0; + text-overflow: inherit; + + &:hover, + &:focus { + background-color: inherit; + color: inherit; + } + } + + &:hover, + &:focus { + background-color: $dropdown-hover-color; + color: $white-light; + } + + &.droplab-item-selected i { + visibility: visible; + } + + i { + visibility: hidden; + } + } + + i { + display: inline-block; + vertical-align: top; + padding-top: 2px; + } + + .divider { + margin: 0 8px; + padding: 0; + border-top: $gray-darkest; + } + + @media (max-width: $screen-xs-max) { + display: flex; + width: 100%; + margin-bottom: 10px; + + .comment-btn { + flex-grow: 1; + flex-shrink: 0; + width: auto; + } + + .dropdown-toggle { + flex-grow: 0; + flex-shrink: 1; + width: auto; + } + } +} + +.uploading-container { + float: right; + + @media (max-width: $screen-xs-max) { + float: left; + margin-top: 5px; + } +} + +.uploading-error-icon, +.uploading-error-message { + color: $gl-text-red; +} + +.uploading-error-message { + @media (max-width: $screen-xs-max) { + &::after { + content: "\a"; + white-space: pre; + } + } +} + +.uploading-progress { + margin-right: 5px; +} + +.attach-new-file, +.button-attach-file, +.retry-uploading-link { + color: $gl-link-color; + padding: 0; + background: none; + border: 0; + font-size: 14px; + line-height: 16px; +} + +.markdown-selector { + color: $gl-link-color; +} diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 57cf8e136e2..4b15fc2bd82 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: 16px; + height: 16px; + fill: $gray-darkest; + position: absolute; + left: 0; + top: 16px; + } } .timeline-content { @@ -33,11 +42,135 @@ 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; + + &.being-posted { + pointer-events: none; + opacity: 0.5; + + .dummy-avatar { + display: inline-block; + height: 40px; + width: 40px; + border-radius: 50%; + background-color: $kdb-border; + border: 1px solid darken($kdb-border, 25%); + } + + .note-headline-light, + .fa-spinner { + margin-left: 3px; + } + } + + &.note-discussion { + &.timeline-entry { + padding: 14px 10px; + } + + .system-note { + padding: 0; + } + } + + &.is-editing { + .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; + } + } + + table { + @include markdown-table; + } + } + } + + .note-awards { + .js-awards-block { + margin-bottom: 16px; + } + } + + .note-header { + + @media (max-width: $screen-xs-min) { + .inline { + display: block; + } + } + } + + .note-emoji-button { + position: relative; + line-height: 1; + + .fa-spinner { + display: none; + } + + &.is-loading { + .fa-smile-o { + display: none; + } + + .fa-spinner { + display: inline-block; + } + } + } + } + .system-note { font-size: 14px; padding: 0; clear: both; + @media (min-width: $screen-sm-min) { + margin-left: 65px; + } + + .note-header { + padding-bottom: 0; + } + &.timeline-entry::after { clear: none; } @@ -66,6 +199,14 @@ ul.notes { .timeline-content { padding: 14px 10px; + + @media (min-width: $screen-sm-min) { + margin-left: 20px; + } + } + + .note-header { + padding-bottom: 0; } .note-body { @@ -97,11 +238,6 @@ ul.notes { ul { margin: 3px 0 3px 16px !important; - - .gfm-commit { - font-family: $monospace_font; - font-size: 12px; - } } p:first-child { @@ -130,116 +266,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; - } - } - } - } } @@ -253,10 +279,6 @@ ul.notes { } } - .diff-header > span { - margin-right: 10px; - } - .line_content { white-space: pre-wrap; } @@ -294,6 +316,18 @@ ul.notes { border-width: 1px; } + .discussion-notes { + &:not(:first-child) { + border-top: 1px solid $white-normal; + margin-top: 20px; + } + + &:not(:last-child) { + border-bottom: 1px solid $white-normal; + margin-bottom: 20px; + } + } + .notes { background-color: $white-light; } @@ -332,6 +366,20 @@ ul.notes { font-size: 14px; } +.note-header { + display: flex; + justify-content: space-between; + + @media (max-width: $screen-xs-max) { + flex-flow: row wrap; + } +} + +.note-header-info { + min-width: 0; + padding-bottom: 5px; +} + .note-headline-light { display: inline; @@ -351,21 +399,36 @@ ul.notes { } } +.note-headline-meta { + display: inline-block; + white-space: nowrap; + + .system-note-message { + white-space: normal; + } +} + /** * Actions for Discussions/Notes */ -.discussion-actions, -.note-actions { +.discussion-actions { float: right; margin-left: 10px; color: $gray-darkest; } .note-actions { - position: absolute; - right: 0; - top: 0; + flex-shrink: 0; + // For PhantomJS that does not support flex + float: right; + margin-left: 10px; + color: $gray-darkest; + + @media (max-width: $screen-xs-max) { + float: none; + margin-left: 0; + } .note-action-button { margin-left: 8px; @@ -398,13 +461,51 @@ 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; + top: 0; + left: 0; + 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; } } } @@ -508,6 +609,14 @@ ul.notes { } .line-resolve-all-container { + @media (min-width: $screen-sm-min) { + margin-right: 0; + padding-left: $gl-padding; + } + + > div { + white-space: nowrap; + } .btn-group { margin-left: -4px; @@ -537,7 +646,6 @@ ul.notes { fill: $gray-darkest; } } - } .line-resolve-all { @@ -561,7 +669,7 @@ ul.notes { .line-resolve-btn { position: relative; - top: 2px; + top: 0; padding: 0; background-color: transparent; border: none; @@ -572,7 +680,6 @@ ul.notes { } &:not(.is-disabled):hover, - &:not(.is-disabled):focus, &.is-active { color: $gl-text-green; @@ -583,8 +690,13 @@ ul.notes { svg { fill: $gray-darkest; - height: 15px; - width: 15px; + height: 16px; + width: 16px; + } + + .loading { + margin: 0; + height: auto; } } @@ -598,6 +710,10 @@ ul.notes { } } +.discussion-notes .flash-container { + margin-bottom: 0; +} + // Merge request notes in diffs .diff-file { // Diff is side by side diff --git a/app/assets/stylesheets/pages/pipeline_schedules.scss b/app/assets/stylesheets/pages/pipeline_schedules.scss new file mode 100644 index 00000000000..ab417948931 --- /dev/null +++ b/app/assets/stylesheets/pages/pipeline_schedules.scss @@ -0,0 +1,76 @@ +.js-pipeline-schedule-form { + .dropdown-select, + .dropdown-menu-toggle { + width: 100%!important; + } + + .gl-field-error { + margin: 10px 0 0; + } +} + +.interval-pattern-form-group { + label { + margin-right: 10px; + font-size: 12px; + + &[for='custom'] { + margin-right: 0; + } + } + + .cron-interval-input-wrapper { + padding-left: 0; + } + + .cron-interval-input { + margin: 10px 10px 0 0; + } + + .cron-syntax-link-wrap { + margin-right: 10px; + font-size: 12px; + } +} + +.pipeline-schedule-table-row { + .branch-name-cell { + max-width: 300px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .next-run-cell { + color: $gl-text-color-secondary; + } + + a { + color: $text-color; + } +} + +.pipeline-schedules-user-callout { + .bordered-box.content-block { + border: 1px solid $border-color; + background-color: transparent; + padding: 16px; + } + + #dismiss-callout-btn { + color: $gl-text-color; + } +} + +.cron-preset-radio-input { + display: inline-block; + + @media (max-width: $screen-md-max) { + display: block; + margin: 0 0 5px 5px; + } + + input { + margin-right: 3px; + } +} diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index a4fe652b52f..292584eba28 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -1,10 +1,4 @@ .pipelines { - .realtime-loading { - font-size: 40px; - text-align: center; - margin: 0 auto; - } - .stage { max-width: 90px; width: 90px; @@ -14,10 +8,6 @@ white-space: nowrap; } - .empty-state { - margin: 5% auto 0; - } - .table-holder { width: 100%; @@ -168,9 +158,13 @@ float: none; } + .api { + @extend .monospace; + } + .branch-commit { - .branch-name { + .ref-name { font-weight: bold; max-width: 120px; overflow: hidden; @@ -192,12 +186,11 @@ color: $gl-text-color; } - .commit-id { + .commit-sha { color: $gl-link-color; } .commit-title { - margin-top: 4px; max-width: 225px; overflow: hidden; white-space: nowrap; @@ -230,7 +223,7 @@ .duration, .finished-at { color: $gl-text-color-secondary; - margin: 4px 0; + margin: 0; white-space: nowrap; .fa { @@ -257,7 +250,7 @@ .stage-cell { font-size: 0; - padding: 10px 4px; + padding: 0 4px; > .stage-container > div > button > span > svg, > .stage-container > button > svg { @@ -273,6 +266,7 @@ .stage-container { display: inline-block; position: relative; + vertical-align: middle; height: 22px; margin: 3px 6px 3px 0; @@ -316,6 +310,32 @@ } } +.build-failures { + .build-state { + padding: 20px 2px; + + .build-name { + float: right; + font-weight: 500; + } + + .ci-status-icon-failed svg { + vertical-align: middle; + } + + .stage { + color: $gl-text-color-secondary; + font-weight: 500; + vertical-align: middle; + } + } + + .build-log { + border: none; + line-height: initial; + } +} + // Pipeline graph .pipeline-graph { width: 100%; @@ -357,9 +377,9 @@ content: ''; position: absolute; top: 48%; - left: -48px; + left: -44px; border-top: 2px solid $border-color; - width: 48px; + width: 44px; height: 1px; } } @@ -459,7 +479,7 @@ color: $gl-text-color-secondary; // Action Icons in big pipeline-graph nodes - > .ci-action-icon-container .ci-action-icon-wrapper { + .ci-action-icon-container .ci-action-icon-wrapper { height: 30px; width: 30px; background: $white-light; @@ -484,7 +504,7 @@ } } - > .ci-action-icon-container { + .ci-action-icon-container { position: absolute; right: 5px; top: 5px; @@ -514,7 +534,7 @@ } } - > .build-content { + .build-content { display: inline-block; padding: 8px 10px 9px; width: 100%; @@ -530,34 +550,6 @@ } - .arrow { - &::before, - &::after { - content: ''; - display: inline-block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: 18px; - } - - &::before { - left: -5px; - margin-top: -6px; - border-width: 7px 5px 7px 0; - border-right-color: $border-color; - } - - &::after { - left: -4px; - margin-top: -9px; - border-width: 10px 7px 10px 0; - border-right-color: $white-light; - } - } - // Connect first build in each stage with right horizontal line &:first-child { &::after { @@ -781,16 +773,11 @@ } .scrollable-menu { + padding: 0; max-height: 245px; overflow: auto; } - // Loading icon - .builds-dropdown-loading { - margin: 0 auto; - width: 20px; - } - // Action icon on the right a.ci-action-icon-wrapper { color: $action-icon-color; @@ -837,7 +824,8 @@ border-radius: 3px; // build name - .ci-build-text { + .ci-build-text, + .ci-status-text { font-weight: 200; overflow: hidden; white-space: nowrap; @@ -890,33 +878,64 @@ } /** + * Top arrow in the dropdown in the big pipeline graph + */ +.big-pipeline-graph-dropdown-menu { + + &::before, + &::after { + content: ''; + display: inline-block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + top: 18px; + } + + &::before { + left: -5px; + margin-top: -6px; + border-width: 7px 5px 7px 0; + border-right-color: $border-color; + } + + &::after { + left: -4px; + margin-top: -9px; + border-width: 10px 7px 10px 0; + border-right-color: $white-light; + } +} + +/** * Top arrow in the dropdown in the mini pipeline graph */ .mini-pipeline-graph-dropdown-menu { - .arrow-up { - &::before, - &::after { - content: ''; - display: inline-block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: -6px; - left: 2px; - border-width: 0 5px 6px; - } - &::before { - border-width: 0 5px 5px; - border-bottom-color: $border-color; - } + &::before, + &::after { + content: ''; + display: inline-block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + top: -6px; + left: 2px; + border-width: 0 5px 6px; + } - &::after { - margin-top: 1px; - border-bottom-color: $white-light; - } + &::before { + border-width: 0 5px 5px; + border-bottom-color: $border-color; + } + + &::after { + margin-top: 1px; + border-bottom-color: $white-light; } } diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 703c5fc8869..fe084eb9397 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; @@ -281,8 +289,12 @@ table.u2f-registrations { margin: 0 auto; .bordered-box { - border: 1px solid $border-color; + border: 1px solid $blue-300; border-radius: $border-radius-default; + background-color: $blue-25; + position: relative; + display: flex; + justify-content: center; } .landing { @@ -290,28 +302,59 @@ table.u2f-registrations { margin-bottom: $gl-padding; .close { - margin-right: 20px; - } + position: absolute; + right: 20px; + opacity: 1; + + .dismiss-icon { + float: right; + cursor: pointer; + color: $blue-300; + } + + &:hover { + background-color: transparent; + border: 0; - .dismiss-icon { - float: right; - cursor: pointer; - color: $cycle-analytics-dismiss-icon-color; + .dismiss-icon { + color: $blue-400; + } + } } .svg-container { - text-align: center; + margin-right: 30px; + display: inline-block; svg { - width: 136px; - height: 136px; + height: 110px; + vertical-align: top; } } + + .user-callout-copy { + display: inline-block; + vertical-align: top; + } } @media(max-width: $screen-xs-max) { - .inner-content { - padding-left: 30px; + text-align: center; + + .bordered-box { + display: block; + } + + .landing { + .svg-container, + .user-callout-copy { + margin: 0; + display: block; + + svg { + height: 75px; + } + } } } } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index c2c2f371b87..f0bf3d4c267 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; - } - } } } } @@ -603,6 +596,10 @@ pre.light-well { .avatar-container { align-self: flex-start; + + > a { + width: 100%; + } } .project-details { @@ -617,6 +614,7 @@ pre.light-well { .controls { margin-left: auto; + text-align: right; } .ci-status-link { @@ -641,59 +639,6 @@ pre.light-well { } } -.project-last-commit { - background-color: $gray-light; - border: 1px solid $border-color; - border-radius: $border-radius-base; - padding: 12px; - - @media (min-width: $screen-sm-min) { - margin-top: $gl-padding; - } - - .ci-status { - margin-right: $gl-padding; - } - - .commit-row-message { - color: $gl-text-color; - } - - .commit_short_id { - margin-right: 5px; - color: $gl-link-color; - font-weight: 600; - } - - .commit-author-link { - .commit-author-name { - font-weight: 600; - } - } -} - -.project-show-readme { - .row-content-block { - background-color: inherit; - border: none; - } - - .readme-holder { - padding: $gl-padding 0; - border-top: 0; - - .edit-project-readme { - z-index: 2; - position: relative; - } - - .wiki h1 { - border-bottom: none; - padding: 0; - } - } -} - .git-clone-holder { width: 380px; @@ -751,7 +696,8 @@ pre.light-well { text-align: left; } -.protected-branches-list { +.protected-branches-list, +.protected-tags-list { margin-bottom: 30px; a { @@ -783,6 +729,17 @@ pre.light-well { } } +.protected-tags-list { + .dropdown-menu-toggle { + width: 100%; + max-width: 300px; + } + + .flash-container { + padding: 0; + } +} + .custom-notifications-form { .is-loading { .custom-notification-event-loading { @@ -815,7 +772,8 @@ pre.light-well { } .compare-form-group { - .dropdown-menu { + .dropdown-menu, + .inline-input-group { width: 100%; @media (min-width: $screen-sm-min) { @@ -834,14 +792,6 @@ pre.light-well { width: auto; } } - - .inline-input-group { - width: 100%; - - @media (min-width: $screen-sm-min) { - width: 250px; - } - } } .clearable-input { @@ -924,27 +874,23 @@ pre.light-well { } .variable-key { - width: 300px; - max-width: 300px; + max-width: 120px; overflow: hidden; word-wrap: break-word; - - // override bootstrap - white-space: normal!important; - - @media (max-width: $screen-sm-max) { - width: 150px; - max-width: 150px; - } + white-space: nowrap; + text-overflow: ellipsis; } .variable-value { - @media(max-width: $screen-xs-max) { - width: 150px; - max-width: 150px; - overflow: hidden; - word-wrap: break-word; - } + max-width: 150px; + overflow: hidden; + word-wrap: break-word; + white-space: nowrap; + text-overflow: ellipsis; + } + + .variable-menu { + text-align: right; } } diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 543d2ece3df..b9818ffcf42 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -124,7 +124,13 @@ input[type="checkbox"]:hover { // Custom dropdown positioning .dropdown-menu { - top: 37px; + transition-property: opacity, transform; + transition-duration: 250ms, 250ms; + transition-delay: 0ms, 25ms; + transition-timing-function: $dropdown-animation-timing; + transform: translateY(0); + opacity: 0; + display: block; left: -5px; padding: 0; @@ -156,6 +162,13 @@ input[type="checkbox"]:hover { color: $layout-link-gray; } } + + .dropdown-menu { + transition-duration: 100ms, 75ms; + transition-delay: 75ms, 100ms; + transform: translateY(13px); + opacity: 1; + } } &.has-value { 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 a39815319f3..de652a79369 100644 --- a/app/assets/stylesheets/pages/todos.scss +++ b/app/assets/stylesheets/pages/todos.scss @@ -54,8 +54,9 @@ background-color: $white-light; &:hover { - border-color: $white-dark; + border-color: $white-normal; background-color: $gray-light; + border-top: 1px solid transparent; .todo-avatar, .todo-item { diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index fc4da4c495f..ab63225147f 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -138,14 +138,13 @@ .blob-commit-info { list-style: none; - background: $gray-light; - padding: 16px 16px 16px 6px; - border: 1px solid $border-color; - border-bottom: none; margin: 0; + padding: 0; } -#modal-remove-blob > .modal-dialog { width: 850px; } +.blob-content-holder { + margin-top: $gl-padding; +} .blob-upload-dropzone-previews { text-align: center; @@ -162,7 +161,6 @@ .tree-controls { float: right; - margin-top: 11px; position: relative; z-index: 2; diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss index 9bc47bbe173..b64b89485f7 100644 --- a/app/assets/stylesheets/pages/wiki.scss +++ b/app/assets/stylesheets/pages/wiki.scss @@ -71,7 +71,6 @@ .nav-controls { width: auto; min-width: 50%; - white-space: nowrap; } } @@ -159,3 +158,9 @@ ul.wiki-pages-list.content-list { padding: 5px 0; } } + +.wiki { + table { + @include markdown-table; + } +} diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss index 6cc1cc8e263..136d0c79467 100644 --- a/app/assets/stylesheets/print.scss +++ b/app/assets/stylesheets/print.scss @@ -28,9 +28,6 @@ nav.navbar-collapse.collapse, .profiler-results, .tree-ref-holder, .tree-holder .breadcrumb, -.blob-commit-info, -.file-title, -.file-holder, .nav, .btn, ul.notes-form, @@ -43,6 +40,11 @@ ul.notes-form, display: none!important; } +pre { + page-break-before: avoid; + page-break-inside: auto; +} + .page-gutter { padding-top: 0; padding-left: 0; diff --git a/app/assets/stylesheets/test.scss b/app/assets/stylesheets/test.scss new file mode 100644 index 00000000000..7d9f3da79c5 --- /dev/null +++ b/app/assets/stylesheets/test.scss @@ -0,0 +1,17 @@ +* { + -o-transition: none !important; + -moz-transition: none !important; + -ms-transition: none !important; + -webkit-transition: none !important; + transition: none !important; + -o-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + -webkit-transform: none !important; + transform: none !important; + -webkit-animation: none !important; + -moz-animation: none !important; + -o-animation: none !important; + -ms-animation: none !important; + animation: none !important; +} |