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

     1  .collapsible {
     2    border-top: 1px solid $collapsible-border-color;
     3    border-right: 1px solid $collapsible-border-color;
     4    border-left: 1px solid $collapsible-border-color;
     5    margin: $element-top-margin 0 $element-bottom-margin 0;
     6    @extend .z-depth-1;
     7  }
     8  
     9  .collapsible-header {
    10    display: block;
    11    cursor: pointer;
    12    min-height: $collapsible-height;
    13    line-height: $collapsible-line-height;
    14    padding: 0 1rem;
    15    background-color: $collapsible-header-color;
    16    border-bottom: 1px solid $collapsible-border-color;
    17  
    18    i {
    19      width: 2rem;
    20      font-size: 1.6rem;
    21      line-height: $collapsible-line-height;
    22      display: block;
    23      float: left;
    24      text-align: center;
    25      margin-right: 1rem;
    26    }
    27  }
    28  
    29  .collapsible-body {
    30    display: none;
    31    border-bottom: 1px solid $collapsible-border-color;
    32    box-sizing: border-box;
    33    padding: 2rem;
    34  }
    35  
    36  // sideNav collapsible styling
    37  .side-nav,
    38  .side-nav.fixed {
    39  
    40    .collapsible {
    41      border: none;
    42      box-shadow: none;
    43  
    44      li { padding: 0; }
    45    }
    46  
    47    .collapsible-header {
    48      background-color: transparent;
    49      border: none;
    50      line-height: inherit;
    51      height: inherit;
    52      padding: 0 $sidenav-padding;
    53  
    54      &:hover { background-color: rgba(0,0,0,.05); }
    55      i { line-height: inherit; }
    56    }
    57  
    58    .collapsible-body {
    59      border: 0;
    60      background-color: $collapsible-header-color;
    61  
    62      li a {
    63        padding: 0 (7.5px + $sidenav-padding)
    64                 0 (15px + $sidenav-padding);
    65      }
    66    }
    67  
    68  }
    69  
    70  // Popout Collapsible
    71  
    72  .collapsible.popout {
    73    border: none;
    74    box-shadow: none;
    75    > li {
    76      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    77      // transform: scaleX(.92);
    78      margin: 0 24px;
    79      transition: margin .35s cubic-bezier(0.250, 0.460, 0.450, 0.940);
    80    }
    81    > li.active {
    82      box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    83      margin: 16px 0;
    84      // transform: scaleX(1);
    85    }
    86  }