romfast/roa2web-service-auto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6b13ffa18387b944c53252148b00c3c93d22d5fe
roa2web-service-auto/reports-app/frontend/src/assets/css/components/forms.css
Marius Mutu 6b13ffa183 Initial commit: ROA2WEB - FastAPI + Vue.js + Telegram Bot 
Modern ERP Reports Application with microservices architecture

Tech Stack:
- Backend: FastAPI + python-oracledb (Oracle DB integration)
- Frontend: Vue.js 3 + PrimeVue + Vite
- Telegram Bot: python-telegram-bot + SQLite
- Infrastructure: Shared database pool, JWT authentication, SSH tunnel

Features:
- FastAPI backend with async Oracle connection pool
- Vue.js 3 responsive frontend with PrimeVue components
- Telegram bot alternative interface
- Microservices architecture with shared components
- Complete deployment support (Linux Docker + Windows IIS)
- Comprehensive testing (Playwright E2E + pytest)

Repository Structure:
- reports-app/ - Main application (backend, frontend, telegram-bot)
- shared/ - Shared components (database pool, auth, utils)
- deployment/ - Deployment scripts (Linux & Windows)
- docs/ - Project documentation
- security/ - Security scanning and git hooks
2025-10-25 14:55:08 +03:00

460 lines
10 KiB
CSS
Raw Blame History

