Fix animation glitch in the caret
This commit is contained in:
parent
19e6f22a0a
commit
716549e96b
1 changed files with 63 additions and 71 deletions
|
@ -789,6 +789,68 @@
|
||||||
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: 5px;
|
||||||
|
left: 20px;
|
||||||
|
margin-right: -6px;
|
||||||
|
z-index: 2;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
transition: visibility 0.1s, opacity 0.3s linear
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-build .build-content {
|
.dropdown-build .build-content {
|
||||||
|
@ -849,7 +911,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,76 +924,6 @@
|
||||||
height: 22px;
|
height: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.builds-dropdown {
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
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: absolute;;
|
|
||||||
top: 5px;
|
|
||||||
left: 20px;
|
|
||||||
margin-right: -6px;
|
|
||||||
display: none;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.terminal-icon {
|
.terminal-icon {
|
||||||
margin-left: 3px;
|
margin-left: 3px;
|
||||||
|
|
Loading…
Reference in a new issue