46a1ca2889
Added stylelint to static-analysis Updated yarn dependencies CSS Fixes and rule adoptions of stylelint Added stylelint-scss Deduplicated yarn.lock to clear dependencies First round of advanced stylelint rules Mainly Vendor prefix updates related to flex Updates to more webkit specific vendor prefixes Finished all vendor specific fixes Moved now 4 rules to warning Fixed the new scss lint problems More stylelint adaptions after rebase
425 lines
7 KiB
SCSS
425 lines
7 KiB
SCSS
#cycle-analytics {
|
|
max-width: 1000px;
|
|
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 {
|
|
color: $cycle-analytics-light-gray;
|
|
|
|
&:hover {
|
|
color: $gl-text-color;
|
|
}
|
|
}
|
|
|
|
.stage-header {
|
|
width: 26%;
|
|
padding-left: $gl-padding;
|
|
}
|
|
|
|
.median-header {
|
|
width: 14%;
|
|
}
|
|
|
|
.event-header {
|
|
width: 45%;
|
|
padding-left: $gl-padding;
|
|
}
|
|
|
|
.total-time-header {
|
|
width: 15%;
|
|
text-align: right;
|
|
padding-right: $gl-padding;
|
|
}
|
|
|
|
.stage-name {
|
|
font-weight: $gl-font-weight-bold;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.js-ca-dropdown {
|
|
top: $gl-padding-top;
|
|
}
|
|
|
|
.fa-spinner {
|
|
font-size: 28px;
|
|
position: relative;
|
|
margin-left: -20px;
|
|
left: 50%;
|
|
margin-top: 36px;
|
|
}
|
|
|
|
.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 {
|
|
display: flex;
|
|
line-height: 65px;
|
|
border-top: 1px solid transparent;
|
|
border-bottom: 1px solid transparent;
|
|
border-right: 1px solid $border-color;
|
|
background-color: $gray-light;
|
|
|
|
&.active {
|
|
background-color: transparent;
|
|
border-right-color: transparent;
|
|
border-top-color: $border-color;
|
|
border-bottom-color: $border-color;
|
|
box-shadow: inset 2px 0 0 0 $blue-500;
|
|
|
|
.stage-name {
|
|
font-weight: $gl-font-weight-bold;
|
|
}
|
|
}
|
|
|
|
&:hover:not(.active) {
|
|
background-color: $gray-lightest;
|
|
box-shadow: inset 2px 0 0 0 $border-color;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.stage-nav-item-cell {
|
|
&.stage-median {
|
|
margin-left: auto;
|
|
margin-right: $gl-padding;
|
|
min-width: calc(35% - #{$gl-padding});
|
|
}
|
|
}
|
|
|
|
.stage-name {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.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;
|
|
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-merquest-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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|