Merge branch 'release/2.7.x' into 'master'

Release 2.7.0

See merge request pleroma/pleroma-fe!1928

1 files changed, 29 insertions, 50 deletions

diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 411ca536..4ea54ee3 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -1,7 +1,6 @@
 <template>
   <OptionalRouterLink
     v-slot="{ isActive, href, navigate } = {}"
-    ass="ass"
     :to="routeTo"
   >
     <li
@@ -11,7 +10,7 @@
     >
       <component
         :is="routeTo ? 'a' : 'button'"
-        class="main-link button-unstyled"
+        class="main-link"
         :href="href"
         @click="navigate"
       >
@@ -35,7 +34,7 @@
       <slot />
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge badge-notification"
+        class="badge -notification"
       >
         {{ getters[item.badgeGetter] }}
       </div>
@@ -63,73 +62,53 @@
 <script src="./navigation_entry.js"></script>
 
 <style lang="scss">
-@import "../../variables";
+.NavigationEntry.menu-item {
+  --__line-height: 2.5em;
+  --__horizontal-gap: 0.5em;
+  --__vertical-gap: 0.4em;
 
-.NavigationEntry {
+  padding: 0;
   display: flex;
-  box-sizing: border-box;
   align-items: baseline;
-  height: 3.5em;
-  line-height: 3.5em;
-  padding: 0 1em;
-  width: 100%;
-  color: $fallback--link;
-  color: var(--link, $fallback--link);
 
-  .timelines-chevron {
-    margin-right: 0;
+  &[aria-expanded] {
+    padding-right: var(--__horizontal-gap);
   }
 
   .main-link {
+    line-height: var(--__line-height);
+    box-sizing: border-box;
     flex: 1;
+    padding: var(--__vertical-gap) var(--__horizontal-gap);
   }
 
   .menu-icon {
-    margin-right: 0.8em;
+    line-height: var(--__line-height);
+    padding: 0;
+    width: var(--__line-height);
+    margin-right: var(--__horizontal-gap);
+  }
+
+  .timelines-chevron {
+    line-height: var(--__line-height);
+    padding: 0;
+    width: var(--__line-height);
+    margin-right: 0;
   }
 
   .extra-button {
-    width: 3em;
+    line-height: var(--__line-height);
+    padding: 0;
+    width: var(--__line-height);
     text-align: center;
 
     &:last-child {
-      margin-right: -0.8em;
-    }
-  }
-
-  &:hover {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--link;
-    color: var(--selectedMenuText, $fallback--link);
-
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-
-    .menu-icon {
-      --icon: var(--text, $fallback--icon);
+      margin-right: calc(-1 * var(--__horizontal-gap));
     }
   }
 
-  &.-active {
-    font-weight: bolder;
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--text;
-    color: var(--selectedMenuText, $fallback--text);
-
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-
-    .menu-icon {
-      --icon: var(--text, $fallback--icon);
-    }
-
-    &:hover {
-      text-decoration: underline;
-    }
+  .badge {
+    margin: 0 var(--__horizontal-gap);
   }
 }
 </style>