formique-css
Advanced tools
+33
-1
@@ -515,2 +515,34 @@ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap'); | ||
| to { opacity: 1; transform: translateY(0); } | ||
| } | ||
| } | ||
| /* --- */ | ||
| /* Specific Styles for Color Input */ | ||
| .formique .input-block .form-color-input { | ||
| /* Restore native appearance */ | ||
| -webkit-appearance: auto; | ||
| -moz-appearance: auto; | ||
| appearance: auto; | ||
| /* Reset properties that typically interfere with native color inputs */ | ||
| padding: 2px; /* Small padding to allow native swatch to show */ | ||
| border: 1px solid var(--formique-input-border); /* Visible border */ | ||
| background-color: var(--formique-base-bg); /* Ensure it has a background */ | ||
| width: 50px; /* A typical width for the color swatch */ | ||
| height: 30px; /* A typical height for the color swatch */ | ||
| cursor: pointer; /* Indicates it's interactive */ | ||
| /* Ensure border-radius and vertical alignment blend with other inputs */ | ||
| border-radius: var(--formique-border-radius); | ||
| vertical-align: middle; /* Aligns with text if label is inline */ | ||
| /* Override any focus border-bottom rules from general .form-input if needed */ | ||
| border-bottom: 1px solid var(--formique-input-border); /* Keep consistent border for focus */ | ||
| } | ||
| .formique .input-block .form-color-input:focus { | ||
| outline: none; /* Remove default browser outline */ | ||
| border-color: var(--formique-focus-color); /* Apply theme focus color */ | ||
| border-bottom-color: var(--formique-focus-color); /* Ensure bottom border matches on focus */ | ||
| box-shadow: 0 0 0 2px rgba(var(--formique-focus-color-rgb, 106, 79, 191), 0.1); /* Optional: subtle shadow */ | ||
| } |
+1
-1
| { | ||
| "name": "formique-css", | ||
| "version": "1.0.12", | ||
| "version": "1.0.13", | ||
| "description": "Formique JS form builder CSS styles", | ||
@@ -5,0 +5,0 @@ "main": "formique-css.css", |
45586
3.35%484
5.91%