fix(styling): Total Footer Row small styling fixes

- add left border variable for footer cells
ghiscoding · Jun 29, 2024 · dc017f3 · dc017f3
1 parent 17fed97
commit dc017f3
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example24.scss b/examples/vite-demo-vanilla-bundle/src/examples/example24.scss
@@ -0,0 +1,11 @@
+/** override slick-cell to make it look like Excel sheet */
+.grid24 {
+  --slick-border-color: #b5b5b5;
+  --slick-grid-border-color: #b5b5b5;
+  --slick-cell-odd-background-color: #fbfbfb;
+  --slick-cell-border-left: 1px solid var(--slick-border-color);
+  --slick-grid-footer-cell-border-left: 1px solid var(--slick-border-color);
+  --slick-header-menu-display: none;
+  --slick-header-column-height: 20px;
+  --slick-row-selected-color: #d4ebfd;
+}
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example24.ts b/examples/vite-demo-vanilla-bundle/src/examples/example24.ts
@@ -1,8 +1,9 @@
+import { BindingEventService } from '@slickgrid-universal/binding';
 import { type Column, Editors, FieldType, type GridOption, SlickEventHandler, } from '@slickgrid-universal/common';
 import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 
 import { ExampleGridOptions } from './example-grid-options';
-import { BindingEventService } from '@slickgrid-universal/binding';
+import './example24.scss';
 
 const NB_ITEMS = 100;
 

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -62,7 +62,7 @@ $slick-container-border-left:                               0 none !default;
 $slick-canvas-bg-color:                                     #fff !default;
 
 /* grid */
-$slick-grid-border-color:                                   fade(black, 3%) !default;
+$slick-grid-border-color:                                   none !default;
 $slick-grid-border-style:                                   solid !default;
 $slick-grid-header-background:                              rgba(255, 255, 255, .6) !default;
 $slick-grid-header-unorderable-bg-color:                    $slick-grid-header-background !default;
@@ -884,13 +884,15 @@ $slick-viewport-border-left:                                0 none !default;
 /* SlickGrid built-in Footer */
 $slick-grid-footer-display:                                 flex !default;
 $slick-grid-footer-align-items:                             center !default;
-$slick-grid-footer-justify-content:                         normal !default;
 $slick-grid-footer-border-top:                              1px solid #d0d0d0 !default;
 $slick-grid-footer-bg-color:                                #fafaf9 !default;
+$slick-grid-footer-cell-padding:                            $slick-cell-padding !default;
+$slick-grid-footer-cell-border-left:                        1px transparent !default;
 $slick-grid-footer-font-size:                               13px !default;
 $slick-grid-footer-font-style:                              normal !default;
 $slick-grid-footer-font-weight:                             bold !default;
-$slick-grid-footer-cell-padding:                            $slick-cell-padding !default;
+$slick-grid-footer-justify-content:                         normal !default;
+
 
 /* Custom Footer */
 $slick-footer-bg-color:                                     transparent !default;

diff --git a/packages/common/src/styles/slick-grid.scss b/packages/common/src/styles/slick-grid.scss
@@ -593,6 +593,7 @@
         font-style: var(--slick-grid-footer-font-style, $slick-grid-footer-font-style);
         font-weight: var(--slick-grid-footer-font-weight, $slick-grid-footer-font-weight);
         padding: var(--slick-grid-footer-cell-padding, $slick-grid-footer-cell-padding);
+        border-left: var(--slick-grid-footer-cell-border-left, $slick-grid-footer-cell-border-left);
       }
     }
   }