feat: Tabの不具合修正

tuqulore · Sep 6, 2021 · 38e980d · 38e980d
1 parent 57059fe
commit 38e980d
Showing 1 changed file with 29 additions and 12 deletions.
diff --git a/packages/tailwindcss/tab.js b/packages/tailwindcss/tab.js
@@ -28,6 +28,7 @@ module.exports = plugin.withOptions(
             li: {
               display: "block",
               margin: 0,
+              marginRight: `${theme("spacing.2")}`,
               padding: 0,
               "&::before, &::after": {
                 display: "none",
@@ -39,7 +40,6 @@ module.exports = plugin.withOptions(
                 },
               },
               a: {
-                cursor: "pointer",
                 color: `${theme("colors.primary.700")}`,
                 textDecoration: "none",
                 "border-bottom": `1px solid ${theme("colors.gray.300")}`,
@@ -49,24 +49,29 @@ module.exports = plugin.withOptions(
                 "margin-bottom": "-1px",
                 padding: `${theme("spacing.3")} ${theme("spacing.4")}`,
                 "vertical-align": "top",
-                "&:hover": {
-                  "border-bottom": `1px solid ${theme("colors.gray.900")}`,
-                  color: `${theme("colors.primary.800")}`,
-                },
               },
             },
-            "&-boxed": {
+            "li:not(.is-active)": {
               a: {
-                border: "1px solid transparent",
-                "border-radius": `${theme("borderRadius.md")} ${theme(
-                  "borderRadius.md"
-                )} 0 0`,
+                cursor: "pointer",
                 "&:hover": {
-                  "background-color": `${theme("colors.white")}`,
-                  border: `1px solid ${theme("colors.gray.300")}`,
+                  "border-bottom": `1px solid ${theme("colors.gray.400")}`,
+                  color: `${theme("colors.primary.800")}`,
+                  backgroundColor: `${theme("colors.gray.50")}`,
+                },
+                "&:active": {
+                  backgroundColor: `${theme("colors.gray.100")}`,
                 },
               },
+            },
+            "&-boxed": {
               li: {
+                a: {
+                  border: "1px solid transparent",
+                  "border-radius": `${theme("borderRadius.md")} ${theme(
+                    "borderRadius.md"
+                  )} 0 0`,
+                },
                 "&.is-active": {
                   a: {
                     border: `1px solid ${theme("colors.gray.300")}`,
@@ -76,6 +81,18 @@ module.exports = plugin.withOptions(
                 },
               },
             },
+            "&-boxed li:not(.is-active)": {
+              a: {
+                "&:hover": {
+                  "background-color": `${theme("colors.gray.50")}`,
+                  border: `1px solid ${theme("colors.gray.300")}`,
+                  borderBottom: `1px solid ${theme("colors.white")}`,
+                },
+                "&:active": {
+                  backgroundColor: `${theme("colors.gray.100")}`,
+                },
+              },
+            },
           },
         },
       ]);