133 lines
2.9 KiB
Plaintext
133 lines
2.9 KiB
Plaintext
/*
|
|
* ===================================
|
|
* UTKAlert.uss
|
|
* Alert 팝업 스타일
|
|
* ===================================
|
|
*/
|
|
|
|
/* ===================================
|
|
Base Container
|
|
=================================== */
|
|
|
|
.utk-alert {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-width: 280px;
|
|
max-width: 400px;
|
|
padding: var(--space-xl);
|
|
background-color: var(--color-bg-modal);
|
|
border-radius: var(--radius-l);
|
|
border-width: var(--border-width);
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
/* ===================================
|
|
Icon Container
|
|
=================================== */
|
|
|
|
.utk-alert__icon-container {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: var(--radius-full);
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: var(--space-l);
|
|
}
|
|
|
|
.utk-alert__icon {
|
|
font-size: 24px;
|
|
-unity-text-align: middle-center;
|
|
}
|
|
|
|
/* ===================================
|
|
Type Variants - Icons
|
|
=================================== */
|
|
|
|
.utk-alert--info .utk-alert__icon-container {
|
|
background-color: var(--color-state-info);
|
|
}
|
|
|
|
.utk-alert--info .utk-alert__icon {
|
|
color: var(--color-text-on-primary);
|
|
}
|
|
|
|
.utk-alert--success .utk-alert__icon-container {
|
|
background-color: var(--color-state-success);
|
|
}
|
|
|
|
.utk-alert--success .utk-alert__icon {
|
|
color: var(--color-text-on-primary);
|
|
}
|
|
|
|
.utk-alert--warning .utk-alert__icon-container {
|
|
background-color: var(--color-state-warning);
|
|
}
|
|
|
|
.utk-alert--warning .utk-alert__icon {
|
|
color: var(--color-text-on-primary);
|
|
}
|
|
|
|
.utk-alert--error .utk-alert__icon-container {
|
|
background-color: var(--color-state-error);
|
|
}
|
|
|
|
.utk-alert--error .utk-alert__icon {
|
|
color: var(--color-text-on-primary);
|
|
}
|
|
|
|
.utk-alert--confirm .utk-alert__icon-container {
|
|
background-color: var(--color-btn-primary);
|
|
}
|
|
|
|
.utk-alert--confirm .utk-alert__icon {
|
|
color: var(--color-text-on-primary);
|
|
}
|
|
|
|
/* ===================================
|
|
Content
|
|
=================================== */
|
|
|
|
.utk-alert__content {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: var(--space-l);
|
|
}
|
|
|
|
/* ===================================
|
|
Title
|
|
=================================== */
|
|
|
|
.utk-alert__title {
|
|
font-size: var(--font-size-h3);
|
|
color: var(--color-text-primary);
|
|
-unity-font-style: bold;
|
|
-unity-text-align: middle-center;
|
|
margin-bottom: var(--space-s);
|
|
}
|
|
|
|
/* ===================================
|
|
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);
|
|
}
|