437 lines
10 KiB
Plaintext
437 lines
10 KiB
Plaintext
/*
|
|
* ===================================
|
|
* 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;
|
|
}
|
|
|
|
/* ===================================
|
|
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);
|
|
}
|
|
|
|
/* ===================================
|
|
Text Variant (Label/Icon only, no background/border)
|
|
=================================== */
|
|
|
|
/* Text - 배경과 외곽선이 투명하고 텍스트/아이콘만 표시 */
|
|
.utk-button--text {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
border-width: 0;
|
|
color: var(--color-text-primary);
|
|
padding-left: var(--space-s);
|
|
padding-right: var(--space-s);
|
|
min-width: auto;
|
|
}
|
|
|
|
.utk-button--text:hover {
|
|
background-color: transparent;
|
|
color: var(--color-btn-primary);
|
|
}
|
|
|
|
.utk-button--text:active {
|
|
background-color: transparent;
|
|
color: var(--color-btn-primary-hover);
|
|
}
|
|
|
|
.utk-button--text .utk-button__text,
|
|
.utk-button--text .utk-button__icon {
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.utk-button--text:hover .utk-button__text,
|
|
.utk-button--text:hover .utk-button__icon {
|
|
color: var(--color-btn-primary);
|
|
}
|
|
|
|
.utk-button--text:active .utk-button__text,
|
|
.utk-button--text:active .utk-button__icon {
|
|
color: var(--color-btn-primary-hover);
|
|
}
|
|
|
|
/* Text Icon Only - 원형 아이콘 버튼 */
|
|
.utk-button--text.utk-button--icon-only {
|
|
width: var(--size-icon-btn);
|
|
height: var(--size-icon-btn);
|
|
border-radius: 50%;
|
|
padding: 0;
|
|
}
|
|
|
|
.utk-button--text.utk-button--icon-only:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.utk-button--text.utk-button--icon-only:hover .utk-button__icon {
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.utk-button--text.utk-button--icon-only:active {
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.utk-button--text.utk-button--icon-only:active .utk-button__icon {
|
|
color: var(--color-text-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);
|
|
}
|
|
|
|
/* Text Variant Disabled - hover/active 시에도 색상 유지 */
|
|
.utk-button--text.utk-button--disabled {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.utk-button--text.utk-button--disabled:hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.utk-button--text.utk-button--disabled:hover .utk-button__text,
|
|
.utk-button--text.utk-button--disabled:hover .utk-button__icon {
|
|
color: var(--color-text-disabled);
|
|
}
|
|
|
|
.utk-button--text.utk-button--disabled:active .utk-button__text,
|
|
.utk-button--text.utk-button--disabled:active .utk-button__icon {
|
|
color: var(--color-text-disabled);
|
|
}
|
|
|
|
/* ===================================
|
|
Image Icon Support
|
|
=================================== */
|
|
|
|
.utk-button__image-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
flex-shrink: 0;
|
|
-unity-background-scale-mode: scale-to-fit;
|
|
}
|
|
|
|
.utk-button--has-image-icon .utk-button__image-icon {
|
|
margin-right: var(--space-s);
|
|
}
|
|
|
|
.utk-button--icon-only .utk-button__image-icon {
|
|
margin-right: 0;
|
|
}
|
|
|
|
/* Size Variants for Image Icon */
|
|
.utk-button--small .utk-button__image-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
.utk-button--large .utk-button__image-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|