fix(styling): tweak Composite Editor form disabled buttons style

ghiscoding · Mar 2, 2024 · 5052ba1 · 5052ba1
1 parent db48377
commit 5052ba1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -525,6 +525,8 @@ $slick-editor-modal-container-top:                          30px !default;
 $slick-editor-modal-container-left:                         50% !default;
 $slick-editor-modal-container-transform:                    translate(-50%) !default;
 $slick-editor-modal-container-z-index:                      1050 !default;
+$slick-editor-modal-default-btn-disabled-bg-color:          #eeeeee !default;
+$slick-editor-modal-default-btn-disabled-color:             #bababa !default;
 $slick-editor-modal-header-bg-color:                        #ffffff !default;
 $slick-editor-modal-header-padding-left-right:              8px !default;
 $slick-editor-modal-header-padding-top-bottom:              12px !default;
@@ -1060,6 +1062,8 @@ $slick-empty-data-warning-z-index:                          10 !default;
   --slick-editing-field-border:                           1px solid #7c7c7c;
   --slick-editor-input-disabled-color:                    #404040;
   --slick-editor-placeholder-color:                       #999;
+  --slick-editor-modal-default-btn-disabled-bg-color:     #3f3f3f;
+  --slick-editor-modal-default-btn-disabled-color:        #5b5b5b;
   --slick-editor-modal-detail-container-border-modified:  #333333;
   --slick-editor-modal-close-btn-border-left:             var(--slick-base-dark-menu-border);
   --slick-editor-modal-container-bg-color:                #333333;

diff --git a/packages/common/src/styles/slick-editors.scss b/packages/common/src/styles/slick-editors.scss
@@ -244,6 +244,11 @@
       margin: var(--slick-editor-modal-editor-btn-reset-margin, $slick-editor-modal-editor-btn-reset-margin);
     }
 
+    .input-group-btn .btn-default:disabled {
+      background-color: var(--slick-editor-modal-default-btn-disabled-bg-color, $slick-editor-modal-default-btn-disabled-bg-color);
+      color: var(--slick-editor-modal-default-btn-disabled-color, $slick-editor-modal-default-btn-disabled-color);
+    }
+
     .close {
       cursor: pointer;
       position: absolute;