feat(org-chart): add core cards and fixed-layout integration
This commit is contained in:
shkim4 committed
1 parent
d18e3c3380
commit
61c6f8d1f1
161 files changed
+13044
-1
No files matched your search
@@ -0,0 +1,141 @@
|
||||
/* Independent content summaries inside Core's Shadow DOM. Colors and radii use
|
||||
the standalone OrgChart defaults in design-tokens.css.
|
||||
Content gaps/dimensions are local geometry, not overrides of HM components. */
|
||||
.hm-orgchart-position-summary,
|
||||
.hm-orgchart-affiliation-summary,
|
||||
.hm-orgchart-status-group {
|
||||
min-width: 0;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--hm-orgchart-resolved-stroke-default);
|
||||
border-radius: var(--hm-orgchart-resolved-radius-container);
|
||||
background: var(--hm-orgchart-resolved-bg-surface);
|
||||
}
|
||||
.hm-orgchart-position-summary { margin-top: 0; }
|
||||
.hm-orgchart-position-summary .hm-orgchart-summary-title,
|
||||
.hm-orgchart-affiliation-summary .hm-orgchart-summary-title,
|
||||
.hm-orgchart-status-summary .hm-orgchart-summary-title {
|
||||
margin: 0 0 8px;
|
||||
font-size: 15px;
|
||||
font-weight: var(--hm-orgchart-resolved-font-weight-bold);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.hm-orgchart-position-summary .hm-orgchart-raw-total,
|
||||
.hm-orgchart-affiliation-summary .hm-orgchart-raw-total {
|
||||
margin: 0 0 8px;
|
||||
font-weight: var(--hm-orgchart-resolved-font-weight-medium);
|
||||
}
|
||||
.hm-orgchart-position-summary .hm-orgchart-policy,
|
||||
.hm-orgchart-status-summary .hm-orgchart-policy {
|
||||
margin: 4px 0;
|
||||
color: var(--hm-orgchart-resolved-fg-secondary);
|
||||
font-size: 11px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.hm-orgchart-summary-scroll { max-width: 100%; overflow: auto; margin-top: 12px; }
|
||||
.hm-orgchart-summary-scroll:focus-visible {
|
||||
outline: 2px solid var(--hm-orgchart-resolved-stroke-input-focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.hm-orgchart-summary .hm-orgchart-position-table {
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
margin-top: 0;
|
||||
table-layout: auto;
|
||||
border-collapse: collapse;
|
||||
color: var(--hm-orgchart-resolved-table-text);
|
||||
background: var(--hm-orgchart-resolved-table-background);
|
||||
font-size: var(--hm-orgchart-resolved-table-font-size);
|
||||
line-height: var(--hm-orgchart-resolved-table-line-height);
|
||||
}
|
||||
.hm-orgchart-summary .hm-orgchart-position-table caption {
|
||||
max-width: 480px;
|
||||
padding: 0 0 var(--hm-orgchart-resolved-table-caption-gap);
|
||||
text-align: left;
|
||||
color: var(--hm-orgchart-resolved-table-caption-color);
|
||||
font-size: var(--hm-orgchart-resolved-table-caption-font-size);
|
||||
line-height: var(--hm-orgchart-resolved-table-caption-line-height);
|
||||
}
|
||||
.hm-orgchart-summary .hm-orgchart-position-table th,
|
||||
.hm-orgchart-summary .hm-orgchart-position-table td {
|
||||
min-width: 64px;
|
||||
max-width: 160px;
|
||||
padding: var(--hm-orgchart-resolved-table-cell-padding-y) var(--hm-orgchart-resolved-table-cell-padding-x);
|
||||
border-bottom: var(--hm-orgchart-resolved-table-divider-width) solid var(--hm-orgchart-resolved-table-divider-color);
|
||||
font-variant-numeric: tabular-nums;
|
||||
overflow-wrap: anywhere;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.hm-orgchart-summary .hm-orgchart-position-table th:first-child { min-width: 100px; }
|
||||
.hm-orgchart-summary .hm-orgchart-position-table thead th {
|
||||
background: var(--hm-orgchart-resolved-table-header-background);
|
||||
color: var(--hm-orgchart-resolved-table-header-text);
|
||||
border-top: var(--hm-orgchart-resolved-table-divider-width) solid var(--hm-orgchart-resolved-table-header-border-top);
|
||||
border-bottom-color: var(--hm-orgchart-resolved-table-header-border-bottom);
|
||||
font-size: var(--hm-orgchart-resolved-table-header-font-size);
|
||||
font-weight: var(--hm-orgchart-resolved-table-header-font-weight);
|
||||
}
|
||||
.hm-orgchart-summary .hm-orgchart-position-table tbody th { font-weight: var(--hm-orgchart-resolved-font-weight-medium); }
|
||||
.hm-orgchart-summary .hm-orgchart-position-table .hm-orgchart-count-cell { text-align: right; }
|
||||
.hm-orgchart-summary .hm-orgchart-position-table .hm-orgchart-subtotal { font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
|
||||
.hm-orgchart-summary .hm-orgchart-position-table .hm-orgchart-inclusive { color: var(--hm-orgchart-resolved-fg-secondary); text-align: right; }
|
||||
.hm-orgchart-summary .hm-orgchart-position-table tfoot {
|
||||
background: var(--hm-orgchart-resolved-table-footer-background);
|
||||
font-weight: var(--hm-orgchart-resolved-table-footer-font-weight);
|
||||
}
|
||||
.hm-orgchart-summary .hm-orgchart-position-table tbody tr:hover { background: var(--hm-orgchart-resolved-table-row-hover-background); }
|
||||
.hm-orgchart-status-totals { font-size: 12px; }
|
||||
.hm-orgchart-affiliation-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
|
||||
gap: 8px;
|
||||
margin: 12px 0 0;
|
||||
}
|
||||
.hm-orgchart-affiliation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--hm-orgchart-resolved-stroke-input-default);
|
||||
border-radius: var(--hm-orgchart-resolved-radius-container);
|
||||
background: var(--hm-orgchart-resolved-bg-content);
|
||||
}
|
||||
.hm-orgchart-affiliation-name { min-width: 0; overflow-wrap: anywhere; font-weight: var(--hm-orgchart-resolved-font-weight-medium); }
|
||||
.hm-orgchart-affiliation-name { display: flex; align-items: center; gap: 8px; }
|
||||
.hm-orgchart-affiliation-name .hm-orgchart-affiliation-mark {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex: 0 0 28px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.hm-orgchart-affiliation-count { flex: 0 0 auto; margin: 0; font-variant-numeric: tabular-nums; font-weight: var(--hm-orgchart-resolved-font-weight-bold); }
|
||||
.hm-orgchart-status-summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
|
||||
gap: 16px;
|
||||
min-width: 0;
|
||||
}
|
||||
.hm-orgchart-status-summary:empty { display: none; }
|
||||
.hm-orgchart-status-employees { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
|
||||
.hm-orgchart-status-employees .hm-orgchart-employee { margin-top: 0; }
|
||||
.hm-orgchart-status-group > .hm-orgchart-summary-title {
|
||||
background: linear-gradient(180deg, #87909c 0%, #68727e 100%);
|
||||
border: 1px solid rgba(92, 101, 112, 0.52);
|
||||
box-shadow: 0 7px 16px rgba(75, 84, 96, 0.18);
|
||||
}
|
||||
.hm-orgchart-status-group .hm-orgchart-employee[data-card-kind] {
|
||||
margin: 0;
|
||||
background-image: linear-gradient(180deg, #f4f5f6 0%, #dfe3e7 100%) !important;
|
||||
border: 1px solid rgba(120, 130, 142, 0.35);
|
||||
border-radius: var(--br-3_5, var(--hm-orgchart-resolved-radius-container));
|
||||
cursor: pointer;
|
||||
}
|
||||
.hm-orgchart-status-group .hm-orgchart-employee[data-card-kind] .hm-orgchart-person-role { color: #555f6a; }
|
||||
.hm-orgchart-status-group .hm-orgchart-employee[data-card-kind] .hm-orgchart-person-name { color: #3e4650; }
|
||||
.hm-orgchart-status-group .hm-orgchart-affiliation-mark img { filter: grayscale(1); opacity: 0.72; }
|
||||
.hm-orgchart-content-empty { margin: 8px 0; color: var(--hm-orgchart-resolved-fg-secondary); font-size: 12px; }
|
||||
Reference in new issue
Block a user