Improved expandable details styling

idesigncode · Jun 8, 2023 · aa470b7 · aa470b7
1 parent d83d480
commit aa470b7
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/src/storybook.scss b/src/storybook.scss
@@ -104,6 +104,8 @@ body,
   /* Expandable section */
   details {
     &[open] {
+      margin-bottom: 3em;
+
       summary {
         margin-bottom: 1em;
       }
@@ -112,8 +114,14 @@ body,
     summary {
       cursor: pointer;
 
+      &::marker {
+        font-size: 1.5em;
+      }
+
       p {
         display: inline;
+        font-weight: bold;
+        text-decoration: underline;
       }
     }
   }

diff --git a/stories/PropsTable.mdx b/stories/PropsTable.mdx
@@ -50,9 +50,7 @@ For further control, you can also use `props` to override each `required`, `type
 
 <details>
   <summary>
-    <p>
-      <strong>Examples of all prop types</strong>
-    </p>
+    <p>Examples of all prop types</p>
   </summary>
 
 Below is a complete list of example props showing how the `PropsTable` will display them:

diff --git a/stories/Webpack.mdx b/stories/Webpack.mdx
@@ -13,9 +13,7 @@ These can be easily added to `.storybook/main.mjs` with the named export `webpac
 
   <details>
     <summary>
-      <p>
-        <strong>Using `webpackFinal` with custom configuration settings</strong>
-      </p>
+      <p>Using `webpackFinal` with custom configuration settings</p>
     </summary>
 
 You can alternatively use the imported `webpackFinal` async function with your own custom configuration settings: