JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Buttons Smart button change hover and disabled stying?

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #101332
    davout
    Member
    Up
    0
    Down

    I am using a ‘smart-button’ and faIcons in my app toolbar..

    <smart-button class="flat header-button" (onClick)="onAddTaskClick()" [disabled]="taskEditService.noAdd$ | async">
      <fa-icon size="2x" [icon]="iconAdd"  ></fa-icon>
    </smart-button>

    By default the

    • buttons are displayed as white icons on a blue background
    • When disabled the button is covered with a white mask
    • When I hover over the button the button area changes to a white background

    I am struggling to find out how to change the disabled and hover styles
    What I would like is…

    • Disabled – icon color changed to display as grey
    • Hover – change the button border to show a thin white border

    Any suggestions?
     
     
     

    #101333
    davout
    Member
    Up
    0
    Down

    Think I solved it, with…
     

    smart-button button:hover {
      background-color: var(--smart-primary) !important;
      border: 1px white solid;
      color: white !important;
    }
    smart-button button:disabled {
      background-color: var(--smart-primary) !important;
      color: aliceblue !important;
    }
    #101344
    yavordashew
    Member
    Up
    0
    Down

    Hi davout,
    Yes, the solution you shared works good in your case.
    Please, do not hesitate to contact us if you have any additional questions.
    Best regards,
    Yavor Dashev
    Smart UI Team
    https://www.htmlelements.com/

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.