샘플 코드 개선. UTKHelpBox 개선
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -11,32 +11,33 @@
|
||||
|
||||
.utk-helpbox {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
padding: var(--space-m);
|
||||
border-radius: var(--radius-s);
|
||||
border-width: var(--border-width);
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Icon
|
||||
=================================== */
|
||||
|
||||
.utk-helpbox > .unity-help-box__icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
.utk-helpbox__icon {
|
||||
font-size: 20px;
|
||||
margin-right: var(--space-m);
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Label
|
||||
Message
|
||||
=================================== */
|
||||
|
||||
.utk-helpbox > .unity-help-box__label {
|
||||
.utk-helpbox__message {
|
||||
flex-grow: 1;
|
||||
font-size: var(--font-size-body2);
|
||||
white-space: normal;
|
||||
-unity-text-align: upper-left;
|
||||
-unity-text-align: middle-left;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
@@ -44,16 +45,33 @@
|
||||
=================================== */
|
||||
|
||||
.utk-helpbox--info {
|
||||
background-color: rgba(59, 130, 246, 0.1);
|
||||
border-color: var(--color-blue-02);
|
||||
background-color: rgba(8, 151, 251, 0.1);
|
||||
border-color: var(--color-state-info);
|
||||
}
|
||||
|
||||
.utk-helpbox--info > .unity-help-box__icon {
|
||||
-unity-background-image-tint-color: var(--color-blue-02);
|
||||
.utk-helpbox--info .utk-helpbox__icon {
|
||||
color: var(--color-state-info);
|
||||
}
|
||||
|
||||
.utk-helpbox--info > .unity-help-box__label {
|
||||
color: var(--color-text-primary);
|
||||
.utk-helpbox--info .utk-helpbox__message {
|
||||
color: var(--color-state-info);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Success Type
|
||||
=================================== */
|
||||
|
||||
.utk-helpbox--success {
|
||||
background-color: rgba(115, 201, 145, 0.1);
|
||||
border-color: var(--color-state-success);
|
||||
}
|
||||
|
||||
.utk-helpbox--success .utk-helpbox__icon {
|
||||
color: var(--color-state-success);
|
||||
}
|
||||
|
||||
.utk-helpbox--success .utk-helpbox__message {
|
||||
color: var(--color-state-success);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
@@ -61,16 +79,16 @@
|
||||
=================================== */
|
||||
|
||||
.utk-helpbox--warning {
|
||||
background-color: rgba(245, 158, 11, 0.1);
|
||||
background-color: rgba(238, 157, 40, 0.1);
|
||||
border-color: var(--color-state-warning);
|
||||
}
|
||||
|
||||
.utk-helpbox--warning > .unity-help-box__icon {
|
||||
-unity-background-image-tint-color: var(--color-state-warning);
|
||||
.utk-helpbox--warning .utk-helpbox__icon {
|
||||
color: var(--color-state-warning);
|
||||
}
|
||||
|
||||
.utk-helpbox--warning > .unity-help-box__label {
|
||||
color: var(--color-text-primary);
|
||||
.utk-helpbox--warning .utk-helpbox__message {
|
||||
color: var(--color-state-warning);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
@@ -78,16 +96,16 @@
|
||||
=================================== */
|
||||
|
||||
.utk-helpbox--error {
|
||||
background-color: rgba(239, 68, 68, 0.1);
|
||||
background-color: rgba(241, 76, 76, 0.1);
|
||||
border-color: var(--color-state-error);
|
||||
}
|
||||
|
||||
.utk-helpbox--error > .unity-help-box__icon {
|
||||
-unity-background-image-tint-color: var(--color-state-error);
|
||||
.utk-helpbox--error .utk-helpbox__icon {
|
||||
color: var(--color-state-error);
|
||||
}
|
||||
|
||||
.utk-helpbox--error > .unity-help-box__label {
|
||||
color: var(--color-text-primary);
|
||||
.utk-helpbox--error .utk-helpbox__message {
|
||||
color: var(--color-state-error);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
@@ -99,10 +117,11 @@
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-helpbox--none > .unity-help-box__icon {
|
||||
.utk-helpbox--none .utk-helpbox__icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.utk-helpbox--none > .unity-help-box__label {
|
||||
.utk-helpbox--none .utk-helpbox__message {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user