115 lines
4.0 KiB
CSS
115 lines
4.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-date — narrow 에서 range 세로 스택 ── */
|
|
@container v2-date (max-width: 400px) {
|
|
.v2-container-query-root {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.3rem;
|
|
}
|
|
.v2-container-query-root label {
|
|
display: block;
|
|
margin-bottom: 0.2rem;
|
|
text-align: left;
|
|
}
|
|
/* input 과 구분자가 한 줄일 때 세로 배치로 */
|
|
.v2-container-query-root .date-range,
|
|
.v2-container-query-root [class*="range"] {
|
|
flex-direction: column !important;
|
|
align-items: stretch !important;
|
|
}
|
|
}
|
|
|
|
/* ── 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-card-display — narrow 에서 cardsPerRow 1 (grid column 1) ── */
|
|
@container v2-card-display (max-width: 480px) {
|
|
/* gridTemplateColumns 가 inline style 로 설정되어 있어도,
|
|
자식 선택자로 강제 override */
|
|
.v2-container-query-root [style*="grid-template-columns"],
|
|
.v2-container-query-root [style*="gridTemplateColumns"],
|
|
.v2-container-query-root .card-container {
|
|
grid-template-columns: 1fr !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 {
|
|
/* 극단적으로 좁을 때 여백 최소화 */
|
|
}
|
|
}
|