2016-09-14 17:03:42 -04:00
|
|
|
#cycle-analytics {
|
2016-11-21 16:31:12 -05:00
|
|
|
max-width: 1000px;
|
2016-09-19 16:41:36 -04:00
|
|
|
margin: 24px auto 0;
|
|
|
|
position: relative;
|
2016-09-14 17:03:42 -04:00
|
|
|
|
2017-05-05 05:22:59 -04:00
|
|
|
.landing {
|
2017-06-20 11:19:13 -04:00
|
|
|
margin-top: 0;
|
2017-05-05 05:22:59 -04:00
|
|
|
|
|
|
|
.inner-content {
|
|
|
|
white-space: normal;
|
|
|
|
|
|
|
|
h4,
|
|
|
|
p {
|
|
|
|
margin: 7px 0 0;
|
|
|
|
max-width: 480px;
|
|
|
|
padding: 0 $gl-padding;
|
|
|
|
|
|
|
|
@media (max-width: $screen-sm-min) {
|
|
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-10-20 19:24:36 -04:00
|
|
|
.col-headers {
|
|
|
|
ul {
|
2017-07-12 00:59:39 -04:00
|
|
|
@include clearfix;
|
2016-10-20 19:24:36 -04:00
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
li {
|
|
|
|
display: inline-block;
|
|
|
|
float: left;
|
|
|
|
line-height: 50px;
|
|
|
|
width: 20%;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fa {
|
|
|
|
color: $cycle-analytics-light-gray;
|
2017-01-03 08:51:19 -05:00
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: $gl-text-color;
|
|
|
|
}
|
2016-10-20 19:24:36 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
.stage-header {
|
2016-12-23 18:40:50 -05:00
|
|
|
width: 26%;
|
2016-10-20 19:24:36 -04:00
|
|
|
padding-left: $gl-padding;
|
|
|
|
}
|
|
|
|
|
|
|
|
.median-header {
|
2016-12-23 18:40:50 -05:00
|
|
|
width: 14%;
|
2016-10-20 19:24:36 -04:00
|
|
|
}
|
2016-09-14 17:03:42 -04:00
|
|
|
|
2016-10-20 19:24:36 -04:00
|
|
|
.event-header {
|
|
|
|
width: 45%;
|
|
|
|
padding-left: $gl-padding;
|
|
|
|
}
|
|
|
|
|
|
|
|
.total-time-header {
|
|
|
|
width: 15%;
|
|
|
|
text-align: right;
|
|
|
|
padding-right: $gl-padding;
|
|
|
|
}
|
|
|
|
|
|
|
|
.stage-name {
|
|
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.panel {
|
2016-09-14 17:03:42 -04:00
|
|
|
.content-block {
|
|
|
|
padding: 24px 0;
|
|
|
|
border-bottom: none;
|
|
|
|
position: relative;
|
2016-10-24 15:23:40 -04:00
|
|
|
|
2016-12-01 00:27:58 -05:00
|
|
|
@media (max-width: $screen-xs-max) {
|
2016-09-23 07:11:29 -04:00
|
|
|
padding: 6px 0 24px;
|
2016-10-24 15:23:40 -04:00
|
|
|
}
|
2016-09-14 17:03:42 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
.column {
|
|
|
|
text-align: center;
|
2016-10-24 15:23:40 -04:00
|
|
|
|
2016-12-01 00:27:58 -05:00
|
|
|
@media (max-width: $screen-xs-max) {
|
2016-09-23 07:11:29 -04:00
|
|
|
padding: 15px 0;
|
|
|
|
}
|
2016-09-14 17:03:42 -04:00
|
|
|
|
|
|
|
.header {
|
|
|
|
font-size: 30px;
|
|
|
|
line-height: 38px;
|
|
|
|
font-weight: normal;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.text {
|
|
|
|
color: $layout-link-gray;
|
2016-09-19 17:12:17 -04:00
|
|
|
margin: 0;
|
2016-09-14 17:03:42 -04:00
|
|
|
}
|
2016-09-19 16:41:36 -04:00
|
|
|
|
|
|
|
&:last-child {
|
2016-12-01 00:27:58 -05:00
|
|
|
@media (max-width: $screen-xs-max) {
|
2016-09-23 07:11:29 -04:00
|
|
|
text-align: center;
|
|
|
|
}
|
2016-09-19 16:41:36 -04:00
|
|
|
}
|
2016-09-14 17:03:42 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-11-21 11:39:53 -05:00
|
|
|
.js-ca-dropdown {
|
|
|
|
top: $gl-padding-top;
|
2017-08-01 09:38:16 -04:00
|
|
|
|
|
|
|
.dropdown-menu-align-right {
|
|
|
|
margin-top: 2px;
|
|
|
|
}
|
2016-11-21 11:39:53 -05:00
|
|
|
}
|
|
|
|
|
2016-09-14 17:03:42 -04:00
|
|
|
.content-list {
|
|
|
|
li {
|
|
|
|
padding: 18px $gl-padding $gl-padding;
|
2016-09-19 16:41:36 -04:00
|
|
|
|
|
|
|
.container-fluid {
|
|
|
|
padding: 0;
|
|
|
|
}
|
2016-09-14 17:03:42 -04:00
|
|
|
}
|
|
|
|
|
2016-09-19 16:41:36 -04:00
|
|
|
.title-col {
|
2016-09-19 17:12:17 -04:00
|
|
|
p {
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
&.title {
|
2016-09-14 17:03:42 -04:00
|
|
|
line-height: 19px;
|
2016-12-02 14:43:33 -05:00
|
|
|
font-size: 14px;
|
2016-09-14 17:03:42 -04:00
|
|
|
font-weight: 600;
|
2016-12-30 15:18:27 -05:00
|
|
|
color: $gl-text-color;
|
2016-09-14 17:03:42 -04:00
|
|
|
}
|
2016-10-24 15:23:40 -04:00
|
|
|
|
2016-09-23 07:11:29 -04:00
|
|
|
&.text {
|
|
|
|
color: $layout-link-gray;
|
2016-10-24 15:23:40 -04:00
|
|
|
|
2016-09-23 07:11:29 -04:00
|
|
|
&.value-col {
|
2016-12-30 15:18:27 -05:00
|
|
|
color: $gl-text-color;
|
2016-09-23 07:11:29 -04:00
|
|
|
}
|
2016-09-14 17:03:42 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-09-19 16:41:36 -04:00
|
|
|
.value-col {
|
|
|
|
text-align: right;
|
2016-09-14 17:03:42 -04:00
|
|
|
|
2016-09-19 16:41:36 -04:00
|
|
|
span {
|
2016-09-23 07:11:29 -04:00
|
|
|
position: relative;
|
|
|
|
vertical-align: middle;
|
|
|
|
top: 3px;
|
2016-09-19 16:41:36 -04:00
|
|
|
}
|
2016-09-14 17:03:42 -04:00
|
|
|
}
|
2016-09-19 16:41:36 -04:00
|
|
|
}
|
2016-09-14 17:03:42 -04:00
|
|
|
|
2017-05-02 04:05:43 -04:00
|
|
|
.landing svg {
|
|
|
|
width: 136px;
|
|
|
|
height: 136px;
|
2016-09-19 16:41:36 -04:00
|
|
|
}
|
2016-09-14 17:03:42 -04:00
|
|
|
|
2016-09-19 16:41:36 -04:00
|
|
|
.fa-spinner {
|
|
|
|
font-size: 28px;
|
|
|
|
position: relative;
|
|
|
|
margin-left: -20px;
|
|
|
|
left: 50%;
|
|
|
|
margin-top: 36px;
|
2016-09-14 17:03:42 -04:00
|
|
|
}
|
2016-09-19 16:41:36 -04:00
|
|
|
|
2016-10-20 19:24:36 -04:00
|
|
|
.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;
|
2017-07-12 00:59:39 -04:00
|
|
|
list-style-type: none;
|
2016-10-20 19:24:36 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
.stage-nav-item {
|
2017-04-28 05:49:28 -04:00
|
|
|
display: flex;
|
2016-10-20 19:24:36 -04:00
|
|
|
line-height: 65px;
|
2016-11-21 16:11:01 -05:00
|
|
|
border-top: 1px solid transparent;
|
|
|
|
border-bottom: 1px solid transparent;
|
|
|
|
border-right: 1px solid $border-color;
|
2016-10-20 19:24:36 -04:00
|
|
|
background-color: $gray-light;
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
background-color: transparent;
|
|
|
|
border-right-color: transparent;
|
|
|
|
border-top-color: $border-color;
|
|
|
|
border-bottom-color: $border-color;
|
2016-11-18 19:38:29 -05:00
|
|
|
box-shadow: inset 2px 0 0 0 $active-item-blue;
|
2016-10-20 19:24:36 -04:00
|
|
|
|
|
|
|
.stage-name {
|
|
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-11-21 16:54:06 -05:00
|
|
|
&:hover:not(.active) {
|
|
|
|
background-color: $gray-lightest;
|
|
|
|
box-shadow: inset 2px 0 0 0 $border-color;
|
2016-12-09 23:59:20 -05:00
|
|
|
cursor: pointer;
|
2016-11-21 16:54:06 -05:00
|
|
|
}
|
|
|
|
|
2016-10-20 19:24:36 -04:00
|
|
|
&:first-child {
|
|
|
|
border-top: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
border-bottom: none;
|
|
|
|
}
|
|
|
|
|
2016-11-21 16:11:01 -05:00
|
|
|
.stage-nav-item-cell {
|
2016-10-20 19:24:36 -04:00
|
|
|
&.stage-median {
|
2017-04-28 05:49:28 -04:00
|
|
|
margin-left: auto;
|
|
|
|
margin-right: $gl-padding;
|
|
|
|
min-width: calc(35% - #{$gl-padding});
|
2016-10-20 19:24:36 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.stage-name {
|
|
|
|
padding-left: 16px;
|
|
|
|
}
|
2016-11-18 15:59:04 -05:00
|
|
|
|
2016-11-19 02:38:07 -05:00
|
|
|
.stage-empty,
|
|
|
|
.not-available {
|
2016-12-30 15:18:27 -05:00
|
|
|
color: $gl-text-color-secondary;
|
2016-11-18 15:59:04 -05:00
|
|
|
}
|
2016-10-20 19:24:36 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-11-21 16:31:12 -05:00
|
|
|
.stage-panel-container {
|
|
|
|
width: 100%;
|
|
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
|
2016-10-20 19:24:36 -04:00
|
|
|
.stage-panel {
|
2016-11-21 16:31:12 -05:00
|
|
|
min-width: 968px;
|
|
|
|
|
2016-10-20 19:24:36 -04:00
|
|
|
.panel-heading {
|
|
|
|
padding: 0;
|
|
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
|
|
|
|
.events-description {
|
|
|
|
line-height: 65px;
|
2017-02-07 10:41:02 -05:00
|
|
|
padding: 0 $gl-padding;
|
2017-02-08 11:13:33 -05:00
|
|
|
}
|
2017-02-07 10:41:02 -05:00
|
|
|
|
2017-02-08 11:13:33 -05:00
|
|
|
.events-info {
|
|
|
|
color: $gl-text-color-secondary;
|
2016-10-20 19:24:36 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.stage-events {
|
|
|
|
width: 60%;
|
|
|
|
overflow: scroll;
|
|
|
|
height: 467px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.stage-event-list {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.stage-event-item {
|
2017-07-12 00:59:39 -04:00
|
|
|
@include clearfix;
|
2016-10-20 19:24:36 -04:00
|
|
|
list-style-type: none;
|
|
|
|
padding: 0 0 $gl-padding;
|
2016-11-18 19:38:29 -05:00
|
|
|
margin: 0 $gl-padding $gl-padding;
|
2016-11-21 16:11:01 -05:00
|
|
|
border-bottom: 1px solid $gray-darker;
|
2016-10-20 19:24:36 -04:00
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
border-bottom: none;
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
|
2016-11-18 19:38:29 -05:00
|
|
|
.item-details,
|
|
|
|
.item-time {
|
2016-10-20 19:24:36 -04:00
|
|
|
float: left;
|
|
|
|
}
|
|
|
|
|
|
|
|
.item-details {
|
|
|
|
width: 75%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.item-title {
|
2016-11-18 19:38:29 -05:00
|
|
|
margin: 0 0 2px;
|
2016-10-20 19:24:36 -04:00
|
|
|
|
2016-11-18 19:38:29 -05:00
|
|
|
&.issue-title,
|
|
|
|
&.commit-title,
|
|
|
|
&.merge-merquest-title {
|
2017-07-12 00:59:39 -04:00
|
|
|
@include text-overflow();
|
2016-10-20 19:24:36 -04:00
|
|
|
max-width: 100%;
|
|
|
|
display: block;
|
2016-11-17 17:29:22 -05:00
|
|
|
|
|
|
|
a {
|
2016-12-30 15:18:27 -05:00
|
|
|
color: $gl-text-color;
|
2016-11-17 17:29:22 -05:00
|
|
|
}
|
2016-10-20 19:24:36 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.item-time {
|
|
|
|
width: 25%;
|
|
|
|
text-align: right;
|
2016-11-16 18:05:25 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
.total-time {
|
2016-10-20 19:24:36 -04:00
|
|
|
font-size: $cycle-analytics-big-font;
|
|
|
|
color: $cycle-analytics-dark-text;
|
|
|
|
|
2016-11-16 18:05:25 -05:00
|
|
|
span {
|
2016-10-20 19:24:36 -04:00
|
|
|
color: $gl-text-color;
|
2016-11-16 18:05:25 -05:00
|
|
|
font-size: $gl-font-size;
|
2016-10-20 19:24:36 -04:00
|
|
|
}
|
|
|
|
}
|
2016-11-09 02:15:50 -05:00
|
|
|
|
2016-11-18 19:38:29 -05:00
|
|
|
.issue-date,
|
|
|
|
.build-date {
|
2016-11-09 02:25:11 -05:00
|
|
|
color: $gl-text-color;
|
|
|
|
}
|
2016-11-18 19:38:29 -05:00
|
|
|
|
2016-11-09 02:25:11 -05:00
|
|
|
.issue-link,
|
|
|
|
.commit-author-link,
|
|
|
|
.issue-author-link {
|
2016-12-30 15:18:27 -05:00
|
|
|
color: $gl-text-color;
|
2016-11-09 02:15:50 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
// Custom CSS for components
|
|
|
|
.item-conmmit-component {
|
|
|
|
.commit-icon {
|
|
|
|
svg {
|
2017-03-16 07:13:33 -04:00
|
|
|
display: inline-block;
|
|
|
|
width: 20px;
|
|
|
|
height: 20px;
|
|
|
|
vertical-align: bottom;
|
2016-11-09 02:15:50 -05:00
|
|
|
}
|
2016-11-18 19:38:29 -05:00
|
|
|
}
|
2016-11-09 02:15:50 -05:00
|
|
|
}
|
2016-11-17 20:55:55 -05:00
|
|
|
|
|
|
|
.merge-request-branch {
|
|
|
|
a {
|
|
|
|
max-width: 180px;
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
display: inline-block;
|
|
|
|
vertical-align: bottom;
|
|
|
|
}
|
|
|
|
}
|
2016-10-20 19:24:36 -04:00
|
|
|
}
|
2016-11-18 19:38:29 -05:00
|
|
|
|
2016-11-17 16:18:24 -05:00
|
|
|
// Custom Styles for stage items
|
|
|
|
.item-build-component {
|
|
|
|
|
|
|
|
.item-title {
|
|
|
|
.icon-build-status {
|
|
|
|
float: left;
|
|
|
|
margin-right: 5px;
|
2016-11-18 14:31:53 -05:00
|
|
|
position: relative;
|
|
|
|
top: 2px;
|
2016-11-17 16:18:24 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
.item-build-name {
|
2016-12-30 15:18:27 -05:00
|
|
|
color: $gl-text-color;
|
2016-11-17 16:18:24 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
.pipeline-id {
|
2016-12-30 15:18:27 -05:00
|
|
|
color: $gl-text-color;
|
2016-11-17 16:18:24 -05:00
|
|
|
padding: 0 3px 0 0;
|
|
|
|
}
|
|
|
|
|
2017-05-11 11:47:44 -04:00
|
|
|
.ref-name {
|
2016-11-17 16:18:24 -05:00
|
|
|
color: $black;
|
|
|
|
display: inline-block;
|
|
|
|
max-width: 180px;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
line-height: 1.3;
|
|
|
|
vertical-align: top;
|
|
|
|
}
|
2016-11-18 19:38:29 -05:00
|
|
|
|
2017-05-11 11:47:44 -04:00
|
|
|
.commit-sha {
|
2016-11-17 16:18:24 -05:00
|
|
|
color: $gl-link-color;
|
|
|
|
line-height: 1.3;
|
|
|
|
vertical-align: top;
|
|
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fa {
|
2016-12-30 15:18:27 -05:00
|
|
|
color: $gl-text-color-secondary;
|
2016-11-17 16:18:24 -05:00
|
|
|
font-size: $code_font_size;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2016-11-15 18:38:48 -05:00
|
|
|
|
2016-11-19 02:38:07 -05:00
|
|
|
.empty-stage,
|
|
|
|
.no-access-stage {
|
2016-11-15 18:38:48 -05:00
|
|
|
text-align: center;
|
|
|
|
width: 75%;
|
|
|
|
margin: 0 auto;
|
|
|
|
padding-top: 130px;
|
2016-12-30 15:18:27 -05:00
|
|
|
color: $gl-text-color-secondary;
|
2016-11-15 18:38:48 -05:00
|
|
|
|
2016-11-19 02:38:07 -05:00
|
|
|
h4 {
|
|
|
|
color: $gl-text-color;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.empty-stage {
|
2016-11-15 18:38:48 -05:00
|
|
|
.icon-no-data {
|
|
|
|
height: 36px;
|
|
|
|
width: 78px;
|
|
|
|
display: inline-block;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
}
|
2016-11-19 02:38:07 -05:00
|
|
|
}
|
2016-11-15 18:38:48 -05:00
|
|
|
|
2016-11-19 02:38:07 -05:00
|
|
|
.no-access-stage {
|
|
|
|
.icon-lock {
|
|
|
|
height: 36px;
|
|
|
|
width: 78px;
|
|
|
|
display: inline-block;
|
|
|
|
margin-bottom: 20px;
|
2016-11-15 18:38:48 -05:00
|
|
|
}
|
|
|
|
}
|
2017-08-01 09:38:16 -04:00
|
|
|
|
|
|
|
// TODO: fallback to global style
|
|
|
|
.dropdown-menu {
|
|
|
|
li {
|
|
|
|
padding: 0 1px;
|
|
|
|
|
|
|
|
a {
|
|
|
|
border-radius: 0;
|
|
|
|
padding: 8px 16px;
|
|
|
|
|
|
|
|
&:hover,
|
|
|
|
&:active,
|
|
|
|
&:focus {
|
|
|
|
background-color: $gray-darker;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2016-09-14 17:03:42 -04:00
|
|
|
}
|
2016-11-18 18:22:07 -05:00
|
|
|
|
|
|
|
.cycle-analytics-overview {
|
|
|
|
padding-top: 100px;
|
|
|
|
|
|
|
|
.overview-details {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.overview-image {
|
|
|
|
text-align: right;
|
|
|
|
}
|
2016-11-18 19:38:29 -05:00
|
|
|
|
2016-11-18 18:22:07 -05:00
|
|
|
.overview-icon {
|
|
|
|
svg {
|
|
|
|
width: 365px;
|
|
|
|
height: 227px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|