diff options
author | Fatih Acet <acetfatih@gmail.com> | 2016-12-23 20:27:35 +0000 |
---|---|---|
committer | Robert Speicher <rspeicher@gmail.com> | 2016-12-27 12:22:37 -0500 |
commit | e6ee383ac88add034c3a8c512a94e2634474590e (patch) | |
tree | c67c94b402695758fa3c59f39c5d7f90568e3689 | |
parent | a18ad6cf733ce9a466a32f32ea8e813f19caa3a5 (diff) | |
download | gitlab-ce-e6ee383ac88add034c3a8c512a94e2634474590e.tar.gz |
Merge branch '26018-mini-pipeline-hover-cross-broswer' into 'master'
Resolve "Mini pipeline graph dropdown looks weird on Safari and hover does not work on firefox"
Closes #26018, #26004, and #26002
See merge request !8282
-rw-r--r-- | app/assets/stylesheets/pages/pipelines.scss | 138 | ||||
-rw-r--r-- | changelogs/unreleased/26018-mini-pipeline-hover-cross-broswer.yml | 4 |
2 files changed, 71 insertions, 71 deletions
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 2a9880cc673..38667c7169b 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -197,7 +197,7 @@ width: 8px; position: absolute; right: -7px; - bottom: 9px; + top: 10px; border-bottom: 2px solid $border-color; } } @@ -737,11 +737,72 @@ .mini-pipeline-graph { .builds-dropdown { background-color: transparent; - border: none; padding: 0; color: $gl-text-color-light; border: none; margin: 0; + + &: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; + } + } + } + + &: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 { + .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; + } + } } .builds-dropdown-loading { @@ -798,81 +859,16 @@ height: 20px; position: relative; z-index: 2; - transition: all 0.2s cubic-bezier(0.25, 0, 1, 1); + transition: all 0.1s cubic-bezier(0.25, 0, 1, 1); svg { top: -1px; } } -.builds-dropdown { - &:focus { - outline: none; - margin-right: -8px; - - .ci-status-icon { - width: 32px; - 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: 28px; - padding: 0 8px 0 0; - - + .dropdown-caret { - display: inline-block; - } - } - - .dropdown-caret { - font-size: 11px; - position: relative; - top: 3px; - left: -11px; - margin-right: -6px; - display: none; - z-index: 2; - } - } +.stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg { + width: 22px; + height: 22px; } .terminal-icon { diff --git a/changelogs/unreleased/26018-mini-pipeline-hover-cross-broswer.yml b/changelogs/unreleased/26018-mini-pipeline-hover-cross-broswer.yml new file mode 100644 index 00000000000..501f0b25a21 --- /dev/null +++ b/changelogs/unreleased/26018-mini-pipeline-hover-cross-broswer.yml @@ -0,0 +1,4 @@ +--- +title: Fixes mini-pipeline-graph dropdown animation and stage position in chrome, firefox and safari +merge_request: 8282 +author: |