diff options
| -rw-r--r-- | app/assets/stylesheets/pages/pipelines.scss | 1422 |
1 files changed, 708 insertions, 714 deletions
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 619f79ee3c5..d9ae3b4a95f 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -1,614 +1,651 @@ -.pipelines { - .realtime-loading { - font-size: 40px; - text-align: center; - } - - .stage { - max-width: 90px; - width: 90px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .commit-title { - margin: 0; - } - - .controls { - white-space: nowrap; - } - - .btn { - margin: 4px; - } - - .table.ci-table { - min-width: 1200px; - table-layout: fixed; - - .pipeline-id { - color: $black; + .pipelines { + .realtime-loading { + font-size: 40px; + text-align: center; } - .branch-commit { - .branch-name { - max-width: 195px; - } + .stage { + max-width: 90px; + width: 90px; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } - .pipeline-date, - .pipeline-status { - width: 10%; + .commit-title { + margin: 0; } - .pipeline-info, - .pipeline-commit, - .pipeline-actions, - .pipeline-stages { - width: 20%; + .controls { + white-space: nowrap; } - } -} -@media (max-width: $screen-md-max) { - .content-list { - &.pipelines, - &.builds-content-list { - width: 100%; - overflow: auto; + .btn { + margin: 4px; } - } -} -.content-list.pipelines .table-holder { - min-height: 300px; -} + .table.ci-table { + min-width: 1200px; + table-layout: fixed; -.pipeline-holder { - width: 100%; - overflow: auto; -} - -.table.ci-table { - min-width: 900px; - - &.pipeline { - min-width: 650px; - } + .pipeline-id { + color: $black; + } - &.builds-page { + .pipeline-date, + .pipeline-status { + width: 10%; + } - tr { - height: 71px; + .pipeline-info, + .pipeline-commit, + .pipeline-actions, + .pipeline-stages { + width: 20%; + } } } - tr { - th { - padding: 16px 8px; - border: none; - } - - td { - padding: 10px 8px; - } - - .commit-link { - padding: 9px 8px 10px; + @media (max-width: $screen-md-max) { + .content-list { + &.pipelines, + &.builds-content-list { + width: 100%; + overflow: auto; + } } } - tbody { - border-top-width: 1px; + .content-list.pipelines .table-holder { + min-height: 300px; } - .build.retried { - background-color: $gray-lightest; + .pipeline-holder { + width: 100%; + overflow: auto; } - .commit-link { - a { - &:focus { - text-decoration: none; - } - } + .table.ci-table { + min-width: 900px; - a:hover { - text-decoration: none; + &.pipeline { + min-width: 650px; } - } - .avatar { - margin-left: 0; - float: none; - } + &.builds-page { - .branch-commit { - .branch-name { - font-weight: bold; - max-width: 120px; - overflow: hidden; - display: inline-block; - white-space: nowrap; - vertical-align: top; - text-overflow: ellipsis; + tr { + height: 71px; + } } - svg { - height: 14px; - width: 14px; - vertical-align: middle; - fill: $gl-gray-light; - } + tr { + th { + padding: 16px 8px; + border: none; + } - .fa { - font-size: 12px; - color: $gl-text-color; - } + td { + padding: 10px 8px; + } - .commit-id { - color: $gl-link-color; + .commit-link { + padding: 9px 8px 10px; + } } - .commit-title { - margin-top: 4px; - max-width: 225px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + tbody { + border-top-width: 1px; } - .label { - margin-right: 4px; + .build.retried { + background-color: $gray-lightest; } - .label-container { - font-size: 0; + .commit-link { + a { + &:focus { + text-decoration: none; + } + } - .label { - margin-top: 5px; + a:hover { + text-decoration: none; } } - } - .icon-container { - display: inline-block; - width: 10px; - - &.commit-icon { - width: 15px; - text-align: center; + .avatar { + margin-left: 0; + float: none; } - } - .stage-cell { - font-size: 0; + .branch-commit { - svg { - height: 18px; - width: 18px; - position: relative; - z-index: 2; - vertical-align: middle; - overflow: visible; - } + .branch-name { + font-weight: bold; + max-width: 120px; + overflow: hidden; + display: inline-block; + white-space: nowrap; + vertical-align: top; + text-overflow: ellipsis; + } - .stage-container { - display: inline-block; - position: relative; - margin-right: 6px; + svg { + height: 14px; + width: 14px; + vertical-align: middle; + fill: $gl-gray-light; + } + + .fa { + font-size: 12px; + color: $gl-text-color; + } + + .commit-id { + color: $gl-link-color; + } - .tooltip { + .commit-title { + margin-top: 4px; + max-width: 225px; + overflow: hidden; white-space: nowrap; + text-overflow: ellipsis; } - &:not(:last-child) { - &::after { - content: ''; - width: 8px; - position: absolute; - right: -7px; - top: 10px; - border-bottom: 2px solid $border-color; + .label { + margin-right: 4px; + } + + .label-container { + font-size: 0; + + .label { + margin-top: 5px; } } } - } - .duration, - .finished-at { - color: $gl-gray-light; - margin: 4px 0; + .icon-container { + display: inline-block; + width: 10px; - .fa { - font-size: 12px; - margin-right: 4px; + &.commit-icon { + width: 15px; + text-align: center; + } } - svg { - width: 12px; - height: 12px; - vertical-align: middle; - margin-right: 4px; - } - } + .stage-cell { + font-size: 0; - .pipeline-actions { - min-width: 140px; + svg { + height: 18px; + width: 18px; + position: relative; + z-index: 2; + vertical-align: middle; + overflow: visible; + } - .btn { - margin: 0; - color: $gl-gray-light; - } + .stage-container { + display: inline-block; + position: relative; + margin-right: 6px; - .cancel-retry-btns { - vertical-align: middle; + .tooltip { + white-space: nowrap; + } - .btn:not(:first-child) { - margin-left: 8px; + &:not(:last-child) { + &::after { + content: ''; + width: 8px; + position: absolute; + right: -7px; + top: 10px; + border-bottom: 2px solid $border-color; + } + } } } - .dropdown-toggle, - .dropdown-menu { + .duration, + .finished-at { color: $gl-gray-light; + margin: 4px 0; .fa { - color: $gl-gray-light; - font-size: 14px; + font-size: 12px; + margin-right: 4px; } - svg, - .fa { - margin-right: 0; + svg { + width: 12px; + height: 12px; + vertical-align: middle; + margin-right: 4px; } } - .btn-remove { - color: $white-light; - } + .pipeline-actions { + min-width: 140px; - .btn-group { - &.open { - .btn-default { - background-color: $white-normal; - border-color: $border-white-normal; - } + .btn { + margin: 0; + color: $gl-gray-light; } - .btn { - .icon-play { - height: 13px; - width: 12px; + .cancel-retry-btns { + vertical-align: middle; + + .btn:not(:first-child) { + margin-left: 8px; } } - } - } - .build-link { + .dropdown-toggle, + .dropdown-menu { + color: $gl-gray-light; - a { - color: $gl-dark-link-color; - } - } + .fa { + color: $gl-gray-light; + font-size: 14px; + } - .btn-group.open .dropdown-toggle { - box-shadow: none; - } -} + svg, + .fa { + margin-right: 0; + } + } -.admin-builds-table { - .ci-table td:last-child { - min-width: 120px; - } -} + .btn-remove { + color: $white-light; + } -// Pipeline visualization -.pipeline-actions { - border-bottom: none; -} + .btn-group { + &.open { + .btn-default { + background-color: $white-normal; + border-color: $border-white-normal; + } + } -.tab-pane { - &.pipelines { - .ci-table { - min-width: 900px; + .btn { + .icon-play { + height: 13px; + width: 12px; + } + } + } } - .content-list.pipelines { - overflow: auto; - } + .build-link { - .stage { - max-width: 100px; - width: 100px; + a { + color: $gl-dark-link-color; + } } - .pipeline-actions { - min-width: initial; + .btn-group.open .dropdown-toggle { + box-shadow: none; } } - &.builds { - .ci-table { - tr { - height: 71px; - } + .admin-builds-table { + .ci-table td:last-child { + min-width: 120px; } } -} - -// Pipeline graph -.pipeline-graph { - width: 100%; - background-color: $gray-light; - padding: $gl-padding; - overflow: auto; - white-space: nowrap; - transition: max-height 0.3s, padding 0.3s; - - ul { - padding: 0; - } - a { - text-decoration: none; - color: $gl-text-color-light; + // Pipeline visualization + .pipeline-actions { + border-bottom: none; } - svg { - vertical-align: middle; - margin-right: 3px; - } + .tab-pane { + &.pipelines { + .ci-table { + min-width: 900px; + } - .stage-column { - display: inline-block; - vertical-align: top; + .content-list.pipelines { + overflow: auto; + } - &:not(:last-child) { - margin-right: 44px; - } + .stage { + max-width: 100px; + width: 100px; + } - &.left-margin { - &:not(:first-child) { - margin-left: 44px; + .pipeline-actions { + min-width: initial; + } + } - .left-connector { - &::before { - content: ''; - position: absolute; - top: 48%; - left: -48px; - border-top: 2px solid $border-color; - width: 48px; - height: 1px; - } + &.builds { + .ci-table { + tr { + height: 71px; } } } + } - &.no-margin { - margin: 0; + // Pipeline graph + .pipeline-graph { + width: 100%; + background-color: $gray-light; + padding: $gl-padding; + white-space: nowrap; + transition: max-height 0.3s, padding 0.3s; + + ul { + padding: 0; } - li { - list-style: none; + a { + text-decoration: none; + color: $gl-text-color-light; } - &:last-child { - .build { - // Remove right connecting horizontal line from first build in last stage - &:first-child { - &::after { - border: none; - } - } - // Remove right curved connectors from all builds in last stage + svg { + vertical-align: middle; + margin-right: 3px; + } + + .stage-column { + display: inline-block; + vertical-align: top; + + &:not(:last-child) { + margin-right: 44px; + } + + &.left-margin { &:not(:first-child) { - &::after { - border: none; + margin-left: 44px; + + .left-connector { + &::before { + content: ''; + position: absolute; + top: 48%; + left: -48px; + border-top: 2px solid $border-color; + width: 48px; + height: 1px; + } } } - // Remove opposite curve - .curve { - &::before { - display: none; + } + + &.no-margin { + margin: 0; + } + + li { + list-style: none; + } + + &:last-child { + .build { + // Remove right connecting horizontal line from first build in last stage + &:first-child { + &::after { + border: none; + } + } + // Remove right curved connectors from all builds in last stage + &:not(:first-child) { + &::after { + border: none; + } + } + // Remove opposite curve + .curve { + &::before { + display: none; + } } } } - } - &:first-child { - .build { - // Remove left curved connectors from all builds in first stage - &:not(:first-child) { - &::before { - border: none; + &:first-child { + .build { + // Remove left curved connectors from all builds in first stage + &:not(:first-child) { + &::before { + border: none; + } } - } - // Remove opposite curve - .curve { - &::after { - display: none; + // Remove opposite curve + .curve { + &::after { + display: none; + } } } } - } - // Curve first child connecting lines in opposite direction - .curve { - display: none; + // Curve first child connecting lines in opposite direction + .curve { + display: none; - &::before, - &::after { - content: ''; - width: 21px; - height: 25px; - position: absolute; - top: -31px; - border-top: 2px solid $border-color; - } + &::before, + &::after { + content: ''; + width: 21px; + height: 25px; + position: absolute; + top: -31px; + border-top: 2px solid $border-color; + } - &::after { - left: -44px; - border-right: 2px solid $border-color; - border-radius: 0 20px; - } + &::after { + left: -44px; + border-right: 2px solid $border-color; + border-radius: 0 20px; + } - &::before { - right: -44px; - border-left: 2px solid $border-color; - border-radius: 20px 0 0; + &::before { + right: -44px; + border-left: 2px solid $border-color; + border-radius: 20px 0 0; + } } } - } - - .stage-name { - margin: 0 0 15px 10px; - font-weight: bold; - width: 176px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .build { - position: relative; - width: 186px; - margin-bottom: 10px; - white-space: normal; - color: $gl-text-color-light; + .stage-name { + margin: 0 0 15px 10px; + font-weight: bold; + width: 176px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } - .dropdown-menu-toggle { - background-color: transparent; - border: none; - padding: 0; + .build { + position: relative; + width: 186px; + margin-bottom: 10px; + white-space: normal; color: $gl-text-color-light; - &:focus { - outline: none; - } + .dropdown-menu-toggle { + background-color: transparent; + border: none; + padding: 0; + color: $gl-text-color-light; - &:hover { - color: $gl-text-color; + &:focus { + outline: none; + } - .dropdown-counter-badge { + &:hover { color: $gl-text-color; + + .dropdown-counter-badge { + color: $gl-text-color; + } } } - } - > .build-content { - display: inline-block; - padding: 8px 10px 9px; - width: 100%; - border: 1px solid $border-color; - border-radius: 30px; - background-color: $white-light; + > .build-content { + display: inline-block; + padding: 8px 10px 9px; + width: 100%; + border: 1px solid $border-color; + border-radius: 30px; + background-color: $white-light; - &:hover { - background-color: $stage-hover-bg; - border: 1px solid $stage-hover-border; - color: $gl-text-color; + &:hover { + background-color: $stage-hover-bg; + border: 1px solid $stage-hover-border; + color: $gl-text-color; + } } - } - - > .ci-action-icon-container { - position: absolute; - right: 5px; - top: 5px; - } - .ci-status-icon svg { - height: 20px; - width: 20px; - } - - .arrow { - &::before, - &::after { - content: ''; - display: inline-block; + > .ci-action-icon-container { position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: 18px; + right: 5px; + top: 5px; } - &::before { - left: -5px; - margin-top: -6px; - border-width: 7px 5px 7px 0; - border-right-color: $border-color; + .ci-status-icon svg { + height: 20px; + width: 20px; } - &::after { - left: -4px; - margin-top: -9px; - border-width: 10px 7px 10px 0; - border-right-color: $white-light; - } - } + .arrow { + &::before, + &::after { + content: ''; + display: inline-block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + top: 18px; + } - // Connect first build in each stage with right horizontal line - &:first-child { - &::after { - content: ''; - position: absolute; - top: 48%; - right: -48px; - border-top: 2px solid $border-color; - width: 48px; - height: 1px; + &::before { + left: -5px; + margin-top: -6px; + border-width: 7px 5px 7px 0; + border-right-color: $border-color; + } + + &::after { + left: -4px; + margin-top: -9px; + border-width: 10px 7px 10px 0; + border-right-color: $white-light; + } } - } - // Connect each build (except for first) with curved lines - &:not(:first-child) { - &::after, - &::before { - content: ''; - top: -49px; - position: absolute; - border-bottom: 2px solid $border-color; - width: 25px; - height: 69px; + // Connect first build in each stage with right horizontal line + &:first-child { + &::after { + content: ''; + position: absolute; + top: 48%; + right: -48px; + border-top: 2px solid $border-color; + width: 48px; + height: 1px; + } } - // Right connecting curves - &::after { - right: -25px; - border-right: 2px solid $border-color; - border-radius: 0 0 20px; + // Connect each build (except for first) with curved lines + &:not(:first-child) { + &::after, + &::before { + content: ''; + top: -49px; + position: absolute; + border-bottom: 2px solid $border-color; + width: 25px; + height: 69px; + } + + // Right connecting curves + &::after { + right: -25px; + border-right: 2px solid $border-color; + border-radius: 0 0 20px; + } + + // Left connecting curves + &::before { + left: -25px; + border-left: 2px solid $border-color; + border-radius: 0 0 0 20px; + } } - // Left connecting curves - &::before { - left: -25px; - border-left: 2px solid $border-color; - border-radius: 0 0 0 20px; + // Connect second build to first build with smaller curved line + &:nth-child(2) { + &::after, + &::before { + height: 29px; + top: -9px; + } + + .curve { + display: block; + } } } - // Connect second build to first build with smaller curved line - &:nth-child(2) { - &::after, - &::before { - height: 29px; - top: -9px; - } + .grouped-pipeline-dropdown { + .dropdown-build { + .build-content { + width: 100%; - .curve { - display: block; + &:hover { + background-color: $stage-hover-bg; + color: $gl-text-color; + } + } + + .ci-action-icon-container { + padding: 0; + font-size: 11px; + position: absolute; + top: 1px; + right: 8px; + } } } } + .dropdown-counter-badge { + color: $border-color; + font-weight: 100; + font-size: 15px; + position: absolute; + right: 5px; + top: 8px; + } + .grouped-pipeline-dropdown { + padding: 0; + width: 191px; + min-width: 191px; + left: auto; + right: -195px; + top: -4px; + box-shadow: 0 1px 5px $black-transparent; + + a { + display: inline-block; + } + .dropdown-build { .build-content { width: 100%; @@ -623,333 +660,290 @@ padding: 0; font-size: 11px; position: absolute; - top: 1px; - right: 8px; + margin-top: 3px; + right: 7px; } } + + ul { + max-height: 245px; + overflow: auto; + margin: 3px 0; + + li { + margin: 4px 8px 4px 9px; + padding: 0; + line-height: 1.1; + position: relative; + + .ci-action-icon-container:hover { + background-color: transparent; + } + + .ci-status-icon { + position: relative; + top: 2px; + } + } + } + } + + .pipeline-graph .dropdown-build .ci-status-icon svg { + width: 18px; + height: 18px; } -} - -.dropdown-counter-badge { - float: right; - color: $border-color; - font-weight: 100; - font-size: 15px; - margin-right: 2px; -} - - -.grouped-pipeline-dropdown { - padding: 0; - width: 191px; - min-width: 191px; - left: auto; - right: -195px; - top: -4px; - box-shadow: 0 1px 5px $black-transparent; - - a { + + .ci-status-text { + max-width: 110px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: bottom; display: inline-block; + position: relative; + font-weight: 200; } - .dropdown-build { - .build-content { - width: 100%; + // Action Icons + .ci-action-icon-container .ci-action-icon-wrapper { + i { + color: $border-color; + border-radius: 100%; + border: 1px solid $border-color; + padding: 5px 6px; + font-size: 13px; + background: $white-light; + height: 30px; + width: 30px; + + &::before { + position: relative; + top: 3px; + left: 3px; + } &:hover { - background-color: $stage-hover-bg; color: $gl-text-color; + background-color: $stage-hover-bg; + border: 1px solid $stage-hover-bg; } } - .ci-action-icon-container { - padding: 0; - font-size: 11px; - position: absolute; - margin-top: 3px; - right: 7px; + .ci-play-icon { + padding: 5px 5px 5px 7px; } } - ul { - max-height: 245px; - overflow: auto; - margin: 3px 0; + .dropdown-build { + color: $gl-text-color-light; + + .build-content { + padding: 4px 7px 8px; + } - li { - margin: 4px 8px 4px 9px; + .ci-action-icon-container { padding: 0; - line-height: 1.1; + font-size: 11px; + float: right; + margin-top: 3px; + display: inline-block; position: relative; - .ci-action-icon-container:hover { - background-color: transparent; + i { + font-size: 11px; + margin-top: 0; } + } - .ci-status-icon { - position: relative; - top: 2px; + .ci-action-icon-container { + i { + width: 24px; + height: 24px; + + &::before { + top: 1px; + left: 1px; + } } } - } -} - -.pipeline-graph .dropdown-build .ci-status-icon svg { - width: 18px; - height: 18px; -} - -.ci-status-text { - max-width: 110px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: bottom; - display: inline-block; - position: relative; - font-weight: 200; -} - -// Action Icons -.ci-action-icon-container .ci-action-icon-wrapper { - i { - color: $border-color; - border-radius: 100%; - border: 1px solid $border-color; - padding: 5px 6px; - font-size: 13px; - background: $white-light; - height: 30px; - width: 30px; - - &::before { - position: relative; - top: 3px; - left: 3px; - } - &:hover { - color: $gl-text-color; - background-color: $stage-hover-bg; - border: 1px solid $stage-hover-bg; + .stage { + max-width: 100px; + width: 100px; } - } - .ci-play-icon { - padding: 5px 5px 5px 7px; - } -} - -.dropdown-build { - color: $gl-text-color-light; + .ci-status-icon svg { + height: 18px; + width: 18px; + } - .build-content { - padding: 4px 7px 8px; + .ci-status-text { + max-width: 95px; + } } - .ci-action-icon-container { - padding: 0; - font-size: 11px; - float: right; - margin-top: 3px; - display: inline-block; - position: relative; + /** + * Builds dropdown in mini pipeline + */ + .mini-pipeline-graph { + .builds-dropdown { + background-color: transparent; + padding: 0; + color: $gl-text-color-light; + border: none; + margin: 0; - i { - font-size: 11px; - margin-top: 0; - } - } + &:focus, + &:hover { + outline: none; + margin-right: -8px; - .ci-action-icon-container { - i { - width: 24px; - height: 24px; + .ci-status-icon { + width: 32px; + padding: 0 8px 0 0; + transition: width 0.1s cubic-bezier(0.25, 0, 1, 1); - &::before { - top: 1px; - left: 1px; + + .dropdown-caret { + visibility: visible; + opacity: 1; + } + } } - } - } - .stage { - max-width: 100px; - width: 100px; - } - - .ci-status-icon svg { - height: 18px; - width: 18px; - } + &:focus, + &:active { + .ci-status-icon-success { + background-color: rgba($gl-success, .1); + } - .ci-status-text { - max-width: 95px; - } -} - -/** - * Builds dropdown in mini pipeline - */ -.mini-pipeline-graph { - .builds-dropdown { - background-color: transparent; - padding: 0; - color: $gl-text-color-light; - border: none; - margin: 0; + .ci-status-icon-failed { + background-color: rgba($gl-danger, .1); + } - &:focus, - &:hover { - outline: none; - margin-right: -8px; + .ci-status-icon-pending, + .ci-status-icon-success_with_warnings { + background-color: rgba($gl-warning, .1); + } - .ci-status-icon { - width: 32px; - padding: 0 8px 0 0; - transition: width 0.1s cubic-bezier(0.25, 0, 1, 1); + .ci-status-icon-running { + background-color: rgba($blue-normal, .1); + } - + .dropdown-caret { - visibility: visible; - opacity: 1; + .ci-status-icon-canceled, + .ci-status-icon-disabled, + .ci-status-icon-not-found { + background-color: rgba($gl-gray, .1); } - } - } - &:focus, - &:active { - .ci-status-icon-success { - background-color: rgba($gl-success, .1); + .ci-status-icon-created, + .ci-status-icon-skipped { + background-color: rgba($gray-darkest, .1); + } } - .ci-status-icon-failed { - background-color: rgba($gl-danger, .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; + } } + } - .ci-status-icon-pending, - .ci-status-icon-success_with_warnings { - background-color: rgba($gl-warning, .1); - } + .dropdown-build .build-content { + padding: 3px 7px 7px; + } - .ci-status-icon-running { - background-color: rgba($blue-normal, .1); - } + .builds-dropdown-loading { + margin: 10px auto; + width: 18px; + } - .ci-status-icon-canceled, - .ci-status-icon-disabled, - .ci-status-icon-not-found { - background-color: rgba($gl-gray, .1); - } + .grouped-pipeline-dropdown { + right: -172px; + top: 23px; + min-height: 50px; - .ci-status-icon-created, - .ci-status-icon-skipped { - background-color: rgba($gray-darkest, .1); + a { + color: $gl-text-color-light; } } - .mini-pipeline-graph-icon-container { - .dropdown-caret { - font-size: 11px; + .arrow-up { + &::before, + &::after { + content: ''; + display: inline-block; position: absolute; - top: 6px; - left: 20px; - margin-right: -6px; - z-index: 2; - visibility: hidden; - opacity: 0; - transition: visibility 0.1s, opacity 0.1s linear; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + top: -6px; + left: 2px; + border-width: 0 5px 6px; } - } - } - - .dropdown-build .build-content { - padding: 3px 7px 7px; - } - - .builds-dropdown-loading { - margin: 10px auto; - width: 18px; - } - .grouped-pipeline-dropdown { - right: -172px; - top: 23px; - min-height: 50px; + &::before { + border-width: 0 5px 5px; + border-bottom-color: $border-color; + } - a { - color: $gl-text-color-light; + &::after { + margin-top: 1px; + border-bottom-color: $white-light; + } } } - .arrow-up { - &::before, - &::after { - content: ''; - display: inline-block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: -6px; - left: 2px; - border-width: 0 5px 6px; - } - - &::before { - border-width: 0 5px 5px; - border-bottom-color: $border-color; - } + /** + * Icons in mini pipeline graph + */ + .mini-pipeline-graph-icon-container .ci-status-icon { + display: inline-block; + border: 1px solid; + border-radius: 22px; + margin-right: 1px; + width: 22px; + height: 22px; + position: relative; + z-index: 2; + transition: all 0.1s cubic-bezier(0.25, 0, 1, 1); - &::after { - margin-top: 1px; - border-bottom-color: $white-light; + svg { + top: -1px; + left: -1px; } } -} - -/** - * Icons in mini pipeline graph - */ -.mini-pipeline-graph-icon-container .ci-status-icon { - display: inline-block; - border: 1px solid; - border-radius: 22px; - margin-right: 1px; - 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; - } -} - -.stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg { - width: 22px; - height: 22px; -} + .stage-cell .mini-pipeline-graph-icon-container .ci-status-icon svg { + width: 22px; + height: 22px; + } -.terminal-icon { - margin-left: 3px; -} -.terminal-container { - .content-block { - border-bottom: none; + .terminal-icon { + margin-left: 3px; } - #terminal { - margin-top: 10px; - min-height: 450px; - box-sizing: border-box; + .terminal-container { + .content-block { + border-bottom: none; + } - > div { + #terminal { + margin-top: 10px; min-height: 450px; + box-sizing: border-box; + + > div { + min-height: 450px; + } } } -} |