New input focus animation feature: specify line colors

Forum rules
Please note that response time for technical support is within 3-5 business days.
joerg
Posts: 24
Joined: 07 Nov 2013, 17:44

12 Apr 2018, 10:09

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.
Last edited by joerg on 12 Apr 2018, 16:15, edited 1 time in total.
PrimeFaces 8.0.2 | Tomcat 9 | Mojarra 2.2.20
PrimeVue 1.3.2
Win10, Chrome 84

kubrasulukan
Posts: 87
Joined: 10 Jan 2018, 16:04

12 Apr 2018, 13:34

We'll check and get back to you.

Regards

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

13 Apr 2018, 15:46

Could you please attach a screenshot for us?

joerg
Posts: 24
Joined: 07 Nov 2013, 17:44

13 Apr 2018, 18:12

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:

Code: Select all

body .ui-inputfield {
    background: white no-repeat;
    background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, #bdbdbd, #bdbdbd);
...
I guess the first color(#3F51B5) is the focus color, the second one the unfocused color (#bdbdbd).
PrimeFaces 8.0.2 | Tomcat 9 | Mojarra 2.2.20
PrimeVue 1.3.2
Win10, Chrome 84

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

16 Apr 2018, 07:50

I guess the first color(#3F51B5) is the focus color, the second one the unfocused color (#bdbdbd).
- Yes, perfect! Also, I made some changes in next version.

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;

joerg
Posts: 24
Joined: 07 Nov 2013, 17:44

16 Apr 2018, 20:00

Great, thanks! I've replaced the color codes with variables too. Will change them with the next version.
PrimeFaces 8.0.2 | Tomcat 9 | Mojarra 2.2.20
PrimeVue 1.3.2
Win10, Chrome 84

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

25 Apr 2018, 09:14

Glad to hear, thanks a lot for the update!

User avatar
asesovici
Posts: 25
Joined: 13 Mar 2018, 16:35

08 May 2018, 09:28

joerg wrote:
16 Apr 2018, 20:00
Great, thanks! I've replaced the color codes with variables too. Will change them with the next version.
Any idea when will the next version be released?
PrimeFaces 8.0 | JSF 2.2 | Payara 5.194
PrimeNG 9.1.3 | Angular 9.1.12

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

08 May 2018, 12:47

Ultima 1.1.2 released now. You can download it from store.

Regards,

User avatar
asesovici
Posts: 25
Joined: 13 Mar 2018, 16:35

08 May 2018, 18:01

aragorn wrote:
08 May 2018, 12:47
Ultima 1.1.2 released now. You can download it from store.

Regards,
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%));
        }
    }
The white color of the linear gradient makes the table's header column filters look odd when focused (white on white).
PrimeFaces 8.0 | JSF 2.2 | Payara 5.194
PrimeNG 9.1.3 | Angular 9.1.12

Post Reply

Return to “Ultima - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests