Search Unity

Question Selector lists in UI Builder

Discussion in 'UI Toolkit' started by WongKit, Feb 1, 2023.

  1. WongKit

    WongKit

    Joined:
    Apr 27, 2017
    Posts:
    26
    Hi,

    according to https://docs.unity3d.com/Manual/UIE-USS-Selectors-list.html UI Toolkit support selector lists aka having the same style for different selectors.

    I tried it and it works fine when editing the .uss manually.
    Code (csharp):
    1. .mybutton,
    2. .horizontal-options__button,
    3. .horizontal-options__value,
    4. .unity-toggle__checkmark
    5. {
    6.     font-size: var(--font-size-default);
    7.     color: rgb(0, 0, 0);
    8.     background-color: var(--color-button);
    9.     border-top-left-radius: 5px;
    10.     border-bottom-left-radius: 5px;
    11.     border-top-right-radius: 5px;
    12.     border-bottom-right-radius: 5px;
    13.     border-left-width: 1px;
    14.     border-right-width: 1px;
    15. ...
    16. }
    However, as soon as I save anything in UI Builder, my selector list explodes into 4 separate single selector with each one having a copy of all USS properties.

    How can I prevent UI Builder to mess up the selector list? Or is there any other workflow to have the same style definition to different visual elements whose classes I am not allowed to edit?
     
    WongKit, Feb 1, 2023
    #1

  2. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    Hi, the builder consider each selector as different USS rule so that's why that on save the builder will explode your list into 4 separate rules.

    Sadly there's nothing you can do to prevent this. This is mainly due to USS authoring limitations in the UI builder. The best workaround that I can think of is to create custom USS class and add them onto the elements you want to style.
     
    jonathanma_unity, Feb 3, 2023
    #2

  3. WongKit

    WongKit

    Joined:
    Apr 27, 2017
    Posts:
    26
    Thank you for your response!
    Unfortunately, UI Builder does not allow to add USS classes to visual elements inside standard controls. So there is no direct way to apply the same style to the checkmark box of the toggle control or the handler of a scroll view for example.

    The only way I can think of is to create an own variant of the standard control, query the nested element and add the custom class by C# code. But this seems kinda excessive, so that duplicating USS properties look like a more reasonable approach.
     
    WongKit, Feb 4, 2023
    #3