diff --git a/Assets/Resources/UIToolkit/Button/UTKCheckBox.uss b/Assets/Resources/UIToolkit/Button/UTKCheckBox.uss index 913b5037..f62f89a4 100644 --- a/Assets/Resources/UIToolkit/Button/UTKCheckBox.uss +++ b/Assets/Resources/UIToolkit/Button/UTKCheckBox.uss @@ -55,7 +55,7 @@ width: 14px; height: 14px; font-size: 12px; - color: var(--color-base-01); + color: var(--color-text-primary); -unity-text-align: middle-center; -unity-font-style: bold; opacity: 0; diff --git a/Assets/Resources/UIToolkit/Button/UTKToggle.uss b/Assets/Resources/UIToolkit/Button/UTKToggle.uss index a167961a..fafadd04 100644 --- a/Assets/Resources/UIToolkit/Button/UTKToggle.uss +++ b/Assets/Resources/UIToolkit/Button/UTKToggle.uss @@ -50,6 +50,7 @@ .utk-toggle > .unity-toggle__input > .unity-toggle__checkmark { width: 14px; height: 14px; + border-width: 0; border-radius: var(--radius-full); background-color: var(--color-text-secondary); -unity-background-image-tint-color: transparent; diff --git a/Assets/Resources/UIToolkit/Input/UTKBoundsField.uss b/Assets/Resources/UIToolkit/Input/UTKBoundsField.uss index 1ba59520..4ce96dec 100644 --- a/Assets/Resources/UIToolkit/Input/UTKBoundsField.uss +++ b/Assets/Resources/UIToolkit/Input/UTKBoundsField.uss @@ -12,6 +12,8 @@ .utk-boundsfield { flex-direction: row; align-items: flex-start; + flex-wrap: wrap; + height: auto; } /* =================================== @@ -101,6 +103,35 @@ Disabled State =================================== */ +/* =================================== + Error State + =================================== */ + +.utk-boundsfield--error .unity-float-field > .unity-base-text-field__input { + border-color: var(--color-border-error); +} + +.utk-boundsfield--error > .unity-label { + color: var(--color-state-error); +} + +/* Error Message Label */ +.utk-boundsfield__error-message { + width: 100%; + margin-top: var(--space-xs); + font-size: var(--font-size-caption); + color: var(--color-state-error); + white-space: normal; +} + +/* =================================== + Disabled State + =================================== */ + +.utk-boundsfield--disabled { + cursor: arrow; +} + .utk-boundsfield--disabled > .unity-label { color: var(--color-text-disabled); } @@ -108,4 +139,9 @@ .utk-boundsfield--disabled .unity-float-field > .unity-base-text-field__input { background-color: var(--color-btn-disabled); color: var(--color-text-disabled); + cursor: arrow; +} + +.utk-boundsfield--disabled .unity-float-field > .unity-base-text-field__input:focus { + border-color: var(--color-border); } diff --git a/Assets/Resources/UIToolkit/Input/UTKDoubleField.uss b/Assets/Resources/UIToolkit/Input/UTKDoubleField.uss index 823eac10..7dcfba95 100644 --- a/Assets/Resources/UIToolkit/Input/UTKDoubleField.uss +++ b/Assets/Resources/UIToolkit/Input/UTKDoubleField.uss @@ -12,6 +12,8 @@ .utk-double-field { flex-direction: row; align-items: center; + flex-wrap: wrap; + height: auto; } /* =================================== @@ -55,6 +57,28 @@ border-color: var(--color-border-focus); } +/* =================================== + Error State + =================================== */ + +.utk-double-field--error > .unity-base-text-field__input { + border-color: var(--color-border-error); +} + +.utk-double-field--error > .unity-label { + color: var(--color-state-error); +} + +/* Error Message Label */ +.utk-double-field__error-message { + width: 100%; + margin-top: var(--space-xs); + padding-left: 68px; + font-size: var(--font-size-caption); + color: var(--color-state-error); + white-space: normal; +} + /* =================================== Disabled State =================================== */ diff --git a/Assets/Resources/UIToolkit/Input/UTKFloatField.uss b/Assets/Resources/UIToolkit/Input/UTKFloatField.uss index c25d4113..08de3f6a 100644 --- a/Assets/Resources/UIToolkit/Input/UTKFloatField.uss +++ b/Assets/Resources/UIToolkit/Input/UTKFloatField.uss @@ -12,6 +12,8 @@ .utk-float-field { flex-direction: row; align-items: center; + flex-wrap: wrap; + height: auto; } /* =================================== @@ -55,6 +57,28 @@ border-color: var(--color-border-focus); } +/* =================================== + Error State + =================================== */ + +.utk-float-field--error > .unity-base-text-field__input { + border-color: var(--color-border-error); +} + +.utk-float-field--error > .unity-label { + color: var(--color-state-error); +} + +/* Error Message Label */ +.utk-float-field__error-message { + width: 100%; + margin-top: var(--space-xs); + padding-left: 68px; + font-size: var(--font-size-caption); + color: var(--color-state-error); + white-space: normal; +} + /* =================================== Disabled State =================================== */ diff --git a/Assets/Resources/UIToolkit/Input/UTKFloatStepper.uss b/Assets/Resources/UIToolkit/Input/UTKFloatStepper.uss index c3f339f2..243c0485 100644 --- a/Assets/Resources/UIToolkit/Input/UTKFloatStepper.uss +++ b/Assets/Resources/UIToolkit/Input/UTKFloatStepper.uss @@ -12,7 +12,9 @@ .utk-number-stepper { flex-direction: row; align-items: stretch; - height: var(--size-input-height); + flex-wrap: wrap; + height: auto; + min-height: var(--size-input-height); } @@ -154,3 +156,29 @@ .utk-number-stepper--disabled .utk-number-stepper__btn:active { background-color: var(--color-btn-disabled); } + + +/* =================================== + Error State + =================================== */ + +.utk-number-stepper--error .utk-number-stepper__text-input { + border-top-color: var(--color-border-error); + border-bottom-color: var(--color-border-error); + border-left-color: var(--color-border-error); +} + +.utk-number-stepper--error .utk-number-stepper__btn { + border-top-color: var(--color-border-error); + border-right-color: var(--color-border-error); + border-bottom-color: var(--color-border-error); +} + +/* Error Message Label */ +.utk-number-stepper__error-message { + width: 100%; + margin-top: var(--space-xs); + font-size: var(--font-size-caption); + color: var(--color-state-error); + white-space: normal; +} diff --git a/Assets/Resources/UIToolkit/Input/UTKInputField.uss b/Assets/Resources/UIToolkit/Input/UTKInputField.uss index a63169f6..0a5c8fa0 100644 --- a/Assets/Resources/UIToolkit/Input/UTKInputField.uss +++ b/Assets/Resources/UIToolkit/Input/UTKInputField.uss @@ -12,6 +12,8 @@ .utk-input { flex-direction: row; align-items: center; + flex-wrap: wrap; + height: auto; } /* =================================== @@ -99,6 +101,16 @@ color: var(--color-state-error); } +/* Error Message Label */ +.utk-input__error-message { + width: 100%; + margin-top: var(--space-xs); + padding-left: 68px; + font-size: var(--font-size-caption); + color: var(--color-state-error); + white-space: normal; +} + /* =================================== Variants =================================== */ diff --git a/Assets/Resources/UIToolkit/Input/UTKIntStepper.uss b/Assets/Resources/UIToolkit/Input/UTKIntStepper.uss index aea760b1..9f370b63 100644 --- a/Assets/Resources/UIToolkit/Input/UTKIntStepper.uss +++ b/Assets/Resources/UIToolkit/Input/UTKIntStepper.uss @@ -12,7 +12,9 @@ .utk-number-stepper { flex-direction: row; align-items: stretch; - height: var(--size-input-height); + flex-wrap: wrap; + height: auto; + min-height: var(--size-input-height); } @@ -154,3 +156,28 @@ .utk-number-stepper--disabled .utk-number-stepper__btn:active { background-color: var(--color-btn-disabled); } + +/* =================================== + Error State + =================================== */ + +.utk-number-stepper--error .utk-number-stepper__text-input { + border-top-color: var(--color-border-error); + border-bottom-color: var(--color-border-error); + border-left-color: var(--color-border-error); +} + +.utk-number-stepper--error .utk-number-stepper__btn { + border-top-color: var(--color-border-error); + border-right-color: var(--color-border-error); + border-bottom-color: var(--color-border-error); +} + +/* Error Message Label */ +.utk-number-stepper__error-message { + width: 100%; + margin-top: var(--space-xs); + font-size: var(--font-size-caption); + color: var(--color-state-error); + white-space: normal; +} diff --git a/Assets/Resources/UIToolkit/Input/UTKIntegerField.uss b/Assets/Resources/UIToolkit/Input/UTKIntegerField.uss index b198a0c2..42055b47 100644 --- a/Assets/Resources/UIToolkit/Input/UTKIntegerField.uss +++ b/Assets/Resources/UIToolkit/Input/UTKIntegerField.uss @@ -12,6 +12,8 @@ .utk-integer-field { flex-direction: row; align-items: center; + flex-wrap: wrap; + height: auto; } /* =================================== @@ -55,6 +57,28 @@ border-color: var(--color-border-focus); } +/* =================================== + Error State + =================================== */ + +.utk-integer-field--error > .unity-base-text-field__input { + border-color: var(--color-border-error); +} + +.utk-integer-field--error > .unity-label { + color: var(--color-state-error); +} + +/* Error Message Label */ +.utk-integer-field__error-message { + width: 100%; + margin-top: var(--space-xs); + padding-left: 68px; + font-size: var(--font-size-caption); + color: var(--color-state-error); + white-space: normal; +} + /* =================================== Disabled State =================================== */ diff --git a/Assets/Resources/UIToolkit/Input/UTKLongField.uss b/Assets/Resources/UIToolkit/Input/UTKLongField.uss index b525333d..2301560c 100644 --- a/Assets/Resources/UIToolkit/Input/UTKLongField.uss +++ b/Assets/Resources/UIToolkit/Input/UTKLongField.uss @@ -12,6 +12,8 @@ .utk-long-field { flex-direction: row; align-items: center; + flex-wrap: wrap; + height: auto; } /* =================================== @@ -55,6 +57,27 @@ border-color: var(--color-border-focus); } +/* =================================== + Error State + =================================== */ + +.utk-long-field--error > .unity-base-text-field__input { + border-color: var(--color-border-error); +} + +.utk-long-field--error > .unity-label { + color: var(--color-state-error); +} + +/* Error Message Label */ +.utk-long-field__error-message { + width: 100%; + margin-top: var(--space-xs); + padding-left: 68px; + font-size: var(--font-size-caption); + color: var(--color-state-error); +} + /* =================================== Disabled State =================================== */ diff --git a/Assets/Resources/UIToolkit/Input/UTKRectField.uss b/Assets/Resources/UIToolkit/Input/UTKRectField.uss index d8f41a14..d5fb5d7e 100644 --- a/Assets/Resources/UIToolkit/Input/UTKRectField.uss +++ b/Assets/Resources/UIToolkit/Input/UTKRectField.uss @@ -12,6 +12,8 @@ .utk-rectfield { flex-direction: row; align-items: flex-start; + flex-wrap: wrap; + height: auto; } /* =================================== @@ -92,6 +94,35 @@ Disabled State =================================== */ +/* =================================== + Error State + =================================== */ + +.utk-rectfield--error .unity-float-field > .unity-base-text-field__input { + border-color: var(--color-border-error); +} + +.utk-rectfield--error > .unity-label { + color: var(--color-state-error); +} + +/* Error Message Label */ +.utk-rectfield__error-message { + width: 100%; + margin-top: var(--space-xs); + font-size: var(--font-size-caption); + color: var(--color-state-error); + white-space: normal; +} + +/* =================================== + Disabled State + =================================== */ + +.utk-rectfield--disabled { + cursor: arrow; +} + .utk-rectfield--disabled > .unity-label { color: var(--color-text-disabled); } @@ -99,4 +130,9 @@ .utk-rectfield--disabled .unity-float-field > .unity-base-text-field__input { background-color: var(--color-btn-disabled); color: var(--color-text-disabled); + cursor: arrow; +} + +.utk-rectfield--disabled .unity-float-field > .unity-base-text-field__input:focus { + border-color: var(--color-border); } diff --git a/Assets/Resources/UIToolkit/Input/UTKVector2Field.uss b/Assets/Resources/UIToolkit/Input/UTKVector2Field.uss index 7c8e6eee..5ebcc7dc 100644 --- a/Assets/Resources/UIToolkit/Input/UTKVector2Field.uss +++ b/Assets/Resources/UIToolkit/Input/UTKVector2Field.uss @@ -12,6 +12,8 @@ .utk-vector2-field { flex-direction: row; align-items: center; + flex-wrap: wrap; + height: auto; margin-right: 0; } @@ -98,6 +100,27 @@ border-color: var(--color-border-focus); } +/* =================================== + Error State + =================================== */ + +.utk-vector2-field--error .unity-float-field > .unity-base-text-field__input { + border-color: var(--color-border-error); +} + +.utk-vector2-field--error > .unity-label { + color: var(--color-state-error); +} + +/* Error Message Label */ +.utk-vector2-field__error-message { + width: 100%; + margin-top: var(--space-xs); + font-size: var(--font-size-caption); + color: var(--color-state-error); + white-space: normal; +} + /* =================================== Disabled State =================================== */ diff --git a/Assets/Resources/UIToolkit/Input/UTKVector3Field.uss b/Assets/Resources/UIToolkit/Input/UTKVector3Field.uss index b2e21c9d..bf43a95e 100644 --- a/Assets/Resources/UIToolkit/Input/UTKVector3Field.uss +++ b/Assets/Resources/UIToolkit/Input/UTKVector3Field.uss @@ -12,6 +12,8 @@ .utk-vector3-field { flex-direction: row; align-items: center; + flex-wrap: wrap; + height: auto; margin-right: 0; } @@ -93,6 +95,27 @@ border-color: var(--color-border-focus); } +/* =================================== + Error State + =================================== */ + +.utk-vector3-field--error .unity-float-field > .unity-base-text-field__input { + border-color: var(--color-border-error); +} + +.utk-vector3-field--error > .unity-label { + color: var(--color-state-error); +} + +/* Error Message Label */ +.utk-vector3-field__error-message { + width: 100%; + margin-top: var(--space-xs); + font-size: var(--font-size-caption); + color: var(--color-state-error); + white-space: normal; +} + /* =================================== Disabled State =================================== */ diff --git a/Assets/Resources/UIToolkit/Input/UTKVector4Field.uss b/Assets/Resources/UIToolkit/Input/UTKVector4Field.uss index 6e1a4823..0fd804b7 100644 --- a/Assets/Resources/UIToolkit/Input/UTKVector4Field.uss +++ b/Assets/Resources/UIToolkit/Input/UTKVector4Field.uss @@ -12,6 +12,8 @@ .utk-vector4field { flex-direction: row; align-items: center; + flex-wrap: wrap; + height: auto; } /* =================================== @@ -79,6 +81,35 @@ Disabled State =================================== */ +/* =================================== + Error State + =================================== */ + +.utk-vector4field--error .unity-float-field > .unity-base-text-field__input { + border-color: var(--color-border-error); +} + +.utk-vector4field--error > .unity-label { + color: var(--color-state-error); +} + +/* Error Message Label */ +.utk-vector4field__error-message { + width: 100%; + margin-top: var(--space-xs); + font-size: var(--font-size-caption); + color: var(--color-state-error); + white-space: normal; +} + +/* =================================== + Disabled State + =================================== */ + +.utk-vector4field--disabled { + cursor: arrow; +} + .utk-vector4field--disabled > .unity-label { color: var(--color-text-disabled); } @@ -86,4 +117,9 @@ .utk-vector4field--disabled .unity-float-field > .unity-base-text-field__input { background-color: var(--color-btn-disabled); color: var(--color-text-disabled); + cursor: arrow; +} + +.utk-vector4field--disabled .unity-float-field > .unity-base-text-field__input:focus { + border-color: var(--color-border); } diff --git a/Assets/Resources/UIToolkit/Sample/Input/UTKBoundsFieldSample.uxml b/Assets/Resources/UIToolkit/Sample/Input/UTKBoundsFieldSample.uxml index 111c377c..6a447474 100644 --- a/Assets/Resources/UIToolkit/Sample/Input/UTKBoundsFieldSample.uxml +++ b/Assets/Resources/UIToolkit/Sample/Input/UTKBoundsFieldSample.uxml @@ -14,6 +14,22 @@ + + + + + + + + diff --git a/Assets/Resources/UIToolkit/Sample/Input/UTKDoubleFieldSample.uxml b/Assets/Resources/UIToolkit/Sample/Input/UTKDoubleFieldSample.uxml index 7ac3ea1a..74f8b62b 100644 --- a/Assets/Resources/UIToolkit/Sample/Input/UTKDoubleFieldSample.uxml +++ b/Assets/Resources/UIToolkit/Sample/Input/UTKDoubleFieldSample.uxml @@ -22,6 +22,30 @@ + + + + + + + + + + + + diff --git a/Assets/Resources/UIToolkit/Sample/Input/UTKFloatFieldSample.uxml b/Assets/Resources/UIToolkit/Sample/Input/UTKFloatFieldSample.uxml index eb383a74..048c527f 100644 --- a/Assets/Resources/UIToolkit/Sample/Input/UTKFloatFieldSample.uxml +++ b/Assets/Resources/UIToolkit/Sample/Input/UTKFloatFieldSample.uxml @@ -22,6 +22,30 @@ + + + + + + + + + + + + diff --git a/Assets/Resources/UIToolkit/Sample/Input/UTKFloatStepperSample.uss b/Assets/Resources/UIToolkit/Sample/Input/UTKFloatStepperSample.uss new file mode 100644 index 00000000..cce8962b --- /dev/null +++ b/Assets/Resources/UIToolkit/Sample/Input/UTKFloatStepperSample.uss @@ -0,0 +1,10 @@ +/* + * =================================== + * UTKFloatStepperSample.uss + * Float Stepper Sample Specific Styles + * =================================== + */ + +.utk-sample-stepper { + width: 150px; +} diff --git a/Assets/Resources/UIToolkit/Sample/Input/UTKFloatStepperSample.uss.meta b/Assets/Resources/UIToolkit/Sample/Input/UTKFloatStepperSample.uss.meta new file mode 100644 index 00000000..97140d97 --- /dev/null +++ b/Assets/Resources/UIToolkit/Sample/Input/UTKFloatStepperSample.uss.meta @@ -0,0 +1,11 @@ +fileFormatVersion: 2 +guid: f2dcdd47a630b394ea19ea8b91f61d01 +ScriptedImporter: + internalIDToNameTable: [] + externalObjects: {} + serializedVersion: 2 + userData: + assetBundleName: + assetBundleVariant: + script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0} + disableValidation: 0 diff --git a/Assets/Resources/UIToolkit/Sample/Input/UTKFloatStepperSample.uxml b/Assets/Resources/UIToolkit/Sample/Input/UTKFloatStepperSample.uxml new file mode 100644 index 00000000..f4fd2df0 --- /dev/null +++ b/Assets/Resources/UIToolkit/Sample/Input/UTKFloatStepperSample.uxml @@ -0,0 +1,63 @@ + + +