List item styling

MuckRock · Apr 11, 2024 · 1636cb5 · 1636cb5
1 parent 4f02ddc
commit 1636cb5
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/src/lib/components/addons/AddOnListItem.svelte b/src/lib/components/addons/AddOnListItem.svelte
@@ -53,14 +53,22 @@
     color: inherit;
     text-decoration: none;
   }
-  .addon-link:hover .container {
-    background-color: var(--menuBg);
-  }
+
   .container {
     display: block;
     min-width: 12rem;
-    padding: 0.5rem;
+    padding: 0.5rem 0.5rem 0.75rem;
     text-align: left;
+    border-top: 1px solid var(--gray-2);
+    background-color: var(--white);
+  }
+
+  .addon-link:first-child .container {
+    border-top: none;
+  }
+
+  .addon-link:hover .container {
+    background-color: var(--blue-1);
   }
 
   .row {
@@ -79,27 +87,29 @@
     display: flex;
     align-items: flex-end;
     gap: 1rem;
-    color: var(--darkgray);
+    color: var(--gray-4);
   }
 
   .description {
     margin: 0 0.5em;
     opacity: 0.6;
     font-size: 0.875em;
     line-height: 1.4;
-    color: var(--darkgray);
+    color: var(--gray-4);
     overflow: hidden;
     -webkit-line-clamp: 4;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     & > * {
       margin-top: 0;
+      font-size: 0.875rem;
     }
   }
 
   .addon-name {
     margin: 0;
     font-weight: 600;
+    font-size: var(--font-l);
   }
 
   .center-self {

diff --git a/src/lib/components/addons/stories/AddOnListItem.stories.svelte b/src/lib/components/addons/stories/AddOnListItem.stories.svelte
@@ -24,9 +24,7 @@
 </script>
 
 <Template let:args>
-  <div class="container">
-    <AddOnListItem {...args} />
-  </div>
+  <AddOnListItem {...args} />
 </Template>
 
 <Story name="Default" {args} />
@@ -44,6 +42,19 @@
     },
   }}
 />
+<Story
+  name="HTML Description"
+  args={{
+    addon: {
+      ...args,
+      name: "SideKick",
+      parameters: {
+        description:
+          "<h1>Heading</h2><p><strong>Lorem ipsum dolor sit amet,</strong> <em>consetetur sadipscing elitr,</em> <a>sed diam nonumy eirmod</a> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>",
+      },
+    },
+  }}
+/>
 <Story
   name="Premium"
   args={{
@@ -53,10 +64,3 @@
     },
   }}
 />
-
-<style>
-  .container {
-    max-width: 32rem;
-    border: 1px solid #eee;
-  }
-</style>