react-forminate
Version:
React.js + Typescript package that creates dynamic UI forms based on the JSON schema
2 lines (1 loc) • 8.31 kB
CSS
._container_w0h6v_2{display:flex;flex-direction:column}._label_w0h6v_7{margin-bottom:2px;font-weight:400}._errorPlaceholder_w0h6v_12,._errorMessage_w0h6v_13{min-height:1.3rem;font-size:.7rem;display:block;width:100%;margin:1px 0 2px}._errorMessage_w0h6v_13{color:red;display:inline-block}._description_w0h6v_26{font-size:.7rem;color:#828282;display:inline-block;margin:1px 0 0}._requiredIndicator_w0h6v_33{color:red;padding-left:2px}@keyframes react-loading-skeleton{to{transform:translate(100%)}}.react-loading-skeleton{--base-color: #ebebeb;--highlight-color: #f5f5f5;--animation-duration: 1.5s;--animation-direction: normal;--pseudo-element-display: block;background-color:var(--base-color);width:100%;border-radius:.25rem;display:inline-flex;line-height:1;position:relative;user-select:none;overflow:hidden}.react-loading-skeleton:after{content:" ";display:var(--pseudo-element-display);position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:var( --custom-highlight-background, linear-gradient( 90deg, var(--base-color) 0%, var(--highlight-color) 50%, var(--base-color) 100% ) );transform:translate(-100%);animation-name:react-loading-skeleton;animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-timing-function:ease-in-out;animation-iteration-count:infinite}@media (prefers-reduced-motion){.react-loading-skeleton{--pseudo-element-display: none}}.skeleton-container{width:100%}.skeleton-label{height:10px;width:25%;opacity:.2;margin:10px 0 0}.skeleton-field{height:40px;width:100%;opacity:.5;margin-bottom:0}.skeleton-textarea{height:100px}.skeleton-description{height:6px;width:40%;opacity:.1;margin:0 0 5px}.skeleton-options-container{display:flex}.skeleton-options-container.column{flex-direction:column;gap:8px}.skeleton-options-container.inline{flex-direction:row;flex-wrap:wrap;gap:16px}.skeleton-option-item{display:flex;align-items:center}.skeleton-option-control{height:16px;width:16px;opacity:.5}.skeleton-option-control.radio{border-radius:50%}.skeleton-option-label{height:10px;width:80px;opacity:.2;margin-left:8px}.skeleton-grid-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.skeleton-grid-item{display:flex;flex-direction:column}.skeleton-grid-image{height:120px;width:100%;opacity:.5}.skeleton-grid-title{height:16px;width:80%;opacity:.2;margin-top:8px}.skeleton-grid-subtitle{height:12px;width:60%;opacity:.2;margin-top:4px}.form-content{width:100%}.form-submit-container{margin-top:.2rem}.submit-button-container{display:inline-block}.form-loading-overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:#fffc;z-index:10}.form-loading-spinner .spinner{border:3px solid rgba(0,0,0,.1);border-radius:50%;border-top:3px solid #0366d6;width:30px;height:30px;animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.submit-button{background-color:#0457aa;border:none;color:#fff;padding:8px 16px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;border-radius:8px;cursor:pointer;margin:12px 0;transition:background-color .2s,transform .1s}.submit-button:hover,.submit-button:focus{background-color:#034b94;outline:none;box-shadow:0 0 0 3px #0457aa66}.submit-button:active{background-color:#023b77;transform:scale(.98)}.submit-button:disabled{background-color:#ccc;cursor:not-allowed;opacity:.7}.form-element{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:1rem;line-height:1.5;padding:.5rem .75rem;border:1px solid #ddd;border-radius:4px;background-color:#fff;transition:border-color .3s ease-in-out,box-shadow .3s ease-in-out;width:100%;box-sizing:border-box;margin:0rem 0}.form-element:focus{outline:none;border-color:#646cff;box-shadow:0 0 0 2px #646cff33}.form-element:disabled{background-color:#f5f5f5;cursor:not-allowed}.form-element-error{border-color:#d32f2f}.form-element-error:focus{border-color:#d32f2f;box-shadow:0 0 0 2px #d32f2f33}.form-input{height:2.5rem}.form-input[type=color]{height:3rem;padding:.25rem}.form-input[type=date],.form-input[type=time],.form-input[type=datetime-local],.form-input[type=month],.form-input[type=week]{padding:.5rem}.form-select{height:2.5rem;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;padding-right:2rem}.form-textarea{min-height:6rem;resize:vertical}.form-checkbox-radio{width:1rem;height:1rem;margin-right:.5rem;margin-bottom:0;vertical-align:middle}.radio-container{display:flex;flex-wrap:wrap;gap:8px}.radio-container-inline{flex-direction:row;gap:24px}.radio-container-column{flex-direction:column}.radio-label{display:flex;align-items:center;gap:4px;cursor:pointer;padding:4px 0;transition:opacity .2s}.radio-label:hover{opacity:.8}.radio-input{appearance:none;width:16px;height:16px;border:2px solid #ccc;border-radius:50%;margin:0;position:relative;cursor:pointer;transition:all .2s ease}.radio-input:checked{border-color:#646cff;background-color:#fff}.radio-input:checked:after{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;background-color:#646cff;transform:translate(-50%,-50%)}.radio-input:focus{outline:none;box-shadow:0 0 0 2px #646cff33}.radio-input:disabled{opacity:.5;cursor:not-allowed}.radio-label-text{font-size:14px;color:#333}.multiselect-wrapper{position:relative;width:100%}.multiselect-input-container{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:8px 12px;min-height:40px;cursor:pointer;overflow:hidden}.multiselect-input-container-open{border-color:#06c}.multiselect-selected-tag{background:#e0e0e0;padding:2px 6px;border-radius:4px;display:flex;align-items:center;gap:4px;font-size:.875rem}.multiselect-remove-tag{cursor:pointer;color:#666}.multiselect-remove-tag:hover{color:#333}.multiselect-chevron-icon{margin-left:auto;transition:transform .2s}.multiselect-chevron-icon-open{transform:rotate(180deg)}.multiselect-clear-all{background:none;border:none;color:#666;cursor:pointer;font-size:.8em;margin-left:auto;padding:2px 4px}.multiselect-clear-all:hover{color:#333}.multiselect-dropdown{position:absolute;width:100%;max-height:300px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 4px #0000001a;z-index:1000;margin-top:4px}.multiselect-dropdown-hidden{display:none}.multiselect-search-container{position:sticky;top:0;background:#fff;z-index:1;padding:8px;border-bottom:1px solid #eee}.multiselect-search-input{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;outline:none}.multiselect-search-input:focus{border-color:#06c}.multiselect-option-item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;justify-content:space-between}.multiselect-option-item:hover{background:#f5f5f5}.multiselect-option-selected{background:#f0f7ff;color:#06c}.multiselect-option-focused{background:#f5f5f5}.multiselect-placeholder{color:#999}.grid-view-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}.grid-item-wrapper{border:1px solid #ddd;border-radius:8px;padding:1rem;cursor:pointer;transition:background-color .2s ease;text-align:center}.grid-item-wrapper:hover{background-color:#f9f9f9}.grid-item-wrapper.selected{background-color:#e0f2fe}.grid-view-image{width:100%;height:120px;object-fit:cover;border-radius:6px;margin-bottom:.5rem}.grid-view-pagination{display:flex;justify-content:space-between;align-items:center;margin-top:1rem}.grid-view-button{background-color:#eee;padding:.5rem 1rem;border-radius:4px;font-size:.875rem;cursor:pointer;border:none;transition:opacity .2s}.grid-view-button:disabled{opacity:.4;cursor:not-allowed}.grid-view-loading{grid-column:1 / -1;text-align:center}.grid-item-label{font-weight:600}.grid-item-price{font-size:.875rem;color:#6b7280}