diff options
Diffstat (limited to 'app/assets/stylesheets/pages/pipelines.scss')
-rw-r--r-- | app/assets/stylesheets/pages/pipelines.scss | 194 |
1 files changed, 90 insertions, 104 deletions
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 3a8ec779c14..02803e7b040 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -22,7 +22,6 @@ } .ci-table { - .label { margin-bottom: 3px; } @@ -123,7 +122,6 @@ } .branch-commit { - .ref-name { font-weight: $gl-font-weight-bold; max-width: 100px; @@ -481,43 +479,6 @@ @extend .build-content:hover; } - .ci-action-icon-container { - position: absolute; - right: 5px; - top: 5px; - - // Action Icons in big pipeline-graph nodes - &.ci-action-icon-wrapper { - height: 30px; - width: 30px; - background: $white-light; - border: 1px solid $border-color; - border-radius: 100%; - display: block; - - &:hover { - background-color: $stage-hover-bg; - border: 1px solid $dropdown-toggle-active-border-color; - - svg { - fill: $gl-text-color; - } - } - - svg { - fill: $gl-text-color-secondary; - position: relative; - top: -1px; - } - - &.play { - svg { - left: 2px; - } - } - } - } - .ci-status-icon svg { height: 20px; width: 20px; @@ -548,7 +509,6 @@ border: 1px solid $dropdown-toggle-active-border-color; } - // Connect first build in each stage with right horizontal line &:first-child { &::after { @@ -602,6 +562,43 @@ } } } + + .ci-action-icon-container { + position: absolute; + right: 5px; + top: 5px; + + // Action Icons in big pipeline-graph nodes + &.ci-action-icon-wrapper { + height: 30px; + width: 30px; + background: $white-light; + border: 1px solid $border-color; + border-radius: 100%; + display: block; + + &:hover { + background-color: $stage-hover-bg; + border: 1px solid $dropdown-toggle-active-border-color; + + svg { + fill: $gl-text-color; + } + } + + svg { + fill: $gl-text-color-secondary; + position: relative; + top: -1px; + } + + &.play { + svg { + left: 2px; + } + } + } + } } // Triggers the dropdown in the big pipeline graph @@ -710,93 +707,77 @@ button.mini-pipeline-graph-dropdown-toggle { } } -// dropdown content for big and mini pipeline +/** + Action icons inside dropdowns: + - mini graph in pipelines table + - dropdown in big graph + - mini graph in MR widget pipeline + - mini graph in Commit widget pipeline +*/ .big-pipeline-graph-dropdown-menu, .mini-pipeline-graph-dropdown-menu { width: 240px; max-width: 240px; - .scrollable-menu { + // override dropdown.scss + &.dropdown-menu li button, + &.dropdown-menu li a.ci-action-icon-container { padding: 0; - max-height: 245px; - overflow: auto; + text-align: center; } - li { - position: relative; + .ci-action-icon-container { + position: absolute; + right: 8px; + top: 8px; - // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered - &:hover > .mini-pipeline-graph-dropdown-item, - &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item { - @extend .mini-pipeline-graph-dropdown-item:hover; - } + &.ci-action-icon-wrapper { + height: $ci-action-dropdown-button-size; + width: $ci-action-dropdown-button-size; - // Action icon on the right - a.ci-action-icon-wrapper { - border-radius: 50%; + background: $white-light; border: 1px solid $border-color; - width: $ci-action-icon-size; - height: $ci-action-icon-size; - padding: 2px 0 0 5px; - font-size: 12px; - background-color: $white-light; - position: absolute; - top: 50%; - right: $gl-padding; - margin-top: -#{$ci-action-icon-size / 2}; + border-radius: 50%; + display: block; - &:hover, - &:focus { + &:hover { background-color: $stage-hover-bg; border: 1px solid $dropdown-toggle-active-border-color; + + svg { + fill: $gl-text-color; + } } svg { + width: $ci-action-dropdown-svg-size; + height: $ci-action-dropdown-svg-size; fill: $gl-text-color-secondary; - width: #{$ci-action-icon-size - 6}; - height: #{$ci-action-icon-size - 6}; - left: -3px; position: relative; - top: -1px; - - &.icon-action-stop, - &.icon-action-cancel { - width: 12px; - height: 12px; - top: 1px; - left: -1px; - } - - &.icon-action-play { - width: 11px; - height: 11px; - top: 1px; - left: 1px; - } - - &.icon-action-retry { - width: 16px; - height: 16px; - top: 0; - left: -3px; - } + top: 0; + vertical-align: initial; } + } + } - &:hover svg, - &:focus svg { - fill: $gl-text-color; - } + // SVGs in the commit widget and mr widget + a.ci-action-icon-container.ci-action-icon-wrapper svg { + top: 2px; + } - &.icon-action-retry, - &.icon-action-play { - svg { - width: #{$ci-action-icon-size - 6}; - height: #{$ci-action-icon-size - 6}; - left: 8px; - } - } + .scrollable-menu { + padding: 0; + max-height: 245px; + overflow: auto; + } + li { + position: relative; + // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered + &:hover > .mini-pipeline-graph-dropdown-item, + &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item { + @extend .mini-pipeline-graph-dropdown-item:hover; } // link to the build @@ -808,6 +789,11 @@ button.mini-pipeline-graph-dropdown-toggle { line-height: $line-height-base; white-space: nowrap; + // Match dropdown.scss for all `a` tags + &.non-details-job-component { + padding: 8px 16px; + } + .ci-job-name-component { align-items: center; display: flex; @@ -939,7 +925,7 @@ button.mini-pipeline-graph-dropdown-toggle { &.dropdown-menu { transform: translate(-80%, 0); - @media(min-width: $screen-md-min) { + @media (min-width: $screen-md-min) { transform: translate(-50%, 0); right: auto; left: 50%; |