Commit 406f4cd5 authored by Fatih Acet's avatar Fatih Acet

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
parents f7918674 eb25f232
...@@ -201,7 +201,7 @@ ...@@ -201,7 +201,7 @@
width: 8px; width: 8px;
position: absolute; position: absolute;
right: -7px; right: -7px;
bottom: 10px; top: 10px;
border-bottom: 2px solid $border-color; border-bottom: 2px solid $border-color;
} }
} }
...@@ -784,11 +784,72 @@ ...@@ -784,11 +784,72 @@
.mini-pipeline-graph { .mini-pipeline-graph {
.builds-dropdown { .builds-dropdown {
background-color: transparent; background-color: transparent;
border: none;
padding: 0; padding: 0;
color: $gl-text-color-light; color: $gl-text-color-light;
border: none; border: none;
margin: 0; 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;
}
}
} }
.dropdown-build .build-content { .dropdown-build .build-content {
...@@ -849,7 +910,7 @@ ...@@ -849,7 +910,7 @@
height: 22px; height: 22px;
position: relative; position: relative;
z-index: 2; 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 { svg {
top: -1px; top: -1px;
...@@ -862,75 +923,6 @@ ...@@ -862,75 +923,6 @@
height: 22px; height: 22px;
} }
.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: 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 { .terminal-icon {
margin-left: 3px; margin-left: 3px;
......
---
title: Fixes mini-pipeline-graph dropdown animation and stage position in chrome, firefox and safari
merge_request: 8282
author:
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment