Input Animations

[ajotta]

Hello,

I would like to know the possibility of adding the effect of Input Animations within my Babylon theme, because I saw that the ultima theme has this effect and I really liked it.

How do I do this?

Code: Select all

<h:panelGroup styleClass="md-inputfield">
    <p:inputText id="name"/>
    <p:outputLabel for="name" value="Name" />
</h:panelGroup>

[mert.sincan]

Please add the following scss codes to _theme_styles.scss under src/main/webapp/resources/sass/overrides/

Code: Select all

/* Add your variable customizations of theme here */
body {
    .md-inputfield {
        display: block;
        position:relative;
        
        .ui-inputfield {
            background: transparent no-repeat;
            background-image: linear-gradient(to bottom, $primaryColor, $primaryColor), linear-gradient(to bottom, $inputGroupBorderColor, $inputGroupBorderColor);
            background-size: 0 2px, 100% 1px;
            background-position: 50% 100%, 50% 100%;
            transition: background-size 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
            border-width: 0;
            padding: 2px 2px 2px 2px;
            font-size: $fontSize;
            -moz-border-radius: 0px;
            -webkit-border-radius: 0px;
            border-radius: 0px;

            &.ui-state-focus {
                border-width: 0;
                background-size: 100% 2px, 100% 1px;
                outline: none;
                padding-bottom: 2px;
            }

            &.ui-widget-content {
                border-width: 1px;
                background: transparent;
                background-image: none;
            }

            &.ui-state-error {
                border-color: $inputErrorBorderColor;
                background-image: linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor), linear-gradient(to bottom, $inputErrorBorderColor, $inputErrorBorderColor);
            }

            &:-webkit-autofill {
                border-color: $inputGroupBorderColor;
                border-style: solid;
                border-width: 0px 0px 1px 0px;

                &.ui-state-focus {
                    padding-bottom: 0px;
                }
            }
        }
        
        label:not(.ui-selectonemenu-label) {
            color:$textColor;
            font-weight:normal;
            position:absolute;
            pointer-events:none;
            left:5px;
            top:1px;
            transition: 0.3s ease all;
            -moz-transition: 0.3s ease all;
            -webkit-transition: 0.3s ease all;
        }
        input:focus ~ label,
        input.ui-state-filled ~ label,
        textarea:focus ~ label,
        textarea.ui-state-filled ~ label,
        .ui-selectonemenu.ui-state-focus ~ label,
        .ui-selectonemenu.ui-state-filled ~ label,
        .md-inputwrapper-focus ~ label,
        .md-inputwrapper-filled ~ label {
            top:-20px;
            font-size:12px;
            color:$primaryColor;
        }
        input:-webkit-autofill ~ label {
            top:-20px;
            font-size:12px;
            color:$primaryColor;
        }
        .ui-message {
            &.ui-message-error {
                background-color: transparent;
                border: 0 none;
                margin: 0px;
                .ui-message-error-icon {
                    top: 2px;
                }
            }
        }
        &.md-inputfield-box {
            background-color: $inputBgColor;
            height: 44px;
            >*:not(label) {
                bottom: 0px;
                position: absolute;
            }
            >label {
                top: 23px;
            }
            input:focus ~ label,
            input.ui-state-filled ~ label,
            textarea:focus ~ label,
            textarea.ui-state-filled ~ label,
            .ui-selectonemenu.ui-state-focus ~ label,
            .ui-selectonemenu.ui-state-filled ~ label,
            .md-inputwrapper-focus ~ label,
            .md-inputwrapper-filled ~ label {
                top:1px;
            }
            .input:-webkit-autofill ~ label {
                top:1px;
            }
        }
    }

    
    .ui-widget-header, .ui-selectlistbox-filter-container {
        .md-inputfield {
            .ui-inputfield {
                background-image: linear-gradient(to bottom, #ffffff, #ffffff), linear-gradient(to bottom, desaturate(lighten($primaryColor,25%), 25%), desaturate(lighten($primaryColor,25%), 25%));
                padding-bottom: 2px;
            }
        }
    }
}

Best Regards,

[ajotta]

Thanks,
It worked.

[mert.sincan]

Glad to hear, thanks a lot for the update!

Best Regards,