gorbenko.pavel
82512eb1db
Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz> Reviewed-on: http://git.tnsu.kz/gorbenko.pavel/tnsu-approval-route/pulls/13
123 lines
4.8 KiB
SCSS
123 lines
4.8 KiB
SCSS
@import '../../../../styles/design-tokens';
|
||
|
||
.matrix {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.phase {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.phase:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.phaseHeader {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.phaseTitle {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: $gray-700;
|
||
}
|
||
|
||
.requestHeader {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
// Ссылка на физический список-партицию — второстепенная деталь под заголовком
|
||
// заявки, поэтому приглушённая, а не акцентная (как обычная ссылка $blue-600).
|
||
.listLink {
|
||
display: inline-block;
|
||
margin-top: 4px;
|
||
font-size: 12px;
|
||
color: $gray-500;
|
||
text-decoration: none;
|
||
|
||
&:hover {
|
||
color: $blue-600;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
// Колонка с номером шага — узкая, содержимое по центру (важно при rowSpan на
|
||
// параллельный блок: иначе номер прижимался бы к верхней строке блока).
|
||
.stepCol {
|
||
width: 56px;
|
||
white-space: nowrap;
|
||
text-align: center !important;
|
||
}
|
||
|
||
.parallelMark {
|
||
color: $gold-600;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.flipY {
|
||
svg { transform: scaleY(-1); }
|
||
}
|
||
|
||
// Подсветка строки при наведении здесь — своя, НЕ штатный DataTable.module.scss
|
||
// tbody tr:hover: та подсветка вешается через :hover на конкретный <tr>, а
|
||
// ячейки с rowSpan (номер шага, стрелки перестановки) физически принадлежат
|
||
// <tr> только первой строки блока — при наведении на вторую/третью строку
|
||
// параллельного блока эти ячейки не подсвечивались, получался видимый "вырез"
|
||
// в жёлтом фоне ровно на границе объединённой ячейки. Поэтому подсветка здесь
|
||
// — на уровне блока через React-состояние (см. hoveredBlock в
|
||
// ManageRequestsPhaseTable), а не через CSS :hover, а штатный tr:hover для
|
||
// этой конкретной таблицы отключаем, чтобы они не накладывались друг на друга.
|
||
.blockAwareWrap :global(tbody tr:hover) {
|
||
background: transparent;
|
||
}
|
||
|
||
.rowHover td {
|
||
background: $gold-50;
|
||
}
|
||
|
||
// IconButton по умолчанию (Button.module.scss/.iconButton) прозрачная — рамка
|
||
// появляется только по hover. В этой таблице кнопок много и часть из них не
|
||
// самоочевидна по смыслу (параллельность, перестановка шага), поэтому здесь
|
||
// рамка видна всегда — иначе выглядит как текст, а не как элементы управления.
|
||
// !important — переопределяет .iconButton независимо от порядка подключения
|
||
// стилей (это два разных CSS-модуля, порядок их правил в бандле не гарантирован).
|
||
.iconBtnVisible {
|
||
border-color: $gray-300 !important;
|
||
background: #fff !important;
|
||
}
|
||
|
||
// Включённое состояние кнопки «объединить с предыдущим шагом» — в отличие от
|
||
// остальных кнопок это переключатель состояния, а не разовое действие,
|
||
// поэтому оно залито (как в request-portal/shared/approval/ui/approval.module.scss/.iconBtnActive).
|
||
// !important по той же причине, что и у .iconBtnVisible.
|
||
.iconBtnActive {
|
||
border-color: $gold-500 !important;
|
||
background: $gold-500 !important;
|
||
color: $navy-950 !important;
|
||
|
||
&:hover:not(:disabled) {
|
||
border-color: $gold-600 !important;
|
||
background: $gold-600 !important;
|
||
}
|
||
}
|
||
|
||
// Плашка-пикер под таблицей для добавления шага (вместо кнопки+модалки) —
|
||
// повторяет request-portal/shared/approval/ui/ApprovalMatrix.tsx/.matrixPicker.
|
||
.addRow {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
// Ячейка SLA просроченного АКТИВНОГО шага (см. isRowOverdue в utils/sla.ts) —
|
||
// только текст, без фона: фон был бы третьим одновременным акцентом в строке
|
||
// (жёлтая подсветка hover уже есть) и мешал бы, а не помогал заметить.
|
||
.slaOverdue {
|
||
color: $red-500;
|
||
font-weight: 600;
|
||
}
|