From a1671cb1d079c7b1331d6c50a6d4b75f839eafab Mon Sep 17 00:00:00 2001
From: Silke Pisulla <pisulla@cosmocode.de>
Date: Tue, 10 Jan 2017 09:38:13 +0100
Subject: [PATCH] num in metabox

---
 css/area_nav-metabox.less | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/css/area_nav-metabox.less b/css/area_nav-metabox.less
index 947788e..257b178 100755
--- a/css/area_nav-metabox.less
+++ b/css/area_nav-metabox.less
@@ -41,21 +41,49 @@
                 border-radius: 4px 4px 0 0;
                 color: @color-nav;
                 cursor: pointer;
+                transition: @transition color, @transition background-color, @transition border-color;
+
                 * {
                     cursor: pointer;
                 }
+
                 .prefix {
                     font-size: .78rem;
                     color: @color-nav;
+                    position: relative;
+                    transition: @transition color;
                 }
                 .num {
+                    position: absolute;
+                    right: -.8rem;
+                    top: -.4rem;
+                    background-color: @color-border;
+                    border-radius: 2px;
+                    color: @color-nav;
                     font-size: .56rem;
+                    font-weight: 400;
+                    text-align: center;
+                    line-height: 1;
+                    padding: .2em .2rem .1em;
+                    transition: @transition color, @transition background-color;
+
                 }
-                &:hover, &:focus, &:active {
-                    color: @color-link;
+                &:hover,
+                &:focus,
+                &:active {
                     background-color: @background_page-header;
                     border-color: @color-border;
                     border-bottom-color: transparent;
+                    color: @button_background;
+
+                    .prefix {
+                        color: @button_background;
+                    }
+
+                    .num {
+                        background-color: @button_background;
+                        color: @button_color;
+                    }
                 }
             }
             &.active > a {