formique-css - npm Package Compare versions

Comparing version 1.0.11 to 1.0.12

formique-css.css

@@ -6,2 +6,7 @@ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');
 /* ==================== */
+
+:root {
+    --formique-border-radius: 6px;
+    --formique-padding: 2rem;
+}
 /*
@@ -79,5 +84,22 @@ :root {
 
+/* Fieldset General Styling */
+.formique fieldset {
+    border: 1px solid var(--formique-input-border);
+    border-radius: var(--formique-border-radius);
+    padding: 1rem;
+    margin-bottom: 1.5rem;
+    background-color: var(--formique-base-bg);
+    transition: all 0.3s ease;
+}
+
+.formique fieldset legend {
+    font-weight: 600;
+    color: var(--formique-base-label);
+    font-size: 1rem;
+    padding: 0 0.5rem;
+}
+
 /* Radio Group */
 .formique .radio-group {
-    margin-bottom: 1.5rem;
+    /* Styles are now handled by the general fieldset or input-block if used outside fieldset */
 }
@@ -104,2 +126,3 @@
     accent-color: var(--formique-focus-color);
+    cursor: pointer;
 }
@@ -109,3 +132,3 @@
 .formique .checkbox-group {
-    margin-bottom: 1.5rem;
+    /* Styles are now handled by the general fieldset or input-block if used outside fieldset */
 }
@@ -132,5 +155,6 @@
     accent-color: var(--formique-focus-color);
+    cursor: pointer;
 }
 
-/* Select */
+/* Select (Dropdowns) */
 .formique .form-select {
@@ -148,3 +172,3 @@ margin-bottom: 1.5rem;
 
-.formique .form-select .form-select-input {
+.formique .form-select .form-input { /* Changed from .form-select-input to .form-input */
     width: 100%;
@@ -159,5 +183,14 @@ padding: 0.75rem;
     transition: all 0.3s ease;
+    /* Custom arrow for select element */
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22%23'+encodeURIComponent(var(--formique-base-text)).substring(1)+'%22%20d%3D%22M208.5%2084.5l-80%2080a12%2012%200%2001-17%200l-80-80a12%2012%200%200117-17L128%20139l71.5-71.5a12%2012%200%200117%2017z%22%2F%3E%3C%2Fsvg%3E');
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 1rem;
+    cursor: pointer;
 }
 
-.formique .form-select .form-select-input:focus {
+.formique .form-select .form-input:focus { /* Changed from .form-select-input to .form-input */
     outline: none;
@@ -168,2 +201,9 @@ border-color: var(--formique-focus-color);
 
+/* Multiple Selects */
+.formique .form-select .form-input[multiple] {
+    min-height: 100px; /* Adjust as needed */
+    padding: 0.5rem;
+    background-image: none; /* Remove custom arrow for multiselect */
+}
+
 /* Submit Button */
@@ -403,3 +443,2 @@ .formique .form-submit-btn {
 
-
 /* Spinner Container */
@@ -485,2 +524,2 @@ #formiqueSpinner {
     to { opacity: 1; transform: translateY(0); }
-}
+}

package.json

 {
   "name": "formique-css",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Formique JS form builder CSS styles",
@@ -5,0 +5,0 @@ "main": "formique-css.css",

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Improved metrics

Total package byte prevSize

44108

3.86%

Lines of code

457

8.55%

Number of medium supply chain risk alerts

0

-100%

No dependency changes