summaryrefslogtreecommitdiff
path: root/app/assets/stylesheets/pages/pipelines.scss
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/stylesheets/pages/pipelines.scss')
-rw-r--r--app/assets/stylesheets/pages/pipelines.scss386
1 files changed, 265 insertions, 121 deletions
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index c9d54b4f3d3..621b780ce4d 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -22,17 +22,22 @@
.table.ci-table {
min-width: 1200px;
+ table-layout: fixed;
.pipeline-id {
color: $black;
}
- .branch-commit {
- width: 30%;
+ .pipeline-date,
+ .pipeline-status {
+ width: 10%;
+ }
- .branch-name {
- max-width: 195px;
- }
+ .pipeline-info,
+ .pipeline-commit,
+ .pipeline-actions,
+ .pipeline-stages {
+ width: 20%;
}
}
}
@@ -106,7 +111,7 @@
.branch-name {
font-weight: bold;
- max-width: 150px;
+ max-width: 120px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
@@ -132,7 +137,7 @@
.commit-title {
margin-top: 4px;
- max-width: 300px;
+ max-width: 225px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@@ -192,10 +197,6 @@
border-bottom: 2px solid $border-color;
}
}
-
- a {
- display: block;
- }
}
}
@@ -462,6 +463,25 @@
white-space: normal;
color: $gl-text-color-light;
+ .dropdown-menu-toggle {
+ background-color: transparent;
+ border: none;
+ padding: 0;
+ color: $gl-text-color-light;
+
+ &:focus {
+ outline: none;
+ }
+
+ &:hover {
+ color: $gl-text-color;
+
+ .dropdown-counter-badge {
+ color: $gl-text-color;
+ }
+ }
+ }
+
> .build-content {
display: inline-block;
padding: 8px 10px 9px;
@@ -527,7 +547,7 @@
content: '';
position: absolute;
top: 48%;
- right: -49px;
+ right: -48px;
border-top: 2px solid $border-color;
width: 48px;
height: 1px;
@@ -574,156 +594,280 @@
}
}
}
+}
- .ci-status-text {
- max-width: 110px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- vertical-align: bottom;
+.dropdown-counter-badge {
+ float: right;
+ color: $border-color;
+ font-weight: 100;
+ font-size: 15px;
+ margin-right: 2px;
+}
+
+.grouped-pipeline-dropdown {
+ padding: 0;
+ width: 191px;
+ left: auto;
+ right: -195px;
+ top: -4px;
+ box-shadow: 0 1px 5px $black-transparent;
+
+ a {
display: inline-block;
- position: relative;
- font-weight: 100;
+
+ &:hover {
+ background-color: $stage-hover-bg;
+ }
}
- .dropdown-menu-toggle {
- background-color: transparent;
- border: none;
- padding: 0;
- color: $gl-text-color-light;
- white-space: normal;
- overflow: visible;
+ ul {
+ max-height: 245px;
+ overflow: auto;
+ margin: 5px 0;
+
+ li {
+ padding-top: 2px;
+ margin: 0 5px;
+ padding-left: 0;
+ padding-bottom: 0;
+ margin-bottom: 0;
+ line-height: 1.2;
+ }
+ }
+}
+
+.ci-status-text {
+ max-width: 110px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ vertical-align: bottom;
+ display: inline-block;
+ position: relative;
+ font-weight: 100;
+}
+
+// Action Icons
+.ci-action-icon-container .ci-action-icon-wrapper {
+ i {
+ color: $border-color;
+ border-radius: 100%;
+ border: 1px solid $border-color;
+ padding: 5px 6px;
+ font-size: 13px;
+ background: $white-light;
+ height: 30px;
+ width: 30px;
- &:focus {
- outline: none;
+ &::before {
+ position: relative;
+ top: 3px;
+ left: 3px;
}
&:hover {
color: $gl-text-color;
+ background-color: $stage-hover-bg;
+ border: 1px solid $stage-hover-bg;
+ }
+ }
- .dropdown-counter-badge {
- color: $gl-text-color;
+ .ci-play-icon {
+ padding: 5px 5px 5px 7px;
+ }
+}
+
+.dropdown-build {
+ color: $gl-text-color-light;
+
+ .ci-action-icon-container {
+ padding: 0;
+ font-size: 11px;
+ float: right;
+ margin-top: 4px;
+ display: inline-block;
+ position: relative;
+
+ i {
+ font-size: 11px;
+ margin-top: 0;
+ }
+ }
+
+ &:hover {
+ background-color: $stage-hover-bg;
+ border-radius: 3px;
+ color: $gl-text-color;
+ }
+
+ .ci-action-icon-container {
+ i {
+ width: 25px;
+ height: 25px;
+
+ &::before {
+ top: 1px;
+ left: 1px;
}
}
}
- .dropdown-counter-badge {
- float: right;
- clear: right;
- color: $border-color;
- font-weight: 100;
- font-size: 15px;
- margin-right: 2px;
+ .stage {
+ max-width: 100px;
+ width: 100px;
}
- .grouped-pipeline-dropdown {
+ .ci-status-icon svg {
+ height: 18px;
+ width: 18px;
+ }
+
+ .ci-status-text {
+ max-width: 95px;
+ }
+}
+
+/**
+ * Builds dropdown in mini pipeline
+ */
+.mini-pipeline-graph {
+ .builds-dropdown {
+ background-color: transparent;
+ border: none;
padding: 0;
- width: 191px;
- left: auto;
- right: -195px;
- top: -4px;
- box-shadow: 0 1px 5px $black-transparent;
+ color: $gl-text-color-light;
+ border: none;
+ margin: 0;
+ }
+
+ .builds-dropdown-loading {
+ margin: 10px auto;
+ width: 18px;
+ }
+
+ .grouped-pipeline-dropdown {
+ right: -172px;
+ top: 23px;
+ min-height: 50px;
a {
- display: inline-block;
+ color: $gl-text-color-light;
+ }
+ }
- &:hover {
- background-color: $stage-hover-bg;
- }
+ .arrow-up {
+ &::before,
+ &::after {
+ content: '';
+ display: inline-block;
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+ top: -6px;
+ left: 2px;
+ border-width: 0 5px 6px;
}
- ul {
- max-height: 245px;
- overflow: auto;
- margin: 5px 0;
-
- li {
- margin: 0 5px;
- padding-left: 0;
- padding-bottom: 0;
- margin-bottom: 0;
- line-height: 1.2;
- }
+ &::before {
+ border-width: 0 5px 5px;
+ border-bottom-color: $border-color;
}
- .dropdown-build {
- color: $gl-text-color-light;
+ &::after {
+ margin-top: 1px;
+ border-bottom-color: $white-light;
+ }
+ }
+}
- .build-content {
- width: 100%;
- }
+/**
+ * Icons in mini pipeline graph
+ */
+.mini-pipeline-graph-icon-container .ci-status-icon {
+ display: inline-block;
+ border: 1px solid;
+ border-radius: 20px;
+ margin-right: 1px;
+ width: 20px;
+ height: 20px;
+ position: relative;
+ z-index: 2;
+ transition: all 0.2s cubic-bezier(0.25, 0, 1, 1);
- .ci-action-icon-container {
- font-size: 11px;
- position: absolute;
- right: 4px;
+ svg {
+ top: -1px;
+ }
+}
- i {
- width: 25px;
- height: 25px;
- font-size: 11px;
- margin-top: 0;
+.builds-dropdown {
+ &:focus {
+ outline: none;
+ margin-right: -8px;
- &::before {
- top: 1px;
- left: 1px;
- }
- }
- }
+ .ci-status-icon {
+ width: 28px;
+ padding: 0 8px 0 0;
+ transition: width 0.2s cubic-bezier(0.25, 0, 1, 1);
- &:hover {
- background-color: $stage-hover-bg;
- border-radius: 3px;
- color: $gl-text-color;
+ + .dropdown-caret {
+ display: inline-block;
}
+ }
+ }
- .stage {
- max-width: 100px;
- width: 100px;
- }
+ &:focus,
+ &:active {
+ .ci-status-icon-success {
+ background-color: rgba($gl-success, .1);
+ }
- .ci-status-icon svg {
- height: 18px;
- width: 18px;
- }
+ .ci-status-icon-failed {
+ background-color: rgba($gl-danger, .1);
+ }
- .ci-status-text {
- max-width: 95px;
- padding-bottom: 3px;
- position: relative;
- top: 3px;
- }
+ .ci-status-icon-pending,
+ .ci-status-icon-success_with_warnings {
+ background-color: rgba($gl-warning, .1);
}
- }
-}
-// Action Icons
-.ci-action-icon-container .ci-action-icon-wrapper {
- i {
- color: $border-color;
- border-radius: 100%;
- border: 1px solid $border-color;
- padding: 5px 6px;
- font-size: 13px;
- background: $white-light;
- height: 30px;
- width: 30px;
+ .ci-status-icon-running {
+ background-color: rgba($blue-normal, .1);
+ }
- &::before {
- position: relative;
- top: 3px;
- left: 3px;
+ .ci-status-icon-canceled,
+ .ci-status-icon-disabled,
+ .ci-status-icon-not-found {
+ background-color: rgba($gl-gray, .1);
}
- &:hover {
- color: $gl-text-color;
- background-color: $stage-hover-bg;
- border: 1px solid $stage-hover-bg;
+ .ci-status-icon-created,
+ .ci-status-icon-skipped {
+ background-color: rgba($gray-darkest, .1);
}
}
- .ci-play-icon {
- padding: 5px 5px 5px 7px;
+ .mini-pipeline-graph-icon-container {
+ .ci-status-icon:hover,
+ .ci-status-icon:focus {
+ width: 28px;
+ padding: 0 8px 0 0;
+
+ + .dropdown-caret {
+ display: inline-block;
+ }
+ }
+
+ .dropdown-caret {
+ font-size: 11px;
+ position: relative;
+ top: 3px;
+ left: -11px;
+ margin-right: -6px;
+ display: none;
+ z-index: 2;
+ }
}
}
View Lorry Controller Status