Page 2 of 2

Re: Custom Theme Does not Compile Anymore

Posted: 17 Nov 2020, 16:20
by mert.sincan
Hi,

Thanks a lot for the update! Is this issue resolved on your side?

Best Regards,

Re: Custom Theme Does not Compile Anymore

Posted: 18 Nov 2020, 12:42
by mdvenoms
Hi mert

Yes partially, the only question that remains is how would you recommend to implement the solution you proposed here?
This won't compile anymore. Do you recommend to manually import all the required files?

viewtopic.php?f=98&t=61437

Best regards

Re: Custom Theme Does not Compile Anymore

Posted: 18 Nov 2020, 13:32
by mert.sincan
Hi,

Thanks a lot for the update! I think you can use ui-float-label class like in https://www.primefaces.org/babylon/input.xhtml (Float label demo)

Also, I don't know exactly what you need, but if you want to use a css like in the link, I updated it. Please try the code below;

Code: Select all

/* Add your 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:$inputPlaceholderTextColor;
            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: $inputBg;
            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;
            }
        }
    }
}
You can add it to _theme_styles.scss under src/main/webapp/resources/sass/overrides/

Best Regards,