UIToolkit 기본 UI 개발 중

2026-01-08 20:15:57 +09:00
parent ef4e86820c
commit 71831dd4c3
319 changed files with 28283 additions and 761 deletions
--- a/Assets/Resources/UIToolkit/Button/UTKCheckBox.uss
+++ b/Assets/Resources/UIToolkit/Button/UTKCheckBox.uss
@@ -0,0 +1,115 @@
+/*
+ * ===================================
+ * UTKCheckBox.uss
+ * 체크박스 스타일
+ * ===================================
+ */
+
+/* ===================================
+   Base Container
+   =================================== */
+
+.utk-checkbox {
+    flex-direction: row;
+    align-items: center;
+    align-self: flex-start;
+    cursor: link;
+}
+
+/* ===================================
+   Checkbox Box
+   =================================== */
+
+.utk-checkbox__box {
+    width: 18px;
+    height: 18px;
+    min-width: 18px;
+    min-height: 18px;
+    border-radius: var(--radius-s);
+    border-width: 2px;
+    border-color: var(--color-border);
+    background-color: var(--color-bg-input);
+    align-items: center;
+    justify-content: center;
+    transition-duration: var(--anim-fast);
+    transition-property: border-color, background-color;
+}
+
+.utk-checkbox:hover .utk-checkbox__box {
+    border-color: var(--color-btn-primary);
+}
+
+.utk-checkbox--checked .utk-checkbox__box,
+.utk-checkbox--indeterminate .utk-checkbox__box {
+    border-color: var(--color-btn-primary);
+    background-color: var(--color-btn-primary);
+}
+
+/* ===================================
+   Check Icon
+   =================================== */
+
+.utk-checkbox__icon {
+    width: 14px;
+    height: 14px;
+    font-size: 12px;
+    color: var(--color-text-on-primary);
+    -unity-text-align: middle-center;
+    -unity-font-style: bold;
+    opacity: 0;
+    transition-duration: var(--anim-fast);
+    transition-property: opacity;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    translate: -50% -50%;
+}
+
+.utk-checkbox--checked .utk-checkbox__icon,
+.utk-checkbox--indeterminate .utk-checkbox__icon {
+    opacity: 1;
+}
+
+/* ===================================
+   Label
+   =================================== */
+
+.utk-checkbox__label {
+    margin-left: var(--space-m);
+    font-size: var(--font-size-body2);
+    color: var(--color-text-primary);
+}
+
+/* ===================================
+   Disabled State
+   =================================== */
+
+.utk-checkbox--disabled {
+    cursor: default;
+}
+
+.utk-checkbox--disabled .utk-checkbox__box {
+    border-color: var(--color-border);
+    background-color: var(--color-btn-disabled);
+}
+
+.utk-checkbox--disabled:hover .utk-checkbox__box {
+    border-color: var(--color-border);
+}
+
+.utk-checkbox--disabled.utk-checkbox--checked .utk-checkbox__box,
+.utk-checkbox--disabled.utk-checkbox--indeterminate .utk-checkbox__box {
+    background-color: var(--color-text-disabled);
+    border-color: var(--color-text-disabled);
+}
+
+.utk-checkbox--disabled.utk-checkbox--checked:hover .utk-checkbox__box,
+.utk-checkbox--disabled.utk-checkbox--indeterminate:hover .utk-checkbox__box {
+    border-color: var(--color-text-disabled);
+}
+
+.utk-checkbox--disabled .utk-checkbox__label {
+    color: var(--color-text-disabled);
+}