github.com/bosssauce/ponzu@v0.11.1-0.20200102001432-9bc41b703131/system/admin/static/editor/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    height: $collapsible-height;
    13    line-height: $collapsible-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-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    @include box-sizing(border-box);
    33  
    34    p {
    35      margin: 0;
    36      padding: 2rem;
    37    }
    38  }
    39  
    40  // sideNav collapsible styling
    41  .side-nav {
    42  
    43    .collapsible {
    44      border: none;
    45      box-shadow: none;
    46  
    47      li { padding: 0; }
    48    }
    49  
    50    .collapsible-header {
    51      background-color: transparent;
    52      border: none;
    53      line-height: inherit;
    54      height: inherit;
    55      margin: 0 1rem;
    56  
    57      i { line-height: inherit; }
    58    }
    59  
    60    .collapsible-body {
    61      border: 0;
    62      background-color: $collapsible-header-color;
    63  
    64      li a { margin: 0 1rem 0 2rem; }
    65    }
    66  
    67  }
    68  
    69  // Popout Collapsible
    70  
    71  .collapsible.popout {
    72    border: none;
    73    box-shadow: none;
    74    > li {
    75      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    76      // transform: scaleX(.92);
    77      margin: 0 24px;
    78      transition: margin .35s cubic-bezier(0.250, 0.460, 0.450, 0.940);
    79    }
    80    > li.active {
    81      box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    82      margin: 16px 0;
    83      // transform: scaleX(1);
    84    }
    85  }