diff options
Diffstat (limited to 'app/assets/stylesheets/pages/pipelines.scss')
| -rw-r--r-- | app/assets/stylesheets/pages/pipelines.scss | 116 |
1 files changed, 76 insertions, 40 deletions
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 105c3fc3e7c..33d3a800e7c 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -28,12 +28,16 @@ color: $black; } - .branch-commit { - width: 30%; + .pipeline-date, + .pipeline-status { + width: 10%; + } - .branch-name { - max-width: 195px; - } + .pipeline-info, + .pipeline-commit, + .pipeline-actions, + .pipeline-stages { + width: 20%; } } } @@ -107,7 +111,7 @@ .branch-name { font-weight: bold; - max-width: 150px; + max-width: 120px; overflow: hidden; display: inline-block; white-space: nowrap; @@ -133,7 +137,7 @@ .commit-title { margin-top: 4px; - max-width: 300px; + max-width: 225px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -580,15 +584,6 @@ } } -<<<<<<< HEAD - .dropdown-menu-toggle { - background-color: transparent; - border: none; - padding: 0; - color: $gl-text-color-light; - white-space: normal; - overflow: visible; -======= .dropdown-counter-badge { float: right; color: $border-color; @@ -596,7 +591,6 @@ font-size: 15px; margin-right: 2px; } ->>>>>>> 5ba6f0d... Dropdown with arrow .grouped-pipeline-dropdown { padding: 0; @@ -707,7 +701,9 @@ padding: 0; font-size: 11px; float: right; - margin-top: 5px; + margin-top: 4px; + display: inline-block; + position: relative; i { font-size: 11px; @@ -726,7 +722,7 @@ width: 25px; height: 25px; - &:before{ + &::before { top: 1px; left: 1px; } @@ -782,11 +778,11 @@ border-style: solid; top: -6px; left: 2px; - border-width: 0 5px 6px 5px; + border-width: 0 5px 6px; } &::before { - border-width: 0 5px 5px 5px; + border-width: 0 5px 5px; border-bottom-color: $border-color; } @@ -797,53 +793,93 @@ } } +/** + * Icons in mini pipeline graph + */ .mini-pipeline-graph-icon-container .ci-status-icon { - display: inline-block; - border: 1px solid; - border-radius: 20px; - margin-right: 1px; - width: 20px; - height: 20px; - position: relative; + display: inline-block; + border: 1px solid; + border-radius: 20px; + margin-right: 1px; + width: 20px; + height: 20px; + position: relative; + z-index: 2; + transition: all 0.2s cubic-bezier(0.25, 0, 1, 1); - svg { - top: -1px; - position: relative; - } + svg { + top: -1px; + } } .builds-dropdown { &:focus { - margin-right: -6px; + outline: none; + margin-right: -8px; .ci-status-icon { - width: 27px; - padding: 0px 6px 0px 0px; + width: 28px; + padding: 0 8px 0 0; + transition: all 0.2s cubic-bezier(0.25, 0, 1, 1); + .dropdown-caret { - display: inline-block; + display: inline-block; } } } + &: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); + } + + .ci-status-icon-canceled, + .ci-status-icon-disabled, + .ci-status-icon-not-found { + background-color: rgba($gl-gray, .1); + } + + .ci-status-icon-created, + .ci-status-icon-skipped { + background-color: rgba($gray-darkest, .1); + } + + } + .mini-pipeline-graph-icon-container { .ci-status-icon:hover, .ci-status-icon:focus { - width: 27px; - padding: 0px 6px 0px 0px; + width: 28px; + padding: 0 8px 0 0; + transition: all 0.2s cubic-bezier(0.25, 0, 1, 1); + .dropdown-caret { - display: inline-block; + display: inline-block; } } .dropdown-caret { - font-size: 12px; + font-size: 11px; position: relative; top: 3px; left: -11px; margin-right: -6px; display: none; + z-index: 2; } } } |