323 lines
7.4 KiB
Plaintext
323 lines
7.4 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: link;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ===================================
|
||
|
|
Disabled State
|
||
|
|
=================================== */
|
||
|
|
|
||
|
|
.utk-button--disabled {
|
||
|
|
background-color: var(--color-btn-disabled);
|
||
|
|
border-color: var(--color-border);
|
||
|
|
color: var(--color-text-disabled);
|
||
|
|
cursor: default;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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);
|
||
|
|
}
|