style(admin): halve shared row text action spacing
This commit is contained in:
@@ -143,11 +143,11 @@
|
|||||||
.admin-density-drawer .el-drawer__footer { padding: var(--admin-space-5) var(--admin-space-6); border-top: 1px solid var(--cc-border); }
|
.admin-density-drawer .el-drawer__footer { padding: var(--admin-space-5) var(--admin-space-6); border-top: 1px solid var(--cc-border); }
|
||||||
|
|
||||||
/* Reusable row action group; no business action names in the shared layer. */
|
/* Reusable row action group; no business action names in the shared layer. */
|
||||||
.admin-density .data-table .density-actions { --cc-list-action-sibling-margin: 0px; display: flex; align-items: center; gap: var(--admin-space-2); }
|
.admin-density .data-table .density-actions { --cc-list-action-sibling-margin: 0px; display: flex; align-items: center; gap: var(--cc-row-action-gap, var(--admin-space-2)); }
|
||||||
.admin-density .data-table .density-actions > :is(.el-button, .el-dropdown) { margin-left: 0; }
|
.admin-density .data-table .density-actions > :is(.el-button, .el-dropdown) { margin-left: 0; }
|
||||||
|
|
||||||
/* The same action spacing also applies to native tables and teleported content. */
|
/* The same action spacing also applies to native tables and teleported content. */
|
||||||
:is(.admin-density, .admin-density-dialog) .density-actions { display: flex; align-items: center; gap: var(--admin-space-2); }
|
:is(.admin-density, .admin-density-dialog) .density-actions { display: flex; align-items: center; gap: var(--cc-row-action-gap, var(--admin-space-2)); }
|
||||||
:is(.admin-density, .admin-density-dialog) .density-actions > :is(.el-button, .el-dropdown) { margin-left: 0; }
|
:is(.admin-density, .admin-density-dialog) .density-actions > :is(.el-button, .el-dropdown) { margin-left: 0; }
|
||||||
|
|
||||||
.admin-density .density-detail-heading > .density-back { flex-shrink: 0; }
|
.admin-density .density-detail-heading > .density-back { flex-shrink: 0; }
|
||||||
|
|||||||
@@ -692,6 +692,33 @@ describe('approved Admin density ownership', () => {
|
|||||||
expect(read(`modules/${file}`), file).toContain('density-action')
|
expect(read(`modules/${file}`), file).toContain('density-action')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
it('halves text action spacing through shared rules while retaining outlined action spacing', () => {
|
||||||
|
const declarations = new Map<string, Record<string, string>>()
|
||||||
|
cssRoot(read('styles/adminTextActions.css')).walkRules(rule => {
|
||||||
|
const values: Record<string, string> = {}
|
||||||
|
rule.walkDecls(decl => { values[decl.prop] = decl.value })
|
||||||
|
declarations.set(rule.selector, values)
|
||||||
|
})
|
||||||
|
expect(declarations.get('.row-actions.admin-text-actions')).toMatchObject({
|
||||||
|
'--cc-row-action-gap': 'calc(var(--admin-space-2, 6px) / 2)',
|
||||||
|
'--cc-list-action-sibling-margin': '0px',
|
||||||
|
gap: 'var(--cc-row-action-gap)',
|
||||||
|
})
|
||||||
|
const button = declarations.get('.row-actions.admin-text-actions .el-button.el-button')!
|
||||||
|
expect(button['padding-inline']).toBe('calc(var(--admin-space-4, 10px) / 2)')
|
||||||
|
expect(button).not.toHaveProperty('height')
|
||||||
|
expect(button).not.toHaveProperty('font-size')
|
||||||
|
const groups = new Map<string, string>()
|
||||||
|
cssRoot(shared).walkRules(rule => {
|
||||||
|
if (rule.selector.endsWith(' .density-actions')) {
|
||||||
|
rule.walkDecls('gap', decl => { groups.set(rule.selector, decl.value) })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
expect([...groups.values()]).toEqual([
|
||||||
|
'var(--cc-row-action-gap, var(--admin-space-2))',
|
||||||
|
'var(--cc-row-action-gap, var(--admin-space-2))',
|
||||||
|
])
|
||||||
|
})
|
||||||
it('keeps container evidence and customs summaries compact without duplicating field styles', () => {
|
it('keeps container evidence and customs summaries compact without duplicating field styles', () => {
|
||||||
const overview = read('modules/container-loading/components/ContainerOverviewPanel.vue')
|
const overview = read('modules/container-loading/components/ContainerOverviewPanel.vue')
|
||||||
const customs = read('modules/container-loading/components/ContainerCustomsPanel.vue')
|
const customs = read('modules/container-loading/components/ContainerCustomsPanel.vue')
|
||||||
|
|||||||
@@ -3,6 +3,11 @@
|
|||||||
--admin-text-action-color: #1677ff;
|
--admin-text-action-color: #1677ff;
|
||||||
--admin-text-action-danger: #dc2626;
|
--admin-text-action-danger: #dc2626;
|
||||||
}
|
}
|
||||||
|
.row-actions.admin-text-actions {
|
||||||
|
--cc-row-action-gap: calc(var(--admin-space-2, 6px) / 2);
|
||||||
|
--cc-list-action-sibling-margin: 0px;
|
||||||
|
gap: var(--cc-row-action-gap);
|
||||||
|
}
|
||||||
.row-actions.admin-text-actions .el-button.el-button {
|
.row-actions.admin-text-actions .el-button.el-button {
|
||||||
--text-action-color: var(--admin-text-action-color);
|
--text-action-color: var(--admin-text-action-color);
|
||||||
--el-button-text-color: var(--text-action-color);
|
--el-button-text-color: var(--text-action-color);
|
||||||
@@ -16,6 +21,7 @@
|
|||||||
--el-button-active-border-color: transparent;
|
--el-button-active-border-color: transparent;
|
||||||
color: var(--text-action-color);
|
color: var(--text-action-color);
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
padding-inline: calc(var(--admin-space-4, 10px) / 2);
|
||||||
border: 0;
|
border: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|||||||
Reference in New Issue
Block a user