From 6d8eb69ee8e0981b6ddfb37240c7f88c7c2031a2 Mon Sep 17 00:00:00 2001
From: Robin van Baalen <robin@cattlea.com>
Date: Fri, 1 May 2020 00:05:40 -0400
Subject: [PATCH] add styling for indeterminate checkbox state

---
 docs/pages/index.mdx  | 2 +-
 src/defaultOptions.js | 8 ++++++++
 src/index.js          | 3 +++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/docs/pages/index.mdx b/docs/pages/index.mdx
index 29a7e2d..4c55357 100644
--- a/docs/pages/index.mdx
+++ b/docs/pages/index.mdx
@@ -220,7 +220,7 @@ impose any opinions in that regard. Here we've used flexbox to center the checkb
       </div>
       <div>
         <label class="inline-flex items-center">
-          <input type="checkbox" class="form-checkbox">
+          <input type="checkbox" class="form-checkbox" indeterminate>
           <span class="ml-2">Option 3</span>
         </label>
       </div>
diff --git a/src/defaultOptions.js b/src/defaultOptions.js
index bfb60c9..f287e60 100644
--- a/src/defaultOptions.js
+++ b/src/defaultOptions.js
@@ -130,6 +130,14 @@ module.exports = {
       backgroundPosition: 'center',
       backgroundRepeat: 'no-repeat',
     },
+    '&[indeterminate]': {
+      borderColor: 'transparent',
+      backgroundColor: 'currentColor',
+      backgroundSize: '100% 100%',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      icon: iconColor => `<svg fill="${iconColor}" viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg"><path d="M18,11H6c-1.104,0-2,0.896-2,2s0.896,2,2,2h12c1.104,0,2-0.896,2-2S19.104,11,18,11z"/></svg>`,
+    },
   },
   radio: {
     appearance: 'none',
diff --git a/src/index.js b/src/index.js
index 07ca1ad..8907246 100644
--- a/src/index.js
+++ b/src/index.js
@@ -121,6 +121,9 @@ module.exports = function ({ addUtilities, addComponents, theme, postcss }) {
       return {
         '&:checked': {
           backgroundImage: `url("${svgToDataUri(isFunction(icon) ? icon(iconColor) : icon)}")`
+        },
+        '&[indeterminate]': {
+          backgroundImage: `url("${svgToDataUri(isFunction(icon) ? icon(iconColor) : icon)}")`
         }
       }
     }))