diff options
author | Jacob Schatz <jschatz@gitlab.com> | 2016-06-16 16:49:27 +0300 |
---|---|---|
committer | Robert Speicher <rspeicher@gmail.com> | 2016-06-16 20:28:06 +0300 |
commit | a143076f0219a92716cff1d191207f9b74525fd2 (patch) | |
tree | 84a18d45f5c7373fbac829c98c4cfe9d4fd2ba44 /app/assets/stylesheets | |
parent | 700a88a876f6c99217ed5263e26f48669e1a06be (diff) |
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)
![logo](/uploads/3743925862fa8e17d2fec426f7e4c853/logo.gif)
cc @jschatz1 @lbennett @dzaporozhets
See merge request !4690
Diffstat (limited to 'app/assets/stylesheets')
-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 |
3 files changed, 32 insertions, 16 deletions
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: */ |