fix: change style docs

worktile · May 18, 2022 · aac04d8 · aac04d8
1 parent 8ddd816
commit aac04d8
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 58 deletions.
diff --git a/docs/guides/basic/style.md b/docs/guides/basic/style.md
@@ -4,63 +4,49 @@ path: 'style'
 order: 50
 ---
 
-`ngx-gantt` 使用了 `css` 预处理器 `scss`，支持重写组件的大部分的色值和部分 layout 样式。
+`ngx-gantt` 使用了 `css` 预处理器 `scss`，支持重写组件的大部分的色值和部分 layout 样式。示例如下：
 
 ```scss
-// basic
-$gantt-color: #333 !default;
-$gantt-header-height: 44px !default;
-$gantt-border-color: #eee !default;
-$gantt-bg-color: #fff !default;
-$gantt-side-shadow: 12px 0 16px -10px rgba(0, 0, 0, 0.15) !default;
-$gantt-container-background-color: #fafafa !default;
-$gantt-item-height: 44px !default;
-$gantt-group-background-color: rgba(
-  $color: #f3f3f3,
-  $alpha: 0.5
-) !default;
-$gantt-group-height: 44px !default;
-$gantt-table-td-padding: 0 15px !default;
-
-// calendar
-$gantt-date-primary-color: #888 !default;
-$gantt-date-primary-font-size: 14px !default;
-$gantt-date-primary-border: #ddd !default;
-$gantt-date-secondary-color: #333 !default;
-$gantt-date-secondary-font-size: 14px !default;
-$gantt-date-secondary-weekend-color: #aaa !default;
-$gantt-date-week-backdrop-bg: rgba(
-  $color: #f3f3f3,
-  $alpha: 0.5
-) !default;
-$gantt-date-today-color: #ff9f73 !default;
-$gantt-date-today-text-color: #fff !default;
-
-// bar
-$gantt-bar-bg: #fff !default;
-$gantt-bar-layer-bg: #fff !default;
-$gantt-bar-handle-color: #cacaca !default;
-$gantt-bar-handle-height: 12px !default;
-$gantt-bar-background-color: #348fe4 !default;
-
-// drag
-$gantt-item-drag-mask-color: #348fe4 !default;
-$gantt-link-dragging-line-color: #348fe4 !default;
-
-// link
-$gantt-link-line-color: #348fe4 !default;
-
-// table
-$gantt-table-header-drag-line-width: 3px !default;
-$gantt-table-header-drag-line-color: #348fe4 !default;
-```
-
-示例：
-
-```
-$gantt-color: #000;
-$gantt-bg-color: #fafafa;
-
-@import '~@worktile/gantt/styles/index.scss';
-
+@use '@worktile/gantt/styles/variables.scss' with (
+  // basic
+  $gantt-color: #333,
+  $gantt-header-height: 44px,
+  $gantt-border-color: #eee,
+  $gantt-bg-color: #fff,
+  $gantt-side-shadow: 12px 0 16px -10px rgba(0, 0, 0, 0.15),
+  $gantt-container-background-color: #fafafa,
+  $gantt-item-height: 44px,
+  $gantt-group-background-color: rgba($color: #f3f3f3, $alpha: 0.5),
+  $gantt-group-height: 44px,
+  $gantt-table-td-padding: 0 15px,
+
+  // calendar
+  $gantt-date-primary-color: #888,
+  $gantt-date-primary-font-size: 14px,
+  $gantt-date-primary-border: #ddd,
+  $gantt-date-secondary-color: #333,
+  $gantt-date-secondary-font-size: 14px,
+  $gantt-date-secondary-weekend-color: #aaa,
+  $gantt-date-week-backdrop-bg: rgba($color: #f3f3f3, $alpha: 0.5),
+  $gantt-date-today-color: #ff9f73,
+  $gantt-date-today-text-color: #fff,
+
+  // bar
+  $gantt-bar-bg: #fff,
+  $gantt-bar-layer-bg: #fff,
+  $gantt-bar-handle-color: #cacaca,
+  $gantt-bar-handle-height: 12px,
+  $gantt-bar-background-color: #348fe4,
+
+  // drag
+  $gantt-item-drag-mask-color: #348fe4,
+  $gantt-link-dragging-line-color: #348fe4,
+
+  // link
+  $gantt-link-line-color: #348fe4,
+
+  // table
+  $gantt-table-header-drag-line-width: 3px,
+  $gantt-table-header-drag-line-color: #348fe4
+);
 ```
diff --git a/docs/guides/intro/getting-started.md b/docs/guides/intro/getting-started.md
@@ -45,7 +45,7 @@ export class AppModule {
 在 style.scss 中引入预构建样式文件
 
 ```
-@import "~@worktile/gantt/styles/index.scss";
+@use "@worktile/gantt/styles/index.scss";
 ```
 
 ### 组件中使用