Custom Theme Does not Compile Anymore

mert.sincan
Posts: 4473
Joined: 29 Jun 2013, 12:38

17 Nov 2020, 16:20

Hi,

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

Best Regards,

mdvenoms
Posts: 21
Joined: 24 Sep 2015, 13:07

18 Nov 2020, 12:42

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

mert.sincan
Posts: 4473
Joined: 29 Jun 2013, 12:38

18 Nov 2020, 13:32

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,

Post Reply

Return to “Babylon - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest