Add color input (#20)

tbolt · web-flow · commit e570ea7527be · 2024-04-03T19:26:32.000-04:00
* adds color input and related css
diff --git a/bolt.css b/bolt.css
@@ -1,6 +1,6 @@
 /**
  * Bolt.css
- * Version 0.6.0
+ * Version 0.7.0
  * https://github.com/tbolt/boltcss
  *
  * Sections
@@ -430,6 +430,16 @@ input[type="range"] {
   padding: 0;
 }
 
+input[type="color"] {
+  appearance: none;
+  inline-size: 44px;
+  outline-style: none;
+  padding: initial;
+  max-width: initial;
+  height: 2rem;
+  border-radius: 3px;
+}
+
 textarea {
   font-family: inherit;
   font-size: 1em;
diff --git a/bolt.min.css b/bolt.min.css
diff --git a/index.html b/index.html
@@ -408,6 +408,13 @@ <h3 class="demo-header" id="rangedemo-label">range/output</h3>
           <output name="result" for="b">0</output>
         </form>
       </div>
+      
+      <!-- color -->
+      <div>
+        <h3 class="demo-header">color picker</h3>
+        <label for="color-picker">Pick a color</label>
+        <input type="color" id="color-picker" value="#843AB2" />
+      </div>
     </div>
 
     <!-- Footer -->
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "boltcss",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Boltcss classless CSS stylesheet",
   "main": "bolt.css",
   "scripts": {},

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "boltcss",`
`3`		`- "version": "0.6.0",`
	`3`	`+ "version": "0.7.0",`
`4`	`4`	`"description": "Boltcss classless CSS stylesheet",`
`5`	`5`	`"main": "bolt.css",`
`6`	`6`	`"scripts": {},`