List: Fix list-item disc

Signed-off-by: praveenjuge <praveen@skcript.com>
praveenjuge · Aug 23, 2021 · e475b27 · e475b27
1 parent 254c7cd
commit e475b27
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/docs/content/docs/list.md b/docs/content/docs/list.md
@@ -45,19 +45,19 @@ title: List
 
 <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
   <ul class="list">
-    <li class="list-item flex justify-between">Reddit
+    <li class="list-item justify-between">Reddit
       <button class="btn btn-icon btn-sm btn-light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg></button>
     </li>
-    <li class="list-item flex justify-between">Twitter
+    <li class="list-item justify-between">Twitter
       <button class="btn btn-icon btn-sm btn-light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg></button>
     </li>
-    <li class="list-item flex justify-between">GitHub
+    <li class="list-item justify-between">GitHub
       <button class="btn btn-icon btn-sm btn-light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg></button>
     </li>
-    <li class="list-item flex justify-between">Dribbble
+    <li class="list-item justify-between">Dribbble
       <button class="btn btn-icon btn-sm btn-light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg></button>
     </li>
-    <li class="list-item flex justify-between">Todoist
+    <li class="list-item justify-between">Todoist
       <button class="btn btn-icon btn-sm btn-light"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle></svg></button>
     </li>
   </ul>

diff --git a/src/list.js b/src/list.js
@@ -11,6 +11,7 @@ module.exports = List = () => ({
     borderColor: "rgba(241, 245, 249, var(--tw-border-opacity))",
     borderStyle: "solid",
     borderWidth: "1px",
+    display: "flex",
     alignItems: "flex-start",
     fontWeight: 400,
     fontSize: "0.875rem",
@@ -22,7 +23,8 @@ module.exports = List = () => ({
     paddingRight: "0.75rem",
     position: "relative",
     width: "100%",
-    transitionProperty: "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
+    transitionProperty:
+      "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
     transitionDuration: "150ms",
     marginBottom: "-1px",
@@ -34,9 +36,12 @@ module.exports = List = () => ({
   "a.list-item:focus": {
     outline: "2px solid transparent",
     outlineOffset: "2px",
-    "--tw-ring-offset-shadow": "var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
-    "--tw-ring-shadow": "var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)",
-    boxShadow: "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
+    "--tw-ring-offset-shadow":
+      "var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
+    "--tw-ring-shadow":
+      "var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)",
+    boxShadow:
+      "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
     zIndex: 10,
   },
   "a.list-item": {
@@ -72,9 +77,12 @@ module.exports = List = () => ({
     color: "rgba(100, 116, 139, var(--tw-text-opacity))",
   },
   ".list-disabled:focus, a.list-item.list-disabled:focus": {
-    "--tw-ring-offset-shadow": "var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
-    "--tw-ring-shadow": "var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color)",
-    boxShadow: "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
+    "--tw-ring-offset-shadow":
+      "var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
+    "--tw-ring-shadow":
+      "var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color)",
+    boxShadow:
+      "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
   },
   // Flush
   ".list-flush .list-item": { borderRightWidth: "0px", borderLeftWidth: "0px" },