Jump to content
Sign in to follow this  
Ricardo

Problem with Button and CSS

Recommended Posts

Hi.

I have this css

.TW3Button {
   display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  border: 1px solid #018dc4;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font: normal 16px/normal Verdana, Geneva, sans-serif;
  color: rgba(255,255,255,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #007FFF;
  -webkit-box-shadow: 3px 3px 4px 0 rgba(0,0,0,1) ;
  box-shadow: 3px 3px 4px 0 rgba(0,0,0,1) ;
  text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  }
 
 .TW3Button:hover {
    background: #0048ff;
 }
 
 .TW3Button:focus {
   background: #178c19;
   }

.TW3Button:DisabledState {
   background: #F0DC82;    
   }

with this result

image.png.ac5d32d6733c4190f2978f863b6f4d6c.png

I've also tried with .TW3Button: Disabled.

How to assign any background color to disabled button?

 

Share this post


Link to post
Share on other sites

thats because all controls now use a common disable state

see the default css file for

/* ######################################################################### */
/* Define common disabled state                                              */
/* ######################################################################### */

/* When a control has it's enabled property set to false, typically there
   is some visual feedback. While you can naturally define whatever
   you like individually - the "DisabledState" styleclass is automatically
   added to your control. It is removed again when you enable a control. */

.DisabledState {
  opacity:        0.5 !Important;
  cursor:         not-allowed !Important;
  touch-action:   none !Important;
  outline:        none !Important;
  pointer-events: none !Important;
  background:     <?pas=clBackground?>
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhYWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg==) repeat !Important;
}

.DisabledState > * {
  opacity:        0.5 !Important;
  cursor:         not-allowed !Important;
  touch-action:   none !Important;
  outline:        none !Important;
  pointer-events: none !Important;
  background:     <?pas=clBackground?>
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIklEQVQIW2NkQAKrVq36zwjjgzhhYWGMYAEYB8RmROaABADeOQ8CXl/xfgAAAABJRU5ErkJggg==) repeat !Important;
}

 

here is the code from the RTL

function TW3CustomControl.GetEnabled: boolean;
begin
  if (Handle) then
    result := w3_HasAttrib(Handle,'disabled') = false;
end;

procedure TW3CustomControl.SetEnabled(const EnabledValue: boolean);
begin
  case EnabledValue of
  true:
    begin
      // Remove attribute
      if w3_HasAttrib(Handle, 'disabled') then
        w3_RemoveAttrib(Handle, 'disabled');

      // remove css class
      if TW3TagStyle.ControlContainsClass(Handle,'DisabledState') then
        TW3TagStyle.RemoveClassFromControl(Handle,'DisabledState');
    end;
  false:
    begin
      // Set attribute
      if not w3_HasAttrib(Handle, 'disabled') then
        w3_SetAttrib(Handle, 'disabled', 'true');

      // Add css class for disabled-state
      if not TW3TagStyle.ControlContainsClass(Handle,'DisabledState') then
        TW3TagStyle.AddClassToControl(Handle, 'DisabledState');
    end;
  end;
end;

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...