diff options
author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2017-06-16 15:00:28 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-06-16 15:00:28 +0300 |
commit | 1d448a66d7d25cc30733b11eecfcd6893a445fc1 (patch) | |
tree | 6d2543f77a88bc4692291bf6277744822d25fdda /app/assets/stylesheets/pages/status.scss | |
parent | 2b34f3f20d5a5c8ecdf6e8842892cb2b4ed3c89a (diff) |
Create responsive mobile view for pipelines table
Diffstat (limited to 'app/assets/stylesheets/pages/status.scss')
-rw-r--r-- | app/assets/stylesheets/pages/status.scss | 182 |
1 files changed, 61 insertions, 121 deletions
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index 4ed8617b6a3..67ad1ae60af 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -1,142 +1,82 @@ -.container-fluid { - .ci-status { - padding: 2px 7px 4px; - margin-right: 10px; - border: 1px solid $gray-darker; - white-space: nowrap; - border-radius: 4px; - - &:hover, - &:focus { - text-decoration: none; - } - - svg { - height: 13px; - width: 13px; - position: relative; - top: 2px; - overflow: visible; - } +@mixin status-color($color-light, $color-main, $color-dark) { + color: $color-main; + border-color: $color-main; - &.ci-failed { - color: $red-500; - border-color: $red-500; + &:not(span):hover { + background-color: $color-light; + color: $color-dark; + border-color: $color-dark; - &:not(span):hover { - background-color: $red-50; - color: $red-600; - border-color: $red-600; - - svg { - fill: $red-600; - } - } - - svg { - fill: $red-500; - } + svg { + fill: $color-dark; } + } - &.ci-success { - color: $green-600; - border-color: $green-500; + svg { + fill: $color-main; + } +} - &:not(span):hover { - background-color: $green-50; - color: $green-700; - border-color: $green-600; +.ci-status { + padding: 2px 7px 4px; + border: 1px solid $gray-darker; + white-space: nowrap; + border-radius: 4px; - svg { - fill: $green-600; - } - } + &:hover, + &:focus { + text-decoration: none; + } - svg { - fill: $green-500; - } - } + svg { + height: 13px; + width: 13px; + position: relative; + top: 2px; + overflow: visible; + } - &.ci-canceled, - &.ci-disabled { - color: $gl-text-color; - border-color: $gl-text-color; + &.ci-failed { + @include status-color($red-50, $red-500, $red-600); + } - &:not(span):hover { - background-color: rgba($gl-text-color, .07); - } + &.ci-success { + @include status-color($green-50, $green-500, $green-700); + } - svg { - fill: $gl-text-color; - } - } + &.ci-canceled, + &.ci-disabled, + &.ci-manual { + color: $gl-text-color; + border-color: $gl-text-color; - &.ci-pending, - &.ci-success_with_warnings, - &.ci-failed_with_warnings { - color: $orange-600; - border-color: $orange-500; - - &:not(span):hover { - background-color: $orange-50; - color: $orange-700; - border-color: $orange-600; - - svg { - fill: $orange-600; - } - } - - svg { - fill: $orange-500; - } + &:not(span):hover { + background-color: rgba($gl-text-color, .07); } + } - &.ci-info, - &.ci-running { - color: $blue-500; - border-color: $blue-500; - - &:not(span):hover { - background-color: $blue-50; - color: $blue-600; - border-color: $blue-600; - - svg { - fill: $blue-600; - } - } - - svg { - fill: $blue-500; - } - } + &.ci-pending, + &.ci-failed_with_warnings, + &.ci-success_with_warnings { + @include status-color($orange-50, $orange-500, $orange-700); + } - &.ci-created, - &.ci-skipped { - color: $gl-text-color-secondary; - border-color: $gl-text-color-secondary; + &.ci-info, + &.ci-running { + @include status-color($blue-50, $blue-500, $blue-600); + } - &:not(span):hover { - background-color: rgba($gl-text-color-secondary, .07); - } + &.ci-created, + &.ci-skipped { + color: $gl-text-color-secondary; + border-color: $gl-text-color-secondary; - svg { - fill: $gl-text-color-secondary; - } + &:not(span):hover { + background-color: rgba($gl-text-color-secondary, .07); } - &.ci-manual { - color: $gl-text-color; - border-color: $gl-text-color; - - &:not(span):hover { - background-color: rgba($gl-text-color, .07); - } - - svg { - fill: $gl-text-color; - } + svg { + fill: $gl-text-color-secondary; } } } |