github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/doc/themes/docsy/assets/scss/_sidebar-tree.scss (about)

     1  //
     2  // Left side navigation
     3  //
     4  .td-sidebar-nav {
     5      padding-right: 0.5rem;
     6      margin-right: -15px;
     7      margin-left: -15px;
     8  
     9      @include media-breakpoint-up(md) {
    10          @supports (position: sticky) {
    11              max-height: calc(100vh - 10rem);
    12              overflow-y: auto;
    13          }
    14      }
    15  
    16  
    17      @include media-breakpoint-up(md) {
    18          display: block !important;
    19      }
    20  
    21  
    22      &__section {
    23          li {
    24              list-style: none;
    25          }
    26  
    27          ul {
    28              padding: 0;
    29              margin: 0;
    30          }
    31  
    32          @include media-breakpoint-up(md) {
    33              & .ul-1 ul {
    34                  padding-left: 1.5em;
    35              }
    36          }
    37  
    38  
    39          padding-left: 0;
    40      }
    41  
    42      &__section-title {
    43          display: block;
    44          font-weight: $font-weight-medium;
    45  
    46          .active {
    47              font-weight: $font-weight-bold;
    48          }
    49  
    50          a {
    51              color: $gray-900;
    52          }
    53      }
    54  
    55      .td-sidebar-link {
    56          display: block;
    57          padding-bottom: 0.375rem;
    58  
    59          &__page {
    60              color: $gray-700;
    61              font-weight: $font-weight-light;
    62          }
    63      }
    64  
    65      a {
    66          &:hover {
    67              color: $blue;
    68              text-decoration: none;
    69          }
    70  
    71          &.active {
    72              font-weight: $font-weight-bold;
    73          }
    74      }
    75  
    76      .dropdown {
    77          a {
    78              color: $gray-700;
    79          }
    80  
    81          .nav-link {
    82               padding: 0 0 1rem;
    83          }
    84      }
    85  
    86      & > .td-sidebar-nav__section {
    87          padding-top: .5rem;
    88          padding-left: 1.5rem;
    89      }
    90  
    91      li i { // Layout of icons
    92          padding-right: 0.5em;
    93          &:before{
    94              display: inline-block;
    95              text-align: center;
    96              min-width: 1em;
    97          }
    98      }
    99  
   100      .td-sidebar-link.tree-root{
   101          font-weight: $font-weight-bold;
   102          color: $td-sidebar-tree-root-color;
   103          border-bottom: 1px $td-sidebar-tree-root-color solid;
   104          margin-bottom: 1rem;
   105      }
   106  }
   107  
   108  .td-sidebar {
   109      @include media-breakpoint-up(md) {
   110          padding-top: 4rem;
   111          background-color: $td-sidebar-bg-color;
   112          padding-right: 1rem;
   113          border-right: 1px solid $td-sidebar-border-color;
   114      }
   115  
   116  
   117      padding-bottom: 1rem;
   118  
   119      &__toggle {
   120          line-height: 1;
   121          color: $gray-900;
   122          margin: 1rem;
   123      }
   124  
   125      &__search {
   126          padding: 1rem 15px;
   127          margin-right: -15px;
   128          margin-left: -15px;
   129      }
   130  
   131      &__inner {
   132          order: 0;
   133  
   134          @include media-breakpoint-up(md) {
   135              @supports (position: sticky) {
   136                  position: sticky;
   137                  top: 4rem;
   138                  z-index: 10;
   139                  height: calc(100vh - 6rem);
   140              }
   141          }
   142  
   143  
   144          @include media-breakpoint-up(xl) {
   145              flex: 0 1 320px;
   146          }
   147  
   148  
   149          .td-search-box {
   150              width: 100%;
   151          }
   152      }
   153  
   154      #content-desktop {display: block;}
   155      #content-mobile {display: none;}
   156  
   157      @include media-breakpoint-down(md) {
   158  
   159      #content-desktop {display: none;}
   160      #content-mobile {display: block;}
   161      }
   162  }