From 3acee982037b1328df29dc867c83b83746f33e44 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 1 Dec 2016 15:02:26 -0700 Subject: update styling for loading icon --- app/assets/stylesheets/pages/pipelines.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 0027d2caf22..3b8d2268437 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -1,4 +1,9 @@ .pipelines { + .realtime-loading { + font-size: 40px; + text-align: center; + } + .stage { max-width: 90px; width: 90px; -- cgit v1.2.1 From 1e7f91f2d611b80e7537a56aefc3e31452eaf273 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 1 Dec 2016 16:23:47 -0700 Subject: remove 30% width for commit column --- app/assets/stylesheets/pages/pipelines.scss | 2 -- 1 file changed, 2 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 3b8d2268437..0002c57cb13 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -33,8 +33,6 @@ } .branch-commit { - width: 30%; - .branch-name { max-width: 195px; } -- cgit v1.2.1 From b5cd430a6cafa80583fffeeae52b4f2392a72419 Mon Sep 17 00:00:00 2001 From: Regis Date: Thu, 8 Dec 2016 16:18:24 -0700 Subject: add passed scope to adhere to dynamic api response --- app/assets/stylesheets/pages/status.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index 5084b466722..c77995b8fb6 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -47,6 +47,20 @@ } } + &.ci-passed, + &.ci-passed_with_warnings { + color: $gl-success; + border-color: $gl-success; + + &:not(span):hover { + background-color: rgba( $gl-success, .07); + } + + svg { + fill: $gl-success; + } + } + &.ci-info { color: $gl-info; border-color: $gl-info; -- cgit v1.2.1 From 63c3ba7ae084919e237d444c942f26093ac51da0 Mon Sep 17 00:00:00 2001 From: "Luke \"Jared\" Bennett" Date: Tue, 22 Nov 2016 02:09:56 +0000 Subject: Created shared/visibility_select and merged with feature permissions ui Fixed up nested padding and added dynamic text js Added padding and tests --- app/assets/stylesheets/pages/projects.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 72b6685d940..dcb327a67c6 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -15,10 +15,22 @@ .new_project, .edit-project { + .visibility-select-container { + padding-left: 26px; + + @media(max-width: $screen-md-min) { + padding-left: 15px; + } + } + fieldset { &.features { + .header { + padding-top: $gl-vert-padding; + } + .label-light { margin-bottom: 0; } -- cgit v1.2.1 From 26b0fe8d2e16adf4106859ed578dd2352cde412b Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Tue, 22 Nov 2016 07:51:49 -0700 Subject: Align permissions options --- app/assets/stylesheets/pages/projects.scss | 36 +++++++++++++----------------- 1 file changed, 15 insertions(+), 21 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index dcb327a67c6..74b058ac94a 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -15,29 +15,17 @@ .new_project, .edit-project { - .visibility-select-container { - padding-left: 26px; - - @media(max-width: $screen-md-min) { - padding-left: 15px; + .sharing-and-permissions { + .header { + padding-top: $gl-vert-padding; } - } - - fieldset { - - &.features { - .header { - padding-top: $gl-vert-padding; - } - - .label-light { - margin-bottom: 0; - } + .label-light { + margin-bottom: 0; + } - .help-block { - margin-top: 0; - } + .help-block { + margin-top: 0; } .form-group { @@ -876,10 +864,16 @@ pre.light-well { } } -.project-feature-nested { +.project-feature { @media (min-width: $screen-sm-min) { padding-left: 45px; } + + &.nested { + @media (min-width: $screen-sm-min) { + padding-left: 90px; + } + } } .project-repo-select { -- cgit v1.2.1 From 2c9bb135057f4fea43aa0be5b94354f288d5070f Mon Sep 17 00:00:00 2001 From: "Luke \"Jared\" Bennett" Date: Tue, 22 Nov 2016 17:16:30 +0000 Subject: Fixed tests Grab permissions description from backend Review changes Added unit tests --- app/assets/stylesheets/pages/projects.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 74b058ac94a..726e5c115b8 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -865,6 +865,8 @@ pre.light-well { } .project-feature { + padding-top: 10px; + @media (min-width: $screen-sm-min) { padding-left: 45px; } -- cgit v1.2.1 From 07c6c8e0a1438f745f9f420b24a66a05a76c4272 Mon Sep 17 00:00:00 2001 From: Regis Date: Mon, 12 Dec 2016 11:59:22 -0700 Subject: stages render correctly and use new status object --- app/assets/stylesheets/pages/icons.scss | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/icons.scss b/app/assets/stylesheets/pages/icons.scss index 226bd2ead31..8210208cbf6 100644 --- a/app/assets/stylesheets/pages/icons.scss +++ b/app/assets/stylesheets/pages/icons.scss @@ -6,6 +6,14 @@ } } +.ci-status-icon-passed { + color: $gl-success; + + svg { + fill: $gl-success; + } +} + .ci-status-icon-failed { color: $gl-danger; -- cgit v1.2.1 From 9f47d317c547eb49c59e01f9c5a887b9ffb7f500 Mon Sep 17 00:00:00 2001 From: Grzegorz Bizon Date: Wed, 21 Dec 2016 12:25:54 +0100 Subject: Fix parentheses in pipelines.scss after a merge --- app/assets/stylesheets/pages/pipelines.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index d57f32516ac..bfcdb1f2028 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -37,6 +37,7 @@ .branch-name { max-width: 195px; } + } .pipeline-date, .pipeline-status { @@ -118,7 +119,6 @@ } .branch-commit { - .branch-name { font-weight: bold; max-width: 120px; -- cgit v1.2.1 From e118094d4034d42d9b6621b43adf0e0481677442 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 28 Dec 2016 14:32:15 -0700 Subject: use stylesheet from master --- app/assets/stylesheets/pages/pipelines.scss | 1422 +++++++++++++-------------- 1 file changed, 708 insertions(+), 714 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 619f79ee3c5..d9ae3b4a95f 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -1,614 +1,651 @@ -.pipelines { - .realtime-loading { - font-size: 40px; - text-align: center; - } - - .stage { - max-width: 90px; - width: 90px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .commit-title { - margin: 0; - } - - .controls { - white-space: nowrap; - } - - .btn { - margin: 4px; - } - - .table.ci-table { - min-width: 1200px; - table-layout: fixed; - - .pipeline-id { - color: $black; + .pipelines { + .realtime-loading { + font-size: 40px; + text-align: center; } - .branch-commit { - .branch-name { - max-width: 195px; - } + .stage { + max-width: 90px; + width: 90px; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } - .pipeline-date, - .pipeline-status { - width: 10%; + .commit-title { + margin: 0; } - .pipeline-info, - .pipeline-commit, - .pipeline-actions, - .pipeline-stages { - width: 20%; + .controls { + white-space: nowrap; } - } -} -@media (max-width: $screen-md-max) { - .content-list { - &.pipelines, - &.builds-content-list { - width: 100%; - overflow: auto; + .btn { + margin: 4px; } - } -} -.content-list.pipelines .table-holder { - min-height: 300px; -} + .table.ci-table { + min-width: 1200px; + table-layout: fixed; -.pipeline-holder { - width: 100%; - overflow: auto; -} - -.table.ci-table { - min-width: 900px; - - &.pipeline { - min-width: 650px; - } + .pipeline-id { + color: $black; + } - &.builds-page { + .pipeline-date, + .pipeline-status { + width: 10%; + } - tr { - height: 71px; + .pipeline-info, + .pipeline-commit, + .pipeline-actions, + .pipeline-stages { + width: 20%; + } } } - tr { - th { - padding: 16px 8px; - border: none; - } - - td { - padding: 10px 8px; - } - - .commit-link { - padding: 9px 8px 10px; + @media (max-width: $screen-md-max) { + .content-list { + &.pipelines, + &.builds-content-list { + width: 100%; + overflow: auto; + } } } - tbody { - border-top-width: 1px; + .content-list.pipelines .table-holder { + min-height: 300px; } - .build.retried { - background-color: $gray-lightest; + .pipeline-holder { + width: 100%; + overflow: auto; } - .commit-link { - a { - &:focus { - text-decoration: none; - } - } + .table.ci-table { + min-width: 900px; - a:hover { - text-decoration: none; + &.pipeline { + min-width: 650px; } - } - .avatar { - margin-left: 0; - float: none; - } + &.builds-page { - .branch-commit { - .branch-name { - font-weight: bold; - max-width: 120px; - overflow: hidden; - display: inline-block; - white-space: nowrap; - vertical-align: top; - text-overflow: ellipsis; + tr { + height: 71px; + } } - svg { - height: 14px; - width: 14px; - vertical-align: middle; - fill: $gl-gray-light; - } + tr { + th { + padding: 16px 8px; + border: none; + } - .fa { - font-size: 12px; - color: $gl-text-color; - } + td { + padding: 10px 8px; + } - .commit-id { - color: $gl-link-color; + .commit-link { + padding: 9px 8px 10px; + } } - .commit-title { - margin-top: 4px; - max-width: 225px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + tbody { + border-top-width: 1px; } - .label { - margin-right: 4px; + .build.retried { + background-color: $gray-lightest; } - .label-container { - font-size: 0; + .commit-link { + a { + &:focus { + text-decoration: none; + } + } - .label { - margin-top: 5px; + a:hover { + text-decoration: none; } } - } - .icon-container { - display: inline-block; - width: 10px; - - &.commit-icon { - width: 15px; - text-align: center; + .avatar { + margin-left: 0; + float: none; } - } - .stage-cell { - font-size: 0; + .branch-commit { - svg { - height: 18px; - width: 18px; - position: relative; - z-index: 2; - vertical-align: middle; - overflow: visible; - } + .branch-name { + font-weight: bold; + max-width: 120px; + overflow: hidden; + display: inline-block; + white-space: nowrap; + vertical-align: top; + text-overflow: ellipsis; + } - .stage-container { - display: inline-block; - position: relative; - margin-right: 6px; + svg { + height: 14px; + width: 14px; + vertical-align: middle; + fill: $gl-gray-light; + } + + .fa { + font-size: 12px; + color: $gl-text-color; + } + + .commit-id { + color: $gl-link-color; + } - .tooltip { + .commit-title { + margin-top: 4px; + max-width: 225px; + overflow: hidden; white-space: nowrap; + text-overflow: ellipsis; } - &:not(:last-child) { - &::after { - content: ''; - width: 8px; - position: absolute; - right: -7px; - top: 10px; - border-bottom: 2px solid $border-color; + .label { + margin-right: 4px; + } + + .label-container { + font-size: 0; + + .label { + margin-top: 5px; } } } - } - .duration, - .finished-at { - color: $gl-gray-light; - margin: 4px 0; + .icon-container { + display: inline-block; + width: 10px; - .fa { - font-size: 12px; - margin-right: 4px; + &.commit-icon { + width: 15px; + text-align: center; + } } - svg { - width: 12px; - height: 12px; - vertical-align: middle; - margin-right: 4px; - } - } + .stage-cell { + font-size: 0; - .pipeline-actions { - min-width: 140px; + svg { + height: 18px; + width: 18px; + position: relative; + z-index: 2; + vertical-align: middle; + overflow: visible; + } - .btn { - margin: 0; - color: $gl-gray-light; - } + .stage-container { + display: inline-block; + position: relative; + margin-right: 6px; - .cancel-retry-btns { - vertical-align: middle; + .tooltip { + white-space: nowrap; + } - .btn:not(:first-child) { - margin-left: 8px; + &:not(:last-child) { + &::after { + content: ''; + width: 8px; + position: absolute; + right: -7px; + top: 10px; + border-bottom: 2px solid $border-color; + } + } } } - .dropdown-toggle, - .dropdown-menu { + .duration, + .finished-at { color: $gl-gray-light; + margin: 4px 0; .fa { - color: $gl-gray-light; - font-size: 14px; + font-size: 12px; + margin-right: 4px; } - svg, - .fa { - margin-right: 0; + svg { + width: 12px; + height: 12px; + vertical-align: middle; + margin-right: 4px; } } - .btn-remove { - color: $white-light; - } + .pipeline-actions { + min-width: 140px; - .btn-group { - &.open { - .btn-default { - background-color: $white-normal; - border-color: $border-white-normal; - } + .btn { + margin: 0; + color: $gl-gray-light; } - .btn { - .icon-play { - height: 13px; - width: 12px; + .cancel-retry-btns { + vertical-align: middle; + + .btn:not(:first-child) { + margin-left: 8px; } } - } - } - .build-link { + .dropdown-toggle, + .dropdown-menu { + color: $gl-gray-light; - a { - color: $gl-dark-link-color; - } - } + .fa { + color: $gl-gray-light; + font-size: 14px; + } - .btn-group.open .dropdown-toggle { - box-shadow: none; - } -} + svg, + .fa { + margin-right: 0; + } + } -.admin-builds-table { - .ci-table td:last-child { - min-width: 120px; - } -} + .btn-remove { + color: $white-light; + } -// Pipeline visualization -.pipeline-actions { - border-bottom: none; -} + .btn-group { + &.open { + .btn-default { + background-color: $white-normal; + border-color: $border-white-normal; + } + } -.tab-pane { - &.pipelines { - .ci-table { - min-width: 900px; + .btn { + .icon-play { + height: 13px; + width: 12px; + } + } + } } - .content-list.pipelines { - overflow: auto; - } + .build-link { - .stage { - max-width: 100px; - width: 100px; + a { + color: $gl-dark-link-color; + } } - .pipeline-actions { - min-width: initial; + .btn-group.open .dropdown-toggle { + box-shadow: none; } } - &.builds { - .ci-table { - tr { - height: 71px; - } + .admin-builds-table { + .ci-table td:last-child { + min-width: 120px; } } -} - -// Pipeline graph -.pipeline-graph { - width: 100%; - background-color: $gray-light; - padding: $gl-padding; - overflow: auto; - white-space: nowrap; - transition: max-height 0.3s, padding 0.3s; - - ul { - padding: 0; - } - a { - text-decoration: none; - color: $gl-text-color-light; + // Pipeline visualization + .pipeline-actions { + border-bottom: none; } - svg { - vertical-align: middle; - margin-right: 3px; - } + .tab-pane { + &.pipelines { + .ci-table { + min-width: 900px; + } - .stage-column { - display: inline-block; - vertical-align: top; + .content-list.pipelines { + overflow: auto; + } - &:not(:last-child) { - margin-right: 44px; - } + .stage { + max-width: 100px; + width: 100px; + } - &.left-margin { - &:not(:first-child) { - margin-left: 44px; + .pipeline-actions { + min-width: initial; + } + } - .left-connector { - &::before { - content: ''; - position: absolute; - top: 48%; - left: -48px; - border-top: 2px solid $border-color; - width: 48px; - height: 1px; - } + &.builds { + .ci-table { + tr { + height: 71px; } } } + } - &.no-margin { - margin: 0; + // Pipeline graph + .pipeline-graph { + width: 100%; + background-color: $gray-light; + padding: $gl-padding; + white-space: nowrap; + transition: max-height 0.3s, padding 0.3s; + + ul { + padding: 0; } - li { - list-style: none; + a { + text-decoration: none; + color: $gl-text-color-light; } - &:last-child { - .build { - // Remove right connecting horizontal line from first build in last stage - &:first-child { - &::after { - border: none; - } - } - // Remove right curved connectors from all builds in last stage + svg { + vertical-align: middle; + margin-right: 3px; + } + + .stage-column { + display: inline-block; + vertical-align: top; + + &:not(:last-child) { + margin-right: 44px; + } + + &.left-margin { &:not(:first-child) { - &::after { - border: none; + margin-left: 44px; + + .left-connector { + &::before { + content: ''; + position: absolute; + top: 48%; + left: -48px; + border-top: 2px solid $border-color; + width: 48px; + height: 1px; + } } } - // Remove opposite curve - .curve { - &::before { - display: none; + } + + &.no-margin { + margin: 0; + } + + li { + list-style: none; + } + + &:last-child { + .build { + // Remove right connecting horizontal line from first build in last stage + &:first-child { + &::after { + border: none; + } + } + // Remove right curved connectors from all builds in last stage + &:not(:first-child) { + &::after { + border: none; + } + } + // Remove opposite curve + .curve { + &::before { + display: none; + } } } } - } - &:first-child { - .build { - // Remove left curved connectors from all builds in first stage - &:not(:first-child) { - &::before { - border: none; + &:first-child { + .build { + // Remove left curved connectors from all builds in first stage + &:not(:first-child) { + &::before { + border: none; + } } - } - // Remove opposite curve - .curve { - &::after { - display: none; + // Remove opposite curve + .curve { + &::after { + display: none; + } } } } - } - // Curve first child connecting lines in opposite direction - .curve { - display: none; + // Curve first child connecting lines in opposite direction + .curve { + display: none; - &::before, - &::after { - content: ''; - width: 21px; - height: 25px; - position: absolute; - top: -31px; - border-top: 2px solid $border-color; - } + &::before, + &::after { + content: ''; + width: 21px; + height: 25px; + position: absolute; + top: -31px; + border-top: 2px solid $border-color; + } - &::after { - left: -44px; - border-right: 2px solid $border-color; - border-radius: 0 20px; - } + &::after { + left: -44px; + border-right: 2px solid $border-color; + border-radius: 0 20px; + } - &::before { - right: -44px; - border-left: 2px solid $border-color; - border-radius: 20px 0 0; + &::before { + right: -44px; + border-left: 2px solid $border-color; + border-radius: 20px 0 0; + } } } - } - - .stage-name { - margin: 0 0 15px 10px; - font-weight: bold; - width: 176px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .build { - position: relative; - width: 186px; - margin-bottom: 10px; - white-space: normal; - color: $gl-text-color-light; + .stage-name { + margin: 0 0 15px 10px; + font-weight: bold; + width: 176px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } - .dropdown-menu-toggle { - background-color: transparent; - border: none; - padding: 0; + .build { + position: relative; + width: 186px; + margin-bottom: 10px; + white-space: normal; color: $gl-text-color-light; - &:focus { - outline: none; - } + .dropdown-menu-toggle { + background-color: transparent; + border: none; + padding: 0; + color: $gl-text-color-light; - &:hover { - color: $gl-text-color; + &:focus { + outline: none; + } - .dropdown-counter-badge { + &:hover { color: $gl-text-color; + + .dropdown-counter-badge { + color: $gl-text-color; + } } } - } - > .build-content { - display: inline-block; - padding: 8px 10px 9px; - width: 100%; - border: 1px solid $border-color; - border-radius: 30px; - background-color: $white-light; + > .build-content { + display: inline-block; + padding: 8px 10px 9px; + width: 100%; + border: 1px solid $border-color; + border-radius: 30px; + background-color: $white-light; - &:hover { - background-color: $stage-hover-bg; - border: 1px solid $stage-hover-border; - color: $gl-text-color; + &:hover { + background-color: $stage-hover-bg; + border: 1px solid $stage-hover-border; + color: $gl-text-color; + } } - } - - > .ci-action-icon-container { - position: absolute; - right: 5px; - top: 5px; - } - .ci-status-icon svg { - height: 20px; - width: 20px; - } - - .arrow { - &::before, - &::after { - content: ''; - display: inline-block; + > .ci-action-icon-container { position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: 18px; + right: 5px; + top: 5px; } - &::before { - left: -5px; - margin-top: -6px; - border-width: 7px 5px 7px 0; - border-right-color: $border-color; + .ci-status-icon svg { + height: 20px; + width: 20px; } - &::after { - left: -4px; - margin-top: -9px; - border-width: 10px 7px 10px 0; - border-right-color: $white-light; - } - } + .arrow { + &::before, + &::after { + content: ''; + display: inline-block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + top: 18px; + } - // Connect first build in each stage with right horizontal line - &:first-child { - &::after { - content: ''; - position: absolute; - top: 48%; - right: -48px; - border-top: 2px solid $border-color; - width: 48px; - height: 1px; + &::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 each build (except for first) with curved lines - &:not(:first-child) { - &::after, - &::before { - content: ''; - top: -49px; - position: absolute; - border-bottom: 2px solid $border-color; - width: 25px; - height: 69px; + // Connect first build in each stage with right horizontal line + &:first-child { + &::after { + content: ''; + position: absolute; + top: 48%; + right: -48px; + border-top: 2px solid $border-color; + width: 48px; + height: 1px; + } } - // Right connecting curves - &::after { - right: -25px; - border-right: 2px solid $border-color; - border-radius: 0 0 20px; + // Connect each build (except for first) with curved lines + &:not(:first-child) { + &::after, + &::before { + content: ''; + top: -49px; + position: absolute; + border-bottom: 2px solid $border-color; + width: 25px; + height: 69px; + } + + // Right connecting curves + &::after { + right: -25px; + border-right: 2px solid $border-color; + border-radius: 0 0 20px; + } + + // Left connecting curves + &::before { + left: -25px; + border-left: 2px solid $border-color; + border-radius: 0 0 0 20px; + } } - // Left connecting curves - &::before { - left: -25px; - border-left: 2px solid $border-color; - border-radius: 0 0 0 20px; + // Connect second build to first build with smaller curved line + &:nth-child(2) { + &::after, + &::before { + height: 29px; + top: -9px; + } + + .curve { + display: block; + } } } - // Connect second build to first build with smaller curved line - &:nth-child(2) { - &::after, - &::before { - height: 29px; - top: -9px; - } + .grouped-pipeline-dropdown { + .dropdown-build { + .build-content { + width: 100%; - .curve { - display: block; + &:hover { + background-color: $stage-hover-bg; + color: $gl-text-color; + } + } + + .ci-action-icon-container { + padding: 0; + font-size: 11px; + position: absolute; + top: 1px; + right: 8px; + } } } } + .dropdown-counter-badge { + color: $border-color; + font-weight: 100; + font-size: 15px; + position: absolute; + right: 5px; + top: 8px; + } + .grouped-pipeline-dropdown { + padding: 0; + width: 191px; + min-width: 191px; + left: auto; + right: -195px; + top: -4px; + box-shadow: 0 1px 5px $black-transparent; + + a { + display: inline-block; + } + .dropdown-build { .build-content { width: 100%; @@ -623,333 +660,290 @@ padding: 0; font-size: 11px; position: absolute; - top: 1px; - right: 8px; + margin-top: 3px; + right: 7px; } } + + ul { + max-height: 245px; + overflow: auto; + margin: 3px 0; + + li { + margin: 4px 8px 4px 9px; + padding: 0; + line-height: 1.1; + position: relative; + + .ci-action-icon-container:hover { + background-color: transparent; + } + + .ci-status-icon { + position: relative; + top: 2px; + } + } + } + } + + .pipeline-graph .dropdown-build .ci-status-icon svg { + width: 18px; + height: 18px; } -} - -.dropdown-counter-badge { - float: right; - color: $border-color; - font-weight: 100; - font-size: 15px; - margin-right: 2px; -} - - -.grouped-pipeline-dropdown { - padding: 0; - width: 191px; - min-width: 191px; - left: auto; - right: -195px; - top: -4px; - box-shadow: 0 1px 5px $black-transparent; - - a { + + .ci-status-text { + max-width: 110px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: bottom; display: inline-block; + position: relative; + font-weight: 200; } - .dropdown-build { - .build-content { - width: 100%; + // Action Icons + .ci-action-icon-container .ci-action-icon-wrapper { + i { + color: $border-color; + border-radius: 100%; + border: 1px solid $border-color; + padding: 5px 6px; + font-size: 13px; + background: $white-light; + height: 30px; + width: 30px; + + &::before { + position: relative; + top: 3px; + left: 3px; + } &:hover { - background-color: $stage-hover-bg; color: $gl-text-color; + background-color: $stage-hover-bg; + border: 1px solid $stage-hover-bg; } } - .ci-action-icon-container { - padding: 0; - font-size: 11px; - position: absolute; - margin-top: 3px; - right: 7px; + .ci-play-icon { + padding: 5px 5px 5px 7px; } } - ul { - max-height: 245px; - overflow: auto; - margin: 3px 0; + .dropdown-build { + color: $gl-text-color-light; + + .build-content { + padding: 4px 7px 8px; + } - li { - margin: 4px 8px 4px 9px; + .ci-action-icon-container { padding: 0; - line-height: 1.1; + font-size: 11px; + float: right; + margin-top: 3px; + display: inline-block; position: relative; - .ci-action-icon-container:hover { - background-color: transparent; + i { + font-size: 11px; + margin-top: 0; } + } - .ci-status-icon { - position: relative; - top: 2px; + .ci-action-icon-container { + i { + width: 24px; + height: 24px; + + &::before { + top: 1px; + left: 1px; + } } } - } -} - -.pipeline-graph .dropdown-build .ci-status-icon svg { - width: 18px; - height: 18px; -} - -.ci-status-text { - max-width: 110px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: bottom; - display: inline-block; - position: relative; - font-weight: 200; -} - -// Action Icons -.ci-action-icon-container .ci-action-icon-wrapper { - i { - color: $border-color; - border-radius: 100%; - border: 1px solid $border-color; - padding: 5px 6px; - font-size: 13px; - background: $white-light; - height: 30px; - width: 30px; - - &::before { - position: relative; - top: 3px; - left: 3px; - } - &:hover { - color: $gl-text-color; - background-color: $stage-hover-bg; - border: 1px solid $stage-hover-bg; + .stage { + max-width: 100px; + width: 100px; } - } - .ci-play-icon { - padding: 5px 5px 5px 7px; - } -} - -.dropdown-build { - color: $gl-text-color-light; + .ci-status-icon svg { + height: 18px; + width: 18px; + } - .build-content { - padding: 4px 7px 8px; + .ci-status-text { + max-width: 95px; + } } - .ci-action-icon-container { - padding: 0; - font-size: 11px; - float: right; - margin-top: 3px; - display: inline-block; - position: relative; + /** + * Builds dropdown in mini pipeline + */ + .mini-pipeline-graph { + .builds-dropdown { + background-color: transparent; + padding: 0; + color: $gl-text-color-light; + border: none; + margin: 0; - i { - font-size: 11px; - margin-top: 0; - } - } + &:focus, + &:hover { + outline: none; + margin-right: -8px; - .ci-action-icon-container { - i { - width: 24px; - height: 24px; + .ci-status-icon { + width: 32px; + padding: 0 8px 0 0; + transition: width 0.1s cubic-bezier(0.25, 0, 1, 1); - &::before { - top: 1px; - left: 1px; + + .dropdown-caret { + visibility: visible; + opacity: 1; + } + } } - } - } - .stage { - max-width: 100px; - width: 100px; - } - - .ci-status-icon svg { - height: 18px; - width: 18px; - } + &:focus, + &:active { + .ci-status-icon-success { + background-color: rgba($gl-success, .1); + } - .ci-status-text { - max-width: 95px; - } -} - -/** - * Builds dropdown in mini pipeline - */ -.mini-pipeline-graph { - .builds-dropdown { - background-color: transparent; - padding: 0; - color: $gl-text-color-light; - border: none; - margin: 0; + .ci-status-icon-failed { + background-color: rgba($gl-danger, .1); + } - &:focus, - &:hover { - outline: none; - margin-right: -8px; + .ci-status-icon-pending, + .ci-status-icon-success_with_warnings { + background-color: rgba($gl-warning, .1); + } - .ci-status-icon { - width: 32px; - padding: 0 8px 0 0; - transition: width 0.1s cubic-bezier(0.25, 0, 1, 1); + .ci-status-icon-running { + background-color: rgba($blue-normal, .1); + } - + .dropdown-caret { - visibility: visible; - opacity: 1; + .ci-status-icon-canceled, + .ci-status-icon-disabled, + .ci-status-icon-not-found { + background-color: rgba($gl-gray, .1); } - } - } - &:focus, - &:active { - .ci-status-icon-success { - background-color: rgba($gl-success, .1); + .ci-status-icon-created, + .ci-status-icon-skipped { + background-color: rgba($gray-darkest, .1); + } } - .ci-status-icon-failed { - background-color: rgba($gl-danger, .1); + .mini-pipeline-graph-icon-container { + .dropdown-caret { + font-size: 11px; + position: absolute; + top: 6px; + left: 20px; + margin-right: -6px; + z-index: 2; + visibility: hidden; + opacity: 0; + transition: visibility 0.1s, opacity 0.1s linear; + } } + } - .ci-status-icon-pending, - .ci-status-icon-success_with_warnings { - background-color: rgba($gl-warning, .1); - } + .dropdown-build .build-content { + padding: 3px 7px 7px; + } - .ci-status-icon-running { - background-color: rgba($blue-normal, .1); - } + .builds-dropdown-loading { + margin: 10px auto; + width: 18px; + } - .ci-status-icon-canceled, - .ci-status-icon-disabled, - .ci-status-icon-not-found { - background-color: rgba($gl-gray, .1); - } + .grouped-pipeline-dropdown { + right: -172px; + top: 23px; + min-height: 50px; - .ci-status-icon-created, - .ci-status-icon-skipped { - background-color: rgba($gray-darkest, .1); + a { + color: $gl-text-color-light; } } - .mini-pipeline-graph-icon-container { - .dropdown-caret { - font-size: 11px; + .arrow-up { + &::before, + &::after { + content: ''; + display: inline-block; position: absolute; - top: 6px; - left: 20px; - margin-right: -6px; - z-index: 2; - visibility: hidden; - opacity: 0; - transition: visibility 0.1s, opacity 0.1s linear; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + top: -6px; + left: 2px; + border-width: 0 5px 6px; } - } - } - - .dropdown-build .build-content { - padding: 3px 7px 7px; - } - - .builds-dropdown-loading { - margin: 10px auto; - width: 18px; - } - .grouped-pipeline-dropdown { - right: -172px; - top: 23px; - min-height: 50px; + &::before { + border-width: 0 5px 5px; + border-bottom-color: $border-color; + } - a { - color: $gl-text-color-light; + &::after { + margin-top: 1px; + border-bottom-color: $white-light; + } } } - .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; - } + /** + * Icons in mini pipeline graph + */ + .mini-pipeline-graph-icon-container .ci-status-icon { + display: inline-block; + border: 1px solid; + border-radius: 22px; + margin-right: 1px; + width: 22px; + height: 22px; + position: relative; + z-index: 2; + transition: all 0.1s cubic-bezier(0.25, 0, 1, 1); - &::after { - margin-top: 1px; - border-bottom-color: $white-light; + svg { + top: -1px; + left: -1px; } } -} - -/** - * Icons in mini pipeline graph - */ -.mini-pipeline-graph-icon-container .ci-status-icon { - display: inline-block; - border: 1px solid; - border-radius: 22px; - margin-right: 1px; - width: 22px; - height: 22px; - position: relative; - z-index: 2; - transition: all 0.1s cubic-bezier(0.25, 0, 1, 1); - - svg { - top: -1px; - left: -1px; - } -} - -.stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg { - width: 22px; - height: 22px; -} + .stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg { + width: 22px; + height: 22px; + } -.terminal-icon { - margin-left: 3px; -} -.terminal-container { - .content-block { - border-bottom: none; + .terminal-icon { + margin-left: 3px; } - #terminal { - margin-top: 10px; - min-height: 450px; - box-sizing: border-box; + .terminal-container { + .content-block { + border-bottom: none; + } - > div { + #terminal { + margin-top: 10px; min-height: 450px; + box-sizing: border-box; + + > div { + min-height: 450px; + } } } -} -- cgit v1.2.1 From 30e7952a442d16c18dd8430e02cabb2731e75ab6 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 28 Dec 2016 15:44:08 -0700 Subject: scss_lint is now happy --- app/assets/stylesheets/pages/pipelines.scss | 1416 +++++++++++++-------------- 1 file changed, 708 insertions(+), 708 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index d9ae3b4a95f..b1d9421aa43 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -1,651 +1,608 @@ - .pipelines { - .realtime-loading { - font-size: 40px; - text-align: center; - } +.pipelines { + .realtime-loading { + font-size: 40px; + text-align: center; + } - .stage { - max-width: 90px; - width: 90px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + .stage { + max-width: 90px; + width: 90px; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .commit-title { + margin: 0; + } + + .controls { + white-space: nowrap; + } + + .btn { + margin: 4px; + } + + .table.ci-table { + min-width: 1200px; + table-layout: fixed; + + .pipeline-id { + color: $black; } - .commit-title { - margin: 0; + .pipeline-date, + .pipeline-status { + width: 10%; } - .controls { - white-space: nowrap; + .pipeline-info, + .pipeline-commit, + .pipeline-actions, + .pipeline-stages { + width: 20%; } + } +} - .btn { - margin: 4px; +@media (max-width: $screen-md-max) { + .content-list { + &.pipelines, + &.builds-content-list { + width: 100%; + overflow: auto; } + } +} - .table.ci-table { - min-width: 1200px; - table-layout: fixed; +.content-list.pipelines .table-holder { + min-height: 300px; +} - .pipeline-id { - color: $black; - } +.pipeline-holder { + width: 100%; + overflow: auto; +} - .pipeline-date, - .pipeline-status { - width: 10%; - } +.table.ci-table { + min-width: 900px; - .pipeline-info, - .pipeline-commit, - .pipeline-actions, - .pipeline-stages { - width: 20%; - } - } + &.pipeline { + min-width: 650px; } - @media (max-width: $screen-md-max) { - .content-list { - &.pipelines, - &.builds-content-list { - width: 100%; - overflow: auto; - } + &.builds-page { + + tr { + height: 71px; } } - .content-list.pipelines .table-holder { - min-height: 300px; + tr { + th { + padding: 16px 8px; + border: none; + } + + td { + padding: 10px 8px; + } + + .commit-link { + padding: 9px 8px 10px; + } } - .pipeline-holder { - width: 100%; - overflow: auto; + tbody { + border-top-width: 1px; } - .table.ci-table { - min-width: 900px; + .build.retried { + background-color: $gray-lightest; + } - &.pipeline { - min-width: 650px; + .commit-link { + a { + &:focus { + text-decoration: none; + } } - &.builds-page { - - tr { - height: 71px; - } + a:hover { + text-decoration: none; } + } - tr { - th { - padding: 16px 8px; - border: none; - } + .avatar { + margin-left: 0; + float: none; + } - td { - padding: 10px 8px; - } + .branch-commit { - .commit-link { - padding: 9px 8px 10px; - } + .branch-name { + font-weight: bold; + max-width: 120px; + overflow: hidden; + display: inline-block; + white-space: nowrap; + vertical-align: top; + text-overflow: ellipsis; } - tbody { - border-top-width: 1px; + svg { + height: 14px; + width: 14px; + vertical-align: middle; + fill: $gl-gray-light; } - .build.retried { - background-color: $gray-lightest; + .fa { + font-size: 12px; + color: $gl-text-color; } - .commit-link { - a { - &:focus { - text-decoration: none; - } - } + .commit-id { + color: $gl-link-color; + } - a:hover { - text-decoration: none; - } + .commit-title { + margin-top: 4px; + max-width: 225px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } - .avatar { - margin-left: 0; - float: none; + .label { + margin-right: 4px; } - .branch-commit { + .label-container { + font-size: 0; - .branch-name { - font-weight: bold; - max-width: 120px; - overflow: hidden; - display: inline-block; - white-space: nowrap; - vertical-align: top; - text-overflow: ellipsis; + .label { + margin-top: 5px; } + } + } - svg { - height: 14px; - width: 14px; - vertical-align: middle; - fill: $gl-gray-light; - } + .icon-container { + display: inline-block; + width: 10px; - .fa { - font-size: 12px; - color: $gl-text-color; - } + &.commit-icon { + width: 15px; + text-align: center; + } + } - .commit-id { - color: $gl-link-color; - } + .stage-cell { + font-size: 0; - .commit-title { - margin-top: 4px; - max-width: 225px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } + svg { + height: 18px; + width: 18px; + position: relative; + z-index: 2; + vertical-align: middle; + overflow: visible; + } - .label { - margin-right: 4px; - } + .stage-container { + display: inline-block; + position: relative; + margin-right: 6px; - .label-container { - font-size: 0; + .tooltip { + white-space: nowrap; + } - .label { - margin-top: 5px; + &:not(:last-child) { + &::after { + content: ''; + width: 8px; + position: absolute; + right: -7px; + top: 10px; + border-bottom: 2px solid $border-color; } } } + } - .icon-container { - display: inline-block; - width: 10px; + .duration, + .finished-at { + color: $gl-gray-light; + margin: 4px 0; - &.commit-icon { - width: 15px; - text-align: center; - } + .fa { + font-size: 12px; + margin-right: 4px; } - .stage-cell { - font-size: 0; + svg { + width: 12px; + height: 12px; + vertical-align: middle; + margin-right: 4px; + } + } - svg { - height: 18px; - width: 18px; - position: relative; - z-index: 2; - vertical-align: middle; - overflow: visible; - } + .pipeline-actions { + min-width: 140px; - .stage-container { - display: inline-block; - position: relative; - margin-right: 6px; + .btn { + margin: 0; + color: $gl-gray-light; + } - .tooltip { - white-space: nowrap; - } + .cancel-retry-btns { + vertical-align: middle; - &:not(:last-child) { - &::after { - content: ''; - width: 8px; - position: absolute; - right: -7px; - top: 10px; - border-bottom: 2px solid $border-color; - } - } + .btn:not(:first-child) { + margin-left: 8px; } } - .duration, - .finished-at { + .dropdown-toggle, + .dropdown-menu { color: $gl-gray-light; - margin: 4px 0; .fa { - font-size: 12px; - margin-right: 4px; + color: $gl-gray-light; + font-size: 14px; } - svg { - width: 12px; - height: 12px; - vertical-align: middle; - margin-right: 4px; + svg, + .fa { + margin-right: 0; } } - .pipeline-actions { - min-width: 140px; + .btn-remove { + color: $white-light; + } - .btn { - margin: 0; - color: $gl-gray-light; + .btn-group { + &.open { + .btn-default { + background-color: $white-normal; + border-color: $border-white-normal; + } } - .cancel-retry-btns { - vertical-align: middle; - - .btn:not(:first-child) { - margin-left: 8px; + .btn { + .icon-play { + height: 13px; + width: 12px; } } + } + } - .dropdown-toggle, - .dropdown-menu { - color: $gl-gray-light; + .build-link { - .fa { - color: $gl-gray-light; - font-size: 14px; - } + a { + color: $gl-dark-link-color; + } + } - svg, - .fa { - margin-right: 0; - } - } + .btn-group.open .dropdown-toggle { + box-shadow: none; + } +} - .btn-remove { - color: $white-light; - } +.admin-builds-table { + .ci-table td:last-child { + min-width: 120px; + } +} - .btn-group { - &.open { - .btn-default { - background-color: $white-normal; - border-color: $border-white-normal; - } - } +// Pipeline visualization +.pipeline-actions { + border-bottom: none; +} - .btn { - .icon-play { - height: 13px; - width: 12px; - } - } - } +.tab-pane { + &.pipelines { + .ci-table { + min-width: 900px; } - .build-link { + .content-list.pipelines { + overflow: auto; + } - a { - color: $gl-dark-link-color; - } + .stage { + max-width: 100px; + width: 100px; } - .btn-group.open .dropdown-toggle { - box-shadow: none; + .pipeline-actions { + min-width: initial; } } - .admin-builds-table { - .ci-table td:last-child { - min-width: 120px; + &.builds { + .ci-table { + tr { + height: 71px; + } } } +} - // Pipeline visualization - .pipeline-actions { - border-bottom: none; +// Pipeline graph +.pipeline-graph { + width: 100%; + background-color: $gray-light; + padding: $gl-padding; + white-space: nowrap; + transition: max-height 0.3s, padding 0.3s; + + ul { + padding: 0; } - .tab-pane { - &.pipelines { - .ci-table { - min-width: 900px; - } + a { + text-decoration: none; + color: $gl-text-color-light; + } - .content-list.pipelines { - overflow: auto; - } + svg { + vertical-align: middle; + margin-right: 3px; + } - .stage { - max-width: 100px; - width: 100px; - } + .stage-column { + display: inline-block; + vertical-align: top; - .pipeline-actions { - min-width: initial; - } + &:not(:last-child) { + margin-right: 44px; } - &.builds { - .ci-table { - tr { - height: 71px; + &.left-margin { + &:not(:first-child) { + margin-left: 44px; + + .left-connector { + &::before { + content: ''; + position: absolute; + top: 48%; + left: -48px; + border-top: 2px solid $border-color; + width: 48px; + height: 1px; + } } } } - } - - // Pipeline graph - .pipeline-graph { - width: 100%; - background-color: $gray-light; - padding: $gl-padding; - white-space: nowrap; - transition: max-height 0.3s, padding 0.3s; - - ul { - padding: 0; - } - a { - text-decoration: none; - color: $gl-text-color-light; + &.no-margin { + margin: 0; } - svg { - vertical-align: middle; - margin-right: 3px; + li { + list-style: none; } - .stage-column { - display: inline-block; - vertical-align: top; - - &:not(:last-child) { - margin-right: 44px; - } - - &.left-margin { - &:not(:first-child) { - margin-left: 44px; - - .left-connector { - &::before { - content: ''; - position: absolute; - top: 48%; - left: -48px; - border-top: 2px solid $border-color; - width: 48px; - height: 1px; - } + &:last-child { + .build { + // Remove right connecting horizontal line from first build in last stage + &:first-child { + &::after { + border: none; } } - } - - &.no-margin { - margin: 0; - } - - li { - list-style: none; - } - - &:last-child { - .build { - // Remove right connecting horizontal line from first build in last stage - &:first-child { - &::after { - border: none; - } - } - // Remove right curved connectors from all builds in last stage - &:not(:first-child) { - &::after { - border: none; - } + // Remove right curved connectors from all builds in last stage + &:not(:first-child) { + &::after { + border: none; } - // Remove opposite curve - .curve { - &::before { - display: none; - } + } + // Remove opposite curve + .curve { + &::before { + display: none; } } } + } - &:first-child { - .build { - // Remove left curved connectors from all builds in first stage - &:not(:first-child) { - &::before { - border: none; - } + &:first-child { + .build { + // Remove left curved connectors from all builds in first stage + &:not(:first-child) { + &::before { + border: none; } - // Remove opposite curve - .curve { - &::after { - display: none; - } + } + // Remove opposite curve + .curve { + &::after { + display: none; } } } + } - // Curve first child connecting lines in opposite direction - .curve { - display: none; - - &::before, - &::after { - content: ''; - width: 21px; - height: 25px; - position: absolute; - top: -31px; - border-top: 2px solid $border-color; - } + // Curve first child connecting lines in opposite direction + .curve { + display: none; - &::after { - left: -44px; - border-right: 2px solid $border-color; - border-radius: 0 20px; - } + &::before, + &::after { + content: ''; + width: 21px; + height: 25px; + position: absolute; + top: -31px; + border-top: 2px solid $border-color; + } - &::before { - right: -44px; - border-left: 2px solid $border-color; - border-radius: 20px 0 0; - } + &::after { + left: -44px; + border-right: 2px solid $border-color; + border-radius: 0 20px; } - } - .stage-name { - margin: 0 0 15px 10px; - font-weight: bold; - width: 176px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + &::before { + right: -44px; + border-left: 2px solid $border-color; + border-radius: 20px 0 0; + } } + } - .build { - position: relative; - width: 186px; - margin-bottom: 10px; - white-space: normal; - color: $gl-text-color-light; - - .dropdown-menu-toggle { - background-color: transparent; - border: none; - padding: 0; - color: $gl-text-color-light; + .stage-name { + margin: 0 0 15px 10px; + font-weight: bold; + width: 176px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } - &:focus { - outline: none; - } + .build { + position: relative; + width: 186px; + margin-bottom: 10px; + white-space: normal; + color: $gl-text-color-light; - &:hover { - color: $gl-text-color; + .dropdown-menu-toggle { + background-color: transparent; + border: none; + padding: 0; + color: $gl-text-color-light; - .dropdown-counter-badge { - color: $gl-text-color; - } - } + &:focus { + outline: none; } - > .build-content { - display: inline-block; - padding: 8px 10px 9px; - width: 100%; - border: 1px solid $border-color; - border-radius: 30px; - background-color: $white-light; + &:hover { + color: $gl-text-color; - &:hover { - background-color: $stage-hover-bg; - border: 1px solid $stage-hover-border; + .dropdown-counter-badge { color: $gl-text-color; } } + } - > .ci-action-icon-container { - position: absolute; - right: 5px; - top: 5px; - } + > .build-content { + display: inline-block; + padding: 8px 10px 9px; + width: 100%; + border: 1px solid $border-color; + border-radius: 30px; + background-color: $white-light; - .ci-status-icon svg { - height: 20px; - width: 20px; + &:hover { + background-color: $stage-hover-bg; + border: 1px solid $stage-hover-border; + color: $gl-text-color; } + } - .arrow { - &::before, - &::after { - content: ''; - display: inline-block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: 18px; - } + > .ci-action-icon-container { + position: absolute; + right: 5px; + top: 5px; + } - &::before { - left: -5px; - margin-top: -6px; - border-width: 7px 5px 7px 0; - border-right-color: $border-color; - } + .ci-status-icon svg { + height: 20px; + width: 20px; + } - &::after { - left: -4px; - margin-top: -9px; - border-width: 10px 7px 10px 0; - border-right-color: $white-light; - } + .arrow { + &::before, + &::after { + content: ''; + display: inline-block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + top: 18px; } - // Connect first build in each stage with right horizontal line - &:first-child { - &::after { - content: ''; - position: absolute; - top: 48%; - right: -48px; - border-top: 2px solid $border-color; - width: 48px; - height: 1px; - } + &::before { + left: -5px; + margin-top: -6px; + border-width: 7px 5px 7px 0; + border-right-color: $border-color; } - // Connect each build (except for first) with curved lines - &:not(:first-child) { - &::after, - &::before { - content: ''; - top: -49px; - position: absolute; - border-bottom: 2px solid $border-color; - width: 25px; - height: 69px; - } + &::after { + left: -4px; + margin-top: -9px; + border-width: 10px 7px 10px 0; + border-right-color: $white-light; + } + } - // Right connecting curves - &::after { - right: -25px; - border-right: 2px solid $border-color; - border-radius: 0 0 20px; - } + // Connect first build in each stage with right horizontal line + &:first-child { + &::after { + content: ''; + position: absolute; + top: 48%; + right: -48px; + border-top: 2px solid $border-color; + width: 48px; + height: 1px; + } + } - // Left connecting curves - &::before { - left: -25px; - border-left: 2px solid $border-color; - border-radius: 0 0 0 20px; - } + // Connect each build (except for first) with curved lines + &:not(:first-child) { + &::after, + &::before { + content: ''; + top: -49px; + position: absolute; + border-bottom: 2px solid $border-color; + width: 25px; + height: 69px; } - // Connect second build to first build with smaller curved line - &:nth-child(2) { - &::after, - &::before { - height: 29px; - top: -9px; - } + // Right connecting curves + &::after { + right: -25px; + border-right: 2px solid $border-color; + border-radius: 0 0 20px; + } - .curve { - display: block; - } + // Left connecting curves + &::before { + left: -25px; + border-left: 2px solid $border-color; + border-radius: 0 0 0 20px; } } - .grouped-pipeline-dropdown { - .dropdown-build { - .build-content { - width: 100%; - - &:hover { - background-color: $stage-hover-bg; - color: $gl-text-color; - } - } + // Connect second build to first build with smaller curved line + &:nth-child(2) { + &::after, + &::before { + height: 29px; + top: -9px; + } - .ci-action-icon-container { - padding: 0; - font-size: 11px; - position: absolute; - top: 1px; - right: 8px; - } + .curve { + display: block; } } } - .dropdown-counter-badge { - color: $border-color; - font-weight: 100; - font-size: 15px; - position: absolute; - right: 5px; - top: 8px; - } - .grouped-pipeline-dropdown { - padding: 0; - width: 191px; - min-width: 191px; - left: auto; - right: -195px; - top: -4px; - box-shadow: 0 1px 5px $black-transparent; - - a { - display: inline-block; - } - .dropdown-build { .build-content { width: 100%; @@ -660,290 +617,333 @@ padding: 0; font-size: 11px; position: absolute; - margin-top: 3px; - right: 7px; + top: 1px; + right: 8px; } } - - ul { - max-height: 245px; - overflow: auto; - margin: 3px 0; - - li { - margin: 4px 8px 4px 9px; - padding: 0; - line-height: 1.1; - position: relative; - - .ci-action-icon-container:hover { - background-color: transparent; - } - - .ci-status-icon { - position: relative; - top: 2px; - } - } - } - } - - .pipeline-graph .dropdown-build .ci-status-icon svg { - width: 18px; - height: 18px; } - - .ci-status-text { - max-width: 110px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: bottom; +} + +.dropdown-counter-badge { + color: $border-color; + font-weight: 100; + font-size: 15px; + position: absolute; + right: 5px; + top: 8px; +} + +.grouped-pipeline-dropdown { + padding: 0; + width: 191px; + min-width: 191px; + left: auto; + right: -195px; + top: -4px; + box-shadow: 0 1px 5px $black-transparent; + + a { display: inline-block; - position: relative; - font-weight: 200; } - // Action Icons - .ci-action-icon-container .ci-action-icon-wrapper { - i { - color: $border-color; - border-radius: 100%; - border: 1px solid $border-color; - padding: 5px 6px; - font-size: 13px; - background: $white-light; - height: 30px; - width: 30px; - - &::before { - position: relative; - top: 3px; - left: 3px; - } + .dropdown-build { + .build-content { + width: 100%; &:hover { - color: $gl-text-color; background-color: $stage-hover-bg; - border: 1px solid $stage-hover-bg; + color: $gl-text-color; } } - .ci-play-icon { - padding: 5px 5px 5px 7px; + .ci-action-icon-container { + padding: 0; + font-size: 11px; + position: absolute; + margin-top: 3px; + right: 7px; } } - .dropdown-build { - color: $gl-text-color-light; - - .build-content { - padding: 4px 7px 8px; - } + ul { + max-height: 245px; + overflow: auto; + margin: 3px 0; - .ci-action-icon-container { + li { + margin: 4px 8px 4px 9px; padding: 0; - font-size: 11px; - float: right; - margin-top: 3px; - display: inline-block; + line-height: 1.1; position: relative; - i { - font-size: 11px; - margin-top: 0; + .ci-action-icon-container:hover { + background-color: transparent; } - } - - .ci-action-icon-container { - i { - width: 24px; - height: 24px; - &::before { - top: 1px; - left: 1px; - } + .ci-status-icon { + position: relative; + top: 2px; } } - - .stage { - max-width: 100px; - width: 100px; + } +} + +.pipeline-graph .dropdown-build .ci-status-icon svg { + width: 18px; + height: 18px; +} + +.ci-status-text { + max-width: 110px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: bottom; + display: inline-block; + position: relative; + font-weight: 200; +} + +// Action Icons +.ci-action-icon-container .ci-action-icon-wrapper { + i { + color: $border-color; + border-radius: 100%; + border: 1px solid $border-color; + padding: 5px 6px; + font-size: 13px; + background: $white-light; + height: 30px; + width: 30px; + + &::before { + position: relative; + top: 3px; + left: 3px; } - .ci-status-icon svg { - height: 18px; - width: 18px; + &:hover { + color: $gl-text-color; + background-color: $stage-hover-bg; + border: 1px solid $stage-hover-bg; } + } - .ci-status-text { - max-width: 95px; - } + .ci-play-icon { + padding: 5px 5px 5px 7px; } +} - /** - * Builds dropdown in mini pipeline - */ - .mini-pipeline-graph { - .builds-dropdown { - background-color: transparent; - padding: 0; - color: $gl-text-color-light; - border: none; - margin: 0; +.dropdown-build { + color: $gl-text-color-light; - &:focus, - &:hover { - outline: none; - margin-right: -8px; + .build-content { + padding: 4px 7px 8px; + } - .ci-status-icon { - width: 32px; - padding: 0 8px 0 0; - transition: width 0.1s cubic-bezier(0.25, 0, 1, 1); + .ci-action-icon-container { + padding: 0; + font-size: 11px; + float: right; + margin-top: 3px; + display: inline-block; + position: relative; - + .dropdown-caret { - visibility: visible; - opacity: 1; - } - } - } + i { + font-size: 11px; + margin-top: 0; + } + } - &:focus, - &:active { - .ci-status-icon-success { - background-color: rgba($gl-success, .1); - } + .ci-action-icon-container { + i { + width: 24px; + height: 24px; - .ci-status-icon-failed { - background-color: rgba($gl-danger, .1); - } + &::before { + top: 1px; + left: 1px; + } + } + } - .ci-status-icon-pending, - .ci-status-icon-success_with_warnings { - background-color: rgba($gl-warning, .1); - } + .stage { + max-width: 100px; + width: 100px; + } - .ci-status-icon-running { - background-color: rgba($blue-normal, .1); - } + .ci-status-icon svg { + height: 18px; + width: 18px; + } - .ci-status-icon-canceled, - .ci-status-icon-disabled, - .ci-status-icon-not-found { - background-color: rgba($gl-gray, .1); - } + .ci-status-text { + max-width: 95px; + } +} + +/** + * Builds dropdown in mini pipeline + */ +.mini-pipeline-graph { + .builds-dropdown { + background-color: transparent; + padding: 0; + color: $gl-text-color-light; + border: none; + margin: 0; - .ci-status-icon-created, - .ci-status-icon-skipped { - background-color: rgba($gray-darkest, .1); - } - } + &:focus, + &:hover { + outline: none; + margin-right: -8px; - .mini-pipeline-graph-icon-container { - .dropdown-caret { - font-size: 11px; - position: absolute; - top: 6px; - left: 20px; - margin-right: -6px; - z-index: 2; - visibility: hidden; - opacity: 0; - transition: visibility 0.1s, opacity 0.1s linear; + .ci-status-icon { + width: 32px; + padding: 0 8px 0 0; + transition: width 0.1s cubic-bezier(0.25, 0, 1, 1); + + + .dropdown-caret { + visibility: visible; + opacity: 1; } } } - .dropdown-build .build-content { - padding: 3px 7px 7px; - } + &:focus, + &:active { + .ci-status-icon-success { + background-color: rgba($gl-success, .1); + } - .builds-dropdown-loading { - margin: 10px auto; - width: 18px; - } + .ci-status-icon-failed { + background-color: rgba($gl-danger, .1); + } - .grouped-pipeline-dropdown { - right: -172px; - top: 23px; - min-height: 50px; + .ci-status-icon-pending, + .ci-status-icon-success_with_warnings { + background-color: rgba($gl-warning, .1); + } - a { - color: $gl-text-color-light; + .ci-status-icon-running { + background-color: rgba($blue-normal, .1); } - } - .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; + .ci-status-icon-canceled, + .ci-status-icon-disabled, + .ci-status-icon-not-found { + background-color: rgba($gl-gray, .1); } - &::before { - border-width: 0 5px 5px; - border-bottom-color: $border-color; + .ci-status-icon-created, + .ci-status-icon-skipped { + background-color: rgba($gray-darkest, .1); } + } - &::after { - margin-top: 1px; - border-bottom-color: $white-light; + .mini-pipeline-graph-icon-container { + .dropdown-caret { + font-size: 11px; + position: absolute; + top: 6px; + left: 20px; + margin-right: -6px; + z-index: 2; + visibility: hidden; + opacity: 0; + transition: visibility 0.1s, opacity 0.1s linear; } } } - /** - * Icons in mini pipeline graph - */ - .mini-pipeline-graph-icon-container .ci-status-icon { - display: inline-block; - border: 1px solid; - border-radius: 22px; - margin-right: 1px; - width: 22px; - height: 22px; - position: relative; - z-index: 2; - transition: all 0.1s cubic-bezier(0.25, 0, 1, 1); + .dropdown-build .build-content { + padding: 3px 7px 7px; + } - svg { - top: -1px; - left: -1px; + .builds-dropdown-loading { + margin: 10px auto; + width: 18px; + } + + .grouped-pipeline-dropdown { + right: -172px; + top: 23px; + min-height: 50px; + + a { + color: $gl-text-color-light; } } - .stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg { - width: 22px; - height: 22px; + .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; + } + + &::after { + margin-top: 1px; + border-bottom-color: $white-light; + } } +} + +/** + * Icons in mini pipeline graph + */ +.mini-pipeline-graph-icon-container .ci-status-icon { + display: inline-block; + border: 1px solid; + border-radius: 22px; + margin-right: 1px; + width: 22px; + height: 22px; + position: relative; + z-index: 2; + transition: all 0.1s cubic-bezier(0.25, 0, 1, 1); + + svg { + top: -1px; + left: -1px; + } +} + +.stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg { + width: 22px; + height: 22px; +} - .terminal-icon { - margin-left: 3px; +.terminal-icon { + margin-left: 3px; +} + +.terminal-container { + .content-block { + border-bottom: none; } - .terminal-container { - .content-block { - border-bottom: none; - } + #terminal { + margin-top: 10px; + min-height: 450px; + box-sizing: border-box; - #terminal { - margin-top: 10px; + > div { min-height: 450px; - box-sizing: border-box; - - > div { - min-height: 450px; - } } } +} -- cgit v1.2.1 From b3e2fe69c1ea16d1be0a8bd8799c9bf46253e698 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Thu, 8 Dec 2016 09:53:29 -0600 Subject: Start commits refactor --- app/assets/stylesheets/pages/commit.scss | 132 --------------------------- app/assets/stylesheets/pages/commits.scss | 145 +++++++++++++++++++++++++++--- 2 files changed, 135 insertions(+), 142 deletions(-) delete mode 100644 app/assets/stylesheets/pages/commit.scss (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss deleted file mode 100644 index bf656d0e28e..00000000000 --- a/app/assets/stylesheets/pages/commit.scss +++ /dev/null @@ -1,132 +0,0 @@ -.commit-title { - display: block; -} - -.commit-author, -.commit-committer { - display: block; - color: $commit-committer-color; - font-weight: normal; - font-style: italic; -} - -.commit-author strong, -.commit-committer strong { - font-weight: bold; - font-style: normal; -} - -.commit-description { - background: none; - border: none; - margin: 0; - padding: 0; - margin-top: 10px; - word-break: normal; - white-space: pre-wrap; -} - -.js-details-expand { - &:hover { - text-decoration: none; - } -} - -.ci-status-link { - svg { - overflow: visible; - } -} - -.commit-box { - border-top: 1px solid $border-color; - padding: $gl-padding 0; - - .commit-title { - margin: 0; - font-size: 23px; - color: $gl-gray-dark; - } - - .commit-description { - margin-top: 15px; - } -} - -.commit-hash-full { - @media (max-width: $screen-sm-max) { - width: 80px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - vertical-align: bottom; - } -} - -.file-stats { - ul { - list-style: none; - margin: 0; - padding: 10px 0; - - li { - padding: 3px 0; - line-height: 20px; - } - } - - .new-file { - a { - color: $gl-text-green; - } - } - - .renamed-file { - a { - color: $gl-text-orange; - } - } - - .deleted-file { - a { - color: $gl-text-red; - } - } - - .edit-file { - a { - color: $gl-text-color; - } - } -} - -/* - * Commit message textarea for web editor and - * custom merge request message - */ -.commit-message-container { - background-color: $body-bg; - position: relative; - font-family: $monospace_font; - $left: 12px; - overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987 - .max-width-marker { - width: 72ch; - color: $commit-max-width-marker-color; - font-family: inherit; - left: $left; - height: 100%; - border-right: 1px solid mix($input-border, $white-light); - position: absolute; - z-index: 1; - } - - > textarea { - background-color: $commit-message-text-area-bg; - font-family: inherit; - padding-left: $left; - position: relative; - z-index: 2; - } -} diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index e76e1a73b25..abad300a7d1 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -1,3 +1,137 @@ +.commit-title { + display: block; +} + +.commit-author, +.commit-committer { + display: block; + color: $commit-committer-color; + font-weight: normal; + font-style: italic; +} + +.commit-author strong, +.commit-committer strong { + font-weight: bold; + font-style: normal; +} + +.commit-description { + background: none; + border: none; + margin: 0; + padding: 0; + margin-top: 10px; + word-break: normal; + white-space: pre-wrap; +} + +.js-details-expand { + &:hover { + text-decoration: none; + } +} + +.ci-status-link { + svg { + overflow: visible; + } +} + +.commit-box { + border-top: 1px solid $border-color; + padding: $gl-padding 0; + + .commit-title { + margin: 0; + font-size: 23px; + color: $gl-gray-dark; + } + + .commit-description { + margin-top: 15px; + } +} + +.commit-hash-full { + @media (max-width: $screen-sm-max) { + width: 80px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + vertical-align: bottom; + } +} + +.file-stats { + ul { + list-style: none; + margin: 0; + padding: 10px 0; + + li { + padding: 3px 0; + line-height: 20px; + } + } + + .new-file { + a { + color: $gl-text-green; + } + } + + .renamed-file { + a { + color: $gl-text-orange; + } + } + + .deleted-file { + a { + color: $gl-text-red; + } + } + + .edit-file { + a { + color: $gl-text-color; + } + } +} + +/* + * Commit message textarea for web editor and + * custom merge request message + */ +.commit-message-container { + background-color: $body-bg; + position: relative; + font-family: $monospace_font; + $left: 12px; + overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987 + .max-width-marker { + width: 72ch; + color: $commit-max-width-marker-color; + font-family: inherit; + left: $left; + height: 100%; + border-right: 1px solid mix($input-border, $white-light); + position: absolute; + z-index: 1; + } + + > textarea { + background-color: $commit-message-text-area-bg; + font-family: inherit; + padding-left: $left; + position: relative; + z-index: 2; + } +} + + .commits-compare-switch { @include btn-default; @include btn-white; @@ -18,7 +152,6 @@ } .commit-row-title { - line-height: 1.35; .notes_count { float: right; @@ -93,21 +226,13 @@ padding-left: 46px; } - &:not(:last-child) { - border-bottom: 1px solid $gray-darker; - } - a, button { color: $gl-dark-link-color; vertical-align: baseline; } - .avatar { - margin-left: -46px; - } - - .item-title { + .commit-content { display: inline-block; @media (min-width: $screen-sm-min) { -- cgit v1.2.1 From f2bf9443ca0a5b55713dab259edd3c20f42e7099 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Fri, 9 Dec 2016 08:37:44 -0600 Subject: Add table styling to commits tables --- app/assets/stylesheets/pages/commits.scss | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index abad300a7d1..feaa04136a9 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -142,7 +142,6 @@ .commit-header { padding: 5px 10px; background-color: $gray-light; - border-top: 1px solid $gray-darker; border-bottom: 1px solid $gray-darker; font-size: 14px; @@ -187,9 +186,8 @@ .commit-actions { @media (min-width: $screen-sm-min) { - float: right; - margin-left: $gl-padding; - margin-top: 2px; + width: 300px; + text-align: right; font-size: 0; } @@ -232,14 +230,6 @@ vertical-align: baseline; } - .commit-content { - display: inline-block; - - @media (min-width: $screen-sm-min) { - max-width: 70%; - } - } - .commit-row-description { font-size: 14px; border-left: 1px solid $white-normal; -- cgit v1.2.1 From c298cd9c40d0bf3fdc06368ad4376f5b2fbdda3c Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Fri, 9 Dec 2016 10:18:19 -0600 Subject: Update file hader styles; remove and relocate more commits css --- app/assets/stylesheets/pages/branches.scss | 55 +++++++++ app/assets/stylesheets/pages/commits.scss | 144 +---------------------- app/assets/stylesheets/pages/merge_requests.scss | 4 - app/assets/stylesheets/pages/status.scss | 6 + app/assets/stylesheets/pages/tree.scss | 15 +-- 5 files changed, 68 insertions(+), 156 deletions(-) create mode 100644 app/assets/stylesheets/pages/branches.scss (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss new file mode 100644 index 00000000000..8d671585b7a --- /dev/null +++ b/app/assets/stylesheets/pages/branches.scss @@ -0,0 +1,55 @@ +.divergence-graph { + padding: 12px 12px 0 0; + float: right; + + .graph-side { + position: relative; + width: 80px; + height: 22px; + padding: 5px 0 13px; + float: left; + + .bar { + position: absolute; + height: 4px; + background-color: $divergence-graph-bar-bg; + } + + .bar-behind { + right: 0; + border-radius: 3px 0 0 3px; + } + + .bar-ahead { + left: 0; + border-radius: 0 3px 3px 0; + } + + .count { + padding-top: 6px; + padding-bottom: 0; + font-size: 12px; + color: $gl-title-color; + display: block; + } + + .count-behind { + padding-right: 4px; + text-align: right; + } + + .count-ahead { + padding-left: 4px; + text-align: left; + } + } + + .graph-separator { + position: relative; + width: 1px; + height: 18px; + margin: 5px 0 0; + float: left; + background-color: $divergence-graph-separator-bg; + } +} diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index feaa04136a9..d890cf3502b 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -1,25 +1,6 @@ -.commit-title { - display: block; -} - -.commit-author, -.commit-committer { - display: block; - color: $commit-committer-color; - font-weight: normal; - font-style: italic; -} - -.commit-author strong, -.commit-committer strong { - font-weight: bold; - font-style: normal; -} - .commit-description { background: none; border: none; - margin: 0; padding: 0; margin-top: 10px; word-break: normal; @@ -32,19 +13,12 @@ } } -.ci-status-link { - svg { - overflow: visible; - } -} - .commit-box { border-top: 1px solid $border-color; padding: $gl-padding 0; .commit-title { margin: 0; - font-size: 23px; color: $gl-gray-dark; } @@ -64,43 +38,6 @@ } } -.file-stats { - ul { - list-style: none; - margin: 0; - padding: 10px 0; - - li { - padding: 3px 0; - line-height: 20px; - } - } - - .new-file { - a { - color: $gl-text-green; - } - } - - .renamed-file { - a { - color: $gl-text-orange; - } - } - - .deleted-file { - a { - color: $gl-text-red; - } - } - - .edit-file { - a { - color: $gl-text-color; - } - } -} - /* * Commit message textarea for web editor and * custom merge request message @@ -122,7 +59,7 @@ z-index: 1; } - > textarea { + textarea { background-color: $commit-message-text-area-bg; font-family: inherit; padding-left: $left; @@ -133,8 +70,6 @@ .commits-compare-switch { - @include btn-default; - @include btn-white; float: left; margin-right: 9px; } @@ -151,7 +86,6 @@ } .commit-row-title { - .notes_count { float: right; margin-right: 10px; @@ -164,7 +98,6 @@ .commit-row-message { color: $gl-dark-link-color; } - } .text-expander { @@ -217,12 +150,6 @@ .commit, .generic_commit_status { - padding: 10px 0; - position: relative; - - @media (min-width: $screen-sm-min) { - padding-left: 46px; - } a, button { @@ -253,19 +180,6 @@ } } - .commit-row-info { - color: $gl-gray; - line-height: 1.35; - - a { - color: $gl-gray; - } - - .avatar { - margin-right: 8px; - } - } - &.inline-commit { .commit-row-title { font-size: 13px; @@ -301,59 +215,3 @@ color: $gl-gray; } } - -.divergence-graph { - padding: 12px 12px 0 0; - float: right; - - .graph-side { - position: relative; - width: 80px; - height: 22px; - padding: 5px 0 13px; - float: left; - - .bar { - position: absolute; - height: 4px; - background-color: $divergence-graph-bar-bg; - } - - .bar-behind { - right: 0; - border-radius: 3px 0 0 3px; - } - - .bar-ahead { - left: 0; - border-radius: 0 3px 3px 0; - } - - .count { - padding-top: 6px; - padding-bottom: 0; - font-size: 12px; - color: $gl-title-color; - display: block; - } - - .count-behind { - padding-right: 4px; - text-align: right; - } - - .count-ahead { - padding-left: 4px; - text-align: left; - } - } - - .graph-separator { - position: relative; - width: 1px; - height: 18px; - margin: 5px 0 0; - float: left; - background-color: $divergence-graph-separator-bg; - } -} diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 4cb53ab6fce..0e3da7d7163 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -310,10 +310,6 @@ left: 0; top: 2px; } - - .commit-row-info { - line-height: 20px; - } } .btn-clipboard { diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index 4acd17360c1..2f6f03e9877 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -135,3 +135,9 @@ left: 5px; } } + +.ci-status-link { + svg { + overflow: visible; + } +} diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index cad4e149845..fe4f08e4749 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -134,21 +134,18 @@ .blob-commit-info { list-style: none; - padding: $gl-padding; background: $gray-light; + padding: 6px 0; border: 1px solid $border-color; border-bottom: none; margin: 0; - .commit { - padding-top: 0; - padding-bottom: 0; + .table-list-cell { + border-bottom: none; + } - .commit-row-title { - .commit-row-message { - font-weight: normal; - } - } + .commit-actions { + width: 200px; } } -- cgit v1.2.1 From 8a3cf4a93320485fc95d4d6603d5600db8226ab3 Mon Sep 17 00:00:00 2001 From: Alfredo Sumaran Date: Fri, 30 Dec 2016 05:07:45 -0500 Subject: Remove bottom border from issuable titles --- app/assets/stylesheets/pages/issuable.scss | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 6b4d1f85564..42a3f5baed9 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -5,6 +5,12 @@ } } + .title { + padding: 0; + margin: 0; + border-bottom: none; + } + // Border around images in issue and MR descriptions. .description img:not(.emoji) { border: 1px solid $white-normal; -- cgit v1.2.1 From ccc85d802f44b0ca1603a10588c7a1edb7fe8bc0 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Wed, 28 Dec 2016 16:56:37 +0100 Subject: Fixed regression of note-headline-light where it was always placed on 2 lines, even on wide viewports --- app/assets/stylesheets/pages/notes.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 8f15775ee03..21d72791e81 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -43,7 +43,7 @@ ul.notes { } .system-note-message { - display: inline-block; + display: inline; &::first-letter { text-transform: lowercase; @@ -55,7 +55,7 @@ ul.notes { } p { - display: inline-block; + display: inline; margin: 0; &::first-letter { @@ -353,6 +353,14 @@ ul.notes { font-size: 14px; } +.note-headline-light { + display: inline; + + @media (max-width: $screen-xs-min) { + display: block; + } +} + .note-headline-light, .discussion-headline-light { color: $notes-light-color; -- cgit v1.2.1 From 5bfce8e99e7197c57ae91feefa78c13a7a50f476 Mon Sep 17 00:00:00 2001 From: Nur Rony Date: Thu, 15 Dec 2016 23:14:04 +0600 Subject: fixes mobile views --- app/assets/stylesheets/pages/projects.scss | 31 ++++++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 4 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index b99be02ab0c..4a1bc560292 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -26,7 +26,7 @@ margin-bottom: 5px; } - &> .form-group { + & > .form-group { padding-left: 0; } } @@ -73,7 +73,7 @@ border: 1px solid $border-color; } - &+ .select2 a { + & + .select2 a { border-top-left-radius: 0; border-bottom-left-radius: 0; } @@ -618,7 +618,6 @@ pre.light-well { margin: 0; } - .activity-filter-block { .controls { padding-bottom: 7px; @@ -811,7 +810,31 @@ pre.light-well { .compare-form-group { .dropdown-menu { - width: 300px; + width: 100%; + + @media (min-width: $screen-sm-min) { + width: 300px; + } + } + + + .compare-ellipsis { + width: 100%; + vertical-align: middle; + text-align: center; + margin-top: -20px; + + @media (min-width: $screen-sm-min) { + margin-top: 0; + width: auto; + } + } + + .inline-input-group { + width: 100%; + + @media (min-width: $screen-sm-min) { + width: 250px; + } } } -- cgit v1.2.1 From f4aab83a36433eddc00db468b86583eacd4636c9 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Mon, 2 Jan 2017 15:30:17 +0000 Subject: Increases pipeline graph drowdown width in order to prevent strange position on chrome on ubuntu Adds MR ID to changelog entry --- app/assets/stylesheets/pages/pipelines.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index c370b6247b0..578003f6d36 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -630,8 +630,8 @@ .grouped-pipeline-dropdown { padding: 0; - width: 191px; - min-width: 191px; + width: 195px; + min-width: 195px; left: auto; right: -195px; top: -4px; -- cgit v1.2.1 From 6bd785a51c39ad0bb69660c694c3c7408cfe5b23 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 3 Jan 2017 13:07:08 +0100 Subject: hover animations for award buttons, buttons, dropdowns, rows in file list, links, navigation tabs, labels --- app/assets/stylesheets/pages/labels.scss | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index d129eb12a45..01473bd3855 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -106,6 +106,10 @@ .color-label { padding: 3px 7px; border-radius: $label-border-radius; + + &:hover { + box-shadow: inset 0 0 0 80px rgba(0,0,0,0.1); + } } .dropdown-labels-error { @@ -203,6 +207,10 @@ z-index: 3; border-radius: $label-border-radius; padding: 6px 10px 6px 9px; + + &:hover { + box-shadow: inset 0 0 0 80px rgba(0,0,0,0.1); + } } .btn { -- cgit v1.2.1 From 5ba1055d23ee4109e75e35352e0193f39bc65b01 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 3 Jan 2017 14:51:19 +0100 Subject: added additional hover animations, fixed up avatars --- app/assets/stylesheets/pages/cycle_analytics.scss | 4 ++++ app/assets/stylesheets/pages/issuable.scss | 4 ++++ app/assets/stylesheets/pages/profile.scss | 10 +++++++++- app/assets/stylesheets/pages/search.scss | 14 ++++++++++++++ 4 files changed, 31 insertions(+), 1 deletion(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index 9ce261eafef..47286727bc1 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -20,6 +20,10 @@ .fa { color: $cycle-analytics-light-gray; + + &:hover { + color: $gl-text-color; + } } .stage-header { diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 6b4d1f85564..bc4ac8d2eb4 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -277,6 +277,10 @@ &:hover { color: $md-link-color; text-decoration: none; + + .avatar { + border-color: $md-link-color; + } } } diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 8b1976bd925..a677e34a615 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -222,6 +222,10 @@ margin-left: 5px; } + .nav-links li { + margin-right: -4px; + } + .profile-header { margin: 0 auto; @@ -253,6 +257,10 @@ } } } + + .nav-links li { + margin-right: -7px; + } } } @@ -271,4 +279,4 @@ table.u2f-registrations { .scopes-list { padding-left: 18px; } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index cedd4cb2987..e524872ff3a 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -14,6 +14,20 @@ } } +.search form:hover, +.file-finder-input:hover, +.issuable-search-form:hover, +.search-text-input:hover, +textarea:hover, +.form-control:hover { + border-color: lighten($dropdown-input-focus-border, 20%); + box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%); +} + +input[type="checkbox"]:hover { + box-shadow: 0 0 2px 2px rgba(153, 212, 247, 0.4), 0 0 0 1px rgba(153, 212, 247, 0.4); +} + .search { margin-right: 10px; margin-left: 10px; -- cgit v1.2.1 From 37d43fa9095a43f7610428b2912515ef2e635b54 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Tue, 3 Jan 2017 15:45:11 +0100 Subject: fix rake scss linting errors --- app/assets/stylesheets/pages/labels.scss | 4 ++-- app/assets/stylesheets/pages/search.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index 01473bd3855..689de841cbd 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -108,7 +108,7 @@ border-radius: $label-border-radius; &:hover { - box-shadow: inset 0 0 0 80px rgba(0,0,0,0.1); + box-shadow: inset 0 0 0 80px $label-remove-border; } } @@ -209,7 +209,7 @@ padding: 6px 10px 6px 9px; &:hover { - box-shadow: inset 0 0 0 80px rgba(0,0,0,0.1); + box-shadow: inset 0 0 0 80px $label-remove-border; } } diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index e524872ff3a..12bff32bbf3 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -25,7 +25,7 @@ textarea:hover, } input[type="checkbox"]:hover { - box-shadow: 0 0 2px 2px rgba(153, 212, 247, 0.4), 0 0 0 1px rgba(153, 212, 247, 0.4); + box-shadow: 0 0 2px 2px lighten($search-input-focus-shadow-color, 20%), 0 0 0 1px lighten($search-input-focus-shadow-color, 20%); } .search { -- cgit v1.2.1 From 85a329845fa07112fe81aab8c6440490056f4a17 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 3 Jan 2017 15:41:14 +0000 Subject: Added animations to issue boards - Adds animation when opening & closing the sidebar - Adds an animation when dragging boards to a new position - Adds animations to dragging issues around When opening the sidebar it will also animate the scrollLeft property to make moving to the opened issue less blunt. Closes #25630 --- app/assets/stylesheets/pages/boards.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 76a88d96183..67ffbae2ab9 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -74,6 +74,7 @@ height: 475px; // Needed for PhantomJS height: calc(100vh - 220px); min-height: 475px; + transition: width .2s; &.is-compact { width: calc(100% - 290px); @@ -338,3 +339,17 @@ } } } + +.right-sidebar.right-sidebar-expanded { + &.boards-sidebar-slide-enter-active, + &.boards-sidebar-slide-leave-active { + transition: all .2s; + } + + &.boards-sidebar-slide-enter, + &.boards-sidebar-slide-leave-active { + width: 0; + padding-left: 0; + padding-right: 0; + } +} -- cgit v1.2.1 From 7056e9261a182120c6d8239ff7505bc1da97b9f1 Mon Sep 17 00:00:00 2001 From: Jose Ivan Vargas Date: Tue, 3 Jan 2017 16:20:11 -0600 Subject: Added UX improvements --- app/assets/stylesheets/pages/members.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index 36ee5d17211..18c65191ea1 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -98,6 +98,10 @@ padding-right: 35px; @media (min-width: $screen-sm-min) { + width: 250px; + } + + @media (min-width: $screen-md-min) { width: 350px; } -- cgit v1.2.1 From 07fc7bef10a0422810c60666bed16dca81307a39 Mon Sep 17 00:00:00 2001 From: Grzegorz Bizon Date: Wed, 4 Jan 2017 13:08:23 +0100 Subject: Revert adding an invalid CI/CD status CSS class --- app/assets/stylesheets/pages/status.scss | 14 -------------- 1 file changed, 14 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index 47be2dd0efb..4acd17360c1 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -46,20 +46,6 @@ } } - &.ci-passed, - &.ci-passed_with_warnings { - color: $gl-success; - border-color: $gl-success; - - &:not(span):hover { - background-color: rgba( $gl-success, .07); - } - - svg { - fill: $gl-success; - } - } - &.ci-info { color: $gl-info; border-color: $gl-info; -- cgit v1.2.1 From 209aa238f526531f6828e64ac6bfa2afb532c0b0 Mon Sep 17 00:00:00 2001 From: Regis Date: Wed, 4 Jan 2017 11:38:22 -0700 Subject: add margin-bottom to label css for more even spacing --- app/assets/stylesheets/pages/pipelines.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index dc119843b65..8650f973889 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -29,6 +29,10 @@ min-width: 1200px; table-layout: fixed; + .label { + margin-bottom: 3px; + } + .pipeline-id { color: $black; } -- cgit v1.2.1 From 86b1dfc7a494b19a20cf677f040d2f9c8a1efad7 Mon Sep 17 00:00:00 2001 From: tauriedavis Date: Fri, 30 Dec 2016 12:18:27 -0800 Subject: 25701 standardize text colors --- app/assets/stylesheets/pages/boards.scss | 2 +- app/assets/stylesheets/pages/branches.scss | 2 +- app/assets/stylesheets/pages/builds.scss | 4 ++-- app/assets/stylesheets/pages/ci_projects.scss | 2 +- app/assets/stylesheets/pages/commits.scss | 16 +++++++------- app/assets/stylesheets/pages/cycle_analytics.scss | 18 ++++++++-------- app/assets/stylesheets/pages/detail_page.scss | 8 +++---- app/assets/stylesheets/pages/diff.scss | 6 +++--- app/assets/stylesheets/pages/environments.scss | 10 ++++----- app/assets/stylesheets/pages/events.scss | 2 +- app/assets/stylesheets/pages/groups.scss | 2 +- app/assets/stylesheets/pages/issuable.scss | 16 +++++++------- app/assets/stylesheets/pages/labels.scss | 2 +- app/assets/stylesheets/pages/merge_requests.scss | 14 ++++++------ app/assets/stylesheets/pages/milestone.scss | 2 +- app/assets/stylesheets/pages/note_form.scss | 4 ++-- app/assets/stylesheets/pages/notes.scss | 2 +- app/assets/stylesheets/pages/pipelines.scss | 26 +++++++++++------------ app/assets/stylesheets/pages/projects.scss | 14 ++++++------ app/assets/stylesheets/pages/settings.scss | 2 +- app/assets/stylesheets/pages/status.scss | 16 +++++++------- app/assets/stylesheets/pages/todos.scss | 2 +- app/assets/stylesheets/pages/tree.scss | 10 ++++----- app/assets/stylesheets/pages/wiki.scss | 4 ++-- 24 files changed, 93 insertions(+), 93 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 76a88d96183..c18de7b940a 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -259,7 +259,7 @@ .board-list-count { padding: 10px 0; - color: $gl-gray-light; + color: $gl-text-color-secondary; font-size: 13px; > .fa { diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss index 8d671585b7a..3e2fa8ca88d 100644 --- a/app/assets/stylesheets/pages/branches.scss +++ b/app/assets/stylesheets/pages/branches.scss @@ -29,7 +29,7 @@ padding-top: 6px; padding-bottom: 0; font-size: 12px; - color: $gl-title-color; + color: $gl-text-color; display: block; } diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index f9e8d297c05..fd101d43b5b 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -160,7 +160,7 @@ flex: 1; a { - color: $gl-gray; + color: $gl-text-color; &:hover { color: $gl-link-color; @@ -357,7 +357,7 @@ } .build-light-text { - color: $gl-gray-light; + color: $gl-text-color-secondary; } .build-gutter-toggle { diff --git a/app/assets/stylesheets/pages/ci_projects.scss b/app/assets/stylesheets/pages/ci_projects.scss index d1cd1e5d848..90643832390 100644 --- a/app/assets/stylesheets/pages/ci_projects.scss +++ b/app/assets/stylesheets/pages/ci_projects.scss @@ -18,7 +18,7 @@ } td { - color: $gl-gray; + color: $gl-text-color; vertical-align: middle !important; a { diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index d890cf3502b..fef8e8eec27 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -19,7 +19,7 @@ .commit-title { margin: 0; - color: $gl-gray-dark; + color: $gl-text-color; } .commit-description { @@ -96,14 +96,14 @@ } .commit-row-message { - color: $gl-dark-link-color; + color: $gl-text-color; } } .text-expander { display: inline-block; background: $gray-light; - color: $gl-gray-light; + color: $gl-text-color-secondary; padding: 0 5px; cursor: pointer; border: 1px solid $border-gray-dark; @@ -153,7 +153,7 @@ a, button { - color: $gl-dark-link-color; + color: $gl-text-color; vertical-align: baseline; } @@ -176,7 +176,7 @@ } a { - color: $gl-dark-link-color; + color: $gl-text-color; } } @@ -193,7 +193,7 @@ } .branch-commit { - color: $gl-gray; + color: $gl-text-color; .commit-icon { text-align: center; @@ -203,7 +203,7 @@ height: 14px; width: 14px; vertical-align: middle; - fill: $gl-gray-light; + fill: $gl-text-color-secondary; } } @@ -212,6 +212,6 @@ } .commit-row-message { - color: $gl-gray; + color: $gl-text-color; } } diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index 9ce261eafef..6566f27ea2d 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -111,14 +111,14 @@ line-height: 19px; font-size: 14px; font-weight: 600; - color: $gl-title-color; + color: $gl-text-color; } &.text { color: $layout-link-gray; &.value-col { - color: $gl-title-color; + color: $gl-text-color; } } } @@ -260,7 +260,7 @@ .stage-empty, .not-available { - color: $gl-text-color-light; + color: $gl-text-color-secondary; } } } @@ -327,7 +327,7 @@ @include text-overflow(); a { - color: $gl-dark-link-color; + color: $gl-text-color; } } } @@ -355,7 +355,7 @@ .issue-link, .commit-author-link, .issue-author-link { - color: $gl-dark-link-color; + color: $gl-text-color; } // Custom CSS for components @@ -396,11 +396,11 @@ } .item-build-name { - color: $gl-title-color; + color: $gl-text-color; } .pipeline-id { - color: $gl-title-color; + color: $gl-text-color; padding: 0 3px 0 0; } @@ -423,7 +423,7 @@ } .fa { - color: $gl-text-color-light; + color: $gl-text-color-secondary; font-size: $code_font_size; } } @@ -435,7 +435,7 @@ width: 75%; margin: 0 auto; padding-top: 130px; - color: $gl-text-color-light; + color: $gl-text-color-secondary; h4 { color: $gl-text-color; diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss index 9b28df1afc5..46fd19c93f9 100644 --- a/app/assets/stylesheets/pages/detail_page.scss +++ b/app/assets/stylesheets/pages/detail_page.scss @@ -1,15 +1,15 @@ .detail-page-header { padding: $gl-padding-top 0; border-bottom: 1px solid $border-color; - color: $gl-text-color-dark; + color: $gl-text-color; line-height: 34px; .author { - color: $gl-text-color-dark; + color: $gl-text-color; } .identifier { - color: $gl-text-color-dark; + color: $gl-text-color; } .issue_created_ago, @@ -22,7 +22,7 @@ .title { margin: 0 0 16px; font-size: 2em; - color: $gl-gray-dark; + color: $gl-text-color; padding: 0 0 0.3em; border-bottom: 1px solid $white-dark; } diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index f30795fd2c2..96ba7c40634 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -14,7 +14,7 @@ background: $gray-light; border-bottom: 1px solid $border-color; padding: 10px 16px; - color: $gl-diff-text-color; + color: $gl-text-color; z-index: 10; border-radius: 3px 3px 0 0; @@ -50,7 +50,7 @@ overflow: auto; overflow-y: hidden; background: $white-light; - color: $gl-title-color; + color: $gl-text-color; border-radius: 0 0 3px 3px; .unfold { @@ -380,7 +380,7 @@ } cursor: default; - color: $gl-title-color; + color: $gl-text-color; } &.disabled { diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 5517dc5dcbd..778ef01430e 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -72,25 +72,25 @@ .external-url, .dropdown-new { - color: $gl-gray-light; + color: $gl-text-color-secondary; } .dropdown-menu { .fa { margin-right: 6px; - color: $gl-gray-light; + color: $gl-text-color-secondary; } } .build-link, .branch-name { - color: $gl-dark-link-color; + color: $gl-text-color; } .stop-env-link, .external-url { - color: $gl-gray-light; + color: $gl-text-color-secondary; .stop-env-icon { font-size: 14px; @@ -101,7 +101,7 @@ .build-column { .build-link { - color: $gl-dark-link-color; + color: $gl-text-color; } .avatar { diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss index 98925c2d0cb..b989d72ce1c 100644 --- a/app/assets/stylesheets/pages/events.scss +++ b/app/assets/stylesheets/pages/events.scss @@ -21,7 +21,7 @@ } a { - color: $gl-dark-link-color; + color: $gl-text-color; } .avatar { diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index 16bff5f1e03..d377526e655 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -13,7 +13,7 @@ .stats { float: right; line-height: $list-text-height; - color: $gl-gray; + color: $gl-text-color; span { margin-right: 15px; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 42a3f5baed9..0a8c037c402 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -103,7 +103,7 @@ } .edit-link { - color: $gl-gray; + color: $gl-text-color; &:hover { color: $md-link-color; @@ -139,7 +139,7 @@ } .btn-clipboard:hover { - color: $gl-gray; + color: $gl-text-color; } } @@ -174,7 +174,7 @@ } .no-value { - color: $gl-gray-light; + color: $gl-text-color-secondary; } .sidebar-collapsed-icon { @@ -242,7 +242,7 @@ color: $issuable-sidebar-color; &:hover { - color: $gl-gray; + color: $gl-text-color; } span { @@ -255,16 +255,16 @@ } .avatar:hover { - border-color: $issuable-avatar-hover-border; + border-color: $issuable-sidebar-color; } .btn-clipboard { border: none; - color: $issuable-clipboard-color; + color: $issuable-sidebar-color; &:hover { background: transparent; - color: $gl-gray; + color: $gl-text-color; } } } @@ -338,7 +338,7 @@ margin-left: 5px; a { - color: $gl-gray-light; + color: $gl-text-color-secondary; } } diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index d129eb12a45..78683c7d574 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -117,7 +117,7 @@ .manage-labels-list { .btn-action { - color: $gl-dark-link-color; + color: $gl-text-color; .fa { font-size: 18px; diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 98d5967e76a..45ff9f7ff5f 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -4,7 +4,7 @@ */ .mr-state-widget { background: $gray-light; - color: $gl-gray; + color: $gl-text-color; border: 1px solid $border-color; border-radius: 2px; @@ -58,7 +58,7 @@ padding-right: 0; a { - color: $gl-gray; + color: $gl-text-color; } } @@ -70,7 +70,7 @@ .ci_widget { border-bottom: 1px solid $well-inner-border; - color: $gl-gray; + color: $gl-text-color; svg { margin-right: 4px; @@ -94,7 +94,7 @@ } .normal { - color: $gl-text-color-dark; + color: $gl-text-color; } .js-deployment-link { @@ -106,7 +106,7 @@ font-weight: 600; font-size: 16px; margin: 5px 0; - color: $gl-gray-dark; + color: $gl-text-color; &.has-conflicts .fa-exclamation-triangle { color: $gl-warning; @@ -190,7 +190,7 @@ } .label-branch { - color: $gl-gray-dark; + color: $gl-text-color; font-family: $monospace_font; font-weight: bold; overflow: hidden; @@ -363,7 +363,7 @@ th { background-color: $white-light; - color: $gl-gray-light; + color: $gl-text-color-secondary; } } } diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index f47ae9c6157..e284b7269ce 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -102,7 +102,7 @@ margin-top: 7px; .issuable-number { - color: $gl-gray-light; + color: $gl-text-color-secondary; margin-right: 5px; } diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index e54e12be82f..9f1c6a8a264 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -44,7 +44,7 @@ .note-textarea { display: block; padding: 10px 0; - color: $gl-gray; + color: $gl-text-color; font-family: $regular_font; border: 0; @@ -204,7 +204,7 @@ .comment-toolbar { padding-top: $gl-padding-top; - color: $gl-gray-light; + color: $gl-text-color-secondary; border-top: 1px solid $border-color; } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 21d72791e81..38c548908f8 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -345,7 +345,7 @@ ul.notes { } .author_link { - color: $gl-gray; + color: $gl-text-color; } } diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 578003f6d36..1e4f242d40d 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -131,7 +131,7 @@ height: 14px; width: 14px; vertical-align: middle; - fill: $gl-gray-light; + fill: $gl-text-color-secondary; } .fa { @@ -210,7 +210,7 @@ .duration, .finished-at { - color: $gl-gray-light; + color: $gl-text-color-secondary; margin: 4px 0; .fa { @@ -231,7 +231,7 @@ .btn { margin: 0; - color: $gl-gray-light; + color: $gl-text-color-secondary; } .cancel-retry-btns { @@ -244,10 +244,10 @@ .dropdown-toggle, .dropdown-menu { - color: $gl-gray-light; + color: $gl-text-color-secondary; .fa { - color: $gl-gray-light; + color: $gl-text-color-secondary; font-size: 14px; } @@ -281,7 +281,7 @@ .build-link { a { - color: $gl-dark-link-color; + color: $gl-text-color; } } @@ -344,7 +344,7 @@ a { text-decoration: none; - color: $gl-text-color-light; + color: $gl-text-color-secondary; } svg { @@ -468,13 +468,13 @@ width: 186px; margin-bottom: 10px; white-space: normal; - color: $gl-text-color-light; + color: $gl-text-color-secondary; .dropdown-menu-toggle { background-color: transparent; border: none; padding: 0; - color: $gl-text-color-light; + color: $gl-text-color-secondary; &:focus { outline: none; @@ -730,7 +730,7 @@ } .dropdown-build { - color: $gl-text-color-light; + color: $gl-text-color-secondary; .build-content { padding: 4px 7px 8px; @@ -784,7 +784,7 @@ .builds-dropdown { background-color: transparent; padding: 0; - color: $gl-text-color-light; + color: $gl-text-color-secondary; border: none; margin: 0; @@ -827,7 +827,7 @@ .ci-status-icon-canceled, .ci-status-icon-disabled, .ci-status-icon-not-found { - background-color: rgba($gl-gray, .1); + background-color: rgba($gl-text-color, .1); } .ci-status-icon-created, @@ -866,7 +866,7 @@ min-height: 50px; a { - color: $gl-text-color-light; + color: $gl-text-color-secondary; } } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 4a1bc560292..e30d73886e1 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -292,7 +292,7 @@ .option-title { font-weight: normal; display: inline-block; - color: $gl-gray-dark; + color: $gl-text-color; } .option-descr { @@ -331,7 +331,7 @@ a.deploy-project-label { padding: 5px; margin-right: 5px; - color: $gl-gray; + color: $gl-text-color; background-color: $row-hover; &:hover { @@ -372,7 +372,7 @@ a.deploy-project-label { } a { - color: $gl-dark-link-color; + color: $gl-text-color; } .dropdown-menu { @@ -426,7 +426,7 @@ a.deploy-project-label { width: 100%; height: 100%; padding-top: $gl-padding; - color: $gl-gray; + color: $gl-text-color; .caption { min-height: 30px; @@ -552,7 +552,7 @@ pre.light-well { margin: 0 7px 7px; h5 { - color: $gl-text-color-dark; + color: $gl-text-color; } .light-well { @@ -662,7 +662,7 @@ pre.light-well { } .commit-row-message { - color: $gl-gray; + color: $gl-text-color; } .commit_short_id { @@ -750,7 +750,7 @@ pre.light-well { .protected-branches-list { a { - color: $gl-gray; + color: $gl-text-color; &:hover { color: $gl-link-color; diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index ddee2c95247..a28a87ed4f8 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -1,5 +1,5 @@ .settings-list-icon { - color: $gl-gray-light; + color: $gl-text-color-secondary; font-size: $settings-icon-size; line-height: 42px; } diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index 2f6f03e9877..f19275770be 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -61,15 +61,15 @@ &.ci-canceled, &.ci-disabled { - color: $gl-gray; - border-color: $gl-gray; + color: $gl-text-color; + border-color: $gl-text-color; &:not(span):hover { - background-color: rgba($gl-gray, .07); + background-color: rgba($gl-text-color, .07); } svg { - fill: $gl-gray; + fill: $gl-text-color; } } @@ -101,15 +101,15 @@ &.ci-created, &.ci-skipped { - color: $gl-gray-light; - border-color: $gl-gray-light; + color: $gl-text-color-secondary; + border-color: $gl-text-color-secondary; &:not(span):hover { - background-color: rgba($gl-gray-light, .07); + background-color: rgba($gl-text-color-secondary, .07); } svg { - fill: $gl-gray-light; + fill: $gl-text-color-secondary; } } diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss index 508b30f3947..01675acc62e 100644 --- a/app/assets/stylesheets/pages/todos.scss +++ b/app/assets/stylesheets/pages/todos.scss @@ -90,7 +90,7 @@ } p { - color: $gl-text-color-dark; + color: $gl-text-color; } } diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index fe4f08e4749..4cce1c363eb 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -78,7 +78,7 @@ i, a { - color: $gl-dark-link-color; + color: $gl-text-color; } img { @@ -104,21 +104,21 @@ padding-right: 8px; .commit-author-name { - color: $gl-gray; + color: $gl-text-color; } } .tree-time-ago { min-width: 135px; - color: $gl-gray-light; + color: $gl-text-color-secondary; } .tree-commit { max-width: 320px; - color: $gl-gray-light; + color: $gl-text-color-secondary; .tree-commit-link { - color: $gl-gray-light; + color: $gl-text-color-secondary; &:hover { text-decoration: underline; diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss index b9f81533150..d5783e14b21 100644 --- a/app/assets/stylesheets/pages/wiki.scss +++ b/app/assets/stylesheets/pages/wiki.scss @@ -15,7 +15,7 @@ } .wiki-last-edit-by { - color: $gl-gray-light; + color: $gl-text-color-secondary; strong { color: $gl-text-color; @@ -24,7 +24,7 @@ .light { font-weight: normal; - color: $gl-gray-light; + color: $gl-text-color-secondary; } .git-access-header { -- cgit v1.2.1 From 1100320b0cc4a1cc0f88eaf9f4d4d5c4b6f13c5c Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Fri, 14 Oct 2016 00:11:43 +0300 Subject: Refactor discussion edit widget to have only one at a time. --- app/assets/stylesheets/pages/notes.scss | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 21d72791e81..4eb81473e2b 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -601,3 +601,12 @@ ul.notes { position: relative; } } + + +.note-edit-warning.settings-message { + display: none; + position: relative; + top: 1px; + left: 7px; + padding: 5px 10px; +} -- cgit v1.2.1 From 2193ccec3d0cee689f7c62e4959a80589793af71 Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Wed, 16 Nov 2016 22:18:01 +0300 Subject: Fix warning styling for responsive design. --- app/assets/stylesheets/pages/note_form.scss | 16 ++++++++++++++++ app/assets/stylesheets/pages/notes.scss | 17 ----------------- 2 files changed, 16 insertions(+), 17 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index e54e12be82f..1ef757147a2 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -27,6 +27,7 @@ .new-note, .note-edit-form { .note-form-actions { + position: relative; margin-top: $gl-padding; } @@ -265,3 +266,18 @@ } } } + +.note-edit-warning.settings-message { + display: none; + padding: 5px 10px; + position: absolute; + left: 127px; + top: 2px; + + @media (max-width: $screen-xs-max) { + position: relative; + top: 0; + left: 0; + margin-bottom: 10px; + } +} diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 4eb81473e2b..3d111f6bfcb 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -586,23 +586,6 @@ ul.notes { } } -// Merge request notes in diffs -.diff-file { - - // Diff is side by side - .notes_content.parallel .note-header .note-headline-light { - display: block; - position: relative; - } - - // Diff is inline - .notes_content .note-header .note-headline-light { - display: inline-block; - position: relative; - } -} - - .note-edit-warning.settings-message { display: none; position: relative; -- cgit v1.2.1 From 509f0b1ac41254d010a1b94d05dbf0d2a75221d3 Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Wed, 28 Dec 2016 21:28:20 +0300 Subject: Remove unnecessary styling came from merge conflicts. --- app/assets/stylesheets/pages/notes.scss | 8 -------- 1 file changed, 8 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 3d111f6bfcb..10a9df18c47 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -585,11 +585,3 @@ ul.notes { } } } - -.note-edit-warning.settings-message { - display: none; - position: relative; - top: 1px; - left: 7px; - padding: 5px 10px; -} -- cgit v1.2.1 From 9ae7e99a09ad1d9ea570279ce02cd232a55daf28 Mon Sep 17 00:00:00 2001 From: Fatih Acet Date: Thu, 29 Dec 2016 19:19:11 +0300 Subject: Use gl.utils.isInViewport and improve gl.utils.animateToElement. --- app/assets/stylesheets/pages/notes.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 10a9df18c47..43fab67ad75 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -585,3 +585,17 @@ ul.notes { } } } + +// Merge request notes in diffs +.diff-file { + // Diff is side by side + .notes_content.parallel .note-header .note-headline-light { + display: block; + position: relative; + } + // Diff is inline + .notes_content .note-header .note-headline-light { + display: inline-block; + position: relative; + } +} -- cgit v1.2.1 From fb7cdf105880bc342e659710530990b528ef64dc Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Wed, 4 Jan 2017 22:40:22 +0100 Subject: removed darkening hover state and animation color labels --- app/assets/stylesheets/pages/labels.scss | 4 ---- 1 file changed, 4 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index 689de841cbd..91073a7093b 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -106,10 +106,6 @@ .color-label { padding: 3px 7px; border-radius: $label-border-radius; - - &:hover { - box-shadow: inset 0 0 0 80px $label-remove-border; - } } .dropdown-labels-error { -- cgit v1.2.1 From f4772b37c9fbccb72d1956e308313a8bb1dc8342 Mon Sep 17 00:00:00 2001 From: Clement Ho Date: Wed, 4 Jan 2017 15:44:16 -0600 Subject: Change CI template linter textarea with Ace Editor --- app/assets/stylesheets/pages/lint.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/lint.scss b/app/assets/stylesheets/pages/lint.scss index a7c80dce424..68b6c5ecbd4 100644 --- a/app/assets/stylesheets/pages/lint.scss +++ b/app/assets/stylesheets/pages/lint.scss @@ -9,3 +9,13 @@ color: $lint-correct-color; } } + +.ci-linter { + .ci-editor { + height: 400px; + } + + .ci-template pre { + white-space: pre-wrap; + } +} -- cgit v1.2.1 From ce8eb711fc9593230816f79adc5c91438224104f Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Thu, 5 Jan 2017 00:38:54 +0100 Subject: made avatar border color really subtle and not distracting, plus doesn't act on not links anymore --- app/assets/stylesheets/pages/issuable.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index bc4ac8d2eb4..7b1016ba521 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -99,8 +99,8 @@ .edit-link { color: $gl-gray; - &:hover { - color: $md-link-color; + &:not([href]):hover { + color: rgba($avatar-border, .2); } } } @@ -279,7 +279,7 @@ text-decoration: none; .avatar { - border-color: $md-link-color; + border-color: rgba($avatar-border, .2); } } } -- cgit v1.2.1 From 97ecf20ca196ae362437fc37d136b3b293957d5c Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Thu, 5 Jan 2017 01:27:52 +0100 Subject: Decreases font-size on login page --- app/assets/stylesheets/pages/login.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 712bd3da22f..71ed5b1361a 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -17,14 +17,19 @@ line-height: 1.5; p { - font-size: 18px; + font-size: 16px; color: $login-brand-holder-color; } h1:first-child { font-weight: normal; - margin-bottom: 30px; + margin-bottom: 0.68em; margin-top: 0; + font-size: 34px; + } + + h3 { + font-size: 22px; } img { -- cgit v1.2.1 From 043cc8196e41a3b44301f1ae093bb5cd6b4ebc82 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Wed, 4 Jan 2017 11:48:48 +0000 Subject: Simplify HTML of mini pipeline graph and dropdown Creates individual html for dropdown Adds simplified CSS for the new dropdown Removes old CSS Improves dropdown item in Chrome, Firefox and Safari Use SCSS variables for colors. Fix scss linter errors Adds animation when the stage is hovered. Adds back tooltip on dropdown toggle Fixes broken tests additional css changes to get more into direction of mockups --- app/assets/stylesheets/pages/pipelines.scss | 468 +++++++++++++--------------- 1 file changed, 224 insertions(+), 244 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 1e4f242d40d..6061e53f386 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -177,12 +177,13 @@ .stage-cell { font-size: 0; - svg { - height: 18px; - width: 18px; - position: relative; + > .stage-container > button > svg { + height: 22px; + width: 22px; + position: absolute; + top: -1px; + left: -1px; z-index: 2; - vertical-align: middle; overflow: visible; } @@ -200,7 +201,7 @@ content: ''; width: 8px; position: absolute; - right: -7px; + right: -8px; top: 10px; border-bottom: 2px solid $border-color; } @@ -470,6 +471,47 @@ white-space: normal; color: $gl-text-color-secondary; + // Action Icons in big pipeline-graph nodes + > .ci-action-icon-container .ci-action-icon-wrapper { + i { + color: $border-color; + border-radius: 100%; + border: 1px solid $border-color; + padding: 5px 6px; + font-size: 13px; + background: $white-light; + height: 30px; + width: 30px; + + &::before { + position: relative; + top: 3px; + left: 3px; + } + + &:hover { + color: $gl-text-color; + background-color: $stage-hover-bg; + border: 1px solid $stage-hover-bg; + } + } + + .ci-play-icon { + padding: 5px 5px 5px 7px; + } + } + + > .ci-action-icon-container { + position: absolute; + right: 5px; + top: 5px; + } + + .ci-status-icon svg { + height: 20px; + width: 20px; + } + .dropdown-menu-toggle { background-color: transparent; border: none; @@ -504,16 +546,6 @@ } } - > .ci-action-icon-container { - position: absolute; - right: 5px; - top: 5px; - } - - .ci-status-icon svg { - height: 20px; - width: 20px; - } .arrow { &::before, @@ -596,29 +628,9 @@ } } } - - .grouped-pipeline-dropdown { - .dropdown-build { - .build-content { - width: 100%; - - &:hover { - background-color: $stage-hover-bg; - color: $gl-text-color; - } - } - - .ci-action-icon-container { - padding: 0; - font-size: 11px; - position: absolute; - top: 1px; - right: 8px; - } - } - } } +// Triggers the dropdown in the big pipeline graph .dropdown-counter-badge { color: $border-color; font-weight: 100; @@ -628,7 +640,8 @@ top: 8px; } -.grouped-pipeline-dropdown { +// Dropdown in the big pipeline graph +.big-pipeline-graph-dropdown-menu { padding: 0; width: 195px; min-width: 195px; @@ -636,56 +649,6 @@ right: -195px; top: -4px; box-shadow: 0 1px 5px $black-transparent; - - a { - display: inline-block; - } - - .dropdown-build { - .build-content { - width: 100%; - - &:hover { - background-color: $stage-hover-bg; - color: $gl-text-color; - } - } - - .ci-action-icon-container { - padding: 0; - font-size: 11px; - position: absolute; - margin-top: 3px; - right: 7px; - } - } - - ul { - max-height: 245px; - overflow: auto; - margin: 3px 0; - - li { - margin: 4px 8px 4px 9px; - padding: 0; - line-height: 1.1; - position: relative; - - .ci-action-icon-container:hover { - background-color: transparent; - } - - .ci-status-icon { - position: relative; - top: 2px; - } - } - } -} - -.pipeline-graph .dropdown-build .ci-status-icon svg { - width: 18px; - height: 18px; } .ci-status-text { @@ -699,177 +662,217 @@ font-weight: 200; } -// Action Icons -.ci-action-icon-container .ci-action-icon-wrapper { - i { - color: $border-color; - border-radius: 100%; - border: 1px solid $border-color; - padding: 5px 6px; - font-size: 13px; - background: $white-light; - height: 30px; - width: 30px; - - &::before { - position: relative; - top: 3px; - left: 3px; - } - - &:hover { - color: $gl-text-color; - background-color: $stage-hover-bg; - border: 1px solid $stage-hover-bg; - } - } +// Dropdown button in mini pipeline graph +.mini-pipeline-graph-dropdown-toggle { + border-radius: 100px; + background-color: $white-light; + border-width: 1px; + border-style: solid; + width: 22px; + height: 22px; + margin: 0; + padding: 0; + transition: all 0.2s linear; + position: relative; - .ci-play-icon { - padding: 5px 5px 5px 7px; + > .fa.fa-caret-down { + position: absolute; + left: 20px; + top: 5px; + display: inline-block; + visibility: hidden; + opacity: 0; + color: inherit; + font-size: 12px; + transition: visibility 0.1s, opacity 0.1s linear; } -} -.dropdown-build { - color: $gl-text-color-secondary; + &:active, + &:focus, + &:hover { + outline: none; + width: 35px; - .build-content { - padding: 4px 7px 8px; + .fa.fa-caret-down { + visibility: visible; + opacity: 1; + } } - .ci-action-icon-container { - padding: 0; - font-size: 11px; - float: right; - margin-top: 3px; - display: inline-block; - position: relative; + // Dropdown button animation in mini pipeline graph + &.ci-status-icon-success { + border-color: $gl-success; + color: $gl-success; - i { - font-size: 11px; - margin-top: 0; + &:hover, + &:focus, + &:active { + background-color: rgba($gl-success, 0.1); + border-color: $gl-success; } } - .ci-action-icon-container { - i { - width: 24px; - height: 24px; + &.ci-status-icon-failed { + border-color: $gl-danger; + color: $gl-danger; - &::before { - top: 1px; - left: 1px; - } + &:hover, + &:focus, + &:active { + background-color: rgba($gl-danger, 0.1); + border-color: $gl-danger; } } - .stage { - max-width: 100px; - width: 100px; - } - - .ci-status-icon svg { - height: 18px; - width: 18px; - } + &.ci-status-icon-pending, + &.ci-status-icon-success_with_warnings { + border-color: $gl-warning; + color: $gl-warning; - .ci-status-text { - max-width: 95px; + &:hover, + &:focus, + &:active { + background-color: rgba($gl-warning, 0.1); + border-color: $gl-warning; + } } -} -/** - * Builds dropdown in mini pipeline - */ -.mini-pipeline-graph { - .builds-dropdown { - background-color: transparent; - padding: 0; - color: $gl-text-color-secondary; - border: none; - margin: 0; + &.ci-status-icon-running { + border-color: $blue-normal; + color: $blue-normal; + &:hover, &:focus, - &:hover { - outline: none; - margin-right: -8px; - - .ci-status-icon { - width: 32px; - padding: 0 8px 0 0; - transition: width 0.1s cubic-bezier(0.25, 0, 1, 1); - - + .dropdown-caret { - visibility: visible; - opacity: 1; - } - } + &:active { + background-color: rgba($blue-normal, 0.1); + border-color: $blue-normal; } + } + + &.ci-status-icon-canceled, + &.ci-status-icon-disabled, + &.ci-status-icon-not-found, + &.ci-status-icon-manual { + border-color: $gl-text-color; + color: $gl-text-color; + &:hover, &:focus, &:active { - .ci-status-icon-success { - background-color: rgba($gl-success, .1); - } - - .ci-status-icon-failed { - background-color: rgba($gl-danger, .1); - } - - .ci-status-icon-pending, - .ci-status-icon-success_with_warnings { - background-color: rgba($gl-warning, .1); - } - - .ci-status-icon-running { - background-color: rgba($blue-normal, .1); - } + background-color: rgba($gl-text-color, 0.1); + border-color: $gl-text-color; + } + } - .ci-status-icon-canceled, - .ci-status-icon-disabled, - .ci-status-icon-not-found { - background-color: rgba($gl-text-color, .1); - } + &.ci-status-icon-created, + &.ci-status-icon-skipped { + border-color: $gray-darkest; + color: $gray-darkest; - .ci-status-icon-created, - .ci-status-icon-skipped { - background-color: rgba($gray-darkest, .1); - } + &:hover, + &:focus, + &:active { + background-color: rgba($gray-darkest, 0.1); + border-color: $gray-darkest; } + } +} - .mini-pipeline-graph-icon-container { - .dropdown-caret { - font-size: 11px; - position: absolute; - top: 6px; - left: 20px; - margin-right: -6px; - z-index: 2; - visibility: hidden; - opacity: 0; - transition: visibility 0.1s, opacity 0.1s linear; - } - } +// dropdown content for big and mini pipeline +.big-pipeline-graph-dropdown-menu, +.mini-pipeline-graph-dropdown-menu { + width: 195px; + max-width: 195px; + + li { + padding: 2px 3px; } - .dropdown-build .build-content { - padding: 3px 7px 7px; + .scrollable-menu { + max-height: 245px; + overflow: auto; } + // Loading icon .builds-dropdown-loading { - margin: 10px auto; - width: 18px; + margin: 0 auto; + width: 20px; + } + + // Action icon on the right + a.ci-action-icon-wrapper { + color: $action-icon-color; + border: 1px solid $action-icon-color; + border-radius: 20px; + width: 22px; + height: 22px; + padding: 2px 0 0 5px; + cursor: pointer; + float: right; + margin: -26px 9px 0 0; + font-size: 12px; + background-color: $white-light; + + &:hover, + &:focus { + text-decoration: none; + color: $gl-text-color; + background-color: $stage-hover-bg; + border: 1px solid transparent; + } } - .grouped-pipeline-dropdown { - right: -172px; - top: 23px; - min-height: 50px; + // link to the build + .mini-pipeline-graph-dropdown-item { + padding: 3px 7px 4px; + clear: both; + font-weight: normal; + line-height: 1.428571429; + white-space: nowrap; + margin: 0 5px; + border-radius: 3px; - a { + // build name + .ci-build-text { + font-weight: 200; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + width: 90px; color: $gl-text-color-secondary; + margin-left: 2px; + display: inline-block; + top: 1px; + vertical-align: text-bottom; + position: relative; + } + + // status icon on the left + .ci-status-icon { + top: 3px; + position: relative; + + > svg { + overflow: visible; + width: 18px; + height: 18px; + } + } + + &:hover, + &:focus { + outline: none; + text-decoration: none; + color: $gl-text-color; + background-color: $stage-hover-bg; } } +} +/** + * Top arrow in the dropdown in the mini pipeline graph + */ +.mini-pipeline-graph-dropdown-menu { .arrow-up { &::before, &::after { @@ -898,31 +901,8 @@ } /** - * Icons in mini pipeline graph + * Terminal */ -.mini-pipeline-graph-icon-container .ci-status-icon { - display: inline-block; - border: 1px solid; - border-radius: 22px; - margin-right: 1px; - width: 22px; - height: 22px; - position: relative; - z-index: 2; - transition: all 0.1s cubic-bezier(0.25, 0, 1, 1); - - svg { - top: -1px; - left: -1px; - } -} - -.stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg { - width: 22px; - height: 22px; -} - - .terminal-icon { margin-left: 3px; } -- cgit v1.2.1 From 5ab5c7552f1c73e06b565e4185d4b38315ed3f18 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Thu, 5 Jan 2017 10:47:49 -0600 Subject: Fix dropdown icon alignment --- app/assets/stylesheets/pages/pipelines.scss | 30 +++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 6061e53f386..ed53ad94021 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -339,7 +339,8 @@ white-space: nowrap; transition: max-height 0.3s, padding 0.3s; - ul { + .stage-column-list, + .builds-container > ul { padding: 0; } @@ -640,17 +641,6 @@ top: 8px; } -// Dropdown in the big pipeline graph -.big-pipeline-graph-dropdown-menu { - padding: 0; - width: 195px; - min-width: 195px; - left: auto; - right: -195px; - top: -4px; - box-shadow: 0 1px 5px $black-transparent; -} - .ci-status-text { max-width: 110px; white-space: nowrap; @@ -869,6 +859,22 @@ } } +// Dropdown in the big pipeline graph +.big-pipeline-graph-dropdown-menu { + width: 195px; + min-width: 195px; + left: auto; + right: -195px; + top: -4px; + box-shadow: 0 1px 5px $black-transparent; + + .mini-pipeline-graph-dropdown-item { + .ci-status-icon { + top: -1px; + } + } +} + /** * Top arrow in the dropdown in the mini pipeline graph */ -- cgit v1.2.1 From c71a88a7258fe25d77e6e4ef2745fa5a71fef908 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Thu, 5 Jan 2017 19:00:15 +0000 Subject: Simplifies the HTML strucutre in the mini pipeline graph to make it as similar as the one in haml as possible --- app/assets/stylesheets/pages/pipelines.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 8f615905853..8861315d776 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -186,6 +186,7 @@ .stage-cell { font-size: 0; + > .stage-container > div > button > span > svg, > .stage-container > button > svg { height: 22px; width: 22px; -- cgit v1.2.1 From 0ff564347c00b277f494947c8cd6803aa547c68a Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Thu, 5 Jan 2017 15:07:13 -0600 Subject: Keep max width on MR content on side by side view --- app/assets/stylesheets/pages/issuable.scss | 49 ++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 0a8c037c402..3272a862b85 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -1,3 +1,52 @@ +// Limit MR description for side-by-side diff view +.fixed-width-container { + max-width: $limited-layout-width - ($gl-padding * 2); + margin-left: auto; + margin-right: auto; +} + +.limit-container-width { + .detail-page-header { + @extend .fixed-width-container; + } + + .issuable-details { + .detail-page-description, + .mr-source-target, + .mr-state-widget, + .merge-manually { + @extend .fixed-width-container; + } + + .merge-request-tabs-holder { + &.affix { + border-bottom: 1px solid $border-color; + + .nav-links { + border: 0; + } + } + + .container-fluid { + @extend .fixed-width-container; + } + } + } + + .merge-request-details { + .emoji-list-container { + @extend .fixed-width-container; + } + } + + .diffs { + .mr-version-controls, + .files-changed { + @extend .fixed-width-container; + } + } +} + .issuable-details { section { .issuable-discussion { -- cgit v1.2.1 From 36fa45e7f6c6b70560e59ad62e330fa6f16ed05b Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 6 Jan 2017 10:52:00 +0000 Subject: Added note about width of sidebar Changed CSS transition property for only values that change --- app/assets/stylesheets/pages/boards.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 67ffbae2ab9..83673932bfa 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -343,7 +343,8 @@ .right-sidebar.right-sidebar-expanded { &.boards-sidebar-slide-enter-active, &.boards-sidebar-slide-leave-active { - transition: all .2s; + transition: width .2s, + padding .2s; } &.boards-sidebar-slide-enter, -- cgit v1.2.1 From 23e6d8c3682c116db909d0eabfaedb57df85bf36 Mon Sep 17 00:00:00 2001 From: Jose Ivan Vargas Date: Thu, 5 Jan 2017 12:25:47 -0600 Subject: Moved the "import" button next to the "Add to project" button Fixed padding and margins for the dropdowns on the members section --- app/assets/stylesheets/pages/members.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index 18c65191ea1..be7193bae04 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -25,7 +25,7 @@ } .form-horizontal { - margin-top: 5px; + margin-top: 20px; @media (min-width: $screen-sm-min) { display: -webkit-flex; -- cgit v1.2.1 From e797f7100d32c5a3089f0c3c934b9bd8d1615e9b Mon Sep 17 00:00:00 2001 From: Ryan Harris Date: Mon, 9 Jan 2017 15:20:42 -0500 Subject: Adjusted widths on Admin Area projects page to prevent misaligned floats --- app/assets/stylesheets/pages/projects.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index e30d73886e1..9455ba3b98a 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -587,11 +587,21 @@ pre.light-well { .project-full-name { @include str-truncated; + + @media (max-width: $screen-xs-max) { + max-width: 50%; + } } .controls { line-height: $list-text-height; + .badge { + @media (max-width: $screen-xs-max) { + display: none; + } + } + a:hover { text-decoration: none; } @@ -605,6 +615,12 @@ pre.light-well { top: 2px; } } + + .description p { + @media (max-width: $screen-xs-max) { + max-width: 50%; + } + } } .bottom { -- cgit v1.2.1 From f1e21ae7643ca36a8835873594a0f72915660ec3 Mon Sep 17 00:00:00 2001 From: tauriedavis Date: Mon, 9 Jan 2017 12:52:28 -0800 Subject: 26504 Fix styling of MR jump to discussion button --- app/assets/stylesheets/pages/notes.scss | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index ad4c31ca29e..e2a0253da38 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -526,8 +526,9 @@ ul.notes { } .line-resolve-all { + vertical-align: middle; display: inline-block; - padding: 5px 10px; + padding: 6px 10px; background-color: $gray-light; border: 1px solid $border-color; border-radius: $border-radius-default; @@ -535,18 +536,14 @@ ul.notes { &.has-next-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; + border-right: 0; } .line-resolve-btn { - vertical-align: middle; margin-right: 5px; } } -.line-resolve-text { - vertical-align: middle; -} - .line-resolve-btn { display: inline-block; position: relative; -- cgit v1.2.1 From 6053049f4a8822bf39bbe8e1fa34c5e3522b63e9 Mon Sep 17 00:00:00 2001 From: Grzegorz Bizon Date: Thu, 12 Jan 2017 13:22:04 +0100 Subject: Add new CI/CD status failed with warnings icon group --- app/assets/stylesheets/pages/status.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index f19275770be..6f31d4ed789 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -19,7 +19,8 @@ overflow: visible; } - &.ci-failed { + &.ci-failed, + &.ci-failed_with_warnings { color: $gl-danger; border-color: $gl-danger; -- cgit v1.2.1 From 46a5a8e2b1a86452bc65e72eae6a4322a38d2930 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 13 Jan 2017 09:27:16 -0500 Subject: Fixed spacing of labels in issuable row on milestone#show --- app/assets/stylesheets/pages/milestone.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index e284b7269ce..686b64cdd24 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -109,6 +109,10 @@ .avatar { float: none; } + + > a:not(:last-of-type) { + margin-right: 5px; + } } } -- cgit v1.2.1 From 64dd41a0e21360c380cab394f8a5c9b4945b7fd1 Mon Sep 17 00:00:00 2001 From: Bryce Johnson Date: Tue, 20 Dec 2016 15:44:24 +0100 Subject: Backport timetracking frontend to CE. --- app/assets/stylesheets/pages/issuable.scss | 99 ++++++++++++++++++++++++++++++ 1 file changed, 99 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 3272a862b85..c9014ac2906 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -469,3 +469,102 @@ } } } + +.time_tracker { + padding-bottom: 0; + border-bottom: 0; + + + .sidebar-collapsed-icon { + + > .stopwatch-svg { + display: inline-block; + } + + svg { + width: 16px; + height: 16px; + fill: $sidebar-collapsed-icon-color; + } + + &:hover svg { + fill: $gl-gray; + } + } + + .help-button, + .close-help-button { + cursor: pointer; + } + + .compare-meter { + &.within_estimate { + .meter-fill { + background: $gl-primary; + } + } + + &.over_estimate { + .meter-fill { + background: $red-light; + } + + .time-remaining, + .compare-value.spent { + color: $red-light; + } + } + } + + .meter-container { + background: $border-gray-light; + border-radius: 3px; + + .meter-fill { + max-width: 100%; + height: 5px; + border-radius: 3px; + background: $gl-primary; + } + } + + .compare-display-container { + display: flex; + justify-content: space-between; + margin-top: 5px; + + .compare-display { + font-size: 13px; + color: $gl-gray-light; + + .compare-value { + color: $gl-gray; + } + } + } + + .time-tracking-help-state { + background: $white-light; + margin: 16px -20px 0; + padding: 16px 20px; + border-top: 1px solid $border-gray-light; + border-bottom: 1px solid $border-gray-light; + + a:hover { + color: $btn-white-active; + } + } + + .help-state-toggle-enter-active { + transition: all .8s ease; + } + + .help-state-toggle-leave-active { + transition: all .5s ease; + } + + .help-state-toggle-enter, + .help-state-toggle-leave-active { + opacity: 0; + } +} -- cgit v1.2.1 From 63b36241945a7f9bb280f360b3b269de8c5be8f6 Mon Sep 17 00:00:00 2001 From: Bryce Johnson Date: Fri, 13 Jan 2017 15:35:24 -0500 Subject: Fix scss variable refs. --- app/assets/stylesheets/pages/issuable.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index c9014ac2906..1825c44e090 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -488,7 +488,7 @@ } &:hover svg { - fill: $gl-gray; + fill: $gl-text-color; } } @@ -535,10 +535,10 @@ .compare-display { font-size: 13px; - color: $gl-gray-light; + color: $compare-display-color; .compare-value { - color: $gl-gray; + color: $gl-text-color; } } } -- cgit v1.2.1 From 2f5593d754afc0d4c8bf4c82c42e9acaf2e3df6d Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Sun, 15 Jan 2017 10:41:41 -0500 Subject: fixed nav-links margin with recommended fix Remove margin on mobile links --- app/assets/stylesheets/pages/profile.scss | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index a677e34a615..722b3006f7c 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -216,16 +216,12 @@ } } -.user-profile { +.user-profile { .cover-controls a { margin-left: 5px; } - .nav-links li { - margin-right: -4px; - } - .profile-header { margin: 0 auto; @@ -235,8 +231,11 @@ } } - @media (max-width: $screen-xs-max) { + .user-profile-nav { + font-size: 0; + } + @media (max-width: $screen-xs-max) { .cover-block { padding-top: 20px; } @@ -258,8 +257,10 @@ } } - .nav-links li { - margin-right: -7px; + .user-profile-nav { + a { + margin-right: 0; + } } } } -- cgit v1.2.1 From 1b1bccdbee71ebd2fd7bf32f8f9ed826453037d9 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Mon, 16 Jan 2017 12:36:49 -0500 Subject: Fixes big pipeline and small pipeline width problems Fixes tooltips text being outside the tooltip Adds MR id to changelog Fix linter error --- app/assets/stylesheets/pages/pipelines.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 8861315d776..8dff22e32bd 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -44,8 +44,8 @@ .pipeline-info, .pipeline-commit, - .pipeline-actions, - .pipeline-stages { + .pipeline-stages, + .pipeline-actions { width: 20%; } } @@ -185,6 +185,7 @@ .stage-cell { font-size: 0; + padding: 10px 4px; > .stage-container > div > button > span > svg, > .stage-container > button > svg { @@ -202,8 +203,8 @@ position: relative; margin-right: 6px; - .tooltip { - white-space: nowrap; + .tooltip-inner { + padding: 3px 4px; } &:not(:last-child) { @@ -348,6 +349,7 @@ padding: $gl-padding; white-space: nowrap; transition: max-height 0.3s, padding 0.3s; + overflow: auto; .stage-column-list, .builds-container > ul { -- cgit v1.2.1 From 6359a3fc444fee39893a69b6dee8be81321296d4 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Wed, 18 Jan 2017 15:46:06 -0600 Subject: Fix small button alignment issues --- app/assets/stylesheets/pages/notes.scss | 1 - app/assets/stylesheets/pages/projects.scss | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index e2a0253da38..cbe38b60d60 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -515,7 +515,6 @@ ul.notes { .line-resolve-all-container { .btn-group { - margin-top: -1px; margin-left: -4px; } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 9455ba3b98a..8e5ab0bf06a 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -198,7 +198,7 @@ margin: 15px 5px 0 0; input { - height: 28px; + height: 27px; } } -- cgit v1.2.1 From 5db587a1adb6c51a2e3e5ab44ef35779f9a6917d Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Fri, 6 Jan 2017 11:58:51 +0000 Subject: Responsive title in diffs inline, side by side, with and without sidebar Adds MR ID to CHANGELOG entry --- app/assets/stylesheets/pages/diff.scss | 72 ++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 96ba7c40634..d7bb029cac6 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -44,6 +44,15 @@ .diff-toggle-caret { padding-right: 6px; } + + .file-title-name { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + vertical-align: bottom; + max-width: 450px; + } } .diff-content { @@ -480,3 +489,66 @@ } } } + +/** + * Diff file title + */ +.file-holder[data-view="parallel"] .file-title-name, +.file-holder[data-view="inline"] .file-title-name { + @media (max-width: $screen-xs) { + max-width: 140px; + } + + @media (min-width: $screen-xs) and (max-width: $screen-xs-max) { + max-width: 250px; + } + + @media (min-width: $screen-sm) and (max-width: $screen-sm-max) { + max-width: 250px; + } + + @media (min-width: $screen-md) and (max-width: $screen-md-max) { + max-width: 480px; + } +} + +.file-holder[data-view="parallel"] .file-title-name { + @media (min-width: $screen-lg) { + max-width: 760px; + } +} + +.file-holder[data-view="inline"] .file-title-name { + @media (min-width: $screen-lg) { + max-width: 530px; + } +} + +.right-sidebar-expanded { + .file-holder[data-view="parallel"] .file-title-name, + .file-holder[data-view="inline"] .file-title-name { + @media (min-width: $screen-sm) and (max-width: $screen-sm-max) { + max-width: 250px; + } + + @media (min-width: $screen-md) and (max-width: $screen-md-max) { + max-width: 250px; + } + + @media (min-width: $screen-lg) { + max-width: 460px; + } + } + + .file-holder[data-view="parallel"] .file-title-name { + @media (min-width: $screen-xs) and (max-width: $screen-xs-max) { + max-width: 180px; + } + } + + .file-holder[data-view="inline"] .file-title-name { + @media (min-width: $screen-xs) and (max-width: $screen-xs-max) { + max-width: 100px; + } + } +} -- cgit v1.2.1 From 815c0910968fb4c0f0c787af5e7733c71284a274 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Thu, 12 Jan 2017 11:15:42 -0500 Subject: Adds tooltips --- app/assets/stylesheets/pages/diff.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index d7bb029cac6..d614fa45ad3 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -37,6 +37,10 @@ .file-title { cursor: pointer; + a:hover { + text-decoration: none; + } + &:hover { background-color: $gray-normal; } -- cgit v1.2.1 From 2bb2544ecaf37a02e4055194e90405dc1ffca094 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Wed, 18 Jan 2017 18:56:45 +0100 Subject: Use flexbox instead of media queries Move CSS to correct file --- app/assets/stylesheets/pages/diff.scss | 72 ---------------------------------- 1 file changed, 72 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index d614fa45ad3..8b784c2a439 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -48,15 +48,6 @@ .diff-toggle-caret { padding-right: 6px; } - - .file-title-name { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - vertical-align: bottom; - max-width: 450px; - } } .diff-content { @@ -493,66 +484,3 @@ } } } - -/** - * Diff file title - */ -.file-holder[data-view="parallel"] .file-title-name, -.file-holder[data-view="inline"] .file-title-name { - @media (max-width: $screen-xs) { - max-width: 140px; - } - - @media (min-width: $screen-xs) and (max-width: $screen-xs-max) { - max-width: 250px; - } - - @media (min-width: $screen-sm) and (max-width: $screen-sm-max) { - max-width: 250px; - } - - @media (min-width: $screen-md) and (max-width: $screen-md-max) { - max-width: 480px; - } -} - -.file-holder[data-view="parallel"] .file-title-name { - @media (min-width: $screen-lg) { - max-width: 760px; - } -} - -.file-holder[data-view="inline"] .file-title-name { - @media (min-width: $screen-lg) { - max-width: 530px; - } -} - -.right-sidebar-expanded { - .file-holder[data-view="parallel"] .file-title-name, - .file-holder[data-view="inline"] .file-title-name { - @media (min-width: $screen-sm) and (max-width: $screen-sm-max) { - max-width: 250px; - } - - @media (min-width: $screen-md) and (max-width: $screen-md-max) { - max-width: 250px; - } - - @media (min-width: $screen-lg) { - max-width: 460px; - } - } - - .file-holder[data-view="parallel"] .file-title-name { - @media (min-width: $screen-xs) and (max-width: $screen-xs-max) { - max-width: 180px; - } - } - - .file-holder[data-view="inline"] .file-title-name { - @media (min-width: $screen-xs) and (max-width: $screen-xs-max) { - max-width: 100px; - } - } -} -- cgit v1.2.1 From 2c72e0e7cd00148db2e27acae5a88f6a40c05245 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Thu, 19 Jan 2017 09:08:13 -0600 Subject: Fix participants margins to fit on one line --- app/assets/stylesheets/pages/issuable.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 324c6cec96a..93cc5a8cf0a 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -377,6 +377,10 @@ display: inline-block; padding: 5px; + &:nth-of-type(7n) { + padding-right: 0; + } + .author_link { display: block; } -- cgit v1.2.1 From eed6bfe2e5179f4d8d07c244d2b2f880da8e183f Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Thu, 19 Jan 2017 22:45:50 -0600 Subject: Remove rogue scrollbars for some issue comments Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/25989 --- app/assets/stylesheets/pages/notes.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index cbe38b60d60..da0caa30c26 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -195,10 +195,10 @@ ul.notes { } .note-body { - overflow: auto; + overflow-x: auto; + overflow-y: hidden; .note-text { - overflow: auto; word-wrap: break-word; @include md-typography; // Reset ul style types since we're nested inside a ul already -- cgit v1.2.1 From 85a3c03c6889b7c9f4afd695a0e91b4c41759a69 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Sat, 21 Jan 2017 19:58:41 +0000 Subject: Revert "Merge branch '25709-diff-file-overflow' into 'master'" This reverts merge request !8475 --- app/assets/stylesheets/pages/diff.scss | 4 ---- 1 file changed, 4 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 8b784c2a439..96ba7c40634 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -37,10 +37,6 @@ .file-title { cursor: pointer; - a:hover { - text-decoration: none; - } - &:hover { background-color: $gray-normal; } -- cgit v1.2.1 From c566acbd7e885c75e5c9363accb51c7624ea20b5 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Thu, 12 Jan 2017 12:24:33 -0500 Subject: Improve button accessibility on pipelines page --- app/assets/stylesheets/pages/pipelines.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 8dff22e32bd..5d4bd091a6b 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -288,6 +288,10 @@ } } } + + .tooltip { + white-space: nowrap; + } } .build-link { -- cgit v1.2.1 From f287ae24c0387315aff61658bc1baa03317bd465 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Mon, 23 Jan 2017 10:32:30 -0600 Subject: Remove hover styling for generic textarea --- app/assets/stylesheets/pages/search.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 12bff32bbf3..88ea92c5afb 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -18,7 +18,6 @@ .file-finder-input:hover, .issuable-search-form:hover, .search-text-input:hover, -textarea:hover, .form-control:hover { border-color: lighten($dropdown-input-focus-border, 20%); box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%); -- cgit v1.2.1 From b19bb38bd79033b7fbd11afa02273ab3e3a2f374 Mon Sep 17 00:00:00 2001 From: Bryce Johnson Date: Wed, 21 Dec 2016 14:27:43 +0100 Subject: Force variable key cell to stay small and wrap text. --- app/assets/stylesheets/pages/projects.scss | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index cd0839e58ea..aa59f7d3f2e 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -930,7 +930,18 @@ pre.light-well { table-layout: fixed; .variable-key { - width: 30%; + width: 300px; + max-width: 300px; + overflow: hidden; + word-wrap: break-word; + + // override bootstrap + white-space: normal!important; + + @media (max-width: $screen-sm-max) { + width: 150px; + max-width: 150px; + } } } -- cgit v1.2.1 From 80c99ff1eb21c852c3b620e51a8619b49a68722e Mon Sep 17 00:00:00 2001 From: Bryce Johnson Date: Mon, 23 Jan 2017 12:18:53 -0500 Subject: Make variables table border consistent across viewport widths. --- app/assets/stylesheets/pages/projects.scss | 3 +++ 1 file changed, 3 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index aa59f7d3f2e..78a8d73dfdc 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -927,6 +927,9 @@ pre.light-well { } .variables-table { + &.table-responsive { + border: none; + } table-layout: fixed; .variable-key { -- cgit v1.2.1 From 05a8de40575f2293bf2434aa2775a73844774fdb Mon Sep 17 00:00:00 2001 From: Bryce Johnson Date: Mon, 23 Jan 2017 12:32:08 -0500 Subject: Fix size of variable-value column for small screens. --- app/assets/stylesheets/pages/projects.scss | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 78a8d73dfdc..3187facbc89 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -946,6 +946,15 @@ pre.light-well { max-width: 150px; } } + + .variable-value { + @media(max-width: $screen-xs-max) { + width: 150px; + max-width: 150px; + overflow: hidden; + word-wrap: break-word; + } + } } .services-installation-info .row { -- cgit v1.2.1 From 50ae00dc35174a1a99c96990a0d6adb981675a07 Mon Sep 17 00:00:00 2001 From: Bryce Johnson Date: Tue, 24 Jan 2017 09:02:02 -0500 Subject: Shush scss_lint. --- app/assets/stylesheets/pages/projects.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 3187facbc89..1b0bf4554e6 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -927,10 +927,11 @@ pre.light-well { } .variables-table { + table-layout: fixed; + &.table-responsive { border: none; } - table-layout: fixed; .variable-key { width: 300px; -- cgit v1.2.1 From be1c8829b96d4d13d6e5de5be5a726446ef7de17 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Fri, 20 Jan 2017 13:04:40 -0600 Subject: Darken repo links on hover; fix clone input height --- app/assets/stylesheets/pages/projects.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index cd0839e58ea..259e2557993 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -198,7 +198,7 @@ margin: 15px 5px 0 0; input { - height: 27px; + height: 28px; } } @@ -523,7 +523,7 @@ a.deploy-project-label { &:hover, &:focus { - color: darken($notes-light-color, 15%); + color: $gl-text-color; } } -- cgit v1.2.1 From 8f4b7e2bff9bb2f0863f41405d0475f2f2a43775 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Tue, 24 Jan 2017 19:54:01 -0600 Subject: Fix mini-pipeline stage tooltip text wrapping Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/27014 --- app/assets/stylesheets/pages/pipelines.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 5d4bd091a6b..5190faad308 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -203,6 +203,10 @@ position: relative; margin-right: 6px; + .tooltip { + white-space: nowrap; + } + .tooltip-inner { padding: 3px 4px; } -- cgit v1.2.1 From 0ded38cc6a694f250bc4075ef112f063934fbcd2 Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Wed, 25 Jan 2017 21:48:04 +0100 Subject: fixed points from comments to improve code quality --- app/assets/stylesheets/pages/tree.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index 4cce1c363eb..948921efc0b 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -32,6 +32,10 @@ .last-commit { @include str-truncated(506px); + .fa-angle-right { + margin-left: 5px; + } + @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { @include str-truncated(450px); } -- cgit v1.2.1 From 963b6844f3a00e160246211529094368c5a2f87f Mon Sep 17 00:00:00 2001 From: dimitrieh Date: Thu, 26 Jan 2017 11:55:30 +0100 Subject: fixed small mini pipeline graph line glitch --- app/assets/stylesheets/pages/pipelines.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 5190faad308..47dfc22d533 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -214,9 +214,9 @@ &:not(:last-child) { &::after { content: ''; - width: 8px; + width: 7px; position: absolute; - right: -8px; + right: -7px; top: 10px; border-bottom: 2px solid $border-color; } -- cgit v1.2.1 From d7c0955b88f8947e2da41bbce76544dbda76cc0e Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 27 Jan 2017 15:41:19 +0000 Subject: Fixed merge request tabs extra margin Fixed extra margin when the merge request tabs are affixed This was caused by some weird padding that was on the container & then not correctly removed. The fix involved removing the container from inside the tabs holder div & then adding the widths through CSS depending on if fixed & whether the parent is limited width or not. In reality out container classes need to be fixed as it is getting pretty un-managable at the moment this should of been an easy fix, but in reality turned into something much harder. Closes #26853 --- app/assets/stylesheets/pages/issuable.scss | 4 ---- app/assets/stylesheets/pages/merge_requests.scss | 26 +++++++++++++++++------- 2 files changed, 19 insertions(+), 11 deletions(-) (limited to 'app/assets/stylesheets/pages') diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 93cc5a8cf0a..4ef95d27f4f 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -26,10 +26,6 @@ border: 0; } } - - .container-fluid { - @extend .fixed-width-container; - } } } diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 45ff9f7ff5f..ab68b360f93 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -420,10 +420,6 @@ .merge-request-tabs-holder { background-color: $white-light; - .container-limited { - max-width: $limited-layout-width; - } - &.affix { top: 100px; left: 0; @@ -433,10 +429,26 @@ @media (max-width: $screen-xs-max) { right: 0; } + + .merge-request-tabs-container { + padding-left: $gl-padding; + padding-right: $gl-padding; + } } +} - &:not(.affix) .container-fluid { - padding-left: 0; - padding-right: 0; +.limit-container-width { + .merge-request-tabs-container { + max-width: $limited-layout-width; + margin-left: auto; + margin-right: auto; + } +} + +.limit-container-width:not(.container-limited) { + .merge-request-tabs-holder:not(.affix) { + .merge-request-tabs-container { + max-width: $limited-layout-width - ($gl-padding * 2); + } } } -- cgit v1.2.1