khi/XRLib
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6ae48ff30e6ab4ab948c8745c0305116a554dfd3
XRLib/Assets/Resources/UIToolkit/Button/UTKButton.uss
logonkhi 6ae48ff30e UIToolkit 스타일 및 입력 컴포넌트 추가 
- 기본 스타일을 위한 UTKDefaultStyle.uss파일을 생성했습니다.
- UIToolkit 설정 구성을 위한 UTKSettings.asset 파일을 추가했습니다.
- 포괄적인 색상 정의를 포함하는 다크 및 라이트 테마 스타일(UTKThemeDark.uss, UTKThemeLight.uss)을 도입했습니다.
- 테마에 독립적인 레이아웃 및 크기 변수를 위한 UTKVariables.uss를 구현했습니다.
- 스타일 및 이벤트 처리를 통해 열거형 선택을 위한 사용자 지정 드롭다운 컴포넌트(UTKEnumDropDown)를 개발했습니다.
- 사용자 지정 스타일 및 이벤트 관리를 통해 각각 이중 입력 필드와 긴 입력 필드를 위한 UTKDoubleField 및 UTKLongField 컴포넌트를 생성했습니다.
2026-01-09 18:42:17 +09:00

324 lines
7.5 KiB
Plaintext
Raw Blame History

/*
* ===================================
* UTKButton.uss
* 기본 버튼 컴포넌트 스타일
* ===================================
*/
/* ===================================
Base Button
=================================== */
.utk-button {
flex-direction: row;
align-items: center;
justify-content: center;
padding-left: var(--space-m);
padding-right: var(--space-m);
padding-top: var(--space-s);
padding-bottom: var(--space-s);
border-radius: var(--radius-s);
border-width: var(--border-width);
border-color: var(--color-border);
background-color: var(--color-btn-normal);
color: var(--color-text-primary);
transition-duration: var(--anim-fast);
transition-property: background-color, border-color, color;
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;
}
.utk-button:hover {
background-color: var(--color-btn-hover);
}
.utk-button:active {
background-color: var(--color-btn-pressed);
}
.utk-button:focus {
border-color: var(--color-border-focus);
}
/* ===================================
Button Icon
=================================== */
.utk-button__icon {
font-size: var(--font-size-body1);
color: var(--color-text-primary);
margin: 0;
padding: 0;
-unity-text-align: middle-center;
align-self: center;
}
.utk-button--has-icon .utk-button__icon {
margin-right: var(--space-s);
}
/* ===================================
Button Text
=================================== */
.utk-button__text {
font-size: var(--font-size-body2);
color: var(--color-text-primary);
-unity-text-align: middle-center;
margin-top: 2px;
}
/* ===================================
Icon Only Mode
=================================== */
.utk-button--icon-only {
padding: 0;
min-width: auto;
width: var(--size-icon-btn);
height: var(--size-icon-btn);
justify-content: center;
align-items: center;
}
.utk-button--icon-only .utk-button__icon {
margin: 0;
padding: 0;
align-self: center;
}
/* ===================================
Size Variants
=================================== */
.utk-button--small {
height: 20px;
min-width: 60px;
padding-left: var(--space-s);
padding-right: var(--space-s);
font-size: var(--font-size-label3);
}
.utk-button--small .utk-button__text {
font-size: var(--font-size-label3);
}
.utk-button--small .utk-button__icon {
font-size: var(--font-size-label3);
}
.utk-button--medium {
height: var(--size-btn-height);
min-width: var(--size-btn-min-width);
}
.utk-button--large {
height: 32px;
min-width: 100px;
padding-left: var(--space-l);
padding-right: var(--space-l);
}
.utk-button--large .utk-button__text {
font-size: var(--font-size-body1);
}
.utk-button--large .utk-button__icon {
font-size: var(--font-size-body1);
}
/* ===================================
Style Variants
=================================== */
/* Normal (Default) */
.utk-button--normal {
background-color: var(--color-btn-normal);
border-color: var(--color-border);
color: var(--color-text-primary);
}
.utk-button--normal:hover {
background-color: var(--color-btn-hover);
}
.utk-button--normal:active {
background-color: var(--color-btn-pressed);
}
/* Primary */
.utk-button--primary {
background-color: var(--color-btn-primary);
border-color: var(--color-btn-primary);
color: var(--color-text-on-primary);
}
.utk-button--primary:hover {
background-color: var(--color-btn-primary-hover);
border-color: var(--color-btn-primary-hover);
}
.utk-button--primary:active {
background-color: var(--color-blue-04);
border-color: var(--color-blue-04);
}
.utk-button--primary .utk-button__text,
.utk-button--primary .utk-button__icon {
color: var(--color-text-on-primary);
}
/* Secondary */
.utk-button--secondary {
background-color: var(--color-btn-secondary);
border-color: var(--color-border);
color: var(--color-text-primary);
}
.utk-button--secondary:hover {
background-color: var(--color-btn-secondary-hover);
}
/* Ghost (Transparent) */
.utk-button--ghost {
background-color: transparent;
border-color: transparent;
color: var(--color-text-primary);
}
.utk-button--ghost:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.utk-button--ghost:active {
background-color: rgba(255, 255, 255, 0.15);
}
/* Danger */
.utk-button--danger {
background-color: var(--color-red-01);
border-color: var(--color-red-01);
color: var(--color-text-on-primary);
}
.utk-button--danger:hover {
background-color: var(--color-red-02);
border-color: var(--color-red-02);
}
.utk-button--danger .utk-button__text,
.utk-button--danger .utk-button__icon {
color: var(--color-text-on-primary);
}
/* ===================================
Outline Variants
=================================== */
/* Outline Normal */
.utk-button--outline-normal {
background-color: transparent;
border-color: var(--color-border);
border-width: 1px;
color: var(--color-text-primary);
}
.utk-button--outline-normal:hover {
background-color: var(--color-btn-hover);
border-color: var(--color-text-primary);
}
.utk-button--outline-normal:active {
background-color: var(--color-btn-pressed);
}
.utk-button--outline-normal .utk-button__text,
.utk-button--outline-normal .utk-button__icon {
color: var(--color-text-primary);
}
/* Outline Primary */
.utk-button--outline-primary {
background-color: transparent;
border-color: var(--color-btn-primary);
border-width: 1px;
color: var(--color-btn-primary);
}
.utk-button--outline-primary:hover {
background-color: var(--color-btn-primary);
border-color: var(--color-btn-primary);
}
.utk-button--outline-primary:active {
background-color: var(--color-btn-primary-hover);
border-color: var(--color-btn-primary-hover);
}
.utk-button--outline-primary .utk-button__text,
.utk-button--outline-primary .utk-button__icon {
color: var(--color-btn-primary);
}
.utk-button--outline-primary:hover .utk-button__text,
.utk-button--outline-primary:hover .utk-button__icon {
color: var(--color-text-on-primary);
}
/* Outline Danger */
.utk-button--outline-danger {
background-color: transparent;
border-color: var(--color-red-01);
border-width: 1px;
color: var(--color-red-01);
}
.utk-button--outline-danger:hover {
background-color: var(--color-red-01);
border-color: var(--color-red-01);
}
.utk-button--outline-danger:active {
background-color: var(--color-red-02);
border-color: var(--color-red-02);
}
.utk-button--outline-danger .utk-button__text,
.utk-button--outline-danger .utk-button__icon {
color: var(--color-red-01);
}
.utk-button--outline-danger:hover .utk-button__text,
.utk-button--outline-danger:hover .utk-button__icon {
color: var(--color-text-on-primary);
}
/* ===================================
Disabled State
=================================== */
.utk-button--disabled {
background-color: var(--color-btn-disabled);
border-color: var(--color-border);
color: var(--color-text-disabled);
cursor: arrow;
}
.utk-button--disabled:hover {
background-color: var(--color-btn-disabled);
border-color: var(--color-border);
}
.utk-button--disabled:active {
background-color: var(--color-btn-disabled);
border-color: var(--color-border);
}
.utk-button--disabled:focus {
border-color: var(--color-border);
}
.utk-button--disabled .utk-button__text,
.utk-button--disabled .utk-button__icon {
color: var(--color-text-disabled);
}
Reference in New Issue View Git Blame Copy Permalink