ui-button-secondary broken in 6.1.0

Post Reply
AlainD.
Posts: 25
Joined: 14 Jun 2018, 22:00

09 Sep 2018, 20:04

Hello,
Can you please fix the regression of the styling of ui-button-secondary which appeared on 6.1.0?
And/or if the release is a long process, give us here in a comment how to fix this in the scss file please ?

Thank you.

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

10 Sep 2018, 08:25

Could you tell me what is your mean "broken style" in ui-button-secondary?

AlainD.
Posts: 25
Joined: 14 Jun 2018, 22:00

11 Sep 2018, 00:39

Well, you can go and check the online demo under the section of all the buttons. You will see that the secondary button is not displayed as secondary but the default style is applied instead (blue/info): https://www.primefaces.org/apollo-ng/#/forms
The button should be grey instead.

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

12 Sep 2018, 09:41

So sorry for this confusion. We fixed for next release but you can use the below code until release;

Code: Select all

    .ui-button.ui-state-default.ui-button-secondary  {
        background-color: #f4f4f4;
        border-color: #f4f4f4;
        color: #333333;

        &:enabled:hover {
            border-color: darken(#f4f4f4,5%);
            background-color: darken(#f4f4f4,5%);
        }

        &:enabled:focus {
            border-color: #f4f4f4;
            outline: 0 none;
            background-color: lighten(#f4f4f4,2%);
        }

        &:enabled:active {
            border-color: darken(#f4f4f4,10%);
            background-color: darken(#f4f4f4,10%);
        }
     }

AlainD.
Posts: 25
Joined: 14 Jun 2018, 22:00

12 Sep 2018, 19:39

Thank you, that'll helps :-)

So I added 2 new variables in '_variables.scss':

Code: Select all

/* Predefined Colors */
$lightgrey:#f4f4f4;
$grey:#333333;
and as suggested I modified '_forms.scss':

Code: Select all

    .ui-button.ui-state-default.ui-button-secondary, .ui-buttonset.ui-button-secondary > .ui-button.ui-state-default  {
        background-color: $lightgrey;
        border-color: $lightgrey;
        color: $grey;

        &:enabled:hover {
          background-color: darken($lightgrey,5%);
          border-color: darken($lightgrey,5%);
        }

        &:enabled:focus {
            outline: 0 none;
            background-color: lighten($lightgrey,2%);
            border-color: $lightgrey;
        }

        &:enabled:active {
          background-color: darken($lightgrey,10%);
          border-color: darken($lightgrey,10%);
        }
    }
I still need to fix the styling also in other places such as in toolbar (<p-toolbar> has a grey background), etc...
But waiting for your official fix, that will help me a lot in the meantime.

Thank you again.

Post Reply

Return to “Apollo - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests