tidy up ItemsTree padding

apps/app/src/components/ItemsTree/ItemsTree.module.scss

@@ -1,92 +0,0 @@
-@use './items-tree-variables';
-
-// fix height
-.items-tree :global {
-  li {
-    min-height: items-tree-variables.$list-item-height;
-  }
-}
-
-
-// fix padding-left
-.items-tree {
-
-  &:global{
-    // To realize a hierarchical structure, set multiplied padding-left to each pagetree-item
-    > .tree-item-layout {
-      > .list-group-item {
-        padding-left: 0;
-      }
-      > .tree-item-layout-children {
-        > .tree-item-layout {
-          > .list-group-item {
-            padding-left: items-tree-variables.$list-item-padding-left;
-          }
-          > .tree-item-layout-children {
-            > .tree-item-layout {
-              > .list-group-item {
-                padding-left: items-tree-variables.$list-item-padding-left * 2;
-              }
-              > .tree-item-layout-children {
-                > .tree-item-layout {
-                  > .list-group-item {
-                    padding-left: items-tree-variables.$list-item-padding-left * 3;
-                  }
-                  > .tree-item-layout-children {
-                    > .tree-item-layout {
-                      > .list-group-item {
-                        padding-left: items-tree-variables.$list-item-padding-left * 4;
-                      }
-                      > .tree-item-layout-children {
-                        > .tree-item-layout {
-                          > .list-group-item {
-                            padding-left: items-tree-variables.$list-item-padding-left * 5;
-                          }
-                          > .tree-item-layout-children {
-                            > .tree-item-layout {
-                              > .list-group-item {
-                                padding-left: items-tree-variables.$list-item-padding-left * 6;
-                              }
-                              > .tree-item-layout-children {
-                                > .tree-item-layout {
-                                  > .list-group-item {
-                                    padding-left: items-tree-variables.$list-item-padding-left * 7;
-                                  }
-                                  > .tree-item-layout-children {
-                                    > .tree-item-layout {
-                                      > .list-group-item {
-                                        padding-left: items-tree-variables.$list-item-padding-left * 8;
-                                      }
-                                      > .tree-item-layout-children {
-                                        > .tree-item-layout {
-                                          > .list-group-item {
-                                            padding-left: items-tree-variables.$list-item-padding-left * 9;
-                                          }
-                                          .tree-item-layout-children {
-                                            > .tree-item-layout {
-                                              > .list-group-item {
-                                                padding-left: items-tree-variables.$list-item-padding-left * 10;
-                                              }
-                                            }
-                                          }
-                                        }
-                                      }
-                                    }
-                                  }
-                                }
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

apps/app/src/components/ItemsTree/ItemsTreeContentSkeleton.module.scss

@@ -1,14 +1,11 @@
 @use '~/styles/mixins';
 
-@use './items-tree-variables';
-
-
 .text-skeleton-level1 {
-  @include mixins.grw-skeleton-text($font-size:16px, $line-height: items-tree-variables.$list-item-height);
+  @include mixins.grw-skeleton-text($font-size:16px, $line-height: 40px);
   padding-left: 12px;
 }
 
 .text-skeleton-level2 {
   @extend .text-skeleton-level1;
-  padding-left: 12px + items-tree-variables.$list-item-padding-left * 2;
+  padding-left: 12px + 10px * 2;
 }

apps/app/src/components/ItemsTree/_items-tree-variables.scss

@@ -1,2 +0,0 @@
-$list-item-height: 40px;
-$list-item-padding-left: 10px;

apps/app/src/components/Sidebar/PageTreeItem/PageTreeItem.module.scss

@@ -1,6 +1,27 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
 
+// fix height
+.page-tree-item :global {
+  li {
+    min-height: 40px;
+  }
+}
+
+// fix padding-left size
+.page-tree-item {
+  $padding-size: 10px;
+
+  &:global {
+    @for $i from 1 through 10 {
+      &.level-#{$i} li {
+        padding-left: $padding-size * ($i - 1);
+      }
+    }
+  }
+}
+
+
 // == Colors
 
 // drag over