gorbenko.pavel
da158cfd84
Tests / test (push) Successful in 2m26s
Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz> Reviewed-on: http://git.tnsu.kz/gorbenko.pavel/tnsu-approval-route/pulls/5
101 lines
2.2 KiB
SCSS
101 lines
2.2 KiB
SCSS
@import '../../../../styles/design-tokens';
|
||
|
||
.wrap {
|
||
background: #fff;
|
||
border-radius: $r-lg;
|
||
box-shadow: $sh-1;
|
||
overflow: hidden;
|
||
border: 1px solid $gray-200;
|
||
}
|
||
|
||
// Внутренний скролл-контейнер: если колонок больше, чем помещается в узкую
|
||
// колонку страницы (например, в редакторе SharePoint), таблица должна
|
||
// скроллиться по горизонтали, а не обрезаться по overflow:hidden у .wrap.
|
||
.scroll {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.table {
|
||
// min-width, не width: при большом числе колонок таблица должна иметь
|
||
// право стать шире контейнера — тогда её подхватит .scroll (overflow-x).
|
||
min-width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 13.5px;
|
||
}
|
||
|
||
.table thead th {
|
||
text-align: left;
|
||
padding: 13px 18px;
|
||
font-size: 10.5px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.2px;
|
||
color: $gray-400;
|
||
font-weight: 600;
|
||
background: $gray-50;
|
||
border-bottom: 1px solid $gray-200;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.table tbody td {
|
||
padding: 15px 18px;
|
||
border-bottom: 1px solid $gray-100;
|
||
color: $gray-700;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.table tbody tr:last-child td { border-bottom: 0; }
|
||
.table tbody tr { transition: .12s; }
|
||
.table tbody tr:hover { background: $gold-50; }
|
||
|
||
.stickyCell {
|
||
position: sticky;
|
||
right: 0;
|
||
}
|
||
|
||
.table thead th.stickyCell { z-index: 2; }
|
||
|
||
.table tbody td.stickyCell {
|
||
background: #fff;
|
||
box-shadow: -6px 0 6px -6px rgba(15, 36, 64, .12);
|
||
z-index: 1;
|
||
}
|
||
|
||
.table tbody tr:hover td.stickyCell { background: $gold-50; }
|
||
|
||
.primaryCell {
|
||
font-weight: 500;
|
||
color: $navy-900;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.cellNote {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 6px;
|
||
margin-top: 4px;
|
||
max-width: 420px;
|
||
font-size: 11.5px;
|
||
line-height: 1.4;
|
||
color: $gray-500;
|
||
|
||
svg { margin-top: 1px; }
|
||
}
|
||
|
||
.cellNoteWarn { color: $amber-700; }
|
||
|
||
.actionsCell {
|
||
display: flex;
|
||
gap: 4px;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
}
|
||
|
||
.empty {
|
||
padding: 48px 20px;
|
||
text-align: center;
|
||
color: $gray-400;
|
||
font-size: 13px;
|
||
}
|