101 lines
2.2 KiB
Plaintext
101 lines
2.2 KiB
Plaintext
/*
|
|
* ===================================
|
|
* UTKAlert.uss
|
|
* Alert 팝업 스타일
|
|
* ===================================
|
|
*/
|
|
|
|
/* ===================================
|
|
Base Container
|
|
=================================== */
|
|
|
|
.utk-alert {
|
|
flex-direction: column;
|
|
min-width: 280px;
|
|
max-width: 400px;
|
|
padding-top: var(--space-m);
|
|
padding-left: var(--space-xl);
|
|
padding-right: var(--space-xl);
|
|
padding-bottom: var(--space-xl);
|
|
background-color: var(--color-bg-modal);
|
|
border-radius: var(--radius-l);
|
|
border-width: var(--border-width);
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
/* ===================================
|
|
Title (상단 왼쪽)
|
|
=================================== */
|
|
|
|
.utk-alert__title {
|
|
font-size: var(--font-size-h3);
|
|
color: var(--color-text-primary);
|
|
-unity-font-style: bold;
|
|
-unity-text-align: middle-left;
|
|
margin: 0;
|
|
padding: 0;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
/* ===================================
|
|
Content (가운데)
|
|
=================================== */
|
|
|
|
.utk-alert__content {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
margin-top: var(--space-xxl);
|
|
margin-bottom: var(--space-xxl);
|
|
}
|
|
|
|
/* ===================================
|
|
Message (가운데)
|
|
=================================== */
|
|
|
|
.utk-alert__message {
|
|
font-size: var(--font-size-body2);
|
|
color: var(--color-text-secondary);
|
|
-unity-text-align: middle-center;
|
|
white-space: normal;
|
|
}
|
|
|
|
/* ===================================
|
|
Buttons
|
|
=================================== */
|
|
|
|
.utk-alert__buttons {
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
.utk-alert__btn {
|
|
min-width: 80px;
|
|
margin-left: var(--space-s);
|
|
margin-right: var(--space-s);
|
|
}
|
|
|
|
/* ===================================
|
|
Type Variants - Title Color
|
|
=================================== */
|
|
|
|
.utk-alert--info .utk-alert__title {
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.utk-alert--success .utk-alert__title {
|
|
color: var(--color-state-success);
|
|
}
|
|
|
|
.utk-alert--warning .utk-alert__title {
|
|
color: var(--color-state-warning);
|
|
}
|
|
|
|
.utk-alert--error .utk-alert__title {
|
|
color: var(--color-state-error);
|
|
}
|
|
|
|
.utk-alert--confirm .utk-alert__title {
|
|
color: var(--color-text-primary);
|
|
}
|