weseek__growi/packages/app/src/styles/_page-tree.scss

$grw-sidebar-content-header-height: 58px;
$grw-sidebar-content-footer-height: 50px;
$grw-pagetree-item-padding-left: 10px;

.grw-pagetree {
  min-height: calc(100vh - ($grw-navbar-height + $grw-navbar-border-width + $grw-sidebar-content-header-height + $grw-sidebar-content-footer-height));

  .list-group-item {
    &:hover {
      .grw-pagetree-control {
        display: flex !important;
      }

      .grw-pagetree-count {
        display: none;
      }
    }

    .grw-pagetree-button {
      background-color: transparent;
      transition: all 0.2s ease-out;
      transform: rotate(0deg);

      &.grw-pagetree-open {
        transform: rotate(90deg);
      }
    }

    .grw-pagetree-title-anchor {
      width: 100%;
      overflow: hidden;
      text-decoration: none;
    }

    .grw-pagetree-count-wrapper {
      display: inline-block;

      &:hover {
        display: none;
      }

      .grw-pagetree-count {
        padding: 0.1rem 0.3rem;
      }
    }
  }

  .grw-pagetree-item-container {
    // fix the height as item height depends on the height of its children
    > .list-group-item {
      height: 40px;
      // fill in the blank sapce created due to the absence of triangle when the page has no descendants
      > .ml-fill-triangle {
        margin-left: 35px;
      }
    }
  }

  // To realize a hierarchical structure, set multiplied padding-left to each pagetree-item
  > .grw-pagetree-item-container {
    > .list-group-item {
      padding-left: 0;
    }
    > .grw-pagetree-item-children {
      > .grw-pagetree-item-container {
        > .list-group-item {
          padding-left: $grw-pagetree-item-padding-left;
        }
        > .grw-pagetree-item-children {
          > .grw-pagetree-item-container {
            > .list-group-item {
              padding-left: $grw-pagetree-item-padding-left * 2;
            }
            > .grw-pagetree-item-children {
              > .grw-pagetree-item-container {
                > .list-group-item {
                  padding-left: $grw-pagetree-item-padding-left * 3;
                }
                > .grw-pagetree-item-children {
                  > .grw-pagetree-item-container {
                    > .list-group-item {
                      padding-left: $grw-pagetree-item-padding-left * 4;
                    }
                    > .grw-pagetree-item-children {
                      > .grw-pagetree-item-container {
                        > .list-group-item {
                          padding-left: $grw-pagetree-item-padding-left * 5;
                        }
                        > .grw-pagetree-item-children {
                          > .grw-pagetree-item-container {
                            > .list-group-item {
                              padding-left: $grw-pagetree-item-padding-left * 6;
                            }
                            > .grw-pagetree-item-children {
                              > .grw-pagetree-item-container {
                                > .list-group-item {
                                  padding-left: $grw-pagetree-item-padding-left * 7;
                                }
                                > .grw-pagetree-item-children {
                                  > .grw-pagetree-item-container {
                                    > .list-group-item {
                                      padding-left: $grw-pagetree-item-padding-left * 8;
                                    }
                                    > .grw-pagetree-item-children {
                                      > .grw-pagetree-item-container {
                                        > .list-group-item {
                                          padding-left: $grw-pagetree-item-padding-left * 9;
                                        }
                                        .grw-pagetree-item-children {
                                          > .grw-pagetree-item-container {
                                            > .list-group-item {
                                              padding-left: $grw-pagetree-item-padding-left * 10;
                                            }
                                          }
                                        }
                                      }
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}