sidenav.css 3.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.11.4
  6. */
  7. md-sidenav {
  8. box-sizing: border-box;
  9. position: absolute;
  10. -webkit-flex-direction: column;
  11. -ms-flex-direction: column;
  12. flex-direction: column;
  13. z-index: 60;
  14. width: 304px;
  15. min-width: 304px;
  16. max-width: 304px;
  17. bottom: 0;
  18. overflow: auto; }
  19. md-sidenav ul {
  20. list-style: none; }
  21. md-sidenav.md-closed {
  22. display: none; }
  23. md-sidenav.md-closed-add, md-sidenav.md-closed-remove {
  24. display: -webkit-flex;
  25. display: -ms-flexbox;
  26. display: flex;
  27. transition: 0.2s ease-in all; }
  28. md-sidenav.md-closed-add.md-closed-add-active, md-sidenav.md-closed-remove.md-closed-remove-active {
  29. transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
  30. md-sidenav.md-locked-open-add, md-sidenav.md-locked-open-remove {
  31. position: static;
  32. display: -webkit-flex;
  33. display: -ms-flexbox;
  34. display: flex;
  35. -webkit-transform: translate3d(0, 0, 0);
  36. transform: translate3d(0, 0, 0); }
  37. md-sidenav.md-locked-open {
  38. width: 304px;
  39. min-width: 304px;
  40. max-width: 304px; }
  41. md-sidenav.md-locked-open, md-sidenav.md-locked-open.md-closed, md-sidenav.md-locked-open.md-closed.md-sidenav-left, md-sidenav.md-locked-open.md-closed, md-sidenav.md-locked-open.md-closed.md-sidenav-right, md-sidenav.md-locked-open-remove.md-closed {
  42. position: static;
  43. display: -webkit-flex;
  44. display: -ms-flexbox;
  45. display: flex;
  46. -webkit-transform: translate3d(0, 0, 0);
  47. transform: translate3d(0, 0, 0); }
  48. md-sidenav.md-locked-open-remove-active {
  49. transition: width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2), min-width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  50. width: 0;
  51. min-width: 0; }
  52. md-sidenav.md-closed.md-locked-open-add {
  53. width: 0;
  54. min-width: 0;
  55. -webkit-transform: translate3d(0%, 0, 0);
  56. transform: translate3d(0%, 0, 0); }
  57. md-sidenav.md-closed.md-locked-open-add-active {
  58. transition: width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2), min-width 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  59. width: 304px;
  60. min-width: 304px;
  61. -webkit-transform: translate3d(0%, 0, 0);
  62. transform: translate3d(0%, 0, 0); }
  63. .md-sidenav-backdrop.md-locked-open {
  64. display: none; }
  65. .md-sidenav-left, md-sidenav {
  66. left: 0;
  67. top: 0;
  68. -webkit-transform: translate3d(0%, 0, 0);
  69. transform: translate3d(0%, 0, 0); }
  70. .md-sidenav-left.md-closed, md-sidenav.md-closed {
  71. -webkit-transform: translate3d(-100%, 0, 0);
  72. transform: translate3d(-100%, 0, 0); }
  73. .md-sidenav-right {
  74. left: 100%;
  75. top: 0;
  76. -webkit-transform: translate3d(-100%, 0, 0);
  77. transform: translate3d(-100%, 0, 0); }
  78. .md-sidenav-right.md-closed {
  79. -webkit-transform: translate3d(0%, 0, 0);
  80. transform: translate3d(0%, 0, 0); }
  81. @media (max-width: 360px) {
  82. md-sidenav {
  83. width: 85%; } }
  84. @media screen and (-ms-high-contrast: active) {
  85. .md-sidenav-left, md-sidenav {
  86. border-right: 1px solid #fff; }
  87. .md-sidenav-right {
  88. border-left: 1px solid #fff; } }