/* Form Components - ROA2WEB */
/* Base Form Styles */
.form {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.form-row {
display: flex;
gap: var(--space-md);
align-items: end;
}
.form-col {
flex: 1;
}
/* Labels */
.form-label {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text);
margin-bottom: var(--space-xs);
}
.form-label.required::after {
content: ' *';
color: var(--color-error);
}
/* Input Base Styles */
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--text-base);
font-family: inherit;
color: var(--color-text);
background: var(--color-bg);
transition: all var(--transition-fast);
min-height: 44px;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
background: var(--color-bg-muted);
color: var(--color-text-muted);
cursor: not-allowed;
opacity: 0.6;
}
/* Input Variants */
.form-input-sm {
padding: var(--space-xs) var(--space-sm);
font-size: var(--text-sm);
min-height: 36px;
}
.form-input-lg {
padding: var(--space-md) var(--space-lg);
font-size: var(--text-lg);
min-height: 52px;
}
/* Textarea */
.form-textarea {
resize: vertical;
min-height: 100px;
line-height: var(--leading-normal);
}
.form-textarea-sm {
min-height: 80px;
}
.form-textarea-lg {
min-height: 120px;
}
/* Select */
.form-select {
cursor: pointer;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
background-position: right var(--space-sm) center;
background-repeat: no-repeat;
background-size: 16px 16px;
padding-right: var(--space-xl);
appearance: none;
}
/* Input Groups */
.input-group {
display: flex;
align-items: stretch;
width: 100%;
}
.input-group .form-input {
border-radius: 0;
border-right: none;
}
.input-group .form-input:first-child {
border-top-left-radius: var(--radius-md);
border-bottom-left-radius: var(--radius-md);
}
.input-group .form-input:last-child {
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
border-right: 1px solid var(--color-border);
}
.input-group-addon {
display: flex;
align-items: center;
padding: var(--space-sm) var(--space-md);
background: var(--color-bg-secondary);
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
font-size: var(--text-sm);
white-space: nowrap;
}
.input-group-addon:first-child {
border-top-left-radius: var(--radius-md);
border-bottom-left-radius: var(--radius-md);
border-right: none;
}
.input-group-addon:last-child {
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
border-left: none;
}
/* Floating Labels */
.form-floating {
position: relative;
}
.form-floating .form-input,
.form-floating .form-textarea {
padding-top: var(--space-lg);
padding-bottom: var(--space-xs);
}
.form-floating .form-label {
position: absolute;
top: 0;
left: var(--space-md);
padding: var(--space-sm) var(--space-xs);
background: var(--color-bg);
color: var(--color-text-muted);
font-size: var(--text-sm);
transition: all var(--transition-fast);
pointer-events: none;
transform-origin: left center;
z-index: 1;
}
.form-floating .form-input:focus + .form-label,
.form-floating .form-input:not(:placeholder-shown) + .form-label,
.form-floating .form-textarea:focus + .form-label,
.form-floating .form-textarea:not(:placeholder-shown) + .form-label {
transform: translateY(-50%) scale(0.85);
color: var(--color-primary);
}
/* Validation States */
.form-input.valid,
.form-select.valid,
.form-textarea.valid {
border-color: var(--color-success);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2316a34a' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z'/%3E%3C/svg%3E");
background-position: right var(--space-sm) center;
background-repeat: no-repeat;
background-size: 16px 16px;
}
.form-input.invalid,
.form-select.invalid,
.form-textarea.invalid {
border-color: var(--color-error);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc2626' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
background-position: right var(--space-sm) center;
background-repeat: no-repeat;
background-size: 16px 16px;
}
/* Select with validation needs different padding */
.form-select.valid,
.form-select.invalid {
padding-right: calc(var(--space-xl) + var(--space-lg));
}
/* Help Text */
.form-help {
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin-top: var(--space-xs);
}
.form-error {
font-size: var(--text-sm);
color: var(--color-error);
margin-top: var(--space-xs);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.form-success {
font-size: var(--text-sm);
color: var(--color-success);
margin-top: var(--space-xs);
display: flex;
align-items: center;
gap: var(--space-xs);
}
/* Checkboxes and Radios */
.form-check {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
}
.form-check-input {
width: 18px;
height: 18px;
border: 1px solid var(--color-border);
background: var(--color-bg);
cursor: pointer;
transition: all var(--transition-fast);
}
.form-check-input[type="checkbox"] {
border-radius: var(--radius-sm);
}
.form-check-input[type="radio"] {
border-radius: 50%;
}
.form-check-input:checked {
background: var(--color-primary);
border-color: var(--color-primary);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: 12px 12px;
}
.form-check-input[type="radio"]:checked {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4'/%3E%3C/svg%3E");
background-size: 8px 8px;
}
.form-check-input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-check-label {
font-size: var(--text-sm);
color: var(--color-text);
cursor: pointer;
user-select: none;
}
/* Form Actions */
.form-actions {
display: flex;
gap: var(--space-md);
justify-content: flex-end;
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--color-border);
}
.form-actions-center {
justify-content: center;
}
.form-actions-start {
justify-content: flex-start;
}
.form-actions-between {
justify-content: space-between;
}
/* Search Form */
.search-form {
display: flex;
gap: var(--space-sm);
align-items: end;
margin-bottom: var(--space-lg);
}
.search-input {
position: relative;
flex: 1;
}
.search-input .form-input {
padding-right: var(--space-3xl);
}
.search-icon {
position: absolute;
right: var(--space-md);
top: 50%;
transform: translateY(-50%);
color: var(--color-text-muted);
font-size: var(--text-lg);
pointer-events: none;
}
/* Inline Forms */
.form-inline {
display: flex;
gap: var(--space-md);
align-items: end;
flex-wrap: wrap;
}
.form-inline .form-group {
flex: 1;
min-width: 150px;
}
/* File Upload */
.file-upload {
position: relative;
display: inline-block;
cursor: pointer;
width: 100%;
}
.file-upload-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.file-upload-label {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-lg);
border: 2px dashed var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-secondary);
color: var(--color-text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
min-height: 120px;
text-align: center;
}
.file-upload:hover .file-upload-label,
.file-upload-label.drag-over {
border-color: var(--color-primary);
background: rgba(37, 99, 235, 0.05);
color: var(--color-primary);
}
/* Mobile Form Styles */
@media (max-width: 768px) {
.form-row {
flex-direction: column;
gap: var(--space-md);
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
.form-inline .form-group {
min-width: auto;
}
.form-actions {
flex-direction: column;
}
.form-actions-between {
justify-content: center;
flex-direction: column-reverse;
}
.search-form {
flex-direction: column;
}
/* Ensure mobile-friendly touch targets */
.form-input,
.form-select,
.form-textarea {
min-height: 44px;
font-size: 16px; /* Prevents zoom on iOS */
}
.form-check-input {
width: 20px;
height: 20px;
min-height: 20px;
}
}
/* Print Styles */
@media print {
.form-actions {
display: none;
}
.form-input,
.form-select,
.form-textarea {
border: none;
border-bottom: 1px solid #000;
border-radius: 0;
background: transparent;
padding: var(--space-xs) 0;
}
.form-label {
font-weight: bold;
}
}
Reference in New Issue View Git Blame Copy Permalink