Page 1 of 2

New input focus animation feature: specify line colors

Posted: 12 Apr 2018, 10:09
by joerg
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.

Re: New input focus animation feature: specify line colors

Posted: 12 Apr 2018, 13:34
by kubrasulukan
We'll check and get back to you.

Regards

Re: New input focus animation feature: specify line colors

Posted: 13 Apr 2018, 15:46
by aragorn
Could you please attach a screenshot for us?

Re: New input focus animation feature: specify line colors

Posted: 13 Apr 2018, 18:12
by joerg
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).

Re: New input focus animation feature: specify line colors

Posted: 16 Apr 2018, 07:50
by aragorn
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;

Re: New input focus animation feature: specify line colors

Posted: 16 Apr 2018, 20:00
by joerg
Great, thanks! I've replaced the color codes with variables too. Will change them with the next version.

Re: New input focus animation feature: specify line colors

Posted: 25 Apr 2018, 09:14
by aragorn
Glad to hear, thanks a lot for the update!

Re: New input focus animation feature: specify line colors

Posted: 08 May 2018, 09:28
by asesovici
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?

Re: New input focus animation feature: specify line colors

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

Regards,

Re: New input focus animation feature: specify line colors

Posted: 08 May 2018, 18:01
by asesovici
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).