diff options
author | Phil Hughes <me@iamphill.com> | 2017-08-02 18:20:36 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2017-08-02 18:20:36 +0300 |
commit | 88958e5a9cd364ae36f3d2837982cedb9239c3bc (patch) | |
tree | a582f9decd66c94e29be2185aab7d1c5fa54f37a /app/assets/stylesheets/new_sidebar.scss | |
parent | 42aa9311be0245ad4237b8873c957bafda82f33e (diff) | |
parent | 45bfc0922e0351d5bc6a44a9bba8f02850471461 (diff) |
Merge branch '34027-add-icons-to-sidebar' into 'master'
Add icons to project sidebar
Closes #34027 and #35877
See merge request !13204
Diffstat (limited to 'app/assets/stylesheets/new_sidebar.scss')
-rw-r--r-- | app/assets/stylesheets/new_sidebar.scss | 32 |
1 files changed, 29 insertions, 3 deletions
diff --git a/app/assets/stylesheets/new_sidebar.scss b/app/assets/stylesheets/new_sidebar.scss index 54f3e8d882c..2ed6dfbe7c2 100644 --- a/app/assets/stylesheets/new_sidebar.scss +++ b/app/assets/stylesheets/new_sidebar.scss @@ -143,10 +143,19 @@ $new-sidebar-width: 220px; white-space: nowrap; a { - display: block; + display: flex; + align-items: center; padding: 12px 16px; color: $inactive-color; } + + svg { + fill: $inactive-color; + } + } + + .nav-item-name { + flex: 1; } li.active { @@ -156,11 +165,25 @@ $new-sidebar-width: 220px; color: $active-color; font-weight: 700; } + + svg { + fill: $active-color; + } } @media (max-width: $screen-xs-max) { left: (-$new-sidebar-width); } + + .nav-icon-container { + display: flex; + margin-right: 8px; + + svg { + height: 16px; + width: 16px; + } + } } .with-performance-bar .nav-sidebar { @@ -173,7 +196,7 @@ $new-sidebar-width: 220px; > li { a { - padding: 8px 16px 8px 24px; + padding: 8px 16px 8px 50px; &:hover, &:focus { @@ -198,7 +221,6 @@ $new-sidebar-width: 220px; .sidebar-top-level-items { > li { .badge { - float: right; background-color: $inactive-badge-background; color: $inactive-color; } @@ -220,6 +242,10 @@ $new-sidebar-width: 220px; background-color: $hover-background; color: $hover-color; + svg { + fill: $hover-color; + } + .badge { background-color: $indigo-500; color: $hover-color; |