DataGrid list type; Review/Send refinment; User lock; Table actions
This commit is contained in:
@@ -1745,7 +1745,7 @@
|
||||
width: 2px;
|
||||
flex: 1 1 auto;
|
||||
min-height: 54px;
|
||||
margin: 4px 0;
|
||||
margin: 4px 0 -14px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(to bottom, var(--review-stage-color), var(--review-next-stage-color));
|
||||
opacity: .82;
|
||||
@@ -2013,3 +2013,51 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Collapsible workflow stage headers keep status and disclosure controls grouped. */
|
||||
.review-flow-stage-header-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.review-flow-collapse-button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
flex: 0 0 auto;
|
||||
padding: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
color: var(--muted);
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.review-flow-collapse-button:hover,
|
||||
.review-flow-collapse-button:focus-visible {
|
||||
border-color: var(--line-dark);
|
||||
color: var(--text-strong);
|
||||
background: var(--panel-soft);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.review-flow-stage-card.is-collapsed .review-flow-stage-header {
|
||||
min-height: 58px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.locked-version-context {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
.review-flow-stage-header-actions {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1058,3 +1058,191 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
/* List-valued DataGrid columns and checkbox filters. */
|
||||
.data-grid-list-select {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fff;
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
padding: 6px 28px 6px 8px;
|
||||
}
|
||||
|
||||
.data-grid-list-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--blue);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
.data-grid-list-filter {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.data-grid-list-filter-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.data-grid-list-filter-actions button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--blue);
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: 750;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.data-grid-list-filter-actions button:hover,
|
||||
.data-grid-list-filter-actions button:focus-visible {
|
||||
color: var(--text-strong);
|
||||
text-decoration: underline;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.data-grid-list-filter-options {
|
||||
max-height: 230px;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.data-grid-list-filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 38px;
|
||||
padding: 6px 8px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.data-grid-list-filter-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.data-grid-list-filter-row > label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.data-grid-list-filter-row input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.data-grid-list-option-remove,
|
||||
.data-grid-list-option-add button {
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.data-grid-list-option-remove:hover,
|
||||
.data-grid-list-option-remove:focus-visible,
|
||||
.data-grid-list-option-add button:hover,
|
||||
.data-grid-list-option-add button:focus-visible {
|
||||
color: var(--text-strong);
|
||||
background: var(--panel-soft);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.data-grid-list-option-add {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.data-grid-list-option-add input {
|
||||
width: 100%;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
background: #fff;
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
/* Consistent row-level collection actions for editable DataGrid tables. */
|
||||
.data-grid-row-actions {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 28px);
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.data-grid-row-action {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.data-grid-row-action:hover:not(:disabled),
|
||||
.data-grid-row-action:focus-visible:not(:disabled) {
|
||||
border-color: var(--line-dark);
|
||||
background: var(--panel-soft);
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
.data-grid-row-action.is-add {
|
||||
border-color: color-mix(in srgb, var(--blue) 52%, var(--line));
|
||||
background: color-mix(in srgb, var(--blue) 10%, #fff);
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.data-grid-row-action.is-remove {
|
||||
border-color: rgba(171, 70, 61, .35);
|
||||
background: rgba(171, 70, 61, .06);
|
||||
color: #9f433b;
|
||||
}
|
||||
|
||||
.data-grid-row-action:disabled {
|
||||
cursor: default;
|
||||
opacity: .42;
|
||||
}
|
||||
|
||||
.data-grid-row-action.is-placeholder {
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.data-grid-empty-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.data-grid-empty-action > span {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user