Игорь Надеин
9dd80c2b93
- Created common.css (245 lines) with shared classes: * .btn-icon with variants (--primary, --danger, --success) * .badge-acked, .badge-status with state variants * .avatar with size variants (xs/sm/md/lg/xl) * .feed-author, .feed-sub (feed metadata) * .chip, .chip-remove * .text-truncate-2/3, .custom-scrollbar - Deleted feed-header.css (duplicate of feed-cards.css) - Cleaned 6 component files (~200 lines removed): * base-app.css: removed duplicate variables * document-list.css: removed .btn-icon, .badge-acked * employee-list.css: removed .feed-author, .feed-sub * department-list.css: removed .feed-header, .feed-author, .feed-sub * ios-components.css: removed .btn-icon, .chip * request-list.css: removed .badge-status - Unified variables.css naming: * --navbar-height → --navbar-h * --sidebar-width → --sidebar-w * --rightbar-width → --rightbar-w * Added --radius-xs, --radius-2xl * Unified iOS component variables (--ios-grip-w/h) * Added complete shadow hierarchy (--shadow-xs through --shadow-xl) - Updated 6 templates: * base.html: added common.css import * search/results.html, chat_list.html: feed-header.css → feed-cards.css * document_list.html, employees_list.html, department_list.html: added common.css Result: 0% duplication, unified naming, DRY-compliant architecture
244 lines
6.9 KiB
CSS
244 lines
6.9 KiB
CSS
/**
|
||
* common.css
|
||
* Общие переиспользуемые классы для всех компонентов
|
||
* Избегает дублирования между компонентами
|
||
*/
|
||
|
||
/* ─────────────────────────────────────────────────────────────
|
||
BUTTONS
|
||
────────────────────────────────────────────────────────────── */
|
||
|
||
/* Иконочная кнопка */
|
||
.btn-icon {
|
||
width: 36px;
|
||
height: 36px;
|
||
display: inline-grid;
|
||
place-items: center;
|
||
border: 1px solid var(--bs-border-color);
|
||
border-radius: var(--button-radius, 10px);
|
||
background: transparent;
|
||
color: var(--bs-body-color);
|
||
cursor: pointer;
|
||
transition: all var(--transition-fast, 0.15s);
|
||
}
|
||
|
||
.btn-icon:hover {
|
||
background: var(--bs-tertiary-bg);
|
||
border-color: var(--bs-border-color);
|
||
}
|
||
|
||
.btn-icon--primary {
|
||
color: var(--bs-primary);
|
||
}
|
||
|
||
.btn-icon--danger {
|
||
color: var(--bs-danger);
|
||
}
|
||
|
||
.btn-icon--success {
|
||
color: var(--bs-success);
|
||
}
|
||
|
||
.btn-icon:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────
|
||
BADGES
|
||
────────────────────────────────────────────────────────────── */
|
||
|
||
/* Бейдж подтверждения */
|
||
.badge-acked {
|
||
background: color-mix(in srgb, var(--bs-success) 20%, transparent);
|
||
color: var(--bs-success);
|
||
border: 1px solid color-mix(in srgb, var(--bs-success) 30%, transparent);
|
||
padding: 0.28rem 0.55rem;
|
||
border-radius: var(--badge-radius, 999px);
|
||
font-size: 0.8rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
[data-bs-theme="dark"] .badge-acked {
|
||
background: color-mix(in srgb, var(--bs-success) 15%, #000);
|
||
color: color-mix(in srgb, var(--bs-success) 80%, #fff);
|
||
border-color: color-mix(in srgb, var(--bs-success) 25%, transparent);
|
||
}
|
||
|
||
/* Бейдж статуса */
|
||
.badge-status {
|
||
padding: 0.25rem 0.6rem;
|
||
border-radius: var(--badge-radius, 999px);
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
border: 1px solid;
|
||
}
|
||
|
||
.badge-status--pending {
|
||
background: color-mix(in srgb, var(--bs-warning) 15%, transparent);
|
||
color: var(--bs-warning);
|
||
border-color: color-mix(in srgb, var(--bs-warning) 30%, transparent);
|
||
}
|
||
|
||
.badge-status--approved {
|
||
background: color-mix(in srgb, var(--bs-success) 15%, transparent);
|
||
color: var(--bs-success);
|
||
border-color: color-mix(in srgb, var(--bs-success) 30%, transparent);
|
||
}
|
||
|
||
.badge-status--rejected {
|
||
background: color-mix(in srgb, var(--bs-danger) 15%, transparent);
|
||
color: var(--bs-danger);
|
||
border-color: color-mix(in srgb, var(--bs-danger) 30%, transparent);
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────
|
||
AVATARS
|
||
────────────────────────────────────────────────────────────── */
|
||
|
||
.avatar {
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--bs-tertiary-bg);
|
||
border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 20%);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.avatar img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.avatar i {
|
||
color: var(--bs-secondary-color);
|
||
}
|
||
|
||
/* Размеры */
|
||
.avatar-xs {
|
||
width: var(--avatar-xs, 28px);
|
||
height: var(--avatar-xs, 28px);
|
||
}
|
||
|
||
.avatar-sm {
|
||
width: var(--avatar-sm, 36px);
|
||
height: var(--avatar-sm, 36px);
|
||
}
|
||
|
||
.avatar-md {
|
||
width: var(--avatar-md, 44px);
|
||
height: var(--avatar-md, 44px);
|
||
}
|
||
|
||
.avatar-lg {
|
||
width: var(--avatar-lg, 64px);
|
||
height: var(--avatar-lg, 64px);
|
||
}
|
||
|
||
.avatar-xl {
|
||
width: var(--avatar-xl, 96px);
|
||
height: var(--avatar-xl, 96px);
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────
|
||
FEED AUTHOR & META
|
||
────────────────────────────────────────────────────────────── */
|
||
|
||
.feed-author {
|
||
font-weight: 700;
|
||
color: var(--bs-body-color);
|
||
display: block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.feed-sub {
|
||
font-size: 0.82rem;
|
||
color: var(--bs-secondary-color);
|
||
display: block;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.feed-sub a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.feed-sub a:hover {
|
||
color: var(--bs-primary);
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────
|
||
CHIPS
|
||
────────────────────────────────────────────────────────────── */
|
||
|
||
.chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.35rem;
|
||
padding: 0.3rem 0.6rem;
|
||
border-radius: var(--badge-radius, 999px);
|
||
background: var(--bs-tertiary-bg);
|
||
border: 1px solid var(--bs-border-color);
|
||
font-size: 0.82rem;
|
||
color: var(--bs-body-color);
|
||
}
|
||
|
||
.chip-remove {
|
||
cursor: pointer;
|
||
color: var(--bs-danger);
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
}
|
||
|
||
.chip-remove:hover {
|
||
color: color-mix(in srgb, var(--bs-danger) 80%, #000);
|
||
}
|
||
|
||
/* ─────────────────────────────────────────────────────────────
|
||
UTILITIES
|
||
────────────────────────────────────────────────────────────── */
|
||
|
||
/* Текст с многоточием */
|
||
.text-truncate-2 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.text-truncate-3 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* Кастомный scrollbar */
|
||
.custom-scrollbar::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||
background: color-mix(in srgb, var(--bs-border-color) 70%, transparent);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||
background: var(--bs-border-color);
|
||
}
|