Skip to content

G
gitlab-ce
Commit 6fd5094b authored by Lukas Eipert's avatar Lukas Eipert Committed by Annabel Gray
Browse files
Options

Move EE specific code from app/assets/stylesheets/pages/pipelines.scss

parent aeed5f36
Hide whitespace changes
Inline Side-by-side
Showing with 237 additions and 244 deletions
app/assets/stylesheets/pages/pipelines.scss
View file @ 6fd5094b
......@@ -300,14 +300,6 @@
border-bottom: 2px solid $border-color;
}
}
&.has-downstream {
&::after {
content: '';
width: 0;
border: 0;
}
}
}
}
......@@ -511,12 +503,6 @@
.build-content {
@include build-content();
display: inline-block;
padding: 8px 10px 9px;
width: 100%;
border: 1px solid $border-color;
border-radius: 30px;
background-color: $white-light;
}
a.build-content:hover,
......@@ -654,9 +640,7 @@
}
}
// Dropdown button in mini pipeline graph
button.mini-pipeline-graph-dropdown-toggle,
a.linked-pipeline-mini-item {
@mixin mini-pipeline-item() {
border-radius: 100px;
background-color: $white-light;
border-width: 1px;
......@@ -669,30 +653,6 @@ a.linked-pipeline-mini-item {
position: relative;
vertical-align: middle;
> .fa.fa-caret-down {
position: absolute;
left: 20px;
top: 5px;
display: inline-block;
visibility: hidden;
opacity: 0;
color: inherit;
font-size: 12px;
transition: visibility 0.1s, opacity 0.1s linear;
}
&:active,
&:focus,
&:hover {
outline: none;
width: 35px;
.fa.fa-caret-down {
visibility: visible;
opacity: 1;
}
}
// Dropdown button animation in mini pipeline graph
&.ci-status-icon-success {
@include mini-pipeline-graph-color($green-100, $green-500, $green-600);
......@@ -724,6 +684,35 @@ a.linked-pipeline-mini-item {
}
}
// Dropdown button in mini pipeline graph
button.mini-pipeline-graph-dropdown-toggle {
@include mini-pipeline-item();
> .fa.fa-caret-down {
position: absolute;
left: 20px;
top: 5px;
display: inline-block;
visibility: hidden;
opacity: 0;
color: inherit;
font-size: 12px;
transition: visibility 0.1s, opacity 0.1s linear;
}
&:active,
&:focus,
&:hover {
outline: none;
width: 35px;
.fa.fa-caret-down {
visibility: visible;
opacity: 1;
}
}
}
/**
Action icons inside dropdowns:
- mini graph in pipelines table
......@@ -777,7 +766,7 @@ a.linked-pipeline-mini-item {
}
}
// SVGs in the commit widget and mr widget
// SVGs in the commit widget and mr widget
a.ci-action-icon-container.ci-action-icon-wrapper svg {
top: 2px;
}
......@@ -973,208 +962,6 @@ a.linked-pipeline-mini-item {
}
}
.linked-pipeline-mini-list {
display: inline-block;
&.is-downstream {
margin-left: -4px;
margin-right: 4px;
}
.arrow-icon {
display: inline-block;
vertical-align: middle;
margin: -2px 2px 0 0;
svg {
fill: $border-color;
}
}
&:hover {
.linked-pipeline-mini-item {
margin-left: 0;
}
}
.linked-pipeline-mini-item {
position: relative;
display: inline-block;
vertical-align: middle;
height: 22px;
width: 22px;
transition: margin .2s linear;
margin: 2px 7px 3px -14px;
svg {
height: 22px;
width: 22px;
position: absolute;
top: -1px;
left: -1px;
z-index: 2;
overflow: visible;
}
// override dropdown-toggle width expansion
&:hover {
width: 22px;
}
&:first-of-type:last-of-type {
margin-right: 1px;
}
&:nth-of-type(1) {
margin-left: 0;
z-index: 100;
}
&:nth-of-type(2):not(.linked-pipelines-counter) {
z-index: 99;
}
&:nth-of-type(3) {
z-index: 98;
}
&:nth-of-type(4) {
z-index: 97;
}
}
.linked-pipelines-counter {
position: relative;
font-size: 12px;
vertical-align: middle;
line-height: 20px;
height: 22px;
width: 22px;
padding-left: 1px;
margin-left: -15px;
border-radius: 2em;
background: $gray-darkest;
color: $white-light;
z-index: 96;
text-decoration: none;
&:hover {
width: 22px;
background: darken($gray-darkest, 10%);
}
}
}
/**
* Cross-project pipelines (applied conditionally to pipeline graph)
*/
.has-linked-pipelines.stage-column-list {
display: inline-block;
}
.linked-pipelines-column.stage-column {
position: relative;
> ul {
padding: 0;
}
&.graph-position-left {
margin-right: 36px;
.cross-project-triangle {
right: -42px;
}
}
&.graph-position-right {
margin-left: 60px;
.cross-project-triangle {
left: -64px;
}
}
.linked-pipeline.build {
height: 40px;
// apply custom dimensions to connector before and after for triangle arrow
&.flat-connector-before {
@include flat-connector-before($linked-project-column-margin);
}
&::after {
right: -$linked-project-column-margin;
width: $linked-project-column-margin;
}
.linked-pipeline-content {
@include build-content(0);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.stage-column.has-upstream {
margin-left: 60px;
.left-connector {
@include flat-connector-before(60px)
}
&.has-only-one-job {
margin-left: 30px;
margin-right: 0;
.left-connector {
@include flat-connector-before;
}
}
}
.stage-column.has-downstream {
margin-right: $linked-project-column-margin;
&.has-only-one-job:not(:first-child) {
margin-right: 36px;
.left-connector {
@include flat-connector-before;
}
}
.build {
&:first-child {
&::after {
right: -$linked-project-column-margin;
width: $linked-project-column-margin;
}
}
}
}
.cross-project-triangle {
position: absolute;
top: 48px;
width: 0;
height: 0;
border-bottom: 7px solid transparent;
border-top: 7px solid transparent;
border-left: 7px solid $gray-darkest;
font-size: 0;
line-height: 0;
z-index: 10;
}
.project-name-pipeline-id-separator {
display: inline-block;
margin: 4px 2px 0;
font-size: 10px;
vertical-align: top;
}
.ci-header-container {
min-height: 55px;
......
ee/app/assets/stylesheets/pages/pipelines.scss 0 → 100644
View file @ 6fd5094b
.linked-pipeline-mini-list {
display: inline-block;
&.is-downstream {
margin-left: -4px;
margin-right: 4px;
}
.arrow-icon {
display: inline-block;
vertical-align: middle;
margin: -2px 2px 0 0;
svg {
fill: $border-color;
}
}
&:hover {
.linked-pipeline-mini-item {
margin-left: 0;
}
}
.linked-pipeline-mini-item {
@include mini-pipeline-item();
display: inline-block;
transition: margin 0.2s linear;
margin: 2px 7px 3px -14px;
svg {
height: $ci-action-icon-size;
width: $ci-action-icon-size;
position: absolute;
top: -1px;
left: -1px;
z-index: 2;
overflow: visible;
}
&:first-of-type:last-of-type {
margin-right: 1px;
}
&:nth-of-type(1) {
margin-left: 0;
z-index: 100;
}
&:nth-of-type(2):not(.linked-pipelines-counter) {
z-index: 99;
}
&:nth-of-type(3) {
z-index: 98;
}
&:nth-of-type(4) {
z-index: 97;
}
}
.linked-pipelines-counter {
position: relative;
font-size: 12px;
vertical-align: middle;
line-height: 20px;
height: 22px;
width: 22px;
padding-left: 1px;
margin-left: -15px;
border-radius: 2em;
background: $gray-darkest;
color: $white-light;
z-index: 96;
text-decoration: none;
&:hover {
width: 22px;
background: darken($gray-darkest, 10%);
}
}
}
/**
* Cross-project pipelines (applied conditionally to pipeline graph)
*/
.stage-cell {
.stage-container {
&.has-downstream {
&::after {
content: '';
width: 0;
border: 0;
}
}
}
}
.has-linked-pipelines.stage-column-list {
display: inline-block;
}
.linked-pipelines-column.stage-column {
position: relative;
> ul {
padding: 0;
}
&.graph-position-left {
margin-right: 36px;
.cross-project-triangle {
right: -42px;
}
}
&.graph-position-right {
margin-left: 60px;
.cross-project-triangle {
left: -64px;
}
}
.linked-pipeline.build {
height: 40px;
// apply custom dimensions to connector before and after for triangle arrow
&.flat-connector-before {
@include flat-connector-before($linked-project-column-margin);
}
&::after {
right: -$linked-project-column-margin;
width: $linked-project-column-margin;
}
.linked-pipeline-content {
@include build-content(0);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.stage-column.has-upstream {
margin-left: 60px;
.left-connector {
@include flat-connector-before(60px);
}
&.has-only-one-job {
margin-left: 30px;
margin-right: 0;
.left-connector {
@include flat-connector-before;
}
}
}
.stage-column.has-downstream {
margin-right: $linked-project-column-margin;
&.has-only-one-job:not(:first-child) {
margin-right: 36px;
.left-connector {
@include flat-connector-before;
}
}
.build {
&:first-child {
&::after {
right: -$linked-project-column-margin;
width: $linked-project-column-margin;
}
}
}
}
.cross-project-triangle {
position: absolute;
top: 48px;
width: 0;
height: 0;
border-bottom: 7px solid transparent;
border-top: 7px solid transparent;
border-left: 7px solid $gray-darkest;
font-size: 0;
line-height: 0;
z-index: 10;
}
.project-name-pipeline-id-separator {
display: inline-block;
margin: 4px 2px 0;
font-size: 10px;
vertical-align: top;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7