How to change the orientation of the element width transition

Unity Engine
,
1

All-CSS Toggle Switch (Checkbox Hack) (codepen.io)
8106449--1049522--css toggle switch.gif
I made a slide toggle referring to the link above,but i dont know how to change the orientation of the element width transition as shown in the reference.
And here is what i got:8106449--1049525--my css toggle switch.gif

public class SlideToggle : BaseField<bool>
{
    public new class UxmlFactory : UxmlFactory<SlideToggle, UxmlTraits> { }

    public new class UxmlTraits : BaseFieldTraits<bool, UxmlBoolAttributeDescription> { }

    public static readonly new string ussClassName = "slide-toggle";
    public static readonly new string inputUssClassName = "slide-toggle__input";
    public static readonly string inputKnobUssClassName = "slide-toggle__input-knob";
    public static readonly string inputCheckedUssClassName = "slide-toggle__input--checked";
    public static readonly string inputKnobHoldUssClassName = "slide-toggle__input-knob--hold";
    public static readonly string inputKnobAfterUssClassName = "slide-toggle__input-knob--after";

    VisualElement m_Input;
    VisualElement m_Knob;

    public SlideToggle() : this(null) { }

    public SlideToggle(string label) : base(label, null)
    {
        AddToClassList(ussClassName);

        m_Input = this.Q(className: BaseField<bool>.inputUssClassName);
        m_Input.AddToClassList(inputUssClassName);
        Add(m_Input);

        m_Knob = new();
        m_Knob.AddToClassList(inputKnobUssClassName);
        m_Knob.AddToClassList(inputKnobHoldUssClassName);
        m_Knob.AddToClassList(inputKnobAfterUssClassName);
        m_Input.Add(m_Knob);

        RegisterCallback<MouseDownEvent>(evt => OnMouseDown(evt));
        RegisterCallback<MouseUpEvent>(evt => OnMouseUp(evt));
    }

    static void OnClick(ClickEvent evt)
    {
        var slideToggle = evt.currentTarget as SlideToggle;
        slideToggle.ToggleValue();

        evt.StopPropagation();
    }

    static void OnMouseDown(MouseDownEvent evt)
    {
        var slideToggle = evt.currentTarget as SlideToggle;
        slideToggle.m_Knob.EnableInClassList(inputKnobAfterUssClassName, false);
        slideToggle.m_Knob.EnableInClassList(inputKnobHoldUssClassName, true);

        evt.StopPropagation();
    }

    static void OnMouseUp(MouseUpEvent evt)
    {
        var slideToggle = evt.currentTarget as SlideToggle;
        slideToggle.ToggleValue();
        slideToggle.m_Knob.EnableInClassList(inputKnobHoldUssClassName, false);
        slideToggle.m_Knob.EnableInClassList(inputKnobAfterUssClassName, true);
        slideToggle.m_Input.EnableInClassList(inputCheckedUssClassName, slideToggle.value);

        evt.StopPropagation();
    }

    private void ToggleValue()
    {
        value = !value;
    }

    //public override void SetValueWithoutNotify(bool newValue)
    //{
    //    base.SetValueWithoutNotify(newValue);

    //    m_Input.EnableInClassList(inputCheckedUssClassName, newValue);
    //}
}

.slide-toggle__input {
    position: relative;
    max-width: 32px;
    max-height: 16px;
    min-width: 32px;
    min-height: 16px;
    background-color: grey;
    border-radius: 8px;
}

.slide-toggle__input-knob {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    background-color: white;
    border-radius: 7px;
    transition: 0.3s;
}

.slide-toggle__input--checked {
    background-color: rgb(0, 156, 10);
}

.slide-toggle__input--checked > .slide-toggle__input-knob {
    translate: 100% 0;
   
}

.slide-toggle__input-knob--hold {
    width: 21px;
}

.slide-toggle__input-knob--after {
    width: 14px;
}
2

To have the width extend to the left, the element would need to be anchored to the right instead of the left. Since it is in Absolute position, it could mean having a right px value instead of left. You could probably switch left to right when in the checked state, and vice-versa. Hope this helps!

3

I just made it! Thank you!
8108804--1049978--my css toggle switch.gif

.slide-toggle__input {
    position: relative;
    max-width: 32px;
    max-height: 16px;
    min-width: 32px;
    min-height: 16px;
    background-color: grey;
    border-radius: 8px;
}

.slide-toggle__input-knob {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 17px;
    height: 14px;
    background-color: white;
    border-radius: 7px;
    transition: 0.3s;
}

.slide-toggle__input--checked {
    background-color: rgb(0, 156, 10);
}

.slide-toggle__input--checked > .slide-toggle__input-knob {
    left: 17px;
    right: 1px;
}

.slide-toggle__input--checked > .slide-toggle__input-knob--hold {
    left: 10px;
}

.slide-toggle__input-knob--hold {
    right: 10px;
}