diff options
| author | Jacob Schatz <jschatz@gitlab.com> | 2016-06-16 13:49:27 +0000 |
|---|---|---|
| committer | Jacob Schatz <jschatz@gitlab.com> | 2016-06-16 13:49:27 +0000 |
| commit | d9812bae49db3b3af7afe702d7b60d75f05d0fad (patch) | |
| tree | 371df4a9d493b9b9f1d5d8c87907574a3528984c | |
| parent | 0ea170b44d7b286e690df4a880ea75aa07c1e3d9 (diff) | |
| parent | cfbf88f0298aee71e89650dae368800ea7b235d9 (diff) | |
| download | gitlab-ce-d9812bae49db3b3af7afe702d7b60d75f05d0fad.tar.gz | |
Merge branch '18521-tanuki-logo' into 'master'
Lighten each logo path color instead of white
## What does this MR do?
Changes highlight/loading colors of tanuki from white to a lighter version of each path color
## Why was this MR needed?
Since the logo is no longer on the dark sidebar, the highlight color was getting lost against the light gray background
## What are the relevant issue numbers?
Closes #18521
## Screenshots (if relevant)
cc @jschatz1 @lbennett @dzaporozhets
See merge request !4690
| -rw-r--r-- | CHANGELOG | 1 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/header.scss | 32 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/sidebar.scss | 11 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 5 |
4 files changed, 33 insertions, 16 deletions
diff --git a/CHANGELOG b/CHANGELOG index 9b42f6866b4..d035ea2107d 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -108,6 +108,7 @@ v 8.9.0 (unreleased) - Include user relationships when retrieving award_emoji - Various associations are now eager loaded when parsing issue references to reduce the number of queries executed - Set inverse_of for Project/Service association to reduce the number of queries + - Update tanuki logo highlight/loading colors v 8.8.5 - Import GitHub repositories respecting the API rate limit !4166 diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index dca4dbb9f7d..a7bcb456560 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -2,6 +2,17 @@ * Application Header * */ +@mixin tanuki-logo-colors($path-color) { + fill: $path-color; + transition: all 0.8s; + + &:hover, + &.highlight { + fill: lighten($path-color, 25%); + transition: all 0.1s; + } +} + header { transition: padding $sidebar-transition-duration; @@ -191,13 +202,24 @@ header { } } -.tanuki-shape { - transition: all 0.8s; +#tanuki-logo { - &:hover, &.highlight { - fill: rgb(255, 255, 255); - transition: all 0.1s; + #tanuki-left-ear, + #tanuki-right-ear, + #tanuki-nose { + @include tanuki-logo-colors($tanuki-red); + } + + #tanuki-left-eye, + #tanuki-right-eye { + @include tanuki-logo-colors($tanuki-orange); } + + #tanuki-left-cheek, + #tanuki-right-cheek { + @include tanuki-logo-colors($tanuki-yellow); + } + } @media (max-width: $screen-xs-max) { diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 281c0a0e1e9..a0bb3427af0 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -55,17 +55,6 @@ } } - -.tanuki-shape { - transition: all 0.8s; - - &:hover, &.highlight { - fill: rgb(255, 255, 255); - transition: all 0.1s; - } -} - - .nav-sidebar { position: absolute; top: 50px; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index acada1f16a0..148b00ac853 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -156,6 +156,11 @@ $warning-message-border: #f0e2bb; /* header */ $light-grey-header: #faf9f9; +/* tanuki logo colors */ +$tanuki-red: #e24329; +$tanuki-orange: #fc6d26; +$tanuki-yellow: #fca326; + /* * State colors: */ |