fix(styling): small UI fixes for Salesforce Theme

ghiscoding · May 9, 2024 · f9bfb3d · f9bfb3d
1 parent 064a5d9
commit f9bfb3d
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -30,6 +30,7 @@ $slick-button-primary-bg-color:                             $slick-primary-color
 $slick-button-primary-bg-color-disabled:                    #bebebe !default;
 $slick-button-primary-color:                                inherit !default;
 $slick-button-border-color:                                 #c7c7c7 !default;
+$slick-button-hover-border-color:                           darken($slick-button-border-color, 15%) !default;
 $slick-button-style-bg-color:                               #fff !default;
 $slick-filter-placeholder-font-family:                      'Segoe UI Symbol' !default;
 $slick-focus-color:                                         rgb(115, 179, 229) !default;
@@ -962,6 +963,7 @@ $slick-empty-data-warning-z-index:                          10 !default;
   --slick-autocomplete-tpl4-bottom-left-text-color:       var(--slick-base-dark-text-color);
   --slick-autocomplete-tpl4-top-left-text-color:          #fafafa;
   --slick-button-border-color:                            #626262;
+  --slick-button-hover-border-color:                      #929292;
   --slick-button-primary-color:                           #bababa;
   --slick-button-style-bg-color:                          var(--slick-base-dark-menu-bg-color);
   --slick-btn-default-bg-color:                           #383838;
@@ -1126,6 +1128,7 @@ $slick-empty-data-warning-z-index:                          10 !default;
 
 .dark-mode {
   --slick-button-border-color:                            #626262;
+  --slick-button-hover-border-color:                      #939393;
   --slick-button-primary-color:                           #bababa;
   --slick-button-style-bg-color:                          #252525;
   .text-color-primary {

diff --git a/packages/common/src/styles/extra-styling.scss b/packages/common/src/styles/extra-styling.scss
@@ -23,7 +23,7 @@ $slick-padding-max-count: 30;
   justify-content: center;
   text-align: center;
   &:hover {
-    border-color: darken($slick-button-border-color, 15%);
+    border-color: var(--slick-button-hover-border-color, $slick-button-hover-border-color);
   }
 }
 

diff --git a/packages/common/src/styles/slickgrid-theme-salesforce.scss b/packages/common/src/styles/slickgrid-theme-salesforce.scss
@@ -24,8 +24,7 @@
 $slick-editing-field-bg-color: #fff !default;
 $slick-editing-field-border: 1px solid #dddbda !default;
 $slick-editable-field-bg-color: rgba(227, 240, 251, 0.569) !default;
-$slick-editable-field-hover-icon-color: #b0adab !default;
-$slick-editable-field-hover-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23#{$slick-editable-field-hover-icon-color}" viewBox="0 0 52 52"><path d="M9.5 33.4l8.9 8.9c.4.4 1 .4 1.4 0L42 20c.4-.4.4-1 0-1.4l-8.8-8.8c-.4-.4-1-.4-1.4 0L9.5 32.1c-.4.4-.4 1 0 1.3zM36.1 5.7c-.4.4-.4 1 0 1.4l8.8 8.8c.4.4 1 .4 1.4 0l2.5-2.5c1.6-1.5 1.6-3.9 0-5.5l-4.7-4.7c-1.6-1.6-4.1-1.6-5.7 0l-2.3 2.5zM2.1 48.2c-.2 1 .7 1.9 1.7 1.7l10.9-2.6c.4-.1.7-.3.9-.5l.2-.2c.2-.2.3-.9-.1-1.3l-9-9c-.4-.4-1.1-.3-1.3-.1l-.2.2c-.3.3-.4.6-.5.9L2.1 48.2z"></path></svg>')  !default;
+$slick-editable-field-hover-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23b0adab" viewBox="0 0 52 52"><path d="M9.5 33.4l8.9 8.9c.4.4 1 .4 1.4 0L42 20c.4-.4.4-1 0-1.4l-8.8-8.8c-.4-.4-1-.4-1.4 0L9.5 32.1c-.4.4-.4 1 0 1.3zM36.1 5.7c-.4.4-.4 1 0 1.4l8.8 8.8c.4.4 1 .4 1.4 0l2.5-2.5c1.6-1.5 1.6-3.9 0-5.5l-4.7-4.7c-1.6-1.6-4.1-1.6-5.7 0l-2.3 2.5zM2.1 48.2c-.2 1 .7 1.9 1.7 1.7l10.9-2.6c.4-.1.7-.3.9-.5l.2-.2c.2-.2.3-.9-.1-1.3l-9-9c-.4-.4-1.1-.3-1.3-.1l-.2.2c-.3.3-.4.6-.5.9L2.1 48.2z"></path></svg>')  !default;
 $slick-editable-field-hover-icon-margin-right: 8px !default;
 $slick-editable-field-hover-icon-margin-top: 8px !default;
 $slick-editable-field-hover-icon-width: 14px !default;