From 2cf6e49e289cfec68c25a8bbc00257f09a98119b Mon Sep 17 00:00:00 2001
From: Anjith Paul <65152866+AnjithPaul@users.noreply.github.com>
Date: Sun, 31 Oct 2021 16:25:26 +0530
Subject: Added improvements for displaying service name under service icon
 (#2169)

* move notification badge to top of service icon
* Change horizontal sidebar height programmatically
* Fix tab item style in vertical and horizontal style sidebar
* Reformat code and remove magic numbers

Co-authored-by: Johan K Mathew <johankmathew@gmail.com>
---
 src/styles/vertical.scss | 33 +++++++++++++++++++++++++++------
 1 file changed, 27 insertions(+), 6 deletions(-)

(limited to 'src/styles/vertical.scss')

diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss
index 426032bf6..083f98c3d 100644
--- a/src/styles/vertical.scss
+++ b/src/styles/vertical.scss
@@ -1,6 +1,8 @@
 @import './config.scss';
 
-$sidebar-width: 64px;
+$sidebar-width: 75px;
+$sidebar-bias: 22px;
+$tabitem-bias: 30px;
 
 .sidebar {
   width: 100vw;
@@ -10,6 +12,7 @@ $sidebar-width: 64px;
   top: 0;
   right: 0;
   padding-bottom: 0px;
+  overflow: hidden !important;
 
   &::after {
     top: -10px;
@@ -30,17 +33,32 @@ $sidebar-width: 64px;
     .tab-item {
       
       &.is-active {
-        border-left-width: 0px;
+        border-left-width: 0px !important;
         border-top-width: 4px;
         border-top-style: solid;
-        padding-left: 4px;
+        overflow: hidden;
+        height: $sidebar-width + 4;
       }
 
       &:not(.is-active) {
         padding-top: 4px;
       }
+
+      &.is-label-enabled{
+        min-width: 70px;
+        max-width: 140px;
+        height: $sidebar-width + 10;
+        width: max-content !important;
+        overflow: hidden;
+        padding-left: 4px;
+        padding-right: 4px;
+        padding-top: 8px;
+      }
     }
   }
+  div{
+    overflow: hidden !important;
+  }
 
   .sidebar__button--workspaces.is-active {
     position: absolute;
@@ -51,7 +69,7 @@ $sidebar-width: 64px;
 }
 
 .app .app__content {
-  padding-top: $sidebar-width;
+  padding-top: $sidebar-width + $sidebar-bias;
 }
 
 .workspaces-drawer {
@@ -86,9 +104,12 @@ $sidebar-width: 64px;
 }
 
 .darwin .sidebar {
-  height: $sidebar-width + 22px;
+  height: $sidebar-width + $sidebar-bias;
 
   .sidebar__button--workspaces.is-active {
-    height: $sidebar-width - 22px;
+    height: $sidebar-width - $sidebar-bias;
+  }
+  .tab-item .is-label-enabled{
+    height: $sidebar-width + $tabitem-bias;
   }
 }
-- 
cgit v1.2.3-70-g09d2