debian-mirror-gitlab/app/assets/stylesheets/page_bundles/cycle_analytics.scss

351 lines
6 KiB
SCSS
Raw Normal View History

2021-01-03 14:25:43 +05:30
@import 'mixins_and_variables_and_functions';
2019-12-04 20:38:33 +05:30
#cycle-analytics,
.cycle-analytics {
2016-09-29 09:46:39 +05:30
margin: 24px auto 0;
position: relative;
2017-08-17 22:00:37 +05:30
.landing {
2017-09-10 17:25:29 +05:30
margin-top: 0;
2017-08-17 22:00:37 +05:30
.inner-content {
white-space: normal;
h4,
p {
margin: 7px 0 0;
max-width: 480px;
padding: 0 $gl-padding;
2018-11-08 19:23:39 +05:30
@include media-breakpoint-down(sm) {
2017-08-17 22:00:37 +05:30
margin: 0 auto;
}
}
}
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
.svg-container svg {
2018-03-17 18:26:18 +05:30
width: 136px;
height: 136px;
}
2017-08-17 22:00:37 +05:30
}
.col-headers {
ul {
2017-09-10 17:25:29 +05:30
@include clearfix;
2017-08-17 22:00:37 +05:30
margin: 0;
padding: 0;
}
li {
display: inline-block;
float: left;
line-height: 50px;
width: 20%;
}
.stage-header {
2020-04-08 14:13:33 +05:30
width: 20.5%;
2017-08-17 22:00:37 +05:30
}
.median-header {
2020-04-08 14:13:33 +05:30
width: 19.5%;
2017-08-17 22:00:37 +05:30
}
.event-header {
width: 45%;
}
.total-time-header {
width: 15%;
}
}
2018-11-08 19:23:39 +05:30
.card {
2016-09-29 09:46:39 +05:30
.content-block {
padding: 24px 0;
2018-03-17 18:26:18 +05:30
border-bottom: 0;
2016-09-29 09:46:39 +05:30
position: relative;
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
@include media-breakpoint-down(xs) {
2016-09-29 09:46:39 +05:30
padding: 6px 0 24px;
2017-08-17 22:00:37 +05:30
}
2016-09-29 09:46:39 +05:30
}
.column {
text-align: center;
2017-08-17 22:00:37 +05:30
2018-11-08 19:23:39 +05:30
@include media-breakpoint-down(xs) {
2016-09-29 09:46:39 +05:30
padding: 15px 0;
}
.header {
font-size: 30px;
line-height: 38px;
2018-03-17 18:26:18 +05:30
font-weight: $gl-font-weight-normal;
2016-09-29 09:46:39 +05:30
margin: 0;
}
.text {
2021-01-03 14:25:43 +05:30
color: var(--gray-500, $gray-500);
2016-09-29 09:46:39 +05:30
margin: 0;
}
&:last-child {
2018-11-08 19:23:39 +05:30
@include media-breakpoint-down(xs) {
2016-09-29 09:46:39 +05:30
text-align: center;
}
}
}
}
2017-08-17 22:00:37 +05:30
.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%;
2016-09-29 09:46:39 +05:30
}
2017-08-17 22:00:37 +05:30
li {
@include clearfix;
2017-09-10 17:25:29 +05:30
list-style-type: none;
2017-08-17 22:00:37 +05:30
}
.stage-nav-item {
line-height: 65px;
&.active {
2021-01-03 14:25:43 +05:30
background: var(--blue-50, $blue-50);
border-color: var(--blue-300, $blue-300);
box-shadow: inset 4px 0 0 0 var(--blue-500, $blue-500);
2017-08-17 22:00:37 +05:30
}
&:hover:not(.active) {
2021-01-03 14:25:43 +05:30
background-color: var(--gray-10, $gray-10);
box-shadow: inset 2px 0 0 0 var(--border-color, $border-color);
2017-08-17 22:00:37 +05:30
cursor: pointer;
}
2019-12-04 20:38:33 +05:30
.stage-nav-item-cell.stage-name {
width: 44.5%;
2017-08-17 22:00:37 +05:30
}
2019-12-04 20:38:33 +05:30
.stage-nav-item-cell.stage-median {
min-width: 43%;
2017-08-17 22:00:37 +05:30
}
.stage-empty,
.not-available {
2021-01-03 14:25:43 +05:30
color: var(--gray-500, $gray-500);
2016-09-29 09:46:39 +05:30
}
}
2017-08-17 22:00:37 +05:30
}
.stage-panel-container {
width: 100%;
overflow: auto;
}
.stage-panel {
min-width: 968px;
2018-11-08 19:23:39 +05:30
.card-header {
2017-08-17 22:00:37 +05:30
padding: 0;
background-color: transparent;
}
.events-description {
line-height: 65px;
padding: 0 $gl-padding;
}
.events-info {
2021-01-03 14:25:43 +05:30
color: var(--gray-500, $gray-500);
2017-08-17 22:00:37 +05:30
}
}
.stage-events {
width: 60%;
2020-03-13 15:44:24 +05:30
min-height: 467px;
2017-08-17 22:00:37 +05:30
}
.stage-event-list {
margin: 0;
padding: 0;
}
.stage-event-item {
2017-09-10 17:25:29 +05:30
@include clearfix;
2017-08-17 22:00:37 +05:30
list-style-type: none;
padding: 0 0 $gl-padding;
margin: 0 $gl-padding $gl-padding;
2021-01-03 14:25:43 +05:30
border-bottom: 1px solid var(--gray-50, $gray-50);
2017-08-17 22:00:37 +05:30
&:last-child {
2018-03-17 18:26:18 +05:30
border-bottom: 0;
2017-08-17 22:00:37 +05:30
margin-bottom: 0;
}
.item-details,
.item-time {
float: left;
}
.item-details {
width: 75%;
}
.item-title {
margin: 0 0 2px;
&.issue-title,
&.commit-title,
2019-12-04 20:38:33 +05:30
&.merge-request-title {
2018-11-08 19:23:39 +05:30
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
2017-08-17 22:00:37 +05:30
max-width: 100%;
display: block;
a {
2021-01-03 14:25:43 +05:30
color: var(--gl-text-color, $gl-text-color);
2017-08-17 22:00:37 +05:30
}
2016-09-29 09:46:39 +05:30
}
2017-08-17 22:00:37 +05:30
}
2016-09-29 09:46:39 +05:30
2017-08-17 22:00:37 +05:30
.item-time {
width: 25%;
text-align: right;
}
.total-time {
font-size: $cycle-analytics-big-font;
2021-01-03 14:25:43 +05:30
color: var(--gl-text-color, $gl-text-color);
2017-08-17 22:00:37 +05:30
span {
2021-01-03 14:25:43 +05:30
color: var(--gl-text-color, $gl-text-color);
2017-08-17 22:00:37 +05:30
font-size: $gl-font-size;
2016-09-29 09:46:39 +05:30
}
2017-08-17 22:00:37 +05:30
}
2016-09-29 09:46:39 +05:30
2017-08-17 22:00:37 +05:30
.issue-date,
.build-date {
2021-01-03 14:25:43 +05:30
color: var(--gl-text-color, $gl-text-color);
2017-08-17 22:00:37 +05:30
}
2019-12-04 20:38:33 +05:30
.mr-link,
2017-08-17 22:00:37 +05:30
.issue-link,
.commit-author-link,
.issue-author-link {
2021-01-03 14:25:43 +05:30
color: var(--gl-text-color, $gl-text-color);
2017-08-17 22:00:37 +05:30
}
// 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;
2016-09-29 09:46:39 +05:30
}
}
}
2017-08-17 22:00:37 +05:30
// 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 {
2021-01-03 14:25:43 +05:30
color: var(--gl-text-color, $gl-text-color);
2017-08-17 22:00:37 +05:30
}
.pipeline-id {
2021-01-03 14:25:43 +05:30
color: var(--gl-text-color, $gl-text-color);
2017-08-17 22:00:37 +05:30
padding: 0 3px 0 0;
}
2017-09-10 17:25:29 +05:30
.ref-name {
2021-01-03 14:25:43 +05:30
color: var(--gray-900, $gray-900);
2017-08-17 22:00:37 +05:30
display: inline-block;
max-width: 180px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 1.3;
vertical-align: top;
}
2017-09-10 17:25:29 +05:30
.commit-sha {
2021-01-03 14:25:43 +05:30
color: var(--blue-600, $blue-600);
2017-08-17 22:00:37 +05:30
line-height: 1.3;
vertical-align: top;
2018-03-17 18:26:18 +05:30
font-weight: $gl-font-weight-normal;
2017-08-17 22:00:37 +05:30
}
}
}
.empty-stage,
.no-access-stage {
text-align: center;
width: 75%;
margin: 0 auto;
padding-top: 130px;
2021-01-03 14:25:43 +05:30
color: var(--gray-500, $gray-500);
2017-08-17 22:00:37 +05:30
h4 {
2021-01-03 14:25:43 +05:30
color: var(--gl-text-color, $gl-text-color);
2017-08-17 22:00:37 +05:30
}
}
.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;
}
}
}