From e676f7f61233d5ae09dc9e927b838a602b612199 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Wed, 7 Aug 2024 04:25:17 +0300
Subject: [PATCH] Support disabled state

---
 content/demo/index.md | 69 +++++++++++++++++++++++++++++++++++--------
 sass/_input.scss      | 47 ++++++++++++++++-------------
 2 files changed, 83 insertions(+), 33 deletions(-)

diff --git a/content/demo/index.md b/content/demo/index.md
index 121e620..02363e1 100644
--- a/content/demo/index.md
+++ b/content/demo/index.md
@@ -331,31 +331,76 @@ Alright, this one doesn't simplify anything, it just adds a CRT-like effect arou
 ### Form Input (`<input>`)
 
 ```html
-<input type="checkbox" /><label>Checkbox</label>
+<input type="checkbox" />
+<label>Checkbox</label>
 ```
 
 <ul>
-<li><input type="checkbox" /><label>&nbsp;Milk</label></li>
-<li><input type="checkbox" /><label>&nbsp;Eggs</label></li>
-<li><input type="checkbox" /><label>&nbsp;Flour</label></li>
-<li><input type="checkbox" checked /><label>&nbsp;Coffee</label></li>
-<li><input type="checkbox" disabled /><label>&nbsp;Combustible lemons</label></li>
+  <li>
+    <input type="checkbox" />
+    <label>&nbsp;Milk</label>
+  </li>
+  <li>
+    <input type="checkbox" />
+    <label>&nbsp;Eggs</label>
+  </li>
+  <li>
+    <input type="checkbox" />
+    <label>&nbsp;Flour</label>
+  </li>
+  <li>
+    <input type="checkbox" checked />
+    <label>&nbsp;Coffee</label>
+  </li>
+  <li>
+    <input type="checkbox" disabled />
+    <label>&nbsp;Combustible lemons</label>
+  </li>
 </ul>
 
 With `radio` type:
 
 ```html
-<input type="radio" name="test" /><label>Radio</label>
+<input type="radio" name="test" />
+<label>Radio</label>
 ```
 
 <ul>
-<li><input type="radio" name="test" /><label>&nbsp;Milk</label></li>
-<li><input type="radio" name="test" /><label>&nbsp;Eggs</label></li>
-<li><input type="radio" name="test" /><label>&nbsp;Flour</label></li>
-<li><input type="radio" name="test" checked /><label>&nbsp;Coffee</label></li>
-<li><input type="radio" name="test" disabled /><label>&nbsp;Combustible lemons</label></li>
+  <li>
+    <input type="radio" name="test" />
+    <label>&nbsp;Milk</label>
+  </li>
+  <li>
+    <input type="radio" name="test" />
+    <label>&nbsp;Eggs</label>
+  </li>
+  <li>
+    <input type="radio" name="test" />
+    <label>&nbsp;Flour</label>
+  </li>
+  <li>
+    <input type="radio" name="test" checked />
+    <label>&nbsp;Coffee</label>
+  </li>
+  <li>
+    <input type="radio" name="test" disabled />
+    <label>&nbsp;Combustible lemons</label>
+  </li>
 </ul>
 
+With `color` type:
+
+```html
+<label>Color:</label>
+<input type="color" value="#000000" />
+```
+
+<label for="color">Color:</label>
+<input id="color" type="color" value="#b57edc" />
+
+<label for="color">Disabled:</label>
+<input id="color" type="color" value="#b57edc" disabled />
+
 ### Figure Captions (`<figcaption>`)
 
 ```markdown
diff --git a/sass/_input.scss b/sass/_input.scss
index 115c8b8..99f61bd 100644
--- a/sass/_input.scss
+++ b/sass/_input.scss
@@ -53,7 +53,7 @@ input[type="color"] {
 }
 
 input[type="radio"] {
-    vertical-align: -0.1875em;
+	vertical-align: -0.1875em;
 	border-radius: 50%;
 
 	&::before {
@@ -66,7 +66,7 @@ input[type="radio"] {
 }
 
 input[type="checkbox"] {
-    vertical-align: -0.1875em;
+	vertical-align: -0.1875em;
 	border-radius: calc(var(--rounded-corner-small) / 2);
 
 	&::before {
@@ -85,27 +85,32 @@ input[type="checkbox"] {
 }
 
 input[type="color"] {
-    vertical-align: -0.375em;
-    border: 0.25rem solid var(--fg-muted-2);
-    border-radius: var(--rounded-corner-small);
-    padding: 0;
-    width: 3rem;
-    height: 2rem;
+	vertical-align: -0.375em;
+	border: 0.25rem solid var(--fg-muted-2);
+	border-radius: var(--rounded-corner-small);
+	padding: 0;
+	width: 3rem;
+	height: 2rem;
 
-    &:hover {
-        background-color: var(--fg-muted-2);
-    }
+	&:hover {
+		background-color: var(--fg-muted-2);
+	}
 
-    &::-moz-color-swatch {
-        border: none;
-        border-radius: calc(var(--rounded-corner-small) / 2);
-    }
+	&:disabled {
+		border: 0.25rem solid var(--fg-muted-2);
+		background-color: var(--fg-muted-1);
+	}
 
-    &::-webkit-color-swatch-wrapper {
-        padding: 0;
-    }
+	&::-moz-color-swatch {
+		border: none;
+		border-radius: calc(var(--rounded-corner-small) / 2);
+	}
 
-    &::-webkit-color-swatch {
-        border-radius: calc(var(--rounded-corner-small) / 2);
-    }
+	&::-webkit-color-swatch-wrapper {
+		padding: 0;
+	}
+
+	&::-webkit-color-swatch {
+		border-radius: calc(var(--rounded-corner-small) / 2);
+	}
 }