github.com/mithrandie/csvq@v1.18.1/docs/_sass/components/_sideNav.scss (about)

     1  .side-nav {
     2    position: fixed;
     3    width: 300px;
     4    left: 0;
     5    top: 0;
     6    margin: 0;
     7    transform: translateX(-100%);
     8    height: 100%;
     9    height: calc(100% + 60px);
    10    height: -moz-calc(100%); //Temporary Firefox Fix
    11    padding-bottom: 60px;
    12    background-color: $sidenav-bg-color;
    13    z-index: 999;
    14    overflow-y: auto;
    15    will-change: transform;
    16    backface-visibility: hidden;
    17    transform: translateX(-105%);
    18  
    19    @extend .z-depth-1;
    20  
    21    // Right Align
    22    &.right-aligned {
    23      right: 0;
    24      transform: translateX(105%);
    25      left: auto;
    26      transform: translateX(100%);
    27    }
    28  
    29    .collapsible {
    30      margin: 0;
    31    }
    32  
    33  
    34    li {
    35      float: none;
    36      line-height: $sidenav-line-height;
    37  
    38      &.active { background-color: rgba(0,0,0,.05); }
    39    }
    40  
    41    li > a {
    42      color: $sidenav-font-color;
    43      display: block;
    44      font-size: $sidenav-font-size;
    45      font-weight: 500;
    46      height: $sidenav-item-height;
    47      line-height: $sidenav-line-height;
    48      padding: 0 ($sidenav-padding * 2);
    49  
    50      &:hover { background-color: rgba(0,0,0,.05);}
    51  
    52      &.btn, &.btn-large, &.btn-flat, &.btn-floating {
    53        margin: 10px 15px;
    54      }
    55  
    56      &.btn,
    57      &.btn-large,
    58      &.btn-floating { color: $button-raised-color; }
    59      &.btn-flat { color: $button-flat-color; }
    60  
    61      &.btn:hover,
    62      &.btn-large:hover { background-color: lighten($button-raised-background, 5%); }
    63      &.btn-floating:hover { background-color: $button-raised-background; }
    64  
    65      & > i,
    66      & > [class^="mdi-"], li > a > [class*="mdi-"],
    67      & > i.material-icons {
    68        float: left;
    69        height: $sidenav-item-height;
    70        line-height: $sidenav-line-height;
    71        margin: 0 ($sidenav-padding * 2) 0 0;
    72        width: $sidenav-item-height / 2;
    73        color: rgba(0,0,0,.54);
    74      }
    75    }
    76  
    77  
    78    .divider {
    79      margin: ($sidenav-padding / 2) 0 0 0;
    80    }
    81  
    82    .subheader {
    83      &:hover {
    84        background-color: transparent;
    85      }
    86  
    87      cursor: initial;
    88      pointer-events: none;
    89      color: rgba(0,0,0,.54);
    90      font-size: $sidenav-font-size;
    91      font-weight: 500;
    92      line-height: $sidenav-line-height;
    93    }
    94  
    95    .userView {
    96      position: relative;
    97      padding: ($sidenav-padding * 2) ($sidenav-padding * 2) 0;
    98      margin-bottom: $sidenav-padding / 2;
    99  
   100      & > a {
   101        &:hover { background-color: transparent; }
   102        height: auto;
   103        padding: 0;
   104      }
   105  
   106      .background {
   107        overflow: hidden;
   108        position: absolute;
   109        top: 0;
   110        right: 0;
   111        bottom: 0;
   112        left: 0;
   113        z-index: -1;
   114      }
   115  
   116      .circle, .name, .email {
   117        display: block;
   118      }
   119  
   120      .circle {
   121        height: 64px;
   122        width: 64px;
   123      }
   124  
   125      .name,
   126      .email {
   127        font-size: $sidenav-font-size;
   128        line-height: $sidenav-line-height / 2;
   129      }
   130  
   131      .name {
   132        margin-top: 16px;
   133        font-weight: 500;
   134      }
   135  
   136      .email {
   137        padding-bottom: 16px;
   138        font-weight: 400;
   139      }
   140    }
   141  }
   142  
   143  
   144  // Touch interaction
   145  .drag-target {
   146    height: 100%;
   147    width: 10px;
   148    position: fixed;
   149    top: 0;
   150    z-index: 998;
   151  }
   152  
   153  
   154  // Fixed side-nav shown
   155  .side-nav.fixed {
   156    left: 0;
   157    transform: translateX(0);
   158    position: fixed;
   159  
   160    // Right Align
   161    &.right-aligned {
   162      right: 0;
   163      left: auto;
   164    }
   165  }
   166  
   167  // Fixed sideNav hide on smaller
   168  @media #{$medium-and-down} {
   169    .side-nav {
   170      &.fixed {
   171        transform: translateX(-105%);
   172  
   173        &.right-aligned {
   174          transform: translateX(105%);
   175        }
   176      }
   177  
   178      a {
   179        padding: 0 $sidenav-padding;
   180      }
   181  
   182      .userView {
   183        padding: $sidenav-padding $sidenav-padding 0;
   184      }
   185    }
   186  }
   187  
   188  
   189  .side-nav .collapsible-body > ul:not(.collapsible) > li.active,
   190  .side-nav.fixed .collapsible-body > ul:not(.collapsible) > li.active {
   191    background-color: $primary-color;
   192    a {
   193      color: $sidenav-bg-color;
   194    }
   195  }
   196  .side-nav .collapsible-body {
   197    padding: 0;
   198  }
   199  
   200  
   201  #sidenav-overlay {
   202    position: fixed;
   203    top: 0;
   204    left: 0;
   205    right: 0;
   206  
   207    height: 120vh;
   208    background-color: rgba(0,0,0,.5);
   209    z-index: 997;
   210  
   211    will-change: opacity;
   212  }