yashwant-component
Version:
A componenet library
1 lines • 9.56 kB
Source Map (JSON)
{"version":3,"sources":["Input.module.css"],"names":[],"mappings":"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","file":"index.css","sourcesContent":["\r\n.inputWrapper {\r\n position: relative;\r\n width: 100%;\r\n max-width: 300px; /* Adjust as needed */\r\n}\r\n\r\n.inputContainer1 {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.05rem;\r\n}\r\n\r\n.inputContainer2 {\r\n display: flex;\r\n position: relative;\r\n align-items: center;\r\n border: 2px solid #ccc;\r\n border-radius: 4px;\r\n padding: 0.5rem;\r\n transition: border-color 0.3s, box-shadow 0.3s;\r\n}\r\n\r\n.inputField {\r\n width: 100%;\r\n border: none;\r\n outline: none;\r\n background: transparent;\r\n font-size: 1rem;\r\n}\r\n\r\n.prefix, .suffix {\r\n padding: 0 0.5rem;\r\n}\r\n\r\n.clearButton {\r\n background: #006db5;\r\n cursor: pointer;\r\n color: white;\r\n border: none;\r\n border-radius: 10%;\r\n height: 2rem;\r\n margin-left: 0.5rem;\r\n}\r\n\r\n.label {\r\n margin-bottom: 0.5rem;\r\n}\r\n\r\n.helpText, .characterCount {\r\n font-size: 0.85rem;\r\n color: #666;\r\n}\r\n\r\n.validationMessage {\r\n margin-top: 0.25rem;\r\n}\r\n\r\n/* Improved Floating label styles */\r\n.floating {\r\n position: relative;\r\n}\r\n\r\n.floating .inputField {\r\n padding: 1.25rem 0.5rem 0.5rem;\r\n font-size: 1rem;\r\n}\r\n\r\n.floating .floatingLabel {\r\n position: absolute;\r\n left: 0.5rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n font-size: 1rem;\r\n color: #777;\r\n pointer-events: none;\r\n transition: all 0.2s ease-out;\r\n}\r\n\r\n.floating.focus .floatingLabel,\r\n.floating .inputField:not(:placeholder-shown) ~ .floatingLabel {\r\n top: 0.5rem;\r\n font-size: 0.75rem;\r\n color: #007bff;\r\n transform: translateY(0);\r\n}\r\n\r\n/* State styles */\r\n.inputContainer2.hover {\r\n border-color: #4a4a4a;\r\n}\r\n\r\n.inputContainer2.focus {\r\n border-color: #007bff;\r\n box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);\r\n}\r\n\r\n.inputContainer2.disabled {\r\n background-color: #e9ecef;\r\n pointer-events: none;\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n.inputContainer2.readOnly {\r\n background-color: #f8f9fa;\r\n cursor: not-allowed;\r\n}\r\n\r\n.inputContainer2.error {\r\n border-color: #dc3545;\r\n}\r\n\r\n.inputContainer2.success {\r\n border-color: #1cc143;\r\n}\r\n\r\n.loader {\r\n border: 2px solid #f3f3f3;\r\n border-top: 2px solid #006db5;\r\n border-radius: 50%;\r\n width: 16px;\r\n height: 16px;\r\n animation: spin 1s linear infinite;\r\n display: inline-block;\r\n margin-left: 0.5rem;\r\n}\r\n\r\n@keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n}\r\n\r\n.countryCode {\r\n border: none;\r\n outline: none;\r\n background-color: transparent;\r\n font-size: 1rem;\r\n padding: 0.3rem;\r\n border-right: 2px solid #ccc;\r\n margin-right: 0.5rem;\r\n}\r\n\r\n.countryCode:focus {\r\n border-color: #007bff;\r\n}\r\n\r\n.telephoneInputContainer {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n}\r\n\r\n.telephoneInputContainer input[type=\"tel\"] {\r\n flex: 1;\r\n border: none;\r\n outline: none;\r\n}\r\n\r\n.icon {\r\n display: flex;\r\n align-items: center;\r\n margin-right: 0.5rem;\r\n}\r\n\r\n.darkMode .inputContainer2 {\r\n background-color: #333;\r\n color: #f0f0f0;\r\n border-color: #555;\r\n}\r\n\r\n.darkMode .inputField {\r\n color: #f0f0f0;\r\n}\r\n\r\n.darkMode .prefix,\r\n.darkMode .suffix {\r\n color: #aaa;\r\n}\r\n\r\n.darkMode .label {\r\n color: #f0f0f0;\r\n}\r\n\r\n.darkMode .helpText,\r\n.darkMode .characterCount {\r\n color: #aaa;\r\n}\r\n\r\n.darkMode .clearButton {\r\n background: #0056b3;\r\n}\r\n\r\n.darkMode .floating .floatingLabel {\r\n color: #aaa;\r\n}\r\n\r\n.darkMode .floating.focus .floatingLabel,\r\n.darkMode .floating .inputField:not(:placeholder-shown) ~ .floatingLabel {\r\n color: #4da3ff;\r\n}\r\n\r\n.darkMode .inputContainer2.hover {\r\n border-color: #777;\r\n}\r\n\r\n.darkMode .inputContainer2.focus {\r\n border-color: #4da3ff;\r\n box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.25);\r\n}\r\n\r\n.darkMode .inputContainer2.disabled {\r\n background-color: #444;\r\n}\r\n\r\n.darkMode .inputContainer2.readOnly {\r\n background-color: #3a3a3a;\r\n}\r\n\r\n.darkMode .inputContainer2.error {\r\n border-color: #ff6b6b;\r\n}\r\n\r\n.darkMode .inputContainer2.success {\r\n border-color: #51cf66;\r\n}\r\n\r\n.darkMode .loader {\r\n border: 2px solid #444;\r\n border-top: 2px solid #4da3ff;\r\n}\r\n\r\n.darkMode .countryCode {\r\n border-right-color: #555;\r\n}\r\n\r\n.darkMode .countryCode:focus {\r\n border-color: #4da3ff;\r\n}\r\n\r\n.characterCount {\r\n position: absolute;\r\n right: 0;\r\n bottom: -1.5rem;\r\n font-size: 0.75rem;\r\n color: #666;\r\n}\r\n.darkMode .characterCount {\r\n color: #aaa;\r\n}\r\n\r\n.outlined {\r\n border: 2px solid #ccc;\r\n transition: border-color 0.3s;\r\n}\r\n\r\n.outlined:hover {\r\n border-color: #999;\r\n}\r\n\r\n.outlined.focus {\r\n border-color: #007bff;\r\n}\r\n\r\n.outlined.error {\r\n border-color: #dc3545;\r\n}\r\n\r\n.outlined.success {\r\n border-color: #28a745;\r\n}\r\n\r\n/* Filled Input */\r\n.filled {\r\n background-color: #f0f0f0;\r\n border: none;\r\n border-bottom: 2px solid #ccc;\r\n transition: background-color 0.3s, border-color 0.3s;\r\n}\r\n\r\n.filled:hover {\r\n background-color: #e8e8e8;\r\n}\r\n\r\n.filled.focus {\r\n background-color: #e0e0e0;\r\n border-bottom-color: #007bff;\r\n}\r\n\r\n.filled.error {\r\n border-bottom-color: #dc3545;\r\n}\r\n\r\n.filled.success {\r\n border-bottom-color: #28a745;\r\n}\r\n\r\n/* Underlined Input */\r\n.underlined {\r\n border: none;\r\n border-bottom: 2px solid #ccc;\r\n border-radius: 0;\r\n padding-left: 0;\r\n padding-right: 0;\r\n transition: border-color 0.3s;\r\n}\r\n\r\n.underlined:hover {\r\n border-bottom-color: #999;\r\n}\r\n\r\n.underlined.focus {\r\n border-bottom-color: #007bff;\r\n}\r\n\r\n.underlined.error {\r\n border-bottom-color: #dc3545;\r\n}\r\n\r\n.underlined.success {\r\n border-bottom-color: #28a745;\r\n}\r\n\r\n/* Rounded Input */\r\n.rounded {\r\n border-radius: 20px;\r\n}\r\n\r\n/* Dark Mode Styles */\r\n.darkMode .outlined {\r\n border-color: #555;\r\n}\r\n\r\n.darkMode .outlined:hover {\r\n border-color: #777;\r\n}\r\n\r\n.darkMode .outlined.focus {\r\n border-color: #4da3ff;\r\n}\r\n\r\n.darkMode .filled {\r\n background-color: #444;\r\n border-bottom-color: #555;\r\n}\r\n\r\n.darkMode .filled:hover {\r\n background-color: #4a4a4a;\r\n}\r\n\r\n.darkMode .filled.focus {\r\n background-color: #505050;\r\n border-bottom-color: #4da3ff;\r\n}\r\n\r\n.darkMode .underlined {\r\n border-bottom-color: #555;\r\n}\r\n\r\n.darkMode .underlined:hover {\r\n border-bottom-color: #777;\r\n}\r\n\r\n.darkMode .underlined.focus {\r\n border-bottom-color: #4da3ff;\r\n}\r\n\r\n"]}