Skip to content
This repository was archived by the owner on Jun 1, 2025. It is now read-only.

Commit 7669196

Browse files
ghiscodingghiscoding
committed
feat: switch to SASS @use and remove any @import to fix deprecations
1 parent aee9b7e commit 7669196

12 files changed

+63
-66
lines changed

‎angular.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@
5151
"styles": [
5252
"node_modules/bootstrap/dist/css/bootstrap.min.css",
5353
"node_modules/@ng-select/ng-select/themes/default.theme.css",
54-
"src/app/slickgrid-custom-variables.scss",
5554
"src/styles.scss"
5655
],
5756
"scripts": [

‎docs/getting-started/quick-start.md‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,15 +57,14 @@ You could also compile the SASS files with your own customization, for that simp
5757

5858
```scss
5959
/* for example, let's change the mouse hover color */
60-
$cell-odd-background-color: lightyellow;
61-
$row-mouse-hover-color: lightgreen;
62-
63-
/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
64-
@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
60+
@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
61+
$cell-odd-background-color: lightyellow,
62+
$row-mouse-hover-color: lightgreen
63+
);
6564
```
6665

6766
### 4. Include it in your App Module (or App Config for Standalone)
68-
Below are 2 different setups (with App Module (legacy) or Standalone) but in both cases the `AngularSlickgridModule.forRoot()` is **required**, so make sure to include it. Also note that the GitHub demo is strictly built with an App Module which is considered the legacy approach.
67+
Below are 2 different setups (with App Module (legacy) or Standalone) but in both cases the `AngularSlickgridModule.forRoot()` is **required**, so make sure to include it. Also note that the GitHub demo is strictly built with an App Module which is considered the legacy approach.
6968

7069
#### App Module (legacy)
7170
Include `AngularSlickgridModule` in your App Module (`app.module.ts`)

‎docs/styling/styling.md‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -23,26 +23,25 @@ The Material & Salesforce Themes are using SVGs internally for the icons used by
2323
##### with CSS
2424
```scss
2525
/* style.css */
26-
@import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
26+
@use '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';
2727

2828
// or other Themes
29-
// @import '@slickgrid-universal/common/dist/styles/styles/css/slickgrid-theme-material.css';
30-
// @import '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-salesforce.css';
29+
@use '@slickgrid-universal/common/dist/styles/styles/css/slickgrid-theme-material.css';
30+
@use '@slickgrid-universal/common/dist/styles/css/slickgrid-theme-salesforce.css';
3131
```
3232

3333
##### with SASS
3434
```scss
35-
/* change any SASS variables before loading the theme */
36-
$slick-primary-color: green;
37-
$slick-cell-odd-background-color: lightyellow;
38-
$slick-row-mouse-hover-color: lightgreen;
39-
4035
/* style.scss */
41-
@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
36+
@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
37+
$slick-primary-color: green,
38+
$slick-cell-odd-background-color: lightyellow,
39+
$slick-row-mouse-hover-color: lightgreen
40+
);
4241

4342
// or other Themes
44-
// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
45-
// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
43+
@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.scss';
44+
@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
4645
```
4746

4847
### Using CSS Variables _(instead of SASS)_
@@ -66,14 +65,16 @@ You could use Custom SVGs and create your own Theme and/or a different set of SV
6665

6766
##### with SVG
6867
```scss
69-
$slick-primary-color: blue;
70-
$slick-icon-group-color: $slick-primary-color;
71-
$slick-icon-group-collapsed-svg-path: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z";
72-
$slick-icon-group-expanded-svg-path: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z";
73-
$slick-icon-group-font-size: 13px;
68+
$primary-color: blue;
7469

7570
// then on the last line, import the Theme that you wish to override
76-
@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
71+
@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
72+
$slick-primary-color: $primary-color,
73+
$slick-icon-group-color: $primary-color,
74+
$slick-icon-group-collapsed-svg-path: "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z",
75+
$slick-icon-group-expanded-svg-path: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z",
76+
$slick-icon-group-font-size: 13px
77+
);
7778
```
7879

7980
> **Note** since the SVG are generated by a SASS function, you can easily override an SVG path in SASS but that is not the case with CSS variable. We still have a way to override an SVG via CSS variable but it requires to override the entire SVG content (not just its path) as can be seen below (also notice that the CSS variable is named without the `"-path"` suffix and also note that the URL must be encoded)

‎src/app/examples/grid-custom-tooltip.component.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
$slick-button-border-color: #ababab !default;
2-
@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
1+
// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
2+
// $slick-button-border-color: #ababab
3+
// );
34

45
// --
56
// Custom Tooltips CSS Variables (or SASS equivalent)

‎src/app/examples/grid-graphql-nopage.component.scss‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
$slick-preheader-font-size: 18px;
2-
$slick-preheader-border-right: 1px solid lightgrey;
3-
4-
/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
5-
@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
1+
// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
2+
// $slick-preheader-font-size: 18px,
3+
// $slick-preheader-border-right: 1px solid lightgrey,
4+
// );
65

76
.alert {
87
padding: 8px;

‎src/app/examples/grid-headermenu.component.scss‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
$slick-header-menu-button-border-width: 0px 1px;
2-
$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";
3-
$slick-header-menu-button-icon-size: 16px;
4-
$slick-header-menu-button-padding: 10px 0 0 3px;
5-
$slick-sort-indicator-hint-opacity: 0;
6-
7-
/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
8-
@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
1+
@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
2+
$slick-header-menu-button-border-width: 0px 1px,
3+
$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",
4+
$slick-header-menu-button-icon-size: 16px,
5+
$slick-header-menu-button-padding: 10px 0 0 3px,
6+
$slick-sort-indicator-hint-opacity: 0,
7+
);
98

109
.blue {
1110
color: rgb(73, 73, 255);

‎src/app/examples/grid-menu.component.scss‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
$slick-column-picker-icon-checked-svg-path: "M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,5V19H5V5H19M10,17L6,13L7.41,11.58L10,14.17L16.59,7.58L18,9";
2-
$slick-column-picker-icon-unchecked-svg-path: "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z";
3-
$slickcolumn-picker-checkbox-opacity: 0.2;
4-
$slickcolumn-picker-checkbox-opacity-hover: 0.35;
5-
$slick-column-picker-icon-font-size: 16px;
6-
7-
/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
8-
@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
1+
@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss' with (
2+
$slick-column-picker-icon-checked-svg-path: "M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,5V19H5V5H19M10,17L6,13L7.41,11.58L10,14.17L16.59,7.58L18,9",
3+
$slick-column-picker-icon-unchecked-svg-path: "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z",
4+
$slick-column-picker-icon-font-size: 16px,
5+
$slick-checkbox-opacity-hover: 0.35,
6+
);
97

108
.blue {
119
color: rgb(73, 73, 255);

‎src/app/examples/grid-trading.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.lite.scss';
1+
@use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.lite.scss';
22

33
$sparkline-color: #00b78d;
44
// $sparkline-color: #573585;

‎src/app/examples/grid-tree-data-hierarchical.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
1+
// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
22

33
#grid29 {
44
.slick-cell {

‎src/app/examples/grid-tree-data-parent-child.component.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
/* make sure to add the @import the SlickGrid Theme AFTER the variables changes */
2-
// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.lite.scss';
1+
// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.lite.scss';
32

43
#grid28 {
54
.slick-cell {

0 commit comments

Comments
 (0)