File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-18
08-14
08-14
08-18
08-19
08-19
// FoxListSearch — 시안: 관리자페이지(QsFVFFUKGH68xAPVkF3SJ9) list-toolbar의 search (5111:4099)
//
// 마크업 계약 (React 밖 소비자용):
// <form class="fox-list-search" role="search">
// <div class="fox-list-search__box">
// <span class="fox-list-search__field">…select-txt…</span> <!-- 선택 -->
// <input class="fox-list-search__input">
// <button class="fox-list-search__submit">…svg…</button>
// </div>
// </form>
//
// 상자 규격은 FoxInput md와 같지만(높이 40 · radius 8 · 테두리 input-border) 좌우 여백만
// `form/padding/sm`으로 좁다 — 안에 셀렉트와 버튼이 들어가기 때문이다.
//
// 토큰이 아닌 값:
// - 폭 320, 제출 버튼 32: 시안 값이나 Figma가 변수로 export하지 않는다.
@use "abstracts" as fox;
@use "form-field" as field;
.fox-list-search {
display: flex;
flex-shrink: 0;
align-items: center;
gap: fox.gap(3);
// 시안 값이나 변수로 export되지 않는다.
inline-size: 32rem;
&__box {
display: flex;
inline-size: 100%;
align-items: center;
gap: fox.gap(2);
block-size: fox.form(height-md);
padding-inline: fox.form(padding-sm);
border: fox.border(1) solid fox.color(input-border);
border-radius: fox.form(radius-md);
background: fox.color(input-surface);
}
&__field {
display: inline-flex;
flex-shrink: 0;
align-items: center;
}
&__input {
@include field.field(label-md);
// 네이티브 `search`가 붙이는 기본 장식을 지운다 — 지우기 X는 제출 버튼과 겹친다.
&::-webkit-search-cancel-button,
&::-webkit-search-decoration {
appearance: none;
}
}
&__submit {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
// 시안 값이나 변수로 export되지 않는다.
inline-size: 3.2rem;
block-size: 3.2rem;
padding: 0;
border: none;
// 시안은 secondary 계열 버튼이다 — 옆의 "엑셀 다운로드"와 같은 색을 쓴다.
border-radius: fox.form(radius-md);
background: fox.color(button-secondary-surface);
color: fox.color(button-secondary-font);
cursor: pointer;
&:hover:not(:disabled) {
background: fox.color(button-secondary-surface-hover);
}
&:active:not(:disabled) {
background: fox.color(button-secondary-surface-pressed);
}
&:disabled {
background: fox.color(button-disabled-surface);
color: fox.color(font-neutral-disabled-strong);
cursor: default;
}
}
&__submit > svg {
inline-size: fox.form(icon-md);
block-size: fox.form(icon-md);
}
}