From ad503d09e81c7b36264584b5685d215d9aeaa751 Mon Sep 17 00:00:00 2001
From: "Ghislain B." <gbeaulac@gmail.com>
Date: Sat, 2 Nov 2024 15:45:31 -0400
Subject: [PATCH] fix: more styling fixes after switching to @use instead of
 @imports (#429)

---
 src/examples/slickgrid/example30.scss |  2 +-
 src/examples/slickgrid/example8.scss  |  2 +-
 src/styles.scss                       | 15 +++++++++++++--
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/examples/slickgrid/example30.scss b/src/examples/slickgrid/example30.scss
index 63beeae..5b4f90c 100644
--- a/src/examples/slickgrid/example30.scss
+++ b/src/examples/slickgrid/example30.scss
@@ -1,7 +1,7 @@
 
 
 .editable-field {
-  // Use rgba for opacity
+  // box-shadow: inset 0 0 0 1px lightblue !important;
   background-color: rgba(227, 240, 251, 0.57) !important;
 }
 
diff --git a/src/examples/slickgrid/example8.scss b/src/examples/slickgrid/example8.scss
index ab569cd..ab45acc 100644
--- a/src/examples/slickgrid/example8.scss
+++ b/src/examples/slickgrid/example8.scss
@@ -3,7 +3,7 @@
   $slick-header-menu-button-icon-svg-path: "M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M7,10L12,15L17,10H7Z",
   $slick-header-menu-button-icon-size:     16px,
   $slick-header-menu-button-padding:       10px 0 0 3px,
-  $slick-sort-indicator-hint-opacity:      0
+  $slick-sort-indicator-hint-opacity:      0,
 );
 
 .blue {
diff --git a/src/styles.scss b/src/styles.scss
index db60d25..dde2222 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -4,12 +4,17 @@ $navbar-height: 56px;
 $side-menu-width: 250px;
 $button-border-color: #ababab;
 $button-style-bg-color: #fff;
+$primary-color: #0d6efd;
+
+@use 'bootstrap' with (
+  $primary: $primary-color
+);
 
 // -- 1. load with modern `@use`
 // @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
 @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
-  $slick-input-focus-box-shadow: 0 0 0 0.25rem #0d6efd40,
-  $slick-button-border-color: $button-border-color
+  $slick-primary-color: $primary-color,
+  // $slick-input-focus-box-shadow: 0 0 0 0.25rem rgba($primary-color, 0.25),
 );
 
 // -- 2. load with legacy `@import`
@@ -17,6 +22,12 @@ $button-style-bg-color: #fff;
 // $slick-link-color: red;
 // @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
 
+:root {
+  --ms-choice-border: var(--bs-border-width) solid var(--bs-border-color);
+//   --slick-button-style-bg-color: #fff;
+//   --slick-button-border-color: #c7c7c7;
+}
+
 .bold {
   font-weight: bold;
 }