fix: more styling fixes after switching to @use instead of @imports (#…

…429)
ghiscoding · Nov 2, 2024 · ad503d0 · ad503d0
1 parent a57d767
commit ad503d0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git 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
@@ -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
@@ -4,19 +4,30 @@ $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`
 // $slick-primary-color: red;
 // $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;
 }