Solara

Solara-Kit · Sep 15, 2024 · f04817b · f04817b
1 parent 921dea6
commit f04817b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/solara/lib/core/dashboard/brand/BrandDetailView.js b/solara/lib/core/dashboard/brand/BrandDetailView.js
@@ -247,6 +247,7 @@ class BrandDetailView {
 
         sectionElements.forEach(sectionElement => {
             const newItem = document.createElement('li');
+            newItem.classList.add('index-item');
             newItem.innerHTML = `<a href="#${sectionElement.id}">${sectionElement.dataset.name}</a>`;
             indexElement.appendChild(newItem);
         });

diff --git a/solara/lib/core/dashboard/brand/brand.html b/solara/lib/core/dashboard/brand/brand.html
@@ -58,7 +58,7 @@
             }
 
             .index {
-                margin-left: 20px;
+                margin: 40px;
             }
             .index a {
                 color: #0066cc;
@@ -67,6 +67,19 @@
             .index a:hover {
                 text-decoration: underline;
             }
+            .index-item {
+                list-style: none; /* Remove default list styling */
+                padding: 10px; /* Add some padding */
+                margin: 5px 0; /* Space between items */
+                background-color: white; /* Background color for contrast */
+                border-radius: 5px; /* Rounded corners */
+                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Shadow effect */
+                transition: box-shadow 0.3s; /* Smooth transition for shadow */
+            }
+
+            .index-item:hover {
+                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Darker shadow on hover */
+            }
             .sections {
                 max-width: 1000px;
                 margin: 0 auto;