8cb9b3764a
Adds hidden-xs class to the all column instead of the div inside it in order to remove extra whitespace when the actions are hidden Fixes columns width in pipeplines table Changes table parent element to not be an ul and reduces column width for the Build column Adds entry to CHANGELOG Removes added width for build table. Adds the CHANGELOG entry in the middle to avoid more conflicts with master
595 lines
9.5 KiB
SCSS
595 lines
9.5 KiB
SCSS
.pipelines {
|
|
.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.builds {
|
|
min-width: 1200px;
|
|
}
|
|
}
|
|
|
|
.content-list {
|
|
|
|
&.pipelines,
|
|
&.builds-content-list {
|
|
width: 100%;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
.pipeline-holder {
|
|
width: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.pipelines .table.builds .branch-commit {
|
|
width: 33%;
|
|
}
|
|
|
|
.table.builds {
|
|
min-width: 900px;
|
|
|
|
&.pipeline {
|
|
min-width: 650px;
|
|
}
|
|
|
|
tr {
|
|
th {
|
|
padding: 16px 8px;
|
|
border: none;
|
|
}
|
|
|
|
td {
|
|
padding: 10px 8px;
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.commit-link {
|
|
|
|
.ci-status {
|
|
|
|
svg {
|
|
top: 1px;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.branch-commit {
|
|
|
|
.branch-name {
|
|
font-weight: bold;
|
|
max-width: 150px;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
vertical-align: top;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
svg {
|
|
height: 14px;
|
|
width: 14px;
|
|
vertical-align: middle;
|
|
fill: $table-text-gray;
|
|
}
|
|
|
|
.fa {
|
|
font-size: 12px;
|
|
color: $table-text-gray;
|
|
}
|
|
|
|
.commit-id {
|
|
color: $gl-link-color;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.commit-title {
|
|
margin-top: 4px;
|
|
max-width: 300px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.avatar {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.label {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.label-container {
|
|
font-size: 0;
|
|
|
|
.label {
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon-container {
|
|
display: inline-block;
|
|
text-align: right;
|
|
width: 15px;
|
|
|
|
.fa {
|
|
position: relative;
|
|
right: 3px;
|
|
}
|
|
|
|
svg {
|
|
position: relative;
|
|
right: 1px;
|
|
}
|
|
}
|
|
|
|
.stage-cell {
|
|
font-size: 0;
|
|
|
|
svg {
|
|
height: 18px;
|
|
width: 18px;
|
|
position: relative;
|
|
z-index: 2;
|
|
vertical-align: middle;
|
|
overflow: visible;
|
|
}
|
|
|
|
.stage-container {
|
|
display: inline-block;
|
|
position: relative;
|
|
margin-right: 6px;
|
|
|
|
.tooltip {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
&::after {
|
|
content: '';
|
|
width: 8px;
|
|
position: absolute;;
|
|
right: -7px;
|
|
bottom: 8px;
|
|
border-bottom: 2px solid $border-color;
|
|
}
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.duration,
|
|
.finished-at {
|
|
color: $table-text-gray;
|
|
margin: 4px 0;
|
|
|
|
.fa {
|
|
font-size: 12px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
vertical-align: middle;
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
|
|
.pipeline-actions {
|
|
min-width: 140px;
|
|
|
|
.btn {
|
|
margin: 0;
|
|
color: $table-text-gray;
|
|
}
|
|
|
|
.cancel-retry-btns {
|
|
vertical-align: middle;
|
|
|
|
.btn:not(:first-child) {
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
|
|
.dropdown-toggle,
|
|
.dropdown-menu {
|
|
color: $table-text-gray;
|
|
|
|
.fa {
|
|
color: $table-text-gray;
|
|
margin-right: 6px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.btn-remove {
|
|
color: $white-light;
|
|
}
|
|
|
|
.btn-group {
|
|
&.open {
|
|
.btn-default {
|
|
background-color: $white-normal;
|
|
border-color: $border-white-normal;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
.icon-play {
|
|
height: 13px;
|
|
width: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.build-link {
|
|
|
|
a {
|
|
color: $gl-dark-link-color;
|
|
}
|
|
}
|
|
|
|
.btn-group.open .dropdown-toggle {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
// Pipeline visualization
|
|
|
|
.toggle-pipeline-btn {
|
|
background-color: $gray-dark;
|
|
|
|
.caret {
|
|
border-top: none;
|
|
border-bottom: 4px solid;
|
|
}
|
|
|
|
&.graph-collapsed {
|
|
background-color: $white-light;
|
|
|
|
.caret {
|
|
border-bottom: none;
|
|
border-top: 4px solid;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pipeline-graph {
|
|
width: 100%;
|
|
overflow: auto;
|
|
white-space: nowrap;
|
|
transition: max-height 0.3s, padding 0.3s;
|
|
|
|
&.graph-collapsed {
|
|
max-height: 0;
|
|
padding: 0 16px;
|
|
}
|
|
}
|
|
|
|
.pipeline-visualization {
|
|
position: relative;
|
|
|
|
ul {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.stage-column {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin-right: 65px;
|
|
|
|
li {
|
|
list-style: none;
|
|
}
|
|
|
|
.stage-name {
|
|
margin-bottom: 15px;
|
|
font-weight: bold;
|
|
width: 150px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.build {
|
|
border: 1px solid $border-color;
|
|
position: relative;
|
|
padding: 6px 10px;
|
|
border-radius: 30px;
|
|
width: 150px;
|
|
margin-bottom: 10px;
|
|
|
|
&.playable {
|
|
background-color: $gray-light;
|
|
|
|
svg {
|
|
height: 12px;
|
|
width: 12px;
|
|
position: relative;
|
|
top: 1px;
|
|
|
|
path {
|
|
fill: $layout-link-gray;
|
|
}
|
|
}
|
|
}
|
|
|
|
.build-content {
|
|
width: 130px;
|
|
|
|
.ci-status-text {
|
|
width: 110px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
a {
|
|
color: $layout-link-gray;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
.ci-status-text {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-menu-toggle {
|
|
border: none;
|
|
width: auto;
|
|
padding: 0;
|
|
color: $layout-link-gray;
|
|
|
|
.ci-status-text {
|
|
width: 80px;
|
|
}
|
|
}
|
|
|
|
.grouped-pipeline-dropdown {
|
|
padding: 8px 0;
|
|
width: 200px;
|
|
left: auto;
|
|
right: -214px;
|
|
top: -9px;
|
|
|
|
a:hover {
|
|
.ci-status-text {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.ci-status-text {
|
|
width: 145px;
|
|
}
|
|
|
|
.arrow {
|
|
&:before,
|
|
&:after {
|
|
content: '';
|
|
display: inline-block;
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
border-color: transparent;
|
|
border-style: solid;
|
|
top: 18px;
|
|
}
|
|
|
|
&: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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.badge {
|
|
background-color: $gray-dark;
|
|
color: $layout-link-gray;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
svg {
|
|
vertical-align: middle;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
// Connect first build in each stage with right horizontal line
|
|
&:first-child {
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
right: -69px;
|
|
border-top: 2px solid $border-color;
|
|
width: 69px;
|
|
height: 1px;
|
|
}
|
|
}
|
|
|
|
// Connect each build (except for first) with curved lines
|
|
&:not(:first-child) {
|
|
&::after, &::before {
|
|
content: '';
|
|
top: -47px;
|
|
position: absolute;
|
|
border-bottom: 2px solid $border-color;
|
|
width: 20px;
|
|
height: 65px;
|
|
}
|
|
|
|
// Right connecting curves
|
|
&::after {
|
|
right: -20px;
|
|
border-right: 2px solid $border-color;
|
|
border-radius: 0 0 15px;
|
|
}
|
|
|
|
// Left connecting curves
|
|
&::before {
|
|
left: -20px;
|
|
border-left: 2px solid $border-color;
|
|
border-radius: 0 0 0 15px;
|
|
}
|
|
}
|
|
|
|
// Connect second build to first build with smaller curved line
|
|
&:nth-child(2) {
|
|
&::after, &::before {
|
|
height: 29px;
|
|
top: -10px;
|
|
}
|
|
.curve {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
.build {
|
|
// Remove right connecting horizontal line from first build in last stage
|
|
&:first-child {
|
|
&::after, &::before {
|
|
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;
|
|
}
|
|
}
|
|
// Remove opposite curve
|
|
.curve {
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Curve first child connecting lines in opposite direction
|
|
.curve {
|
|
display: none;
|
|
|
|
&::before,
|
|
&::after {
|
|
content: '';
|
|
width: 21px;
|
|
height: 25px;
|
|
position: absolute;
|
|
top: -29px;
|
|
border-top: 2px solid $border-color;
|
|
}
|
|
|
|
&::after {
|
|
left: -39px;
|
|
border-right: 2px solid $border-color;
|
|
border-radius: 0 15px;
|
|
}
|
|
|
|
&::before {
|
|
right: -39px;
|
|
border-left: 2px solid $border-color;
|
|
border-radius: 15px 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pipeline-actions {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.toggle-pipeline-btn {
|
|
|
|
.fa {
|
|
color: $dropdown-header-color;
|
|
}
|
|
}
|
|
|
|
.pipelines.tab-pane {
|
|
|
|
.content-list.pipelines {
|
|
overflow: auto;
|
|
}
|
|
|
|
.stage {
|
|
max-width: 100px;
|
|
width: 100px;
|
|
}
|
|
|
|
.pipeline-actions {
|
|
min-width: initial;
|
|
}
|
|
}
|
|
|
|
.ci-status-icon-created {
|
|
|
|
svg {
|
|
fill: $gray-darkest;
|
|
}
|
|
}
|