Page 1 of 1

inputSwitch component was drastically changed

Posted: 29 Sep 2020, 18:42
by wayne.robinson1
My team updated our Paradise theme to the latest release, 3.0.1, and we were disappointed and frustrated that the styling for the inputSwitch component was drastically changed to appear similar to a toggleSwitch. We utilize terminology from our customer's domain to populate the labels of the inputSwitch; without the labels, many of our usages of inputSwitch are unclear.Would you be able to provide us with CSS to centrally include that would undo these changes to inputSwitch? Will you undo or make these changes optional in a future update to the theme? Why was inputSwitch's styling changed to nearly match that of another component, toggleSwitch?


Edited

Re: inputSwitch component was drastically changed

Posted: 02 Oct 2020, 16:57
by mert.sincan
Hi,

This is by design. But, I'll talk about this again with our designer team. For now, you can make the following changes;
- Please change the old ui-inputswitch with the following code in _forms.scss under src/main/webapp/resources/sass/theme/designer/

Code: Select all

//line 1403 - 1445
   .ui-inputswitch {
        overflow: visible;
        background: $inputSwitchOffBg;
    
        .ui-inputswitch-handle {
            background: $inputSwitchHandleOffBg;
            border: $inputSwitchHandleOffBorder;
            transition: $transition;

            &.ui-state-focus {
                @include focused-input();
            }
        }
        
        .ui-inputswitch-on {
            color: $primaryTextColor;
        }
        
        &.ui-inputswitch-checked {
            background: $inputSwitchOnBg;
            
            .ui-inputswitch-handle {
                background: $inputSwitchHandleOnBg;
                border-color: $inputSwitchHandleOnBorderColor;
            }
        }
    }
Best Regards,