Files
forge/client/src/components/TicketTable/TicketTable.module.scss
T

120 lines
2.3 KiB
SCSS

@use '../../styles/variables' as *;
.wrap {
background: var(--surface);
border: 1px solid var(--border);
border-radius: $radius-lg;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
thead th {
text-align: left;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
padding: 10px $s-3;
background: var(--surface-alt);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
}
.right { text-align: right; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.row {
cursor: pointer;
transition: background $transition;
border-bottom: 1px solid var(--border);
&:last-child { border-bottom: none; }
&:hover { background: var(--row-hover); }
td { padding: 9px $s-3; vertical-align: middle; }
}
.number {
font-family: var(--mono);
font-weight: 600;
color: var(--primary);
white-space: nowrap;
display: flex;
align-items: center;
gap: 6px;
}
.numLink {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--primary);
svg { opacity: 0.55; }
&:hover { text-decoration: underline; svg { opacity: 1; } }
}
.jira {
font-family: var(--font);
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
border-radius: 4px;
background: var(--primary-bg);
color: var(--primary);
}
.desc {
max-width: 340px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text);
}
.assignee { display: flex; align-items: center; gap: 8px; }
.avatar {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--primary);
color: #fff;
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.assigneeName {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.muted { color: var(--text-muted); white-space: nowrap; }
.num { color: var(--text); }
.right {
white-space: nowrap;
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.ago { font-size: 12px; }
.ext {
display: flex;
color: var(--text-dim);
&:hover { color: var(--primary); }
}