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));

  .grw-pagetree-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);

      &:focus {
        box-shadow: none;
      }

      &.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.3rem 1rem;
      }
    }
  }

  // To realize a hierarchical structure, set multiplied padding-left to each pagetree-item

  > .grw-pagetree-item-container {
    > .grw-pagetree-item {
      padding-left: $grw-pagetree-item-padding-left;
    }
    > .grw-pagetree-item-container {
      > .grw-pagetree-item {
        padding-left: $grw-pagetree-item-padding-left * 2;
      }
      > .grw-pagetree-item-container {
        > .grw-pagetree-item {
          padding-left: $grw-pagetree-item-padding-left * 3;
        }
        > .grw-pagetree-item-container {
          > .grw-pagetree-item {
            padding-left: $grw-pagetree-item-padding-left * 4;
          }
          > .grw-pagetree-item-container {
            > .grw-pagetree-item {
              padding-left: $grw-pagetree-item-padding-left * 5;
            }
            > .grw-pagetree-item-container {
              > .grw-pagetree-item {
                padding-left: $grw-pagetree-item-padding-left * 6;
              }
              > .grw-pagetree-item-container {
                > .grw-pagetree-item {
                  padding-left: $grw-pagetree-item-padding-left * 7;
                }
                > .grw-pagetree-item-container {
                  > .grw-pagetree-item {
                    padding-left: $grw-pagetree-item-padding-left * 8;
                  }
                  > .grw-pagetree-item-container {
                    > .grw-pagetree-item {
                      padding-left: $grw-pagetree-item-padding-left * 9;
                    }
                    .grw-pagetree-item-container {
                      > .grw-pagetree-item {
                        padding-left: $grw-pagetree-item-padding-left * 10;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}