| Copybara bot | be50d49 | 2023-11-30 00:16:42 +0100 | [diff] [blame^] | 1 | <style> |
| 2 | /* Ugly CSS! Only for demo. */ |
| 3 | |
| 4 | #demo-drawer-accordion { |
| 5 | height: 100%; |
| 6 | } |
| 7 | |
| 8 | #demo-drawer-accordion .mdlext-accordion__tab { |
| 9 | height: 64px; |
| 10 | min-height: 64px; |
| 11 | min-width: 64px; |
| 12 | padding-left: 16px; |
| 13 | } |
| 14 | |
| 15 | .is-small-screen #demo-drawer-accordion .mdlext-accordion__tab { |
| 16 | height: 56px; |
| 17 | min-height: 56px; |
| 18 | min-width: 56px; |
| 19 | } |
| 20 | |
| 21 | #demo-drawer-accordion .mdlext-accordion__tabpanel, |
| 22 | #demo-drawer-accordion .mdlext-accordion__tabpanel nav { |
| 23 | padding: 0; |
| 24 | } |
| 25 | |
| 26 | #demo-drawer-accordion .mdlext-accordion__tabpanel .mdl-navigation__link { |
| 27 | color: rgba(255, 255, 255, 0.87); |
| 28 | } |
| 29 | |
| 30 | #demo-drawer-accordion .mdlext-accordion__tabpanel .mdl-navigation__link:hover { |
| 31 | background-color: #212121; |
| 32 | } |
| 33 | |
| 34 | </style> |
| 35 | |
| 36 | |
| 37 | <aside class="mdl-layout__drawer"> |
| 38 | |
| 39 | <ul id="demo-drawer-accordion" |
| 40 | class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical mdlext-js-ripple-effect mdlext-js-animation-effect mdlext-dark-color-theme" |
| 41 | aria-multiselectable="false"> |
| 42 | |
| 43 | <li class="mdlext-accordion__panel"> |
| 44 | <header class="mdlext-accordion__tab" aria-expanded="true"> |
| 45 | <span class="mdlext-accordion__tab__caption">MDL Extensions</span> |
| 46 | <i class="mdlext-aria-toggle-material-icons"></i> |
| 47 | </header> |
| 48 | <section class="mdlext-accordion__tabpanel"> |
| 49 | <nav class="mdl-navigation"> |
| 50 | <a class="mdl-navigation__link" href="accordion.html">Accordion</a> |
| 51 | <a class="mdl-navigation__link" href="bordered-fields.html">Bordered Fields</a> |
| 52 | <a class="mdl-navigation__link" href="collapsible.html">Collapsible</a> |
| 53 | <a class="mdl-navigation__link" href="color-themes.html">Color Themes</a> |
| 54 | <a class="mdl-navigation__link" href="formatfield.html">Formatted Fields</a> |
| 55 | <a class="mdl-navigation__link" href="grid.html">Grid</a> |
| 56 | <a class="mdl-navigation__link" href="carousel.html">Image Carousel</a> |
| 57 | <a class="mdl-navigation__link" href="lightboard.html">Lightboard</a> |
| 58 | <a class="mdl-navigation__link" href="lightbox.html">Lightbox</a> |
| 59 | <a class="mdl-navigation__link" href="menu-button.html">Menu Button</a> |
| 60 | <a class="mdl-navigation__link" href="selectfield.html">Selectfield</a> |
| 61 | </nav> |
| 62 | </section> |
| 63 | </li> |
| 64 | <li class="mdlext-accordion__panel"> |
| 65 | <header class="mdlext-accordion__tab"> |
| 66 | <span class="mdlext-accordion__tab__caption">Sticky headers</span> |
| 67 | <i class="mdlext-aria-toggle-material-icons"></i> |
| 68 | </header> |
| 69 | <section class="mdlext-accordion__tabpanel"> |
| 70 | <nav class="mdl-navigation"> |
| 71 | <a class="mdl-navigation__link" href="sticky-header.html">Sticky Header I</a> |
| 72 | <a class="mdl-navigation__link" href="sticky-header-ii.html">Sticky Header II</a> |
| 73 | <a class="mdl-navigation__link" href="sticky-header-iii.html">Sticky Header III</a> |
| 74 | <a class="mdl-navigation__link" href="sticky-header-iv.html">Sticky Header IV</a> |
| 75 | <a class="mdl-navigation__link" href="sticky-header-v.html">Sticky Header V</a> |
| 76 | <a class="mdl-navigation__link" href="sticky-header-vi.html">Sticky Header VI</a> |
| 77 | </nav> |
| 78 | </section> |
| 79 | </li> |
| 80 | </ul> |
| 81 | </aside> |