Hi,
Thanks a lot for the update! Is this issue resolved on your side?
Best Regards,
Custom Theme Does not Compile Anymore
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Github Profile: https://github.com/mertsincan
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
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
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
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;
You can add it to _theme_styles.scss under src/main/webapp/resources/sass/overrides/
Best Regards,
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;
}
}
}
}
Best Regards,
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 7 guests