fix: correct spacing issue in the FeatureList component

acid-info · Jul 10, 2023 · 5098463 · 5098463
1 parent a5c4188
commit 5098463
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss
@@ -28,14 +28,7 @@
 }
 
 .mdx-feature-list__feature {
-  padding: 1rem;
   border-top: 1px solid rgb(var(--lsd-border-primary));
-
-  &:nth-child(odd) {
-    .mdx-feature-list__feature-inner {
-      border-right: 1px solid rgb(var(--lsd-border-primary));
-    }
-  }
 }
 
 .mdx-feature-list__feature-title {
@@ -53,15 +46,33 @@
 
 @include utils.responsive('lg', 'up') {
   .mdx-feature-list__feature {
-    &:nth-child(even) {
-      & > div {
-        padding-left: 1rem;
-      }
-    }
+    padding: 1rem;
+    position: relative;
+  }
 
-    &:nth-child(odd) {
-      padding-right: 0;
-      padding-left: 0.5rem;
+  .mdx-feature-list__feature-inner {
+    height: 100%;
+    padding: 0.5rem;
+  }
+
+  .mdx-feature-list__feature-border {
+    top: 1rem;
+    right: 0;
+    width: 1px;
+    height: calc(100% - 2rem);
+    position: absolute;
+    background: rgb(var(--lsd-border-primary));
+  }
+
+  .mdx-feature-list__feature:nth-child(odd) {
+    padding-left: 0;
+  }
+
+  .mdx-feature-list__feature:nth-child(even) {
+    padding-right: 0;
+
+    .mdx-feature-list__feature-border {
+      display: none;
     }
   }
 }

diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx
@@ -58,6 +58,7 @@ export const FeatureList: React.FC<FeatureListProps> = ({
                 {feature.description}
               </Typography>
             </div>
+            <div className="mdx-feature-list__feature-border"></div>
           </div>
         ))}
       </div>