86 lines
4.2 KiB
CSS
86 lines
4.2 KiB
CSS
.hm-orgchart-organization-link {
|
|
display: block;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
border-radius: inherit;
|
|
}
|
|
.hm-orgchart-organization-link:hover { text-decoration: underline; }
|
|
.hm-orgchart-organization-link:focus-visible,
|
|
.hm-orgchart-employee[role="button"]:focus-visible {
|
|
outline: 2px solid var(--hm-orgchart-card-focus-color, var(--hm-orgchart-resolved-stroke-input-focus));
|
|
outline-offset: 3px;
|
|
}
|
|
.hm-orgchart-employee[role="button"] { cursor: pointer; }
|
|
.hm-orgchart-employee-dialog {
|
|
width: min(420px, calc(100vw - 32px));
|
|
max-width: calc(100vw - 32px);
|
|
max-height: calc(100dvh - 32px);
|
|
padding: var(--hm-orgchart-resolved-spacing-xxl);
|
|
border: var(--hm-orgchart-resolved-border-width) solid var(--hm-orgchart-dialog-border, var(--hm-orgchart-resolved-stroke-default));
|
|
border-radius: var(--hm-orgchart-resolved-radius-container);
|
|
background: var(--hm-orgchart-dialog-background, var(--hm-orgchart-resolved-bg-surface));
|
|
color: var(--hm-orgchart-dialog-color, var(--hm-orgchart-resolved-fg-primary));
|
|
font: inherit;
|
|
overflow: auto;
|
|
}
|
|
.hm-orgchart-employee-dialog::backdrop {
|
|
background: color-mix(in srgb, var(--hm-orgchart-resolved-fg-primary) 38%, transparent);
|
|
}
|
|
.hm-orgchart-employee-dialog-header {
|
|
display: flex; align-items: center; justify-content: space-between; gap: var(--hm-orgchart-resolved-spacing-lg);
|
|
/* Reserve the former text button's height so the title, body and dialog size stay put. */
|
|
min-height: calc(1lh + 2 * var(--hm-orgchart-resolved-spacing-xs) + 2 * var(--hm-orgchart-resolved-border-width));
|
|
}
|
|
.hm-orgchart-employee-dialog-header h2 { margin: 0; font-size: 18px; font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
|
|
.hm-orgchart-employee-dialog-close {
|
|
/* Match HM Dialog's ghost / icon-sm Button without a React or theme dependency.
|
|
Fallbacks are the declared HM defaults (theme/default.css and primitives.css). */
|
|
--hm-orgchart-dialog-close-ink: var(--hm-orgchart-dialog-close-color, var(--foreground, var(--hm-sem-fg-primary, #0a221d)));
|
|
--hm-orgchart-dialog-close-hover: var(--hm-orgchart-dialog-close-hover-background, var(--muted, var(--hm-sem-bg-subtle, #f4f1ea)));
|
|
--hm-orgchart-dialog-close-ring: var(--hm-orgchart-dialog-focus-color, var(--ring, var(--hm-sem-stroke-input-focus, #266651)));
|
|
position: absolute;
|
|
top: calc(var(--spacing, .25rem) * 2);
|
|
right: calc(var(--spacing, .25rem) * 2);
|
|
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
|
|
box-sizing: border-box;
|
|
width: calc(var(--spacing, .25rem) * 7);
|
|
height: calc(var(--spacing, .25rem) * 7);
|
|
padding: 0;
|
|
border: 1px solid transparent;
|
|
border-radius: min(var(--radius-md, calc(var(--radius, var(--hm-radius-container, 4px)) * .8)), 12px);
|
|
background: transparent;
|
|
background-clip: padding-box;
|
|
color: var(--hm-orgchart-dialog-close-ink);
|
|
font: inherit; font-size: .875rem; line-height: calc(var(--spacing, .25rem) * 5); font-weight: 500;
|
|
outline: none; outline-offset: 0; box-shadow: none;
|
|
cursor: default; user-select: none; white-space: nowrap;
|
|
transition: all 150ms cubic-bezier(.4, 0, .2, 1);
|
|
}
|
|
.hm-orgchart-employee-dialog-close svg {
|
|
width: calc(var(--spacing, .25rem) * 4);
|
|
height: calc(var(--spacing, .25rem) * 4);
|
|
pointer-events: none; flex-shrink: 0;
|
|
}
|
|
.hm-orgchart-employee-dialog-close:hover {
|
|
background-color: var(--hm-orgchart-dialog-close-hover);
|
|
}
|
|
:host-context(.dark) .hm-orgchart-employee-dialog-close:hover,
|
|
.dark .hm-orgchart-employee-dialog-close:hover {
|
|
background-color: color-mix(in oklab, var(--hm-orgchart-dialog-close-hover) 50%, transparent);
|
|
}
|
|
.hm-orgchart-employee-dialog-close:focus-visible {
|
|
border-color: var(--hm-orgchart-dialog-close-ring);
|
|
box-shadow: 0 0 0 3px color-mix(in oklab, var(--hm-orgchart-dialog-close-ring) 50%, transparent);
|
|
}
|
|
.hm-orgchart-employee-dialog-close:active {
|
|
transform: translateY(1px);
|
|
}
|
|
.hm-orgchart-employee-dialog-fields {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
gap: var(--hm-orgchart-resolved-spacing-md) var(--hm-orgchart-resolved-spacing-lg);
|
|
margin: var(--hm-orgchart-resolved-spacing-xl) 0 0;
|
|
}
|
|
.hm-orgchart-employee-dialog-fields dt { color: var(--hm-orgchart-resolved-fg-secondary); }
|
|
.hm-orgchart-employee-dialog-fields dd { margin: 0; overflow-wrap: anywhere; }
|