mixins for "num" and li as wrapper for icon-buttons

css/base_mixins.less

@@ -141,6 +141,47 @@
 }
 
 
+/* + + + + +  small icon-buttons (breadcrumb, page-header)  + + + + + */
+.btn-usertools-wrapper(@elem:2em) {
+    display: inline-block;
+    min-height: @elem;
+    min-width: @elem;
+    box-sizing: border-box;
+    color: @color-nav;
+    font-size: .8rem;
+    padding: 0;
+    margin: 0 .2rem 0 .1rem;
+}
+
+.btn-usertools-num () {
+    .num {
+        position: absolute;
+        right: -.4em;
+        top: -.4em;
+        background-color: @color-border;
+        border-radius: 2px;
+        color: @color-nav;
+        font-size: .6rem;
+        font-weight: 400;
+        text-align: center;
+        line-height: 100%;
+        padding: .2em .3em .1em;
+        transition: @transition color, @transition background-color;
+    }
+
+    a {
+        &:hover,
+        &:active,
+        &:focus {
+            .num {
+                background-color: @button_color;
+                color: @button_background;
+            }
+        }
+    }
+}
+
+
 .btn-default-size() {
     height: 1rem;
     width: 1rem;
@@ -178,6 +219,7 @@
     overflow: hidden;
     white-space: nowrap;
     text-indent: -9999px;
+
     &::before{
         text-indent: 0;
         float: right;