221 lines
4.6 KiB
Plaintext
221 lines
4.6 KiB
Plaintext
/*
|
|
* ===================================
|
|
* UTKLabel.uss
|
|
* 텍스트 라벨 스타일
|
|
* ===================================
|
|
*/
|
|
|
|
/* ===================================
|
|
Base Container
|
|
=================================== */
|
|
|
|
.utk-label {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.utk-label__text {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ===================================
|
|
Size Variants
|
|
=================================== */
|
|
|
|
.utk-label--h1 .utk-label__text {
|
|
font-size: var(--font-size-h1);
|
|
-unity-font-style: bold;
|
|
}
|
|
|
|
.utk-label--h2 .utk-label__text {
|
|
font-size: var(--font-size-h2);
|
|
-unity-font-style: bold;
|
|
}
|
|
|
|
.utk-label--h3 .utk-label__text {
|
|
font-size: var(--font-size-h3);
|
|
-unity-font-style: bold;
|
|
}
|
|
|
|
.utk-label--body1 .utk-label__text {
|
|
font-size: var(--font-size-body1);
|
|
}
|
|
|
|
.utk-label--body2 .utk-label__text {
|
|
font-size: var(--font-size-body2);
|
|
}
|
|
|
|
.utk-label--label1 .utk-label__text {
|
|
font-size: var(--font-size-label1);
|
|
}
|
|
|
|
.utk-label--label2 .utk-label__text {
|
|
font-size: var(--font-size-label2);
|
|
}
|
|
|
|
.utk-label--label3 .utk-label__text {
|
|
font-size: var(--font-size-label3);
|
|
}
|
|
|
|
.utk-label--caption .utk-label__text {
|
|
font-size: var(--font-size-label4);
|
|
}
|
|
|
|
/* ===================================
|
|
Color Variants
|
|
=================================== */
|
|
|
|
.utk-label--primary .utk-label__text {
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.utk-label--secondary .utk-label__text {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.utk-label--disabled .utk-label__text {
|
|
color: var(--color-text-disabled);
|
|
}
|
|
|
|
.utk-label--success .utk-label__text {
|
|
color: var(--color-state-success);
|
|
}
|
|
|
|
.utk-label--warning .utk-label__text {
|
|
color: var(--color-state-warning);
|
|
}
|
|
|
|
.utk-label--error .utk-label__text {
|
|
color: var(--color-state-error);
|
|
}
|
|
|
|
.utk-label--info .utk-label__text {
|
|
color: var(--color-state-info);
|
|
}
|
|
|
|
/* ===================================
|
|
Font Style
|
|
=================================== */
|
|
|
|
.utk-label--bold .utk-label__text {
|
|
-unity-font-style: bold;
|
|
}
|
|
|
|
.utk-label--italic .utk-label__text {
|
|
-unity-font-style: italic;
|
|
}
|
|
|
|
.utk-label--bold.utk-label--italic .utk-label__text {
|
|
-unity-font-style: bold-and-italic;
|
|
}
|
|
|
|
/* ===================================
|
|
Text Alignment
|
|
=================================== */
|
|
|
|
.utk-label--left {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.utk-label--left .utk-label__text {
|
|
-unity-text-align: middle-left;
|
|
}
|
|
|
|
.utk-label--center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.utk-label--center .utk-label__text {
|
|
-unity-text-align: middle-center;
|
|
}
|
|
|
|
.utk-label--right {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.utk-label--right .utk-label__text {
|
|
-unity-text-align: middle-right;
|
|
}
|
|
|
|
/* ===================================
|
|
Icon Styles
|
|
=================================== */
|
|
|
|
.utk-label--has-icon {
|
|
align-items: center;
|
|
}
|
|
|
|
.utk-label__icon {
|
|
margin: 0;
|
|
padding: 0;
|
|
-unity-text-align: middle-center;
|
|
flex-shrink: 0;
|
|
-unity-font-definition: resource('Fonts/Icons/MaterialSymbolsOutlined');
|
|
font-size: 16px;
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
/* Icon Color Variants */
|
|
.utk-label--primary .utk-label__icon {
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.utk-label--secondary .utk-label__icon {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.utk-label--disabled .utk-label__icon {
|
|
color: var(--color-text-disabled);
|
|
}
|
|
|
|
.utk-label--success .utk-label__icon {
|
|
color: var(--color-state-success);
|
|
}
|
|
|
|
.utk-label--warning .utk-label__icon {
|
|
color: var(--color-state-warning);
|
|
}
|
|
|
|
.utk-label--error .utk-label__icon {
|
|
color: var(--color-state-error);
|
|
}
|
|
|
|
.utk-label--info .utk-label__icon {
|
|
color: var(--color-state-info);
|
|
}
|
|
|
|
.utk-label__image-icon {
|
|
flex-shrink: 0;
|
|
-unity-background-scale-mode: scale-to-fit;
|
|
-unity-background-image-tint-color: var(--color-text-primary);
|
|
}
|
|
|
|
/* Image Icon Color Variants */
|
|
.utk-label--primary .utk-label__image-icon {
|
|
-unity-background-image-tint-color: var(--color-text-primary);
|
|
}
|
|
|
|
.utk-label--secondary .utk-label__image-icon {
|
|
-unity-background-image-tint-color: var(--color-text-secondary);
|
|
}
|
|
|
|
.utk-label--disabled .utk-label__image-icon {
|
|
-unity-background-image-tint-color: var(--color-text-disabled);
|
|
}
|
|
|
|
.utk-label--success .utk-label__image-icon {
|
|
-unity-background-image-tint-color: var(--color-state-success);
|
|
}
|
|
|
|
.utk-label--warning .utk-label__image-icon {
|
|
-unity-background-image-tint-color: var(--color-state-warning);
|
|
}
|
|
|
|
.utk-label--error .utk-label__image-icon {
|
|
-unity-background-image-tint-color: var(--color-state-error);
|
|
}
|
|
|
|
.utk-label--info .utk-label__image-icon {
|
|
-unity-background-image-tint-color: var(--color-state-info);
|
|
}
|