Code - nbnloper/edupay-admin

// 입력 계열 공용 조각. // // 시안에서 helper-message · 입력 상자가 모두 같은 공용 컴포넌트라 // FoxInput · FoxTextArea · FoxPhoneNumber · FoxCertified · FoxEmail · FoxAddress · // FoxFileUpload가 같은 선언을 되풀이했다. 그 되풀이를 여기로 모은다. // // 라벨은 여기 없다 — FoxFormLabel이 컴포넌트로 갖는다. // // 믹스인만 있고 규칙이 없어 @use 해도 CSS가 늘지 않는다 — 부르는 자리에서만 나온다. // 그래서 파티셜을 따로 쓰든 묶음(components.scss)으로 쓰든 출력은 그대로다. @use "abstracts" as fox; /// 비활성·읽기전용 상자. 두 상태의 모양이 같아 한곳에 둔다. @mixin _disabled-box { border-width: fox.border(1); border-color: fox.color(input-border-disabled); background: fox.color(input-surface-disabled); } /// 필드 한 벌의 바깥 틀. 라벨·상자·헬퍼가 세로로 쌓인다. @mixin root($gap: 3) { display: flex; flex-direction: column; gap: fox.gap($gap); inline-size: 100%; } /// 시안 helper-message. 오류·포커스 색은 상태 규칙이 덮는다. /// /// `$display`는 폼 안에서 `flex`이고, 단독으로 쓰는 `FoxHelperText`에서만 /// `inline-flex`다 — 그쪽 시안이 내용만큼만 차지하게 준다. /// /// TODO(폼 통합, 적용 후 이 문단 삭제): 이 믹스인을 부르는 폼 다섯 곳은 앞으로 /// `FoxHelperText`(`.fox-helper-text`)로 옮긴다 — 절차는 `_fox-helper-text.scss` 상단 참고. @mixin message($display: flex) { display: $display; gap: fox.number(3); align-items: flex-start; margin: 0; color: fox.color(font-neutral-subtle); font-family: fox.font-family(body); font-size: fox.font-size(body-sm); font-weight: fox.font-weight(regular); line-height: 1.5; letter-spacing: -0.025em; } /// helper-message 왼쪽 아이콘. 글줄 첫 줄에 맞춰 살짝 내린다. @mixin message-icon { display: inline-flex; flex-shrink: 0; align-items: flex-start; padding-block-start: fox.padding(1); > * { inline-size: fox.icon(3); font-size: fox.icon(3); block-size: fox.icon(3); } } /// 입력 상자 껍데기. 높이·좌우 여백·모서리는 부르는 쪽이 정한다 — FoxInput은 크기 /// 수식어가, 나머지는 md 하나가 정한다. textarea는 세로 가운데 정렬을 쓰지 않으므로 /// `$align: null`로 끈다. @mixin box($gap: 3, $align: center) { box-sizing: border-box; display: flex; align-items: $align; gap: fox.gap($gap); inline-size: 100%; border: fox.border(1) solid fox.color(input-border); background: fox.color(input-surface); } /// 상자 하나짜리 크기(시안에 크기 축이 없는 컴포넌트용). @mixin box-size($size: md) { block-size: fox.form(height-#{$size}); padding-inline: fox.form(padding-#{$size}); border-radius: fox.form(radius-#{$size}); } /// 상자 속 알맹이. 테두리·배경은 상자가 그리므로 여기선 지운다. /// 글자 크기는 FoxInput만 크기 수식어가 정하므로 기본값이 없다. /// /// 뒤에 중첩 규칙이 붙으므로 부르는 쪽이 선언을 더할 때는 `@include`보다 앞에 적는다 — /// 뒤에 적으면 Sass가 같은 선택자를 한 번 더 낸다. /// 자동완성이 칠한 배경·글자색을 디자인 값으로 되돌린다. /// /// 브라우저는 자동완성한 칸에 자기 배경을 칠하는데 `background`로는 덮이지 않는다. 안쪽을 /// 가득 채우는 `inset` 그림자로 가리는 것이 표준 우회다. 글자색도 `color`가 먹지 않아 /// `-webkit-text-fill-color`로만 바꿀 수 있다. @mixin _autofilled { box-shadow: inset 0 0 0 100rem fox.color(input-surface); -webkit-text-fill-color: fox.color(font-neutral-default); caret-color: fox.color(font-neutral-default); } @mixin field($font-size: null, $line-height: 1) { flex: 1 0 0; min-inline-size: 0; margin: 0; padding: 0; border: none; background: none; color: fox.color(font-neutral-default); font-family: fox.font-family(body); @if $font-size { font-size: fox.font-size($font-size); } font-weight: fox.font-weight(regular); line-height: $line-height; letter-spacing: -0.025em; &::placeholder { color: fox.color(font-neutral-subtler); } // 포커스는 상자 테두리가 표시하므로 기본 외곽선을 지운다. &:focus { outline: none; } &:disabled { color: fox.color(font-neutral-disabled-strong); cursor: default; } // 표준 `:autofill`만 쓴다 — 접두사(`:-webkit-autofill`)를 함께 적어도 Lightning CSS가 // browserslist 타깃을 보고 표준형으로 합쳐 버려서 같은 규칙이 두 번 나올 뿐이다. &:autofill { @include _autofilled; } } /// 상태 · 자동. 브라우저가 판단한다 — 포커스는 `:focus-within`, 비활성·읽기전용은 /// 네이티브 속성, 오류는 `aria-invalid="true"`. 뒤에 오는 규칙이 이긴다: /// 포커스 < 오류 < 읽기전용 < 비활성. /// /// $field 알맹이의 element 이름(`__field` · `__segment`). /// $invalid-within `:has()`로 필드 전체가 오류인지 볼 때 찾을 것. 조각을 다른 컴포넌트에 /// 맡기는 경우(FoxPhoneNumber unit)는 알맹이가 없으므로 넓게 본다. /// @content 컴포넌트 고유 규칙. `:not([data-state])` 안에 붙는다. @mixin auto-states($block, $field: "field", $invalid-within: null) { $box: ".#{$block}__box"; $input: ".#{$block}__#{$field}"; $message: ".#{$block}__message"; $within: "#{$input}[aria-invalid=\"true\"]"; @if $invalid-within { $within: $invalid-within; } .#{$block}:not([data-state]) { #{$box}:focus-within { border-width: fox.border(2); border-color: fox.color(input-border-active); } #{$box}:has(#{$input}[aria-invalid="true"]) { border-width: fox.border(2); border-color: fox.color(input-border-error); } // 비활성도 `:read-only`에 걸리므로 떼어낸다. #{$box}:has(#{$input}:read-only:not(:disabled)) { @include _disabled-box; } #{$box}:has(#{$input}:disabled) { @include _disabled-box; } &:focus-within #{$message} { color: fox.color(font-system-information); } &:has(#{$within}) #{$message} { color: fox.color(font-system-danger); } @content; } } /// 상태 · 고정. 루트에 `data-state`를 주면 그 모양으로 못박히고 자동 규칙은 꺼진다. /// 카탈로그·스냅샷처럼 상태를 눈으로 비교해야 할 때 쓴다. /// /// 시안의 focused·completed·error·view는 값이 들어찬 모습이라 플레이스홀더도 진하게 둔다. @mixin fixed-states($block, $field: "field") { $root: ".#{$block}"; $box: ".#{$block}__box"; $input: ".#{$block}__#{$field}"; $message: ".#{$block}__message"; #{$root}[data-state="default"] #{$box}, #{$root}[data-state="completed"] #{$box} { border-width: fox.border(1); border-color: fox.color(input-border); background: fox.color(input-surface); } #{$root}[data-state="focused"] #{$box} { border-width: fox.border(2); border-color: fox.color(input-border-active); background: fox.color(input-surface); } #{$root}[data-state="error"] #{$box} { border-width: fox.border(2); border-color: fox.color(input-border-error); background: fox.color(input-surface); } #{$root}[data-state="view"] #{$box}, #{$root}[data-state="disabled"] #{$box} { @include _disabled-box; } #{$root}[data-state="completed"] #{$input}::placeholder, #{$root}[data-state="focused"] #{$input}::placeholder, #{$root}[data-state="error"] #{$input}::placeholder, #{$root}[data-state="view"] #{$input}::placeholder { color: fox.color(font-neutral-default); } #{$root}[data-state="disabled"] #{$input}, #{$root}[data-state="disabled"] #{$input}::placeholder { color: fox.color(font-neutral-disabled-strong); } #{$root}[data-state="focused"] #{$message} { color: fox.color(font-system-information); } #{$root}[data-state="completed"] #{$message} { color: fox.color(font-system-success); } #{$root}[data-state="error"] #{$message} { color: fox.color(font-system-danger); } @content; }