DDD1542
3003a056d9
Codex 재검증에서 발견된 2건 정리.
withContainerQuery.css: '@container v2-card-display' 미디어 쿼리 룰 (10줄)
삭제. v2-card-display 컴포넌트 폐기 (e44ba2953) 시 빠진 css 정리.
templateMigrate.ts: 'card-display': 'stats' 매핑 라인 삭제. v2-card-display
의 v2 prefix 없는 legacy alias. 폐기 컴포넌트의 마이그 매핑이라 dead.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
84 lines
3.0 KiB
CSS
84 lines
3.0 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-input — narrow 에서 라벨 위로 (flex-direction column) ── */
|
|
@container v2-input (max-width: 400px) {
|
|
.v2-container-query-root {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.v2-container-query-root label {
|
|
display: block;
|
|
margin-bottom: 0.2rem;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
/* ── v2-select — narrow 에서 라벨 위로 ── */
|
|
@container v2-select (max-width: 400px) {
|
|
.v2-container-query-root {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.v2-container-query-root label {
|
|
display: block;
|
|
margin-bottom: 0.2rem;
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
/* ── 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 {
|
|
/* 극단적으로 좁을 때 여백 최소화 */
|
|
}
|
|
}
|