diff options
author | Lukas Eipert <leipert@gitlab.com> | 2018-05-25 16:43:51 +0200 |
---|---|---|
committer | Lukas Eipert <leipert@gitlab.com> | 2018-05-25 16:43:51 +0200 |
commit | 6fb35c843230465de3a554d4d752ee5eecb07166 (patch) | |
tree | 8eac056c1a68090a99527265086777b85205b84e | |
parent | b07771683d611d16d08a6a316e0966bf42cd0c88 (diff) | |
download | gitlab-ce-leipert-move-ee-specific-pipeline-scss-backport.tar.gz |
backport changes from https://gitlab.com/gitlab-org/gitlab-ee/merge_requests/5852leipert-move-ee-specific-pipeline-scss-backport
-rw-r--r-- | app/assets/stylesheets/pages/pipelines.scss | 102 |
1 files changed, 61 insertions, 41 deletions
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 1264d977b2f..cd099b88952 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -1,3 +1,30 @@ +@mixin flat-connector-before($length: 44px) { + &::before { + content: ''; + position: absolute; + top: 48%; + left: -$length; + border-top: 2px solid $border-color; + width: $length; + height: 1px; + } +} + +@mixin build-content($border-radius: 30px) { + display: inline-block; + padding: 8px 10px 9px; + width: 100%; + border: 1px solid $border-color; + border-radius: $border-radius; + background-color: $white-light; + + &:hover { + background-color: $stage-hover-bg; + border: 1px solid $dropdown-toggle-active-border-color; + color: $gl-text-color; + } +} + .pipelines { .stage { max-width: 90px; @@ -357,14 +384,8 @@ &:not(:first-child) { margin-left: 44px; - .left-connector::before { - content: ''; - position: absolute; - top: 48%; - left: -44px; - border-top: 2px solid $border-color; - width: 44px; - height: 1px; + .left-connector { + @include flat-connector-before; } } } @@ -479,12 +500,7 @@ } .build-content { - display: inline-block; - padding: 8px 10px 9px; - width: 100%; - border: 1px solid $border-color; - border-radius: 30px; - background-color: $white-light; + @include build-content(); } a.build-content:hover, @@ -622,8 +638,7 @@ } } -// Dropdown button in mini pipeline graph -button.mini-pipeline-graph-dropdown-toggle { +@mixin mini-pipeline-item() { border-radius: 100px; background-color: $white-light; border-width: 1px; @@ -636,30 +651,6 @@ button.mini-pipeline-graph-dropdown-toggle { 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); @@ -691,6 +682,35 @@ button.mini-pipeline-graph-dropdown-toggle { } } +// 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 @@ -744,7 +764,7 @@ button.mini-pipeline-graph-dropdown-toggle { } } - // 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; } |