DDD1542
4a8413000b
Build & Deploy to K8s / build-and-deploy (push) Failing after 11m17s
Remove legacy v2 input/select and file/media runtimes, add canonical option/file loaders, and document Codex handoff.
61 lines
2.6 KiB
CSS
61 lines
2.6 KiB
CSS
/* ═══════════════════════════════════════════════════════════════════════════
|
|
withContainerQuery 경량 반응형 (Phase 2.1 Step B)
|
|
|
|
withContainerQuery HOC 의 `.v2-container-query-root` 루트 div 에는
|
|
container-type: inline-size + container-name: <id> 가 부착되어 있다.
|
|
이 파일은 경량 7개 v2-* 컴포넌트 각자의 container-name 에 대해
|
|
wide/narrow 단순 모드 분기를 CSS 레벨에서 준다.
|
|
|
|
원칙:
|
|
- 내부 로직/DOM 은 건드리지 않는다
|
|
- wrapper root 또는 보편적 태그 셀렉터 (button, input, label, svg 등) 만 사용
|
|
- 애매한 경우 font-size / padding / flex-direction 정도만 적용
|
|
- 완벽한 모드 분기는 Phase 2.2 에서 개별 컴포넌트 재작성 시 확장
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── v2-button-primary — narrow 에서 텍스트 숨기고 아이콘만 ── */
|
|
@container v2-button-primary (max-width: 120px) {
|
|
.v2-container-query-root button {
|
|
min-width: 32px;
|
|
padding-left: 0.35rem !important;
|
|
padding-right: 0.35rem !important;
|
|
gap: 0 !important;
|
|
}
|
|
/* svg 아이콘은 살리고 텍스트 span 만 숨김 */
|
|
.v2-container-query-root button > span:not(.v2-btn-icon-slot),
|
|
.v2-container-query-root button > *:not(svg):not(.v2-btn-icon-slot) {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* (V2 입력/선택 container query — Phase D.2 에서 제거. canonical `input` 은
|
|
자체 라벨 처리로 별도 container query 불필요) */
|
|
|
|
/* ── v2-text-display — narrow 에서 font-size 1단계 축소 ── */
|
|
@container v2-text-display (max-width: 300px) {
|
|
.v2-container-query-root {
|
|
font-size: 0.82em;
|
|
}
|
|
.v2-container-query-root > div {
|
|
font-size: inherit !important;
|
|
}
|
|
}
|
|
|
|
/* ── v2-aggregation-widget — narrow 에서 2열 그리드 ── */
|
|
@container v2-aggregation-widget (max-width: 480px) {
|
|
.v2-container-query-root [style*="grid-template-columns"],
|
|
.v2-container-query-root [style*="gridTemplateColumns"] {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
|
}
|
|
.v2-container-query-root {
|
|
font-size: 0.9em;
|
|
}
|
|
}
|
|
|
|
/* ── 공통: narrow 에서 padding 약간 축소 ── */
|
|
@container (max-width: 300px) {
|
|
.v2-container-query-root {
|
|
/* 극단적으로 좁을 때 여백 최소화 */
|
|
}
|
|
}
|