384 lines
6.1 KiB
SCSS
384 lines
6.1 KiB
SCSS
#cycle-analytics,
|
|
.cycle-analytics {
|
|
margin: 24px auto 0;
|
|
position: relative;
|
|
|
|
.landing {
|
|
margin-top: 0;
|
|
|
|
.inner-content {
|
|
white-space: normal;
|
|
|
|
h4,
|
|
p {
|
|
margin: 7px 0 0;
|
|
max-width: 480px;
|
|
padding: 0 $gl-padding;
|
|
|
|
@include media-breakpoint-down(sm) {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.svg-container svg {
|
|
width: 136px;
|
|
height: 136px;
|
|
}
|
|
}
|
|
|
|
.col-headers {
|
|
ul {
|
|
@include clearfix;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
li {
|
|
display: inline-block;
|
|
float: left;
|
|
line-height: 50px;
|
|
width: 20%;
|
|
}
|
|
|
|
.fa,
|
|
svg {
|
|
color: $cycle-analytics-light-gray;
|
|
|
|
&:hover {
|
|
color: $gl-text-color;
|
|
}
|
|
}
|
|
|
|
.stage-header {
|
|
width: 20.5%;
|
|
}
|
|
|
|
.median-header {
|
|
width: 19.5%;
|
|
}
|
|
|
|
.event-header {
|
|
width: 45%;
|
|
}
|
|
|
|
.total-time-header {
|
|
width: 15%;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
.content-block {
|
|
padding: 24px 0;
|
|
border-bottom: 0;
|
|
position: relative;
|
|
|
|
@include media-breakpoint-down(xs) {
|
|
padding: 6px 0 24px;
|
|
}
|
|
}
|
|
|
|
.column {
|
|
text-align: center;
|
|
|
|
@include media-breakpoint-down(xs) {
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.header {
|
|
font-size: 30px;
|
|
line-height: 38px;
|
|
font-weight: $gl-font-weight-normal;
|
|
margin: 0;
|
|
}
|
|
|
|
.text {
|
|
color: $layout-link-gray;
|
|
margin: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
@include media-breakpoint-down(xs) {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.stage-panel-body {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stage-nav,
|
|
.stage-entries {
|
|
display: flex;
|
|
vertical-align: top;
|
|
font-size: $gl-font-size;
|
|
}
|
|
|
|
.stage-nav {
|
|
width: 40%;
|
|
margin-bottom: 0;
|
|
|
|
ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
li {
|
|
@include clearfix;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.stage-nav-item {
|
|
line-height: 65px;
|
|
|
|
&.active {
|
|
background: $blue-50;
|
|
border-color: $blue-300;
|
|
box-shadow: inset 4px 0 0 0 $blue-500;
|
|
}
|
|
|
|
&:hover:not(.active) {
|
|
background-color: $gray-lightest;
|
|
box-shadow: inset 2px 0 0 0 $border-color;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.stage-nav-item-cell.stage-name {
|
|
width: 44.5%;
|
|
}
|
|
|
|
.stage-nav-item-cell.stage-median {
|
|
min-width: 43%;
|
|
}
|
|
|
|
.stage-empty,
|
|
.not-available {
|
|
color: $gl-text-color-secondary;
|
|
}
|
|
}
|
|
}
|
|
|
|
.stage-panel-container {
|
|
width: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
.stage-panel {
|
|
min-width: 968px;
|
|
|
|
.card-header {
|
|
padding: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.events-description {
|
|
line-height: 65px;
|
|
padding: 0 $gl-padding;
|
|
}
|
|
|
|
.events-info {
|
|
color: $gl-text-color-secondary;
|
|
}
|
|
}
|
|
|
|
.stage-events {
|
|
width: 60%;
|
|
overflow: scroll;
|
|
min-height: 467px;
|
|
}
|
|
|
|
.stage-event-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.stage-event-item {
|
|
@include clearfix;
|
|
list-style-type: none;
|
|
padding: 0 0 $gl-padding;
|
|
margin: 0 $gl-padding $gl-padding;
|
|
border-bottom: 1px solid $gray-darker;
|
|
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.item-details,
|
|
.item-time {
|
|
float: left;
|
|
}
|
|
|
|
.item-details {
|
|
width: 75%;
|
|
}
|
|
|
|
.item-title {
|
|
margin: 0 0 2px;
|
|
|
|
&.issue-title,
|
|
&.commit-title,
|
|
&.merge-request-title {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 100%;
|
|
display: block;
|
|
|
|
a {
|
|
color: $gl-text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-time {
|
|
width: 25%;
|
|
text-align: right;
|
|
}
|
|
|
|
.total-time {
|
|
font-size: $cycle-analytics-big-font;
|
|
color: $gl-text-color;
|
|
|
|
span {
|
|
color: $gl-text-color;
|
|
font-size: $gl-font-size;
|
|
}
|
|
}
|
|
|
|
.issue-date,
|
|
.build-date {
|
|
color: $gl-text-color;
|
|
}
|
|
|
|
.mr-link,
|
|
.issue-link,
|
|
.commit-author-link,
|
|
.issue-author-link {
|
|
color: $gl-text-color;
|
|
}
|
|
|
|
// Custom CSS for components
|
|
.item-conmmit-component {
|
|
.commit-icon {
|
|
svg {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
}
|
|
|
|
.merge-request-branch {
|
|
a {
|
|
max-width: 180px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Custom Styles for stage items
|
|
.item-build-component {
|
|
.item-title {
|
|
.icon-build-status {
|
|
float: left;
|
|
margin-right: 5px;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
|
|
.item-build-name {
|
|
color: $gl-text-color;
|
|
}
|
|
|
|
.pipeline-id {
|
|
color: $gl-text-color;
|
|
padding: 0 3px 0 0;
|
|
}
|
|
|
|
.ref-name {
|
|
color: $black;
|
|
display: inline-block;
|
|
max-width: 180px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
line-height: 1.3;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.commit-sha {
|
|
color: $blue-600;
|
|
line-height: 1.3;
|
|
vertical-align: top;
|
|
font-weight: $gl-font-weight-normal;
|
|
}
|
|
|
|
.fa {
|
|
color: $gl-text-color-secondary;
|
|
font-size: $code-font-size;
|
|
}
|
|
}
|
|
}
|
|
|
|
.empty-stage,
|
|
.no-access-stage {
|
|
text-align: center;
|
|
width: 75%;
|
|
margin: 0 auto;
|
|
padding-top: 130px;
|
|
color: $gl-text-color-secondary;
|
|
|
|
h4 {
|
|
color: $gl-text-color;
|
|
}
|
|
}
|
|
|
|
.empty-stage {
|
|
.icon-no-data {
|
|
height: 36px;
|
|
width: 78px;
|
|
display: inline-block;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
|
|
.no-access-stage {
|
|
.icon-lock {
|
|
height: 36px;
|
|
width: 78px;
|
|
display: inline-block;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cycle-analytics-overview {
|
|
padding-top: 100px;
|
|
|
|
.overview-details {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.overview-image {
|
|
text-align: right;
|
|
}
|
|
|
|
.overview-icon {
|
|
svg {
|
|
width: 365px;
|
|
height: 227px;
|
|
}
|
|
}
|
|
}
|