From 909a97a095fd1e7bf0645d4ae4e485a856e940f4 Mon Sep 17 00:00:00 2001
From: Silke Pisulla <pisulla@cosmocode.de>
Date: Fri, 10 Feb 2017 13:33:10 +0100
Subject: [PATCH] positionierung

---
 css/area_nav-metabox.less | 90 +++++++++++++++++++++++----------------
 1 file changed, 54 insertions(+), 36 deletions(-)

diff --git a/css/area_nav-metabox.less b/css/area_nav-metabox.less
index b5a6eca..a9601c9 100755
--- a/css/area_nav-metabox.less
+++ b/css/area_nav-metabox.less
@@ -1,18 +1,25 @@
 #meta-box {
     position: relative;
     z-index: 10;
-    display: inline-block;
-    min-height: 1.95rem;
-    max-width: 40%;
     float: right;
+    display: inline-block;
+    max-width: 40%;
+    margin-top: 2px;
+
+    @media @screen_max-md {
+        position: relative;
+        top: -.5rem;
+        right: auto;
+        float: none;
+        display: block;
+        max-width: 100%;
+    }
 
 
     .tab-container {
-        display: table;
         @media @screen_max-md{
             width: 100%;
         }
-
     }
 
     .box-content {
@@ -23,13 +30,15 @@
 
     ul.meta-tabs {
         list-style: none;
-        background-color: @background_page-header;
-        @media @screen_max-md{
-            background-color: #fff;
-        }
+        line-height: 160%;
+        white-space: nowrap;
         margin: 0;
         padding: 0;
 
+        @media @screen_max-md {
+            background-color: #fff;
+        }
+
         &::before,
         &::after {
             display: table;
@@ -62,11 +71,16 @@
                 padding: .3em 1rem .1em;
                 margin-left: 4px;
                 transition: @transition color, @transition background-color, @transition border-color;
-                @media @screen_max-xs{
-                    padding: .3em .3rem .1em;
+
+                @media @screen_max-md{
+                    padding: .2em .3rem .1em;
                     margin-left: 0;
                 }
 
+                @media @screen_max-xs {
+                    min-height: 30px;
+                }
+
                 * {
                     cursor: pointer;
                     color: inherit;
@@ -102,6 +116,10 @@
                     border-color: @color-link;
                     border-bottom-color: @color-content-bg;
                     color: @color-link;
+
+                    @media @screen_max-md {
+                        top: -1px;
+                    }
                 }
             }
         }
@@ -110,23 +128,30 @@
     .meta-content {
         .tab-pane {
             position: absolute;
-            top: 0;
             display: none;
             width: 100%;
             background-color: @color-content-bg;
             border: 1px solid @color-link;
-            border-top-color: transparent;
             border-radius: 0 0 @fix_border-radius @fix_border-radius;
 
-            &::before {
-                content: '';
-                position: absolute;
+            @media @screen_min-xxlg {
                 top: -1px;
-                left: 0;
-                z-index: 0;
-                width: 100%;
-                height: 1px;
-                background-color: @color-link;
+            }
+
+            @media @screen_max-xxlg {
+                top: 0;
+            }
+
+            @media @screen_max-xlg {
+                top: 0;
+            }
+
+            @media @screen_max-lg {
+                top: -1px;
+            }
+
+            @media @screen_max-md {
+                top: -2px;
             }
 
             &.active {
@@ -183,16 +208,13 @@
                         position: relative;
                     }
 
-                    li {
-                    }
-
                     div.li {
                         position: relative;
                         padding: .15em 0;
 
                         &::before {
                             position: absolute;
-                            top: .3em;
+                            top: .6em;
                             content: "";
                             display: inline-block;
                             width: 4px;
@@ -216,22 +238,18 @@
         margin-top: 20px;
     }
 
-    @media @screen_max-md{
-        max-width: 100%;
-        float: none;
-        display: block;
-        top: -1.1rem;
-        position: relative;
-        right: auto;
-        .tab-container{
+    @media @screen_max-md {
+        .tab-container {
             display: block;
         }
-        ul.meta-tabs{
-            > li > a{
+
+        ul.meta-tabs {
+            > li > a {
                 margin-left: 0;
             }
         }
-        .meta-content{
+
+        .meta-content {
             clear: both;
         }
     }