You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

100 lines
3.5 KiB

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