diff options
author | Fatih Acet <acetfatih@gmail.com> | 2016-12-21 15:05:10 +0000 |
---|---|---|
committer | Douglas Barbosa Alexandre <dbalexandre@gmail.com> | 2017-01-05 16:31:04 -0200 |
commit | 13858d5336a36faa6c69e9f2fbfa0b737f022be3 (patch) | |
tree | 6cdbaed5523af83746b3f26097aec81498644952 /app | |
parent | f1243ad9528205f3d96cad88ad98b503976fc8a5 (diff) | |
download | gitlab-ce-13858d5336a36faa6c69e9f2fbfa0b737f022be3.tar.gz |
Merge branch 'minor-pipeline-graph-beautyfixes' into 'master'
big and mini pipeline css changes
See merge request !8224
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/stylesheets/pages/pipelines.scss | 129 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/status.scss | 2 |
2 files changed, 108 insertions, 23 deletions
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index ae59e7aea83..af8e640e76e 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -84,6 +84,10 @@ td { padding: 10px 8px; } + + .commit-link { + padding: 9px 8px 10px; + } } tbody { @@ -502,15 +506,10 @@ > .ci-action-icon-container { position: absolute; - right: 4px; + right: 5px; top: 5px; } - .ci-status-icon { - position: relative; - top: 1px; - } - .ci-status-icon svg { height: 20px; width: 20px; @@ -619,6 +618,10 @@ a { display: inline-block; + } + + .build-content { + width: 138px; &:hover { background-color: $stage-hover-bg; @@ -628,15 +631,24 @@ ul { max-height: 245px; overflow: auto; - margin: 5px 0; + margin: 3px 0; li { padding-top: 2px; - margin: 0 5px; + margin: 4px 7px; + padding: 0 3px; padding-left: 0; padding-bottom: 0; - margin-bottom: 0; - line-height: 1.2; + line-height: 0; + + .ci-action-icon-container:hover { + background-color: transparent; + } + + .ci-status-icon { + position: relative; + top: 2px; + } } } } @@ -685,11 +697,15 @@ .dropdown-build { color: $gl-text-color-light; + .build-content { + padding: 3px 7px 6px; + } + .ci-action-icon-container { padding: 0; font-size: 11px; float: right; - margin-top: 4px; + margin-top: 3px; display: inline-block; position: relative; @@ -699,16 +715,10 @@ } } - &:hover { - background-color: $stage-hover-bg; - border-radius: 3px; - color: $gl-text-color; - } - .ci-action-icon-container { i { - width: 25px; - height: 25px; + width: 24px; + height: 24px; &::before { top: 1px; @@ -806,6 +816,10 @@ } } + .dropdown-build .build-content { + padding: 3px 7px 7px; + } + .builds-dropdown-loading { margin: 10px auto; width: 18px; @@ -854,16 +868,17 @@ .mini-pipeline-graph-icon-container .ci-status-icon { display: inline-block; border: 1px solid; - border-radius: 20px; + border-radius: 22px; margin-right: 1px; - width: 20px; - height: 20px; + 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; } } @@ -872,6 +887,76 @@ height: 22px; } +.builds-dropdown { + &:focus { + outline: none; + margin-right: -8px; + + .ci-status-icon { + width: 28px; + padding: 0 8px 0 0; + transition: width 0.2s cubic-bezier(0.25, 0, 1, 1); + + + .dropdown-caret { + 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: 32px; + padding: 0 8px 0 0; + + + .dropdown-caret { + display: inline-block; + } + } + + .dropdown-caret { + font-size: 11px; + position: relative; + top: 3px; + left: -14px; + margin-right: -6px; + display: none; + z-index: 2; + } + } +} + .terminal-icon { margin-left: 3px; } diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index a810ed32327..4acd17360c1 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -1,6 +1,6 @@ .container-fluid { .ci-status { - padding: 2px 7px; + padding: 2px 7px 4px; margin-right: 10px; border: 1px solid $gray-darker; white-space: nowrap; |