gitlab-org--gitlab-foss/app/assets/stylesheets/pages/cycle_analytics.scss
2018-04-16 14:19:37 -05:00

426 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 {
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 $active-item-blue;
.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: $cycle-analytics-dark-text;
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: $gl-link-color;
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;
}
}
}