스타일 가이드 적용 완료. UTKCOlorPicker, UTKDatePicker 확인해야 함
This commit is contained in:
@@ -37,16 +37,19 @@
|
||||
=================================== */
|
||||
|
||||
.utk-foldout > .unity-foldout__toggle > .unity-toggle__input > .unity-foldout__checkmark {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: var(--space-s);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
-unity-background-image-tint-color: var(--color-text-secondary);
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: rotate;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
margin-right: var(--space-xs);
|
||||
}
|
||||
|
||||
.utk-foldout > .unity-foldout__toggle:checked > .unity-toggle__input > .unity-foldout__checkmark {
|
||||
rotate: 90deg;
|
||||
rotate: 0deg;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
@@ -57,13 +60,15 @@
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
-unity-font-style: bold;
|
||||
margin: 0;
|
||||
padding: var(--space-s) 0;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Content Container
|
||||
=================================== */
|
||||
|
||||
.utk-foldout > .unity-foldout__content {
|
||||
.utk-foldout .unity-foldout__content {
|
||||
margin-top: var(--space-s);
|
||||
margin-left: var(--space-m);
|
||||
padding: var(--space-m);
|
||||
@@ -73,6 +78,11 @@
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.utk-foldout .unity-foldout__content {
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Collapsed State - Remove content border radius on top
|
||||
=================================== */
|
||||
@@ -82,7 +92,7 @@
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.utk-foldout:checked > .unity-foldout__content {
|
||||
.utk-foldout:checked .unity-foldout__content {
|
||||
margin-top: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
||||
@@ -29,78 +29,29 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Content Text
|
||||
=================================== */
|
||||
|
||||
.utk-scrollview .unity-label {
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Vertical Scroller
|
||||
=================================== */
|
||||
|
||||
.utk-scrollview .unity-scroller--vertical {
|
||||
width: 8px;
|
||||
margin-left: var(--space-xs);
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--vertical > .unity-scroller__low-button,
|
||||
.utk-scrollview .unity-scroller--vertical > .unity-scroller__high-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--vertical > .unity-scroller__slider {
|
||||
width: 8px;
|
||||
width: 6px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--vertical .unity-base-slider__tracker {
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: 4px;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--vertical .unity-base-slider__dragger {
|
||||
width: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-text-disabled);
|
||||
border-width: 0;
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--vertical .unity-base-slider__dragger:hover {
|
||||
background-color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Horizontal Scroller
|
||||
=================================== */
|
||||
|
||||
.utk-scrollview .unity-scroller--horizontal {
|
||||
height: 8px;
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--horizontal > .unity-scroller__low-button,
|
||||
.utk-scrollview .unity-scroller--horizontal > .unity-scroller__high-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--horizontal > .unity-scroller__slider {
|
||||
height: 8px;
|
||||
height: 6px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--horizontal .unity-base-slider__tracker {
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: 4px;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--horizontal .unity-base-slider__dragger {
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-text-disabled);
|
||||
border-width: 0;
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.utk-scrollview .unity-scroller--horizontal .unity-base-slider__dragger:hover {
|
||||
background-color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
}
|
||||
|
||||
.utk-tooltip-label {
|
||||
color: var(--color-text-primary);
|
||||
color: #FFFFFF;
|
||||
font-size: var(--font-size-body2);
|
||||
white-space: normal;
|
||||
-unity-text-align: middle-left;
|
||||
|
||||
@@ -71,19 +71,6 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.accordion-tree-view .unity-scroller--vertical {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.accordion-tree-view .unity-scroller--vertical .unity-base-slider__dragger {
|
||||
background-color: var(--color-scroller-dragger-normal);
|
||||
border-radius: var(--radius-m);
|
||||
}
|
||||
|
||||
.accordion-tree-view .unity-scroller--vertical .unity-base-slider__dragger:hover {
|
||||
background-color: var(--color-scroller-dragger-hover);
|
||||
}
|
||||
|
||||
.accordion-tree-view .unity-tree-view__item {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
@@ -60,19 +60,6 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#main-list-view .unity-scroller--vertical {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
#main-list-view .unity-scroller--vertical .unity-base-slider__dragger {
|
||||
background-color: rgb(80, 80, 82);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#main-list-view .unity-scroller--vertical .unity-base-slider__dragger:hover {
|
||||
background-color: rgb(100, 100, 102);
|
||||
}
|
||||
|
||||
.image-list-row {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
|
||||
@@ -30,8 +30,8 @@
|
||||
=================================== */
|
||||
|
||||
.utk-listview .unity-list-view__item {
|
||||
padding-top: var(--space-s);
|
||||
padding-bottom: var(--space-s);
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: var(--space-m);
|
||||
padding-right: var(--space-m);
|
||||
margin: 0;
|
||||
@@ -40,14 +40,10 @@
|
||||
transition-property: background-color;
|
||||
font-size: var(--font-size-body2);
|
||||
height: auto;
|
||||
min-height: 28px;
|
||||
min-height: 24px;
|
||||
-unity-text-align: middle-left;
|
||||
}
|
||||
|
||||
.utk-listview .unity-collection-view__item--selected {
|
||||
color: var(--color-base-01);
|
||||
}
|
||||
|
||||
/* Unity USS does not support :last-child pseudo-class */
|
||||
/* .utk-listview .unity-list-view__item:last-child {
|
||||
border-bottom-width: 0;
|
||||
@@ -57,10 +53,13 @@
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
/* Unity ListView uses unity-collection-view__item--selected class internally */
|
||||
.utk-listview .unity-collection-view__item--selected,
|
||||
.utk-listview .unity-list-view__item--selected {
|
||||
background-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-listview .unity-collection-view__item--selected:hover,
|
||||
.utk-listview .unity-list-view__item--selected:hover {
|
||||
background-color: var(--color-btn-primary-hover);
|
||||
}
|
||||
@@ -78,9 +77,11 @@
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.utk-listview .unity-collection-view__item--selected .unity-label,
|
||||
.utk-listview .unity-collection-view__item--selected .unity-text-element,
|
||||
.utk-listview .unity-list-view__item--selected .unity-label,
|
||||
.utk-listview .unity-list-view__item--selected .unity-text-element {
|
||||
color: var(--color-base-01) !important;
|
||||
color: var(--color-text-on-primary) !important;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
@@ -90,31 +91,6 @@
|
||||
/* Note: Alternating rows must be handled in C# code
|
||||
Unity USS does not support :nth-child() pseudo-class */
|
||||
|
||||
/* ===================================
|
||||
Scrollbar
|
||||
=================================== */
|
||||
|
||||
.utk-listview .unity-scroller--vertical > .unity-scroller__low-button,
|
||||
.utk-listview .unity-scroller--vertical > .unity-scroller__high-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.utk-listview .unity-scroller--vertical .unity-base-slider__tracker {
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-listview .unity-scroller--vertical .unity-base-slider__dragger {
|
||||
width: 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--color-text-disabled);
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-listview .unity-scroller--vertical .unity-base-slider__dragger:hover {
|
||||
background-color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Empty State
|
||||
=================================== */
|
||||
|
||||
@@ -46,7 +46,11 @@
|
||||
.utk-multicolumn-listview .unity-multi-column-header__column-title {
|
||||
font-size: var(--font-size-body2);
|
||||
-unity-font-style: bold;
|
||||
color: var(--color-text-primary);
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-multi-column-header__column .unity-text-element {
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
@@ -92,7 +96,7 @@
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-listview .unity-multi-column-view__cell {
|
||||
padding: var(--space-s) var(--space-m);
|
||||
padding: 0 var(--space-m);
|
||||
border-right-width: 1px;
|
||||
border-right-color: var(--color-border-light);
|
||||
}
|
||||
@@ -105,6 +109,8 @@
|
||||
.utk-multicolumn-listview .unity-multi-column-view__cell > .unity-label {
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-list-view__item--selected .unity-multi-column-view__cell > .unity-label {
|
||||
@@ -118,35 +124,6 @@
|
||||
/* Note: Alternating rows must be handled in C# code
|
||||
Unity USS does not support :nth-child() pseudo-class */
|
||||
|
||||
/* ===================================
|
||||
Scrollbar
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-listview .unity-scroller--vertical {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-scroller--vertical > .unity-scroller__low-button,
|
||||
.utk-multicolumn-listview .unity-scroller--vertical > .unity-scroller__high-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-scroller--vertical .unity-base-slider__tracker {
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-scroller--vertical .unity-base-slider__dragger {
|
||||
width: 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--color-text-disabled);
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-multicolumn-listview .unity-scroller--vertical .unity-base-slider__dragger:hover {
|
||||
background-color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Sort Indicator
|
||||
=================================== */
|
||||
|
||||
@@ -46,7 +46,11 @@
|
||||
.utk-multicolumn-treeview .unity-multi-column-header__column-title {
|
||||
font-size: var(--font-size-body2);
|
||||
-unity-font-style: bold;
|
||||
color: var(--color-text-primary);
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-multi-column-header__column .unity-text-element {
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
@@ -100,10 +104,6 @@
|
||||
transition-property: rotate;
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-tree-view__item-toggle:checked {
|
||||
rotate: 90deg;
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-tree-view__item--selected .unity-tree-view__item-toggle {
|
||||
-unity-background-image-tint-color: var(--color-text-on-primary);
|
||||
}
|
||||
@@ -125,9 +125,10 @@
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-treeview .unity-multi-column-view__cell {
|
||||
padding: var(--space-s) var(--space-m);
|
||||
padding: 0 var(--space-m);
|
||||
border-right-width: 1px;
|
||||
border-right-color: var(--color-border-light);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* Unity USS does not support :last-child pseudo-class */
|
||||
@@ -144,35 +145,6 @@
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Scrollbar
|
||||
=================================== */
|
||||
|
||||
.utk-multicolumn-treeview .unity-scroller--vertical {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-scroller--vertical > .unity-scroller__low-button,
|
||||
.utk-multicolumn-treeview .unity-scroller--vertical > .unity-scroller__high-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-scroller--vertical .unity-base-slider__tracker {
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-scroller--vertical .unity-base-slider__dragger {
|
||||
width: 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--color-text-disabled);
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-multicolumn-treeview .unity-scroller--vertical .unity-base-slider__dragger:hover {
|
||||
background-color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Sort Indicator
|
||||
=================================== */
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
=================================== */
|
||||
|
||||
.utk-treeview .unity-tree-view__item {
|
||||
padding: var(--space-xs) 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color;
|
||||
@@ -32,10 +32,13 @@
|
||||
background-color: var(--color-btn-hover);
|
||||
}
|
||||
|
||||
/* Unity TreeView uses unity-collection-view__item--selected class internally */
|
||||
.utk-treeview .unity-collection-view__item--selected,
|
||||
.utk-treeview .unity-tree-view__item--selected {
|
||||
background-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
.utk-treeview .unity-collection-view__item--selected:hover,
|
||||
.utk-treeview .unity-tree-view__item--selected:hover {
|
||||
background-color: var(--color-btn-primary-hover);
|
||||
}
|
||||
@@ -47,20 +50,30 @@
|
||||
.utk-treeview .unity-tree-view__item-toggle {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: var(--space-xs);
|
||||
-unity-background-image-tint-color: var(--color-text-secondary);
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: rotate;
|
||||
}
|
||||
|
||||
.utk-treeview .unity-tree-view__item-toggle:checked {
|
||||
rotate: 0deg;
|
||||
/* Override #unity-checkmark white color from UTKDefaultStyle.uss */
|
||||
.utk-treeview .unity-tree-view__item-toggle #unity-checkmark {
|
||||
-unity-background-image-tint-color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.utk-treeview .unity-tree-view__item-toggle:hover #unity-checkmark {
|
||||
-unity-background-image-tint-color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-treeview .unity-collection-view__item--selected .unity-tree-view__item-toggle,
|
||||
.utk-treeview .unity-tree-view__item--selected .unity-tree-view__item-toggle {
|
||||
-unity-background-image-tint-color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
.utk-treeview .unity-collection-view__item--selected .unity-tree-view__item-toggle #unity-checkmark,
|
||||
.utk-treeview .unity-tree-view__item--selected .unity-tree-view__item-toggle #unity-checkmark {
|
||||
-unity-background-image-tint-color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Indentation
|
||||
=================================== */
|
||||
@@ -88,35 +101,7 @@
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-treeview .unity-collection-view__item--selected .unity-tree-view__item-content > .unity-label,
|
||||
.utk-treeview .unity-tree-view__item--selected .unity-tree-view__item-content > .unity-label {
|
||||
color: var(--color-text-on-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Scrollbar
|
||||
=================================== */
|
||||
|
||||
.utk-treeview .unity-scroller--vertical {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.utk-treeview .unity-scroller--vertical > .unity-scroller__low-button,
|
||||
.utk-treeview .unity-scroller--vertical > .unity-scroller__high-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.utk-treeview .unity-scroller--vertical .unity-base-slider__tracker {
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-treeview .unity-scroller--vertical .unity-base-slider__dragger {
|
||||
width: 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--color-text-disabled);
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.utk-treeview .unity-scroller--vertical .unity-base-slider__dragger:hover {
|
||||
background-color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
@@ -11,10 +11,12 @@
|
||||
|
||||
.utk-alert {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 280px;
|
||||
max-width: 400px;
|
||||
padding: var(--space-xl);
|
||||
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);
|
||||
@@ -22,91 +24,33 @@
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
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
|
||||
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);
|
||||
-unity-text-align: middle-left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Message
|
||||
Content (가운데)
|
||||
=================================== */
|
||||
|
||||
.utk-alert__content {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
margin-top: var(--space-l);
|
||||
margin-bottom: var(--space-l);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Message (가운데)
|
||||
=================================== */
|
||||
|
||||
.utk-alert__message {
|
||||
@@ -130,3 +74,27 @@
|
||||
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);
|
||||
}
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-l);
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.utk-color-picker__title {
|
||||
|
||||
@@ -187,6 +187,67 @@
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Date Range Selection Styles
|
||||
=================================== */
|
||||
|
||||
.utk-date-picker__day-btn--range-start {
|
||||
background-color: var(--color-calendar-selected);
|
||||
color: var(--color-text-on-primary);
|
||||
-unity-font-style: bold;
|
||||
border-top-left-radius: var(--radius-s);
|
||||
border-bottom-left-radius: var(--radius-s);
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.utk-date-picker__day-btn--range-start:hover {
|
||||
background-color: var(--color-btn-primary-hover);
|
||||
}
|
||||
|
||||
.utk-date-picker__day-btn--range-end {
|
||||
background-color: var(--color-calendar-selected);
|
||||
color: var(--color-text-on-primary);
|
||||
-unity-font-style: bold;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-right-radius: var(--radius-s);
|
||||
border-bottom-right-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
.utk-date-picker__day-btn--range-end:hover {
|
||||
background-color: var(--color-btn-primary-hover);
|
||||
}
|
||||
|
||||
/* 시작일과 종료일이 같은 경우 */
|
||||
.utk-date-picker__day-btn--range-start.utk-date-picker__day-btn--range-end {
|
||||
border-radius: var(--radius-s);
|
||||
}
|
||||
|
||||
.utk-date-picker__day-btn--in-range {
|
||||
background-color: var(--color-calendar-range);
|
||||
color: var(--color-text-primary);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.utk-date-picker__day-btn--in-range:hover {
|
||||
background-color: var(--color-calendar-range-hover);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Range Info Label
|
||||
=================================== */
|
||||
|
||||
.utk-date-picker__range-info {
|
||||
margin-top: var(--space-m);
|
||||
padding: var(--space-s) var(--space-m);
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: var(--radius-s);
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-secondary);
|
||||
-unity-text-align: middle-center;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Time Picker Row
|
||||
=================================== */
|
||||
|
||||
@@ -95,6 +95,11 @@
|
||||
padding: var(--space-l);
|
||||
}
|
||||
|
||||
.utk-panel__content .unity-label {
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.utk-panel--collapsed .utk-panel__content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -20,56 +20,24 @@
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Icon
|
||||
Type Variants - Message Color
|
||||
Toast는 항상 어두운 배경을 사용하므로 밝은 색상 직접 지정
|
||||
=================================== */
|
||||
|
||||
.utk-toast__icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: var(--space-m);
|
||||
font-size: 14px;
|
||||
-unity-text-align: middle-center;
|
||||
border-radius: var(--radius-full);
|
||||
.utk-toast--info .utk-toast__message {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Type Variants
|
||||
=================================== */
|
||||
|
||||
.utk-toast--info {
|
||||
border-left-width: 3px;
|
||||
border-left-color: var(--color-state-info);
|
||||
.utk-toast--success .utk-toast__message {
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.utk-toast--info .utk-toast__icon {
|
||||
color: var(--color-state-info);
|
||||
.utk-toast--warning .utk-toast__message {
|
||||
color: #FFB74D;
|
||||
}
|
||||
|
||||
.utk-toast--success {
|
||||
border-left-width: 3px;
|
||||
border-left-color: var(--color-state-success);
|
||||
}
|
||||
|
||||
.utk-toast--success .utk-toast__icon {
|
||||
color: var(--color-state-success);
|
||||
}
|
||||
|
||||
.utk-toast--warning {
|
||||
border-left-width: 3px;
|
||||
border-left-color: var(--color-state-warning);
|
||||
}
|
||||
|
||||
.utk-toast--warning .utk-toast__icon {
|
||||
color: var(--color-state-warning);
|
||||
}
|
||||
|
||||
.utk-toast--error {
|
||||
border-left-width: 3px;
|
||||
border-left-color: var(--color-state-error);
|
||||
}
|
||||
|
||||
.utk-toast--error .utk-toast__icon {
|
||||
color: var(--color-state-error);
|
||||
.utk-toast--error .utk-toast__message {
|
||||
color: #EF5350;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
@@ -79,7 +47,7 @@
|
||||
.utk-toast__message {
|
||||
flex-grow: 1;
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
color: #FFFFFF;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
|
||||
@@ -354,13 +354,17 @@ ListView/TreeView 항목 텍스트 스타일
|
||||
color: var(--color-base-01) !important;
|
||||
}
|
||||
|
||||
.unity-tree-view__item-content {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
/* TreeView 항목 텍스트 색상 */
|
||||
.unity-tree-view__item .unity-label,
|
||||
.unity-tree-view__item .unity-text-element {
|
||||
color: var(--color-text-primary) !important;
|
||||
-unity-text-align: middle-left;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.unity-tree-view__item--selected .unity-label,
|
||||
@@ -376,12 +380,16 @@ TreeView 항목 스타일
|
||||
|
||||
/* TreeView 펼치기/접기 화살표 토글 - 크기 및 정렬 조정 */
|
||||
.unity-tree-view__item-toggle {
|
||||
margin-right: 4px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
padding: 0;
|
||||
align-self: center;
|
||||
-unity-background-image-tint-color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
@@ -557,6 +565,10 @@ SetupDraggerEvents() 메서드처럼 코드로 MouseEnterEvent/MouseLeaveEvent
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.unity-scroller--vertical .unity-base-slider__dragger:hover {
|
||||
background-color: var(--color-scroller-dragger-hover);
|
||||
}
|
||||
|
||||
/* 상하 화살표 버튼 - 완전히 숨김 처리 */
|
||||
.unity-scroller--vertical .unity-repeat-button {
|
||||
display: none;
|
||||
@@ -566,6 +578,11 @@ SetupDraggerEvents() 메서드처럼 코드로 MouseEnterEvent/MouseLeaveEvent
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.unity-scroller--vertical > .unity-scroller__low-button,
|
||||
.unity-scroller--vertical > .unity-scroller__high-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 슬라이더 - 여백 제거 */
|
||||
.unity-scroller--vertical .unity-slider {
|
||||
margin: 0;
|
||||
@@ -614,6 +631,10 @@ SetupDraggerEvents() 메서드처럼 코드로 MouseEnterEvent/MouseLeaveEvent
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.unity-scroller--horizontal .unity-base-slider__dragger:hover {
|
||||
background-color: var(--color-scroller-dragger-hover);
|
||||
}
|
||||
|
||||
/* 좌우 화살표 버튼 - 완전히 숨김 처리 */
|
||||
.unity-scroller--horizontal .unity-repeat-button {
|
||||
display: none;
|
||||
@@ -623,6 +644,11 @@ SetupDraggerEvents() 메서드처럼 코드로 MouseEnterEvent/MouseLeaveEvent
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.unity-scroller--horizontal > .unity-scroller__low-button,
|
||||
.unity-scroller--horizontal > .unity-scroller__high-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 슬라이더 - 여백 제거 */
|
||||
.unity-scroller--horizontal .unity-slider {
|
||||
margin: 0;
|
||||
|
||||
@@ -161,6 +161,8 @@
|
||||
--color-calendar-saturday: var(--color-blue-02);
|
||||
--color-calendar-today: var(--color-seti-orange);
|
||||
--color-calendar-selected: var(--color-blue-06);
|
||||
--color-calendar-range: rgba(66, 133, 244, 0.25);
|
||||
--color-calendar-range-hover: rgba(66, 133, 244, 0.35);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - State (color-state-*)
|
||||
|
||||
@@ -168,6 +168,8 @@
|
||||
--color-calendar-saturday: var(--color-blue-02);
|
||||
--color-calendar-today: var(--color-orange-02);
|
||||
--color-calendar-selected: var(--color-blue-02);
|
||||
--color-calendar-range: rgba(66, 133, 244, 0.15);
|
||||
--color-calendar-range-hover: rgba(66, 133, 244, 0.25);
|
||||
|
||||
/* ===================================
|
||||
Semantic Colors - State (color-state-*)
|
||||
|
||||
@@ -1,95 +0,0 @@
|
||||
/*
|
||||
* ===================================
|
||||
* UTKTab.uss
|
||||
* Unity Tab 래핑 스타일
|
||||
* ===================================
|
||||
*/
|
||||
|
||||
/* ===================================
|
||||
Base Tab
|
||||
=================================== */
|
||||
|
||||
.utk-tab {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-m) var(--space-l);
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
border-bottom-width: 2px;
|
||||
border-bottom-color: transparent;
|
||||
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color, border-color, color;
|
||||
}
|
||||
|
||||
.utk-tab:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.utk-tab--selected {
|
||||
border-bottom-color: var(--color-btn-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Tab Header (Label Container)
|
||||
=================================== */
|
||||
|
||||
.utk-tab > .unity-tab__header {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Tab Header Label
|
||||
=================================== */
|
||||
|
||||
.utk-tab > .unity-tab__header > .unity-tab__header-label {
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.utk-tab--selected > .unity-tab__header > .unity-tab__header-label {
|
||||
color: var(--color-btn-primary);
|
||||
-unity-font-style: bold;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Tab Content Container
|
||||
=================================== */
|
||||
|
||||
.utk-tab > .unity-tab__content-container {
|
||||
flex-grow: 1;
|
||||
padding: var(--space-m);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Hide Tab Underline (Use Custom)
|
||||
=================================== */
|
||||
|
||||
.utk-tab > .unity-tab__header > .unity-tab__header-underline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Disabled State
|
||||
=================================== */
|
||||
|
||||
.utk-tab--disabled {
|
||||
cursor: arrow;
|
||||
}
|
||||
|
||||
.utk-tab--disabled:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.utk-tab--disabled > .unity-tab__header > .unity-tab__header-label {
|
||||
color: var(--color-text-disabled);
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
fileFormatVersion: 2
|
||||
guid: 26349aa08d395b241b70ebcbf9b99671
|
||||
ScriptedImporter:
|
||||
internalIDToNameTable: []
|
||||
externalObjects: {}
|
||||
serializedVersion: 2
|
||||
userData:
|
||||
assetBundleName:
|
||||
assetBundleVariant:
|
||||
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
|
||||
disableValidation: 0
|
||||
@@ -12,6 +12,7 @@
|
||||
.utk-tabview {
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
@@ -42,47 +43,57 @@
|
||||
padding: var(--space-l);
|
||||
}
|
||||
|
||||
/* Tab Content inside unity-tab__content-container */
|
||||
.utk-tabview .unity-tab__content-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.utk-tabview .unity-tab__content-container .unity-label {
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ===================================
|
||||
Tab styling inside TabView
|
||||
Tab Header inside TabView
|
||||
=================================== */
|
||||
|
||||
.utk-tabview > .unity-tab-view__header-container > .unity-tab {
|
||||
padding: var(--space-m) var(--space-l);
|
||||
background-color: transparent;
|
||||
.utk-tabview .unity-tab__header {
|
||||
background-color: transparent !important;
|
||||
border-width: 0;
|
||||
border-bottom-width: 2px;
|
||||
border-bottom-color: transparent;
|
||||
padding: var(--space-s) var(--space-l);
|
||||
margin-right: var(--space-s);
|
||||
transition-duration: var(--anim-fast);
|
||||
transition-property: background-color, border-color;
|
||||
transition-property: background-color;
|
||||
}
|
||||
|
||||
.utk-tabview > .unity-tab-view__header-container > .unity-tab:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
.utk-tabview .unity-tab__header:hover {
|
||||
background-color: var(--color-btn-hover) !important;
|
||||
}
|
||||
|
||||
.utk-tabview > .unity-tab-view__header-container > .unity-tab:checked {
|
||||
border-bottom-color: var(--color-btn-primary);
|
||||
.utk-tabview .unity-tab__header:checked {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Tab Header inside TabView */
|
||||
.utk-tabview > .unity-tab-view__header-container > .unity-tab > .unity-tab__header {
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.utk-tabview > .unity-tab-view__header-container > .unity-tab > .unity-tab__header > .unity-tab__header-label {
|
||||
.utk-tabview .unity-tab__header-label {
|
||||
font-size: var(--font-size-body2);
|
||||
color: var(--color-text-secondary);
|
||||
color: var(--color-text-secondary) !important;
|
||||
}
|
||||
|
||||
.utk-tabview > .unity-tab-view__header-container > .unity-tab:checked > .unity-tab__header > .unity-tab__header-label {
|
||||
color: var(--color-btn-primary);
|
||||
.utk-tabview .unity-tab__header:checked .unity-tab__header-label {
|
||||
color: var(--color-btn-primary) !important;
|
||||
-unity-font-style: bold;
|
||||
}
|
||||
|
||||
/* Hide underline (use custom border) */
|
||||
.utk-tabview > .unity-tab-view__header-container > .unity-tab > .unity-tab__header > .unity-tab__header-underline {
|
||||
display: none;
|
||||
/* Tab Underline */
|
||||
.utk-tabview .unity-tab__header-underline {
|
||||
height: 2px;
|
||||
background-color: transparent !important;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.utk-tabview .unity-tab__header:checked > .unity-tab__header-underline {
|
||||
background-color: var(--color-btn-primary) !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user