diff options
Diffstat (limited to 'app/assets/stylesheets/framework/icons.scss')
-rw-r--r-- | app/assets/stylesheets/framework/icons.scss | 72 |
1 files changed, 69 insertions, 3 deletions
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index 0aeb7208c59..ca0240b6a65 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -3,6 +3,17 @@ svg { fill: $green-500; } + + &.interactive { + &:hover { + background: $green-500; + + svg { + --svg-status-bg: #{$green-100}; + box-shadow: 0 0 0 1px $green-500; + } + } + } } .ci-status-icon-error, @@ -10,6 +21,17 @@ svg { fill: $red-500; } + + &.interactive { + &:hover { + background: $red-500; + + svg { + --svg-status-bg: #{$red-100}; + box-shadow: 0 0 0 1px $red-500; + } + } + } } .ci-status-icon-pending, @@ -19,11 +41,33 @@ svg { fill: $orange-500; } + + &.interactive { + &:hover { + background: $orange-500; + + svg { + --svg-status-bg: #{$orange-100}; + box-shadow: 0 0 0 1px $orange-500; + } + } + } } .ci-status-icon-running { svg { - fill: $blue-400; + fill: $blue-500; + } + + &.interactive { + &:hover { + background: $blue-500; + + svg { + --svg-status-bg: #{$blue-100}; + box-shadow: 0 0 0 1px $blue-500; + } + } } } @@ -32,7 +76,18 @@ .ci-status-icon-scheduled, .ci-status-icon-manual { svg { - fill: $gl-text-color; + fill: $gray-900; + } + + &.interactive { + &:hover { + background: $gray-900; + + svg { + --svg-status-bg: #{$gray-100}; + box-shadow: 0 0 0 1px $gray-900; + } + } } } @@ -42,7 +97,18 @@ .ci-status-icon-skipped, .ci-status-icon-notfound { svg { - fill: var(--gray-400, $gray-400); + fill: $gray-500; + } + + &.interactive { + &:hover { + background: $gray-500; + + svg { + --svg-status-bg: #{$gray-100}; + box-shadow: 0 0 0 1px $gray-500; + } + } } } |