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

ghiscoding · Nov 2, 2024 · 099f132 · 099f132
1 parent 7669196
commit 099f132
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 12 deletions.
diff --git a/angular.json b/angular.json
@@ -49,7 +49,6 @@
               }
             ],
             "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "node_modules/@ng-select/ng-select/themes/default.theme.css",
               "src/styles.scss"
             ],

diff --git a/src/app/examples/grid-composite-editor.component.scss b/src/app/examples/grid-composite-editor.component.scss
@@ -2,10 +2,10 @@ $slick-button-border-color: #ababab !default;
 
 .editable-field {
   // box-shadow: inset 0 0 0 1px lightblue !important;
-  background-color: rgba(227, 240, 251, 0.569) !important;
+  background-color: rgba(227, 240, 251, 0.57) !important;
 }
 .slick-dark-mode .editable-field {
-  background-color: rgb(105 123 145 / 57%) !important
+  background-color: rgba(105, 123, 145, 0.57) !important
 }
 .unsaved-editable-field {
   background-color: #fbfdd1 !important;

diff --git a/src/app/examples/grid-custom-tooltip.component.scss b/src/app/examples/grid-custom-tooltip.component.scss
@@ -17,7 +17,7 @@
 // }
 
 .editable-field {
-  background-color: rgba(227, 240, 251, 0.569) !important;
+  background-color: rgba(227, 240, 251, 0.57) !important;
 }
 .unsaved-editable-field {
   background-color: #fbfdd1 !important;

diff --git a/src/app/examples/grid-resize-by-content.component.scss b/src/app/examples/grid-resize-by-content.component.scss
@@ -1,7 +1,7 @@
 $slick-button-border-color: #ababab !default;
 
 .editable-field {
-  background-color: rgba(227, 240, 251, 0.569) !important;
+  background-color: rgba(227, 240, 251, 0.57) !important;
 }
 .unsaved-editable-field {
   background-color: #fbfdd1 !important;

diff --git a/src/styles.scss b/src/styles.scss
@@ -1,21 +1,28 @@
 @use 'sass:color';
 
+$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-primary-color: red,
-//   $slick-link-color: red
-// );
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
+@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
+  $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 {
+:root {
+  --ms-choice-border: var(--bs-border-width) solid var(--bs-border-color);
 //   --slick-button-style-bg-color: #fff;
 //   --slick-button-border-color: #c7c7c7;
-// }
+}
 
 $button-border-color: #ababab;
 $button-style-bg-color: #fff;