From e0fa0b7914eb85ae5ff9e400c6da71b255ff79c8 Mon Sep 17 00:00:00 2001 From: Kamal Qureshi Date: Fri, 25 Jul 2025 00:06:36 +0500 Subject: [PATCH] Consisten styles for button when disabled --- .../comps/buttonComp/buttonCompConstants.tsx | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx index d838efbcd..a7c8e48dc 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx @@ -11,27 +11,28 @@ export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle: Disa const hoverColor = buttonStyle.background && genHoverColor(buttonStyle.background); const activeColor = buttonStyle.background && genActiveColor(buttonStyle.background); return css` - & { + &&& { border-radius: ${buttonStyle.radius}; border-width:${buttonStyle.borderWidth}; margin: ${buttonStyle.margin}; padding: ${buttonStyle.padding}; rotate: ${buttonStyle.rotation}; + --antd-wave-shadow-color: ${buttonStyle.border}; + border-color: ${buttonStyle.border}; + color: ${buttonStyle.text}; + font-size: ${buttonStyle.textSize}; + font-weight: ${buttonStyle.textWeight}; + font-family: ${buttonStyle.fontFamily}; + font-style: ${buttonStyle.fontStyle}; + text-transform:${buttonStyle.textTransform}; + text-decoration:${buttonStyle.textDecoration}; + border-radius: ${buttonStyle.radius}; + margin: ${buttonStyle.margin}; + padding: ${buttonStyle.padding}; + &:not(:disabled) { - --antd-wave-shadow-color: ${buttonStyle.border}; - border-color: ${buttonStyle.border}; - color: ${buttonStyle.text}; - font-size: ${buttonStyle.textSize}; - font-weight: ${buttonStyle.textWeight}; - font-family: ${buttonStyle.fontFamily}; - font-style: ${buttonStyle.fontStyle}; - text-transform:${buttonStyle.textTransform}; - text-decoration:${buttonStyle.textDecoration}; background: ${buttonStyle.background}; - border-radius: ${buttonStyle.radius}; - margin: ${buttonStyle.margin}; - padding: ${buttonStyle.padding}; - + &:hover, &:focus { color: ${buttonStyle.text}; @@ -48,14 +49,13 @@ export function getButtonStyle(buttonStyle: ButtonStyleType, disabledStyle: Disa : buttonStyle.border} !important; } } - - /* Disabled state styling */ &:disabled, - &.ant-btn-disabled { - color: ${disabledStyle.disabledText}; - background: ${disabledStyle.disabledBackground}; - border-color: ${disabledStyle.disabledBorder}; - cursor: not-allowed; + &.ant-btn-disabled, + &[disabled] { + background: ${disabledStyle.disabledBackground} !important; + cursor: not-allowed !important; + color: ${disabledStyle.disabledText || buttonStyle.text} !important; + border-color: ${disabledStyle.disabledBorder || buttonStyle.border} !important; } } `;