🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
formique-css
Advanced tools
formique-css - npm Package Compare versions
+1
-1
| { | ||
| "name": "formique-css", | ||
| "version": "1.0.8", | ||
| "version": "1.0.9", | ||
| "description": "Formique JS form builder CSS styles", | ||
@@ -5,0 +5,0 @@ "main": "formique.css", |
-421
| @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap'); | ||
| .dark-theme { | ||
| --background-dark: #0A0A0A; | ||
| --background-light: #1A1A1A; | ||
| --text-light: #E5E5E5; | ||
| --border-color: #333333; | ||
| --input-background: #1C1C1C; | ||
| --input-background-disabled: #2A2A2A; | ||
| --label-color: #999999; | ||
| --radio-checkbox-accent: #4A90E2; | ||
| --button-background: #444444; | ||
| --button-background-hover: #555555; | ||
| --button-text-color: #E5E5E5; | ||
| --input-border-color: #444444; | ||
| --input-border-color-focus: #666666; | ||
| --secondary-text-color: #B3B3B3; | ||
| } | ||
| .light-theme { | ||
| --background-light: #ffffff; | ||
| --background-dark: #1a1a1a; | ||
| --text-light: #333333; | ||
| --border-color: #cccccc; | ||
| --input-background: #ffffff; | ||
| --input-background-disabled: #e0e0e0; | ||
| --label-color: #555555; | ||
| --radio-checkbox-accent: #4A90E2; | ||
| --button-background: #888888; | ||
| --button-background-hover: #666666; | ||
| --button-text-color: #ffffff; | ||
| --input-border-color: #cccccc; | ||
| --input-border-color-focus: #4A90E2; | ||
| --secondary-text-color: #777777; | ||
| } | ||
| .pink-theme { | ||
| --background-dark: red; | ||
| --background-light: #05051e; | ||
| --text-light: #fe8bbb; | ||
| --border-color: pink; | ||
| --input-background: #ffffff; | ||
| --input-background-disabled: #f1f8e9; | ||
| --label-color: #fe8bbb; /* #c2185b; */ | ||
| --radio-checkbox-accent: #c2185b; | ||
| --button-background: #c2185b; /*#e91e63;*/ | ||
| --button-background-hover: #f01ff0; | ||
| --button-text-color: #ffffff; | ||
| --input-border-color: #05051e; | ||
| --input-border-color-focus: #c2185b; | ||
| --secondary-text-color: #880e4f; | ||
| } | ||
| .light-blue-theme { | ||
| --background-light: #f0f8ff; | ||
| --background-dark: #003b5c; | ||
| --text-light: #fff; | ||
| --text-dark: #000; | ||
| --border-color: #0077b6; | ||
| --input-background: #ffffff; | ||
| --input-background-disabled: #d1e4f4; | ||
| --label-color: #4a6572; | ||
| --radio-checkbox-accent: #0091d3; | ||
| --button-background: #1e3a8a; | ||
| --button-background-hover: #0f2a5f; | ||
| --button-text-color: #ffffff; | ||
| --input-border-color: #0077b6; | ||
| --input-border-color-focus: #00aaff; | ||
| --secondary-text-color: #4f5b62; | ||
| --dropdown-option-text-color: #003b5c; | ||
| --legend-text-color: #1d3557; | ||
| } | ||
| .indigo-theme { | ||
| --background-dark: #2c2c2c; | ||
| --background-light: #3d3d3d; | ||
| --text-light: #e0e0e0; | ||
| --border-color: #444; | ||
| --input-background: #333; | ||
| --input-background-disabled: #555; | ||
| --label-color: #7986cb; | ||
| --radio-checkbox-accent: #3f51b5; | ||
| --button-background: #3f51b5; | ||
| --button-background-hover: #303f9f; | ||
| --button-text-color: #ffffff; | ||
| --input-border-color: #3f51b5; | ||
| --input-border-color-focus: #303f9f; | ||
| --secondary-text-color: #b3b3b3; | ||
| } | ||
| .dark-blue-theme { | ||
| --background-dark: #0a0a0a; | ||
| --background-light: #1a1a1a; | ||
| --text-light: #e0e0e0; | ||
| --border-color: #333; | ||
| --input-background: #222; | ||
| --input-background-disabled: #444; | ||
| --label-color: #81d4fa; | ||
| --radio-checkbox-accent: #2196f3; | ||
| --button-background: #2196f3; | ||
| --button-background-hover: #1976d2; | ||
| --button-text-color: #ffffff; | ||
| --input-border-color: #2196f3; | ||
| --input-border-color-focus: #1976d2; | ||
| --secondary-text-color: #b3b3b3; | ||
| } | ||
| .dark-orange-theme { | ||
| --background-dark: #121212; | ||
| --background-light: #1e1e1e; | ||
| --text-light: #e0e0e0; | ||
| --border-color: #333; | ||
| --input-background: #333; | ||
| --input-background-disabled: #444; | ||
| --label-color: #f96743; | ||
| --radio-checkbox-accent: #f96743; | ||
| --button-background: #f96743; | ||
| --button-background-hover: #f24e2e; | ||
| --button-text-color: #ffffff; | ||
| --input-border-color: #f96743; | ||
| --input-border-color-focus: #f24e2e; | ||
| --secondary-text-color: #b3b3b3; | ||
| } | ||
| .green-theme { | ||
| --background-dark: #001700; | ||
| --background-light: #011f01; | ||
| --text-light: #e0e0e0; | ||
| --border-color: #333; | ||
| --input-background: #333; | ||
| --input-background-disabled: #444; | ||
| --label-color: #4caf50; | ||
| --radio-checkbox-accent: #4caf50; | ||
| --button-background: #4caf50; | ||
| --button-background-hover: #388e3c; | ||
| --button-text-color: #ffffff; | ||
| --input-border-color: #4caf50; | ||
| --input-border-color-focus: #388e3c; | ||
| --secondary-text-color: #b3b3b3; | ||
| } | ||
| .purple-theme { | ||
| --background-dark: #121212; | ||
| --background-light: #f3e5f5; | ||
| --text-light: #4a148c; | ||
| --border-color: #333; | ||
| --input-background: #ffffff; | ||
| --input-background-disabled: #f1f8e9; | ||
| --label-color: #9c27b0; | ||
| --radio-checkbox-accent: #9c27b0; | ||
| --button-background: #9c27b0; | ||
| --button-background-hover: #7b1fa2; | ||
| --button-text-color: #ffffff; | ||
| --input-border-color: #9c27b0; | ||
| --input-border-color-focus: #7b1fa2; | ||
| --secondary-text-color: #880e4f; | ||
| } | ||
| .midnight-blush-theme { | ||
| --background-light: #05051e; | ||
| --background-dark: #05051e; | ||
| --text-light: #ffbd7a; | ||
| --text-dark: #ffffff; | ||
| --border-color: #ffbd7a; /* #9e7aff;*/ | ||
| --input-background: #ffffff; | ||
| --input-background-disabled: #d9d9d9; | ||
| --label-color: #9e7aff; | ||
| --radio-checkbox-accent: #fe8bbb; | ||
| --button-background: #ffbd7a; | ||
| --button-background-hover: #9e7aff; /*#fe8bbb*/; | ||
| --button-text-color: #05051e; | ||
| --input-border-color: #9e7aff; | ||
| --input-border-color-focus: #fe8bbb; | ||
| --secondary-text-color: #ffbd7a; | ||
| --dropdown-option-text-color: #05051e; | ||
| --legend-text-color: #9e7aff; | ||
| } | ||
| /* Formique Container */ | ||
| .formique { | ||
| max-width: 600px; | ||
| margin: auto; | ||
| padding: 1rem; | ||
| background: var(--background-light); | ||
| border-radius: 8px; | ||
| color: var(--text-light); | ||
| /*font-family: 'Montserrat', sans-serif;*/ | ||
| font-family: 'Lato', sans-serif; | ||
| margin-bottom: 200px; | ||
| border: 1px solid var(--border-color); | ||
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); | ||
| } | ||
| /* Input Block Styling */ | ||
| .formique .input-block { | ||
| margin-bottom: 1rem; | ||
| position: relative; | ||
| } | ||
| .formique .input-block label { | ||
| display: block; | ||
| margin-bottom: 0.5rem; | ||
| color: var(--label-color); | ||
| } | ||
| .formique .input-block .form-input, | ||
| .formique .input-block .form-control { | ||
| width: 100%; | ||
| padding: 0.75rem 1rem 0.75rem 2.5rem; | ||
| border: none; | ||
| border-bottom: 1px solid var(--border-color); | ||
| border-radius: 0; | ||
| background-color: var(--background-light); | ||
| color: var(--text-light); | ||
| box-sizing: border-box; | ||
| font-size: 1rem; | ||
| } | ||
| .formique .input-block .form-input:focus { | ||
| outline: none; | ||
| border-bottom: 1px solid var(--button-background); | ||
| } | ||
| .formique .input-block .form-input-icon { | ||
| position: absolute; | ||
| left: 1rem; | ||
| top: 50%; | ||
| transform: translateY(-50%); | ||
| color: var(--label-color); | ||
| } | ||
| /* Input Disabled */ | ||
| .formique .input-block .form-input:disabled { | ||
| background-color: var(--input-background-disabled); | ||
| cursor: not-allowed; | ||
| border-bottom: 1px solid var(--label-color); | ||
| } | ||
| /* Fieldset Styling for Radio, Checkbox, and Select Groups */ | ||
| .formique .radio-group, | ||
| .formique .checkbox-group, | ||
| .formique .form-select { | ||
| margin-bottom: 1rem; | ||
| padding: 1rem 0; | ||
| border-radius: 8px; | ||
| background-color: transparent; | ||
| border: 1px solid var(--border-color); | ||
| } | ||
| /* Radio and Checkbox Group Styling */ | ||
| .formique .radio-group legend, | ||
| .formique .checkbox-group legend { | ||
| margin-bottom: 0.5rem; | ||
| font-weight: bold; | ||
| color: var(--label-color); | ||
| } | ||
| .formique .radio-group div, | ||
| .formique .checkbox-group div { | ||
| margin-bottom: 0.5rem; | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
| .formique .radio-group .form-radio-input, | ||
| .formique .checkbox-group .form-checkbox-input { | ||
| margin-right: 0.5rem; | ||
| accent-color: var(--radio-checkbox-accent); | ||
| } | ||
| /* Select Styling */ | ||
| .formique .form-select { | ||
| margin-bottom: 1rem; | ||
| padding: 1rem 2rem; | ||
| border-radius: 8px; | ||
| background-color: transparent; | ||
| border: 1px solid var(--border-color); /* Reduced thickness */ | ||
| } | ||
| .formique .form-select legend { | ||
| color: var(--legend-text-color); | ||
| } | ||
| .formique .form-select select option { | ||
| background-color: #000!important; | ||
| } | ||
| /* Label for Select */ | ||
| .formique .form-select label { | ||
| display: block; | ||
| margin-bottom: 0.5rem; | ||
| color: var(--label-color); | ||
| } | ||
| /* The Select Input Styling */ | ||
| .formique .form-select select { | ||
| width: 100%; | ||
| padding: 0.75rem 1rem 0.75rem 2.5rem; | ||
| border: none; | ||
| background-color: transparent; | ||
| color: var(--legend-text-color); | ||
| font-size: 1rem; | ||
| box-sizing: border-box; | ||
| } | ||
| /* Focus Effect for Select */ | ||
| .formique .form-select select:focus { | ||
| outline: none; | ||
| } | ||
| /* Icon for Select, Radio, and Checkbox Inputs */ | ||
| .formique .radio-group .form-radio-input + label, | ||
| .formique .checkbox-group .form-checkbox-input + label { | ||
| margin-left: 0.5rem; | ||
| } | ||
| .formique .radio-group label, | ||
| .formique .checkbox-group label { | ||
| color: var(--label-color); | ||
| font-weight: normal; | ||
| } | ||
| .formique .form-select .form-select-icon { | ||
| position: absolute; | ||
| left: 1rem; | ||
| top: 50%; | ||
| transform: translateY(-50%); | ||
| color: var(--label-color); | ||
| } | ||
| .formique .radio-group div, | ||
| .formique .checkbox-group div { | ||
| padding-left: 2.5rem; | ||
| } | ||
| .formique .form-submit-btn { | ||
| padding: 0.75rem 1.5rem; | ||
| border: 1px solid var(--background-light); | ||
| border-radius: 4px; | ||
| background-color: var(--button-background); | ||
| color: var(--button-text-color); | ||
| font-size: 1rem; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s; | ||
| } | ||
| .formique .form-submit-btn:hover { | ||
| background-color: var(--button-background-hover); | ||
| color: var(--button-text-color); | ||
| } | ||
| /* Default message container styling */ | ||
| .success-message { | ||
| background-color: var(--background-light); | ||
| color: var(--label-color); | ||
| padding: 20px; | ||
| border-radius: 8px; | ||
| font-size: 16px; | ||
| text-align: center; | ||
| margin: 20px 0; | ||
| opacity: 0; | ||
| animation: fadeIn 1s forwards; | ||
| } | ||
| .error-message { | ||
| background-color: var(--background-light); | ||
| color: #f2230c; | ||
| padding: 20px; | ||
| border-radius: 8px; | ||
| font-size: 16px; | ||
| text-align: center; | ||
| margin: 20px 0; | ||
| opacity: 0; | ||
| animation: fadeIn 1s forwards; | ||
| } | ||
| .message-container { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| position: relative; | ||
| z-index: 10; | ||
| margin-bottom: 20px; | ||
| border: 1px solid var(--border-color); | ||
| text-align: center; | ||
| } | ||
| @keyframes fadeIn { | ||
| 0% { | ||
| opacity: 0; | ||
| transform: translateY(10px); | ||
| } | ||
| 100% { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| } | ||
| } |
New alerts
Empty package
Supply chain riskPackage does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.
Major refactor
Supply chain riskPackage 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.
Worsened metrics
- Total package byte prevSize
29628
-25.89%- Number of package files
2
-33.33%- Lines of code
0
-100%- Number of medium supply chain risk alerts
2
Infinity%No dependency changes