github.com/bosssauce/ponzu@v0.11.1-0.20200102001432-9bc41b703131/system/admin/static/editor/sass/components/_sideNav.scss (about)

     1  .side-nav {
     2    position: fixed;
     3    width: 240px;
     4    left: -105%;
     5    top: 0;
     6    margin: 0;
     7    height: 100%;
     8    height: calc(100% + 60px);
     9    height: -moz-calc(100%); //Temporary Firefox Fix
    10    padding-bottom: 60px;
    11    background-color: $sidenav-bg-color;
    12    z-index: 999;
    13    overflow-y: auto;
    14  
    15    @extend .z-depth-1;
    16    will-change: left;
    17  
    18    // Right Align
    19    &.right-aligned {
    20      will-change: right;
    21      right: -105%;
    22      left: auto;
    23    }
    24  
    25    .collapsible{
    26      margin: 0;
    27    }
    28  
    29  
    30    li {
    31      float: none;
    32      padding: 0 $sidenav-padding-right;
    33      &:hover, &.active { background-color: #ddd; }
    34    }
    35    a {
    36      color: #444;
    37      display: block;
    38      font-size: 1rem;
    39      height: 64px;
    40      line-height: 64px;
    41      padding: 0 $sidenav-padding-right;
    42    }
    43  }
    44  
    45  
    46  // Touch interaction
    47  .drag-target {
    48    height: 100%;
    49    width: 10px;
    50    position: fixed;
    51    top: 0;
    52    z-index: 998;
    53  }
    54  
    55  
    56  // Hidden side-nav for all sizes
    57  .side-nav.fixed {
    58    a {
    59      display: block;
    60      padding: 0 $sidenav-padding-right;
    61      color: #444;
    62    }
    63  }
    64  
    65  
    66  // Fixed side-nav shown
    67  .side-nav.fixed {
    68    left: 0;
    69    position: fixed;
    70  
    71    // Right Align
    72    &.right-aligned {
    73      right: 0;
    74      left: auto;
    75    }
    76  }
    77  
    78  // Fixed sideNav hide on smaller
    79  @media #{$medium-and-down} {
    80    .side-nav.fixed {
    81      left: -105%;
    82  
    83      &.right-aligned {
    84        right: -105%;
    85        left: auto;
    86      }
    87    }
    88  }
    89  
    90  
    91  .side-nav .collapsible-body li.active,
    92  .side-nav.fixed .collapsible-body li.active {
    93    background-color: $primary-color;
    94    a {
    95      color: $sidenav-bg-color;
    96    }
    97  }
    98  
    99  
   100  #sidenav-overlay {
   101    position: fixed;
   102    top: 0;
   103    left: 0;
   104    right: 0;
   105  
   106    height: 120vh;
   107    background-color: rgba(0,0,0,.5);
   108    z-index: 997;
   109  
   110    will-change: opacity;
   111  }