Icon button colour consistency

[kirsty-hames]

For consistency with the top bar navigation, should icon buttons be using the nav icon color variables?

Currently:

  &__btn.btn-icon:not(.btn-text) {
    padding: @icon-padding;
    background-color: @btn-icon-color;
    color: @btn-icon-color-inverted;
    border-radius: @btn-border-radius;

    .no-touch &:not(.is-disabled):not(.is-locked):hover {
      background-color: @btn-icon-color-hover;
      color: @btn-icon-color-inverted-hover;
      .transition(background-color @duration ease-in, color @duration ease-in;);
    }

Proposing:

  &__btn.btn-icon:not(.btn-text) {
    padding: @icon-padding;
    background-color: @nav-icon;
    color: @nav-icon-inverted;
    border-radius: @btn-border-radius;

    .no-touch &:not(.is-disabled):not(.is-locked):hover {
      background-color: @nav-icon-hover;
      color: @nav-icon-inverted-hover;
      .transition(background-color @duration ease-in, color @duration ease-in;);
    }

[kirsty-hames]

Related to adaptlearning/adapt-contrib-core#386

[swashbuck]

@kirsty-hames More often than not, we style the Page Nav buttons to resemble other buttons (ex. question submit button). The navigation buttons usually have their own look & feel. So, I'm fine with how it is now.

Not sure what others usually do, though? @guywillis @StuartNicholls

[guywillis]

More often than not, the page nav buttons are styled to be the same style as the question submit, menu item etc.

I guess the discussion here is whether the page nav buttons following the navigation style is more intuitive than following the aforementioned buttons.

My preference would be to keep them inline with content buttons.

[StuartNicholls]

To me pagenav buttons are UI buttons, I'm struggling to see them any other way, so my thoughts are based on this. @guywillis , do you see these buttons as more 'contenty'?

So, given the above, from a UX perspective, I'd have thought the pagenav buttons should be styled like the other UI/navigation buttons. Additionally, I think its good UX practice to make navigation buttons have a lower prominence to action buttons (content buttons) generally speaking.

[oliverfoster]

Is the nav button styling contingent on the nav background?

[oliverfoster]

closing until resolution of adaptlearning/adapt-contrib-core#386