Hi,
I have a question regarding the new 1.1.1 new input focus animation feature. On some of my themes there is no "bottom-line" of the fields when they don't have focus. I guess that's because that line has the same color as the background, but I can't find where to adjust that. It seems not as simple as changing the border-bottom-color.
Could you help me out there how to specify the color for that line in focused and non-focused state?
Thanks,
Jörg.
New input focus animation feature: specify line colors
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
Could you please attach a screenshot for us?
Github Profile: https://github.com/mertsincan
Thanks, I found it now. The invisible line was because I removed too many borders when playing around with the styles, my mistake. And I found out how to adjust the color of the line, not as easy as setting border-bottom:
I guess the first color(#3F51B5) is the focus color, the second one the unfocused color (#bdbdbd).
Code: Select all
body .ui-inputfield {
background: white no-repeat;
background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, #bdbdbd, #bdbdbd);
...
PrimeFaces 8.0.2 | Tomcat 9 | Mojarra 2.2.20
PrimeVue 1.3.2
Win10, Chrome 84
PrimeVue 1.3.2
Win10, Chrome 84
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
- Yes, perfect! Also, I made some changes in next version.I guess the first color(#3F51B5) is the focus color, the second one the unfocused color (#bdbdbd).
Code: Select all
.ui-inputfield {
background: transparent no-repeat;
background-image: linear-gradient(to bottom, $primaryColor, $primaryColor), linear-gradient(to bottom, $inputBorderColor, $inputBorderColor);
...
//_variables.scss
$inputBorderColor:#bdbdbd;
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Glad to hear, thanks a lot for the update!
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Ultima 1.1.2 released now. You can download it from store.
Regards,
Regards,
Github Profile: https://github.com/mertsincan
Thank you for the update @aragorn. The initial problem is solved, however I have a small point of concern in regards to the change made in _theme.scss for .ui-widget-header .ui-inputfield background-image:
Code: Select all
.ui-widget-header .ui-inputfield {
background-image: linear-gradient(to bottom, #ffffff, #ffffff), linear-gradient(to bottom, desaturate(lighten($primaryColor,25%), 25%), desaturate(lighten($primaryColor,25%), 25%));
}
}
PrimeFaces 8.0 | JSF 2.2 | Payara 5.194
PrimeNG 9.1.3 | Angular 9.1.12
PrimeNG 9.1.3 | Angular 9.1.12
-
- Information
-
Who is online
Users browsing this forum: No registered users and 6 guests