/*============================================================== REGAL HMS FRAMEWORK form.css Version : 1.0 ==============================================================*/ /*============================================================== CARD ==============================================================*/ .form-card{ border:none; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.08); margin-bottom:20px; } .form-card .card-header{ background:#fff; font-weight:600; font-size:18px; border-bottom:1px solid #eee; } .form-card .card-body{ padding:25px; } /*============================================================== SECTION ==============================================================*/ .form-section{ font-size:16px; font-weight:600; color:#0d6efd; margin-bottom:20px; padding-bottom:10px; border-bottom:1px solid #dee2e6; } /*============================================================== LABEL ==============================================================*/ .form-label{ font-weight:600; color:#495057; } .required{ color:#dc3545; } /*============================================================== INPUT ==============================================================*/ .form-control, .form-select{ border-radius:8px; min-height:42px; box-shadow:none; transition:.2s; } .form-control:focus, .form-select:focus{ border-color:#0d6efd; box-shadow:0 0 0 .15rem rgba(13,110,253,.20); } /*============================================================== READONLY ==============================================================*/ .form-control[readonly]{ background:#f8f9fa; } /*============================================================== DISABLED ==============================================================*/ .form-control:disabled, .form-select:disabled{ background:#e9ecef; } /*============================================================== TEXTAREA ==============================================================*/ textarea.form-control{ min-height:100px; resize:vertical; } /*============================================================== INPUT GROUP ==============================================================*/ .input-group-text{ background:#f8f9fa; font-weight:600; } /*============================================================== CHECKBOX ==============================================================*/ .form-check-input{ cursor:pointer; } /*============================================================== RADIO ==============================================================*/ .form-check-input{ cursor:pointer; } /*============================================================== SWITCH ==============================================================*/ .form-switch .form-check-input{ width:3em; } /*============================================================== PHOTO ==============================================================*/ .form-photo{ width:160px; height:160px; object-fit:cover; border-radius:10px; border:2px solid #dee2e6; } /*============================================================== PHOTO WRAPPER ==============================================================*/ .photo-wrapper{ text-align:center; } /*============================================================== UPLOAD BUTTON ==============================================================*/ .btn-upload{ margin-top:10px; } /*============================================================== IMAGE PREVIEW ==============================================================*/ .image-preview{ border:1px dashed #ced4da; border-radius:8px; padding:10px; background:#fff; } /*============================================================== PART-1 END ==============================================================*/ /*============================================================== VALIDATION ==============================================================*/ .is-valid{ border-color:#198754 !important; } .is-invalid{ border-color:#dc3545 !important; } .valid-feedback{ display:block; color:#198754; } .invalid-feedback{ display:block; color:#dc3545; } /*============================================================== BUTTONS ==============================================================*/ .form-footer{ padding-top:20px; border-top:1px solid #dee2e6; margin-top:25px; } .btn-save{ min-width:120px; } .btn-update{ min-width:120px; } .btn-reset{ min-width:120px; } .btn-cancel{ min-width:120px; } /*============================================================== LOADER ==============================================================*/ .form-loading{ position:absolute; inset:0; background:rgba(255,255,255,.70); display:flex; justify-content:center; align-items:center; z-index:999; } /*============================================================== GRID ==============================================================*/ .form-row{ margin-bottom:18px; } .form-group{ margin-bottom:18px; } /*============================================================== HELP TEXT ==============================================================*/ .form-text{ font-size:12px; color:#6c757d; } /*============================================================== SECTION BOX ==============================================================*/ .section-box{ border:1px solid #dee2e6; border-radius:10px; padding:20px; margin-bottom:20px; background:#ffffff; } /*============================================================== ACCORDION ==============================================================*/ .accordion-button{ font-weight:600; } .accordion-button:not(.collapsed){ background:#e7f1ff; color:#0d6efd; } /*============================================================== TABS ==============================================================*/ .nav-tabs .nav-link{ font-weight:600; } .nav-tabs .nav-link.active{ color:#0d6efd; } /*============================================================== MODAL ==============================================================*/ .modal-header{ background:#0d6efd; color:#ffffff; } .modal-title{ font-weight:600; } /*============================================================== ALERT ==============================================================*/ .alert{ border-radius:8px; } /*============================================================== BADGES ==============================================================*/ .badge{ font-size:12px; padding:6px 10px; } /*============================================================== PROGRESS ==============================================================*/ .progress{ height:22px; border-radius:10px; } .progress-bar{ font-weight:600; } /*============================================================== TIMELINE ==============================================================*/ .timeline{ border-left:3px solid #0d6efd; margin-left:20px; padding-left:20px; } .timeline-item{ margin-bottom:20px; } /*============================================================== AUDIT CARD ==============================================================*/ .audit-card{ background:#f8f9fa; border:1px solid #dee2e6; border-radius:8px; padding:15px; } /*============================================================== REQUIRED LABEL ==============================================================*/ label.required::after{ content:" *"; color:#dc3545; } /*============================================================== READONLY BACKGROUND ==============================================================*/ .readonly{ background:#f8f9fa !important; } /*============================================================== DISABLED OPACITY ==============================================================*/ .disabled{ opacity:.65; pointer-events:none; } /*============================================================== SPINNER ==============================================================*/ .spinner-border-sm{ width:1rem; height:1rem; } /*============================================================== ANIMATION ==============================================================*/ .fade-in{ animation:fadeIn .30s ease-in-out; } @keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } } /*============================================================== HOVER CARD ==============================================================*/ .form-card:hover{ box-shadow:0 5px 18px rgba(0,0,0,.12); } /*============================================================== PART-2 END ==============================================================*/ /*============================================================== FLOATING LABEL ==============================================================*/ .form-floating>.form-control, .form-floating>.form-select{ height:calc(3.5rem + 2px); } .form-floating>label{ color:#6c757d; } /*============================================================== INPUT ICON ==============================================================*/ .input-icon{ position:relative; } .input-icon i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#6c757d; z-index:10; } .input-icon .form-control{ padding-left:38px; } /*============================================================== SEARCH BOX ==============================================================*/ .form-search{ position:relative; } .form-search i{ position:absolute; left:12px; top:12px; color:#6c757d; } .form-search input{ padding-left:38px; } /*============================================================== SELECT2 ==============================================================*/ .select2-container{ width:100%!important; } .select2-container--bootstrap-5 .select2-selection{ min-height:42px; border-radius:8px; } /*============================================================== DATE INPUT ==============================================================*/ input[type=date]{ cursor:pointer; } input[type=time]{ cursor:pointer; } /*============================================================== FILE INPUT ==============================================================*/ .form-control[type=file]{ padding:8px; } /*============================================================== DROP ZONE ==============================================================*/ .drop-zone{ border:2px dashed #ced4da; border-radius:10px; background:#fafafa; padding:35px; text-align:center; cursor:pointer; transition:.30s; } .drop-zone:hover{ border-color:#0d6efd; background:#eef5ff; } .drop-zone.dragover{ border-color:#198754; background:#e8fff2; } /*============================================================== MULTIPLE IMAGE ==============================================================*/ .multi-preview{ display:flex; gap:10px; flex-wrap:wrap; } .multi-preview img{ width:110px; height:110px; object-fit:cover; border-radius:8px; border:1px solid #dee2e6; } /*============================================================== TABLE INSIDE FORM ==============================================================*/ .form-table{ margin-top:15px; } .form-table td{ vertical-align:middle; } /*============================================================== STICKY FOOTER ==============================================================*/ .form-footer{ position:sticky; bottom:0; background:#fff; z-index:20; } /*============================================================== CURSOR ==============================================================*/ .cursor-pointer{ cursor:pointer; } /*============================================================== WIDTH ==============================================================*/ .w-60{width:60px;} .w-80{width:80px;} .w-100{width:100px;} .w-120{width:120px;} .w-150{width:150px;} .w-200{width:200px;} .w-250{width:250px;} .w-300{width:300px;} /*============================================================== HEIGHT ==============================================================*/ .h-50{height:50px;} .h-100{height:100px;} .h-150{height:150px;} .h-200{height:200px;} /*============================================================== BORDER ==============================================================*/ .border-dashed{ border-style:dashed!important; } .border-radius{ border-radius:10px; } /*============================================================== SHADOW ==============================================================*/ .shadow-light{ box-shadow:0 2px 8px rgba(0,0,0,.08); } .shadow-medium{ box-shadow:0 5px 15px rgba(0,0,0,.12); } /*============================================================== TEXT ==============================================================*/ .text-required{ color:#dc3545; } .text-small{ font-size:12px; } .text-medium{ font-size:14px; } .text-large{ font-size:18px; } /*============================================================== MOBILE ==============================================================*/ @media(max-width:768px){ .form-card .card-body{ padding:15px; } .form-footer{ text-align:center; } .form-footer .btn{ width:100%; margin-bottom:10px; } .form-photo{ width:120px; height:120px; } .section-box{ padding:15px; } .multi-preview{ justify-content:center; } } /*============================================================== PRINT ==============================================================*/ @media print{ .form-footer, .btn, .no-print{ display:none!important; } .form-card{ box-shadow:none; border:1px solid #ddd; } body{ background:#fff; } } /*============================================================== DARK MODE (OPTIONAL) ==============================================================*/ body.dark-mode .form-card{ background:#2c2c2c; color:#fff; } body.dark-mode .form-control, body.dark-mode .form-select{ background:#3b3b3b; color:#fff; border-color:#555; } /*============================================================== FORM.CSS COMPLETED VERSION : 1.0 ==============================================================*/