The background color for focused buttons is incorrect

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
aflorin
Posts: 69
Joined: 13 Dec 2017, 19:01

30 Jan 2018, 21:39

In the theme's base project, the background colors for the buttons that receive FOCUS honor the styles defined for the dynamically selected theme. For example, the focused background color for the Success button is green, which comes from this line in theme-blue.css:

Code: Select all

  body .success-btn.ui-button:focus,
  body .success-btn > .ui-button:focus,
  body .ui-splitbutton.success-btn > .ui-button:focus {
    background-color: #449d44;
    border-color: #398439; }
However, if I load the theme in my own project using scss files (not dynamically loaded via a menu selection like the base project), the background color for focused buttons is defined by the following line in _forms.scss

Code: Select all

body {
    .ui-button {
        &:enabled:focus {
            outline: 0 none;
            background-color: darken($primaryColor,5%);
        }
So the background color buttons (success, info, warning, etc.) all get set to a darker version of the primarycolor instead of matching the focus background color of the class (success=green, info=light blue, etc.)

The same thing occurs if I load the themes in my project using css files (instead of scss files). In that case, it's because the following style in theme-blue.css overrides the success/info/warning/... button focus styles defined in the same file.

Code: Select all

  body .ui-button:enabled:focus {
    outline: 0 none;
    background-color: #2d6da3; }
My work around was to comment out the line background-color: darken($primaryColor,5%); in _forms.scss. However, this is not optimal because now there is no focus background color defined for buttons that don't have the success/info/warning/... classes defined.

I don't think your intent was to have the primary background focus color override the background focus colors defined for the success/info/warning/etc. button classes. If that's true, this should be corrected in the next release of the theme.

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

09 Feb 2018, 13:45

We will review. If so we will fix.

Post Reply

Return to “Avalon - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests