gorbenko.pavel
172 lines
3.1 KiB
SCSS
172 lines
3.1 KiB
SCSS
@import '../../../../styles/design-tokens';
|
|
|
|
.view {
|
|
width: 100%;
|
|
}
|
|
|
|
.head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: $sp-4;
|
|
flex-wrap: wrap;
|
|
margin-bottom: $sp-4;
|
|
}
|
|
|
|
.heading {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: $sp-3;
|
|
margin: 0;
|
|
font-family: $font-serif;
|
|
font-size: $fs-page-title;
|
|
font-weight: 600;
|
|
color: $navy-900;
|
|
}
|
|
|
|
.count {
|
|
padding: 2px 10px;
|
|
border-radius: $r-full;
|
|
background: $navy-100;
|
|
color: $navy-700;
|
|
font-family: $font-sans;
|
|
font-size: $fs-label;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.search {
|
|
width: 420px;
|
|
max-width: 100%;
|
|
padding: 9px 13px;
|
|
border: 1px solid $gray-300;
|
|
border-radius: $r-sm;
|
|
background: $white;
|
|
font-family: $font-sans;
|
|
font-size: $fs-sm;
|
|
color: $gray-900;
|
|
transition: .18s;
|
|
|
|
@include input-focus-gold;
|
|
|
|
&::placeholder {
|
|
color: $gray-400;
|
|
}
|
|
}
|
|
|
|
.empty,
|
|
.error {
|
|
padding: $sp-6;
|
|
background: $white;
|
|
border: 1px solid $gray-200;
|
|
border-radius: $r-md;
|
|
color: $gray-500;
|
|
font-size: $fs-sm;
|
|
}
|
|
|
|
.error {
|
|
color: $red-500;
|
|
border-color: $red-500;
|
|
background: $red-50;
|
|
}
|
|
|
|
.tableWrap {
|
|
background: $white;
|
|
border: 1px solid $gray-200;
|
|
border-radius: $r-md;
|
|
box-shadow: $sh-1;
|
|
overflow: hidden;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: $fs-sm;
|
|
|
|
th {
|
|
text-align: left;
|
|
padding: 12px 16px;
|
|
background: $gray-50;
|
|
border-bottom: 1px solid $gray-200;
|
|
color: $gray-500;
|
|
font-size: $fs-label;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: .04em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
td {
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid $gray-100;
|
|
color: $gray-900;
|
|
vertical-align: middle;
|
|
overflow-wrap: break-word;
|
|
word-break: break-word;
|
|
}
|
|
|
|
tbody tr:last-child td {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// Кликабельна вся строка (см. SearchView — onClick на <tr>).
|
|
.row {
|
|
cursor: pointer;
|
|
transition: background .16s;
|
|
|
|
&:hover {
|
|
background: $gold-50;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid $gold-500;
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
|
|
.colId {
|
|
// Под код заявки («13-2608-42»), а не под Id элемента: прежних 70px на него
|
|
// не хватало (см. IMyRequest.code).
|
|
width: 130px;
|
|
color: $gray-400;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.colType {
|
|
width: 170px;
|
|
color: $navy-700;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.colTitle {
|
|
min-width: 220px;
|
|
}
|
|
|
|
.colDate {
|
|
width: 100px;
|
|
color: $gray-500;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.colAuthor {
|
|
width: 220px;
|
|
color: $gray-500;
|
|
}
|
|
|
|
.colStatus {
|
|
width: 170px;
|
|
}
|
|
|
|
.colKind {
|
|
width: 110px;
|
|
color: $gray-400;
|
|
font-size: $fs-caption;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// Раскраска статуса — теперь только в shared/approval/ui/StatusBadge (см.
|
|
// использование ниже с size="sm"). Раньше здесь была своя копия этих цветов —
|
|
// она разошлась с эталоном (На согласовании/Возвращена на доработку оказались
|
|
// перепутаны), поэтому копию убрали, а не подправили.
|