SLVUU-111: Customise scrollbar styling for 'My Layouts' list

ScottLogic · Dec 5, 2023 · d8f6a1f · d8f6a1f
1 parent 6f33d21
commit d8f6a1f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.css b/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.css
@@ -5,6 +5,28 @@
     flex-direction: column;
     height: 100%;
     overflow: hidden;
+    padding-right: 6px;
+
+    /* Works on Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: #D9D9D9 transparent;
+
+    /* compatible with Chrome, Edge, and Safari */
+    ::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: transparent;
+        margin-top: 15px;
+        margin-bottom: 15px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        border-radius: 4px;
+        background: #D9D9D9;
+    }
 }
 
 .vuuLayoutList-header {
@@ -14,7 +36,7 @@
     letter-spacing: 0.48px;
     text-transform: uppercase;
     display: flex;
-    padding: 16px 0px;
+    padding: 16px 0;
     border-bottom: 1px solid rgba(119, 124, 148, 0.10);
     line-height: 200%;
 }
@@ -23,16 +45,23 @@
     display: flex;
     padding-top: 24px;
     color: var(--light-text-secondary, #606477);
+    font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
+    font-family: Nunito Sans;
+    font-size: 12px;
+    font-style: normal;
     font-weight: 700;
+    line-height: 24px; /* 200% */
     letter-spacing: 0.48px;
-    line-height: 200%;
+    text-transform: uppercase;
 }
 
 .vuuLayoutList-layoutContainer {
     display: flex;
     align-items: center;
+    width: 90%;
+    height: auto;
     gap: 8px;
-    padding: 8px 0px;
+    padding: 8px 0;
     flex: 1 1 auto;
     cursor: pointer;
 }

diff --git a/vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.css b/vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.css
@@ -16,7 +16,7 @@
 
     --menu-level-2-width: 0px;
 
-    box-shadow: 3px 4px 4px 0px rgba(0, 0, 0, 0.15);
+    box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);
     display: flex;
     height: calc(100% - 4px);
     margin-bottom: 4px;
@@ -165,12 +165,12 @@
 
 .vuuLeftNav-drawer {
     display: flex;
-    padding: 40px 32px 0px 24px;
+    padding: 0 0 0 24px;
     flex-direction: column;
     align-items: flex-start;
     flex-shrink: 0;
     align-self: stretch;
     background: #FFF;
-    box-shadow: 3px 4px 4px 0px rgba(0, 0, 0, 0.15);
+    box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);
     height: 100%
 }