157 lines
3.3 KiB
CSS
157 lines
3.3 KiB
CSS
/* B01 대시보드 항목별 탭(92장) — 탭 줄 · 개요 · 프로젝트 · 회사 · 시스템. 색은 테마 변수만. */
|
|
|
|
.b01-dashboard__page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-24);
|
|
}
|
|
|
|
/* 탭 줄 — B08 위 탭과 같은 꼴 · 회사 고르기 알약은 오른쪽 끝 */
|
|
.b01-dashboard__tabs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
padding-bottom: var(--spacing-8);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.b01-dashboard__tabs .b01-dashboard__company-pill {
|
|
margin-right: 0;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* 개요 — 눌러서 탭으로 가는 숫자 칸 */
|
|
.b01-dashboard__overview-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b01-dashboard__metric--link {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
color: inherit;
|
|
font: inherit;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.b01-dashboard__metric--link:hover,
|
|
.b01-dashboard__metric--link:focus-visible {
|
|
border-color: var(--color-royal-amethyst);
|
|
outline: none;
|
|
}
|
|
|
|
.b01-dashboard__metric--link .b01-dashboard__metric-value {
|
|
font-size: var(--text-subheading);
|
|
}
|
|
|
|
.b01-dashboard__metric--alert .b01-dashboard__metric-value {
|
|
color: var(--color-danger);
|
|
}
|
|
|
|
.b01-dashboard__overview-title {
|
|
margin: 0 0 var(--spacing-8);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.b01-dashboard__overview,
|
|
.b01-dashboard__overview-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
/* 찾기 · 거르기 줄 */
|
|
.b01-dashboard__filters {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
gap: var(--spacing-16);
|
|
margin-bottom: var(--spacing-16);
|
|
}
|
|
|
|
.b01-dashboard__filters .ui-field {
|
|
min-width: 180px;
|
|
}
|
|
|
|
/* 쪽 넘김 */
|
|
.b01-dashboard__pager {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
margin-top: var(--spacing-8);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
.b01-dashboard__pager-count {
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* 회사 정보 칸 */
|
|
.b01-dashboard__info {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
gap: var(--spacing-16);
|
|
margin: 0 0 var(--spacing-16);
|
|
}
|
|
|
|
.b01-dashboard__info dt {
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--text-caption);
|
|
}
|
|
|
|
.b01-dashboard__info dd {
|
|
margin: var(--spacing-4) 0 0;
|
|
font-size: var(--text-body-sm);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.b01-dashboard__asset-thumb {
|
|
display: block;
|
|
max-height: 32px;
|
|
max-width: 96px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* 시스템 — 기간 고르기 줄 */
|
|
.b01-dashboard__period {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
margin-bottom: var(--spacing-8);
|
|
}
|
|
|
|
.b01-dashboard__period .ui-btn[aria-pressed="true"] {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.b01-dashboard__inquiry-state {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.b01-dashboard__grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.b01-dashboard__tabs .b01-dashboard__company-pill {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.b01-dashboard__ellipsis {
|
|
display: inline-block;
|
|
max-width: 280px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
vertical-align: bottom;
|
|
white-space: nowrap;
|
|
}
